let s2

let bs1;

​

let ps1;

​

function setup() {

  createCanvas(400, 600);

  loadShark();

  angleMode(DEGREES);

}

​

function loadShark(){

  //shark

  s1 = loadImage('img/body-01.png');

  s2 = loadImage('img/body-02.png');

  s3 = loadImage('img/body-03.png');

  //blue shark

 bs1 = loadImage('img/bodyblue-01.png');

​

  //pink shark

  ps1 = loadImage('img/bodypink-01.png')

}

​

let x = 0;

let maxDistance = 400;

let index = 0;

let direction = 1;

let moveSwitch = false;

let targetX = 0;

​

​

function draw() {

  background(38, 77, 115);

  drawShark(400);

  drawRobot(183);

  drawSnowman(255);

​

  if(moveSwitch){

    targetX = -maxDistance*index;

  //  console.log(targetX,index);

    x += (targetX-x)/10;

​

  }

  if(mouseX>350 && mouseX<400 && mouseY<150 && mouseY>100){

    fill(255, 202, 12);

  } else{ 

    fill(255);

  } 

    triangle(400, 125, 350, 100, 350, 150);

  if(mouseX>0 && mouseX<50 && mouseY<150 && mouseY>100){

    fill(255, 202, 12);

  } else{ 

    fill(255);

  } 

    triangle(0, 125, 50, 100, 50, 150);

}

​

function drawSnowman(bodyColor){

​

  fill(bodyColor);

​

//left arm

  ellipse(50, 260, 80);

//right arm

  ellipse(350, 260, 80);

// body

  //half circle

  arc(200, 305, 271, 240, 132.5, 238);

  arc(200, 305, 271, 240, 302, 47);

  push();

  noStroke();

  //bottom rec

  rect(114, 300, 171, 100);

  //top rec

  rect(135, 200, 130, 100);

  pop();

  //bottom line

  line(114, 400, 285, 400)

​

  //scarf curve

  fill(212, 14, 55);

  rect(135, 200, 130, 40)

  arc(200, 305, 271, 240, 215, 238);

  arc(200, 305, 271, 240, 302, 325);

  //shade of scarf

  push();

  noStroke();

  fill(255);

  rect(94, 231, 212, 90);

// scarf brench vetical

  fill(212, 14, 55);

  rect(141, 230, 36, 100);

  // scarf tassels

  rect(141, 330, 3, 24);

  rect(147.6, 330, 3, 24);

  rect(154.2, 330, 3, 24);

  rect(160.8, 330, 3, 24);

  rect(167.4, 330, 3, 24);

  rect(147.6, 330, 3, 24);

  rect(174, 330, 3, 24);

// scarf brench rotate

  rotate(10);

  fill(212, 14, 55);

  rect(141, 200, 36, 90);

  // scarf tassels

  rect(141, 290, 3, 24);

  rect(147.6, 290, 3, 24);

  rect(154.2, 290, 3, 24);

  rect(160.8, 290, 3, 24);

  rect(167.4, 290, 3, 24);

  rect(147.6, 290, 3, 24);

  rect(174, 290, 3, 24);

  pop();

//buttons

  fill(96);

  ellipse(200, 290, 20);

  ellipse(200, 370, 20);

​

​

​

}

​

​

function drawShark(width){

​

  image(s1, x, 0, width, 200);

  image(bs1, x+width, 0, width, 200);

  image(ps1, x+width*2, 0, width, 200);

​

}

​

​

function drawRobot(grey){

// left leg

  fill(grey);

  rect(143, 400, 20, 65);

  rect(143, 465, 20, 65);//leg

  ellipse(153, 468, 40);//keen

  fill(255, 202, 12);

  rect(86, 526, 78, 30, 5);//foot

//shoe sole

  fill(114, 107, 81);

  rect(86, 546, 78, 10, 2);

// texture of shoe

  push();

  noStroke();

  fill(255, 110, 110);

  rect(107, 527, 6, 15);

  rect(118, 527, 6, 15);

  rect(129, 527, 6, 15);

​

  pop();

//right leg

  fill(183);

  rect(243, 400, 20, 65);

  rect(243, 465, 20, 65);//leg

  ellipse(253, 468, 40);//keen

  fill(255, 202, 12);

  rect(242, 526, 78, 30, 5);//foot

//shoe sole

  fill(114, 107, 81);

  rect(242, 548, 78, 8, 2);

// texture of shoe

  push();

  noStroke();

  fill(255, 110, 110);

  rect(270, 527, 6, 15);

  rect(281, 527, 6, 15);

  rect(292, 527, 6, 15);

  pop();

}

​

function mousePressed(){

  //right button to change

  if(mouseX>350 && mouseX<400 && mouseY<150 && mouseY>100|| mouseX>0 && mouseX<50 && mouseY<150 && mouseY>100){

  moveSwitch = true;

  }

  if(mouseX>350 && mouseX<400 && mouseY<150 && mouseY>100){

    index++;

    direction = -1;

  }

   if(mouseX>0 && mouseX<50 && mouseY<150 && mouseY>100){

     index--;

     direction = 1;

  }

​

​

  if (index > 2){

    index = 2;

  } else if (index <0){

    index = 0;

  }

}

​

​