// Written by Julie Lizardo

let caterpillar;

let layer;

let colorArr =['#1F2421', '#216869', '#49A078', '#9CC5A1', '#DCE1DE'];

let bites = [];

let img;

​

function preload()

{

  img = loadImage('Images/leaves3-1.png');

}

​

​

function setup() {

  createCanvas(400, 400);

  caterpillar = new Insect(50);

  noStroke();

  //frameRate(20);

  angleMode(DEGREES);

  noCursor();

}

​

function draw() {

  background(colorArr[4]);

  //draw leaves

  push();

  tint(colorArr[3])

  scale(0.4);

  image(img, 0,0);

  scale(0.4);

  image(img, 50,50);

  scale(0.4);

  image(img, 5000,5000);

  pop();

  // draw bites

  fill(colorArr[4])

  for (b of bites)

  {

    circle(b[0], b[1],30,30);

  }

  // draw caterpillar

  caterpillar.display();

  caterpillar.update();

}

​

function mouseClicked()

{

  bites.push([mouseX, mouseY+10]);

}

​

// create a class for the caterpillar that can store the history of the path

class Insect

{

  constructor(size)

  {

    this.size = size;

    if (mouseX <200)

    {

      this.point = [mouseX, mouseY];

    }

    else{

      this.point = [mouseX, mouseY];

    }

    this.path =[this.point,[],[],[]];

  }

  // update the array of points

  update()

  {

    if (mouseX <200)

    {

      this.point = [mouseX, mouseY];

    }

    else{

      this.point = [mouseX, mouseY];

    }

    //swap 

    let temp1=this.path[0];

    let temp2=this.path[1];

    let temp3=this.path[2];

    let temp4=this.path[4];

    this.path[0] = this.point;

    this.path[1] = temp1;

    this.path[2] = temp2;

    this.path[3] = temp3;

  }

  // draw caterpillar

  display()

  {

    // change orientation of caterpillar

    if (mouseX <200)

    {

      // draw circles

      fill(colorArr[2]);

      this.drawFirst(this.path[0][0], this.path[0][1]);

      fill(colorArr[1]);

      this.drawBody(this.path[1][0]+50, this.path[1][1]+10);

      fill(colorArr[2]);

      this.drawBody(this.path[2][0]+100, this.path[2][1]-10);

      fill(colorArr[1]);

      this.drawBody(this.path[3][0]+150, this.path[3][1]);

    }

    else

    {

      fill(colorArr[2]);

      this.drawFirst(this.path[0][0], this.path[0][1]);

      fill(colorArr[1]);

      this.drawBody(this.path[1][0]-50, this.path[1][1]-10);

      fill(colorArr[2]);

      this.drawBody(this.path[2][0]-100, this.path[2][1]+10);

      fill(colorArr[1]);

      this.drawBody(this.path[3][0]-150, this.path[3][1]);

    }

  }

  // draws the first caterpillar circle with face

  drawFirst(x, y)

  {

    // base circle

    circle(x, y, this.size);

    //eyeballs

    fill(colorArr[0]);

    circle(x-10, y-5, 7);

    circle(x+10, y-5, 7);

    //smile

    if (mouseIsPressed==true)

    {

    push();

    noFill();

    stroke(colorArr[0]);

    strokeWeight(2);

    arc(x, y+7, 20, 20, 0, 180)

    pop();

    }

    else

    {

      arc(x, y+7, 20, 20, 0, 180)

    }

    // nose

    fill(colorArr[4]);

    circle(x,y,10)

    if (mouseX <200)

    {

      //antenna stem

    push()

    noFill();

    stroke(colorArr[0]);

    strokeWeight(4);

    arc(x-25,y-25,30,30,300,370);

    arc(x-2,y-25,30,30,300,370);

    pop();

    //antenna ball

    fill(colorArr[0]);

    circle(x-19,y-35,10);

    circle(x+4,y-35,10);

    }

    else{

    //antenna stem

    push()

    noFill();

    stroke(colorArr[0]);

    strokeWeight(4);

    arc(x+25,y-22,30,30,180,250);

    arc(x+2,y-22,30,30,180,250);

    pop();

    //antenna ball

    fill(colorArr[0]);

    circle(x+19,y-33,10);

    circle(x-4,y-33,10);

    }

  }

  // draw caterpillar body with legs

  drawBody(x,y)

  {

    //base circle

    circle(x, y, this.size);

    if (mouseX <200)

    {

    //leg

    push()

    noFill();

    stroke(colorArr[0]);

    strokeWeight(3);

    arc(x-20,y+30,30,30,300,370);

    arc(x+4,y+30,30,30,300,370);

    pop();

    //foot

    fill(colorArr[0]);

    circle(x-5,y+35,8);

    circle(x+19,y+35,8);

    }

    else{

    //leg

    push()

    noFill();

    stroke(colorArr[0]);

    strokeWeight(3);

    arc(x+20,y+30,30,30,180,250);

    arc(x-4,y+30,30,30,180,250);

    pop();

    //foot

    fill(colorArr[0]);

    circle(x+5,y+35,8);

    circle(x-19,y+35,8);

    } 

  }

}

​