Ceramics Put Together

function preload(){

  img = loadImage('pot11.png');

  img2 = loadImage('clay.png');

  img4 = loadImage('handRight.png');

  img5 = loadImage('My project.png');

  img6 = loadImage('down.png');

  img7 = loadImage('up.png');

  img8 = loadImage('cone1.png');

  img9 = loadImage('cone2.png');

  img10 = loadImage('cone3.png');

  img11 = loadImage('wall1.png');

  img12 = loadImage('wall2.png');

  img13 = loadImage('wall3.png');

  img14 = loadImage('wall4.png');

  img15 = loadImage('potFinal.png');

  img16 = loadImage('pinch.png');

  img17 = loadImage('right.png');

  img18 = loadImage('left.png');

  customFont = loadFont("SimpleHandmade.ttf");

}

​

//switch case

let sceneNum = 1;

​

var rects = [];

// scene 1

let x = 5; //how much pot moves

let velocity = 5;

//scene 2

var angle = 0;

var mousePos = 110;

​

function setup(){

  createCanvas(700, 700);

  textAlign(CENTER);

  rectMode(CENTER);

  ellipseMode(CENTER);

  textFont(customFont);

  img.resize(height*0.5,height*0.5);

  img2.resize(height*0.35,height*0.35);

  img4.resize(height*0.2,height*0.2);

  img5.resize(height*0.2,height*0.2);

  img6.resize(height*0.5,height*0.5);

  img7.resize(height*0.5,height*0.5);

  img8.resize(height*0.5,height*0.5);

  img9.resize(height*0.5,height*0.5);

  img10.resize(height*0.5,height*0.5);

  img11.resize(height*0.5,height*0.5);

  img12.resize(height*0.5,height*0.5);

  img13.resize(height*0.5,height*0.5);

  img14.resize(height*0.5,height*0.5);

  img15.resize(height*0.7,height*0.7);

  img16.resize(height*0.3,height*0.3);

  img17.resize(height*0.5,height*0.5);

  img18.resize(height*0.5,height*0.5);

  textFont(customFont);

  angleMode(DEGREES);

​

  for (var i = 0; i < 100; i++) {

    rects[i] = new Rectangle(random(width), random(height));

  }

}

​

function draw() {

  background(220);

  switch (sceneNum) {

    case 1:

      draw1();

      break; 

    case 2:

      draw2();

      break;

    case 3:

      draw3();

      console.log("3");

      break;

​

    case 4:

      draw4();

      console.log("4");

      break;

    case 5:

      draw5();

      console.log("5");

      break;

    case 6:

      draw6();

      console.log("6");

​

  }

}

​

function mousePressed(){

  sceneNum++;

  if (sceneNum == 7){

    sceneNum = 1;

  }

}

​

function draw1(){

  background(255);  //Leave trails (bg in setup, not draw)

  noStroke();

  fill(255,255,51,95)

  square(0, 0, width*2);

  image(img, width*0.25+x, height*0.50);

  fill(0);

  textSize(70);

  text('Pottery Wheel\n Throwing 101', width*0.5, height*0.18);

  // make pot move left and right

  x = x + velocity;

  if(width*0.60 || x < 5){

    velocity = -velocity;

  }

  // start button

  fill(245, 200, 200);

  stroke(5);// why wont this get thicker

  rect(width*0.5, height*0.39, 200, 50, 60);

​

  fill(33);

  textSize(30);

  text('Start',width*0.5, height*0.40);

}

​

​

function draw2(){

  background(255);  //Leave trails (bg in setup, not draw)

  noStroke();

  fill(255,255,51,95)

  square(0, 0, width*2);

  fill(0);

  textSize(50);

  text('Move your clay to the\n center of the pottery wheel!', width*0.5, height*0.18);

​

  // button

  fill(245, 200, 200);

  stroke('black');

  strokeWeight(3);// why wont this get thicker

  //rect(width*0.5, height*0.39*2.2, 200, 50, 60);

  noStroke();

  fill(33);

  textSize(30);

  text('Click mouse when done',width*0.5, height*0.40*2.2);

  //pottery wheel

  push();

    translate(350, 375);

    ellipseMode(CENTER);

    rotate(angle);

    fill(255)

    stroke('black');

    ellipse(0, 0 ,300,300);

    setLineDash([10, 10]); //longer stitches

    ellipse(0, 0 ,100,100);

    setLineDash([]); // reset dashes

    angle++;

  pop();

  //clay mouse

  image(img2, mouseX-mousePos, mouseY-mousePos);

}

​

function setLineDash(list) {

  drawingContext.setLineDash(list);

}

​

function draw3(){

  background(255);  //Leave trails (bg in setup, not draw)

  noStroke();

  fill(255,255,51,95)

  square(0, 0, width*2);

  fill(0);

  textSize(50);

  text('Use both hands to\n smooth the clay', width*0.5, height*0.18);

​

  // button

  fill(245, 200, 200);

  stroke('black');

  strokeWeight(3);// why wont this get thicker

  rect(width*0.5, height*0.39*2.2, 200, 50, 60);

  noStroke();

  fill(33);

  textSize(30);

  text('Next',width*0.5, height*0.40*2.2);

  //pottery wheel

  push();

    translate(350, 375);

    ellipseMode(CENTER);

    rotate(angle);

    fill(255)

    stroke('black');

    ellipse(0, 0 ,300,300);

    image(img2, -100,-100);

    angle++;

  pop();

  image(img5, width-mouseX-mousePos, mouseY-mousePos);

  image(img4, mouseX-mousePos, mouseY-mousePos);

}

​

function draw4(){

  background(255);  //Leave trails (bg in setup, not draw)

  noStroke();

  fill(255,255,51,95)

  square(0, 0, width*2);

  fill(0);

  textSize(35);

  text('Cone by moving your hands up\n and down the clay. This evens\nthe clay into the center', width*0.5, height*0.18);

  //pottery wheel

  push();

    translate(350, 375);

    ellipseMode(CENTER);

    //rotate(angle);

    fill(255)

    stroke('black');

    ellipse(0, 100 ,700,150);

​

  pop();

  //arrows

  image(img6, -150,150+x);

  image(img7, 300,150+x);

  x = x + velocity;

  if(x > 50 || x < 10){

    velocity = -velocity;

  }

​

    if (width-mouseY-mousePos <200 ){

      image(img8, 175,300);

    }

    if (width-mouseY-mousePos > 200 && width-mouseY-mousePos <250 ){

      image(img9, 175,300);

    }

    if (width-mouseY-mousePos > 250){

      image(img10, 175,300);

    }

  // button

  fill(245, 200, 200);

  stroke('black');

  strokeWeight(3);// why wont this get thicker

  rect(width*0.5, height*0.39*2.2, 200, 50, 60);

  noStroke();

  fill(33);

  textSize(30);

  text('Next',width*0.5, height*0.40*2.2);

  image(img5, width-mouseX-mousePos, mouseY-mousePos);

  image(img4, mouseX-mousePos, mouseY-mousePos);

​

}

​

​

function draw5(){

  background(255);  //Leave trails (bg in setup, not draw)

  noStroke();

  fill(255,255,51,95)

  square(0, 0, width*2);

  fill(0);

  textSize(35);

  text('Build the sides by pinching your\n fingers between the edges.\nThis creates the walls of the pot.', width*0.5, height*0.18);

  //pottery wheel

  push();

    translate(350, 375);

    ellipseMode(CENTER);

    //rotate(angle);

    fill(255)

    stroke('black');

    ellipse(0, 100 ,700,150);

​

  pop();

  //arrows

  image(img17, -50+x,250);

  image(img18, 300+x,25);

​

  x = x + velocity;

  if(x > 50 || x < 10){

    velocity = -velocity;

  }

​

    if (width-mouseY-mousePos <200 ){

      image(img11, 175,300);

    }

    if (width-mouseY-mousePos > 200 && width-mouseY-mousePos <250 ){

      image(img12, 175,300);

    }

    if (width-mouseY-mousePos > 250 && width-mouseY-mousePos <300 ){

      image(img13, 175,300);

    }

    if (width-mouseY-mousePos > 300){

      image(img14, 175,300);

    }

  // button

  fill(245, 200, 200);

  stroke('black');

  strokeWeight(3);// why wont this get thicker

  rect(width*0.5, height*0.39*2.2, 200, 50, 60);

  noStroke();

  fill(33);

  textSize(30);

  text('Next',width*0.5, height*0.40*2.2);

  image(img16, mouseX-mousePos, mouseY-mousePos);

​

​

}

​

function draw6(){

  background(255);  //Leave trails (bg in setup, not draw)

  noStroke();

  fill(255,255,51,95)

  square(0, 0, width*2);

  fill(0);

  textSize(35);

  text('Congrats!\n You can now do pottery!', width*0.5, height*0.18);

​

    for (var i = 0; i < rects.length; i++) {

    rects[i].displayrectangle();

    rects[i].moverectangle();

    rects[i].jumpsaround();

  }

​

  image(img15, 110,100);

  // button

  fill(245, 200, 200);

  stroke('black');

  strokeWeight(3);// why wont this get thicker

  rect(width*0.5, height*0.39*2.2, 200, 50, 60);

  noStroke();

  fill(33);

  textSize(30);

  text('Make Again',width*0.5, height*0.40*2.2);

​

}

​

​

//constructor function

function Rectangle(x, y) {

  this.x = 125;

  this.y = 0;

  this.movex = -150;

  this.movey = -25;

  this.newCol = color(random(0, 255), random(0, 255), random(0, 255));

​

  this.displayrectangle = function() {

    noStroke();

    fill(this.newCol);

    rect(this.x + random(0, 260), this.y + random(0, 10), 5, 6);

  }

​

  this.jumpsaround = function() {

    if (this.x > width || this.x < 0) {

      this.movex = this.movex * -1;

    }

    if (this.y > width || this.y < 0) {

      this.movey = this.movey * -1;

    }

  }

​

  this.moverectangle = function() {

    this.x = this.x + random(this.movex);

    this.y = this.y + random(this.movey);

  }

}

​

​