let startLine = 30;

let finishLine = 360;

​

// Set array for the caterpillar ends

let numCaterpillars = 3;

let caterpillarEnds = [];

​

// caterpillar specification variables

let spacing = 20;

let segmentSize = 50;

let eyeSize = 15;

​

// state variables for the race

let isRacing = false;

let winner = -1;

​

function setup() {

  createCanvas(500, 500);

  // Set a slow frame rate.

  frameRate(6);

  for (let i=0;i<numCaterpillars;i++) {

    caterpillarEnds.push(startLine)

  }

}

​

function draw() {

​

  // Draw the background, start, and finish line.

  background(121, 96, 76);

  noStroke();

  fill(0);

  rect(startLine, 0, 5, height); 

  fill(0, 255, 0);

  rect(finishLine, 0, 20, height);

  // Move caterpillars if

  // race has started.

  if (isRacing === true) {

      moveCaterpillars();

  } else { 

  // if the race hasn't started

  //instructions on start screen

      writeStart();

  }

​

  // Draw caterpillars at

  // the starting line.

  drawCaterpillars();

  //check if a caterpillar has won

  checkWinner();

}

​

// Draw a message at the

// start of the race.

function writeStart() {

  // Style the text.

  textSize(24);

  textAlign(CENTER);

  fill(255);

  noStroke();

​

  // Display the message.

  text(` 🏁 Click to start!`, width / 2, height / 2);

}

​

// Draw one caterpillar.

function drawCaterpillar(x, y, segments) {

  // use a for loop to draw all the body segments

  for (let i = 0; i < segments; i += 1) {

    fill(255, 0, 200);

    stroke(0);

    strokeWeight(1);

    circle(x, y, segmentSize);

    x+=spacing

  }

​

  // Draw the caterpillar's eyes.

  fill(0);

  stroke(255);

  strokeWeight(3);

  circle(x, y - eyeSize, eyeSize);

  circle(x - eyeSize, y - eyeSize, eyeSize);

}

​

// Draw all the caterpillars.

function drawCaterpillars() {

  for (let i = 0; i < numCaterpillars; i++) {

    let padding = height / numCaterpillars;

    let y = (i + 0.5) * padding;

     // Update length of caterpillar.   

     crawl = random(3, 6);

    // Draw caterpillars.

    drawCaterpillar(caterpillarEnds[i], y, crawl);

  }

}

​

// Start the race when the

// user presses the mouse.

function mousePressed() {

  isRacing = true;

}

​

// Move the caterpillars.

function moveCaterpillars() {

  for (let i = 0; i < caterpillarEnds.length; i += 1) {

    move = random(5,30);

    caterpillarEnds[i] += move;

  }

}

​

// Display a message and stop the

// sketch if there's a winner.

​

function checkWinner() {

  for (let i = 0; i < caterpillarEnds.length; i += 1) {

    if (caterpillarEnds[i] >= finishLine) {

      // Style the text.

      textSize(24);

      textAlign(CENTER);

      fill(255);

      noStroke();

​

      // Display the message.

      text(`Caterpillar ${i + 1} wins!`, width / 2, height / 2);

      noLoop();

      return

    }

  }

}