​

function setup() {

  createCanvas(400, 200);

}

​

function draw() {

  background(220);

​

  // Display current gear

  textSize(24);

  textAlign(CENTER, CENTER);

  text(`Gear: ${gear}`, width / 2, height / 2);

​

  // Display gear shift lever

  fill(150);

  rect(width / 2, height / 2 + 30, 20, 80);

​

  // Display gear positions

  for (let i = 1; i <= 5; i++) {

    let xPos = width / 2 - 40 + i * 20;

    fill(gear === i ? color(255, 0, 0) : 200);

    ellipse(xPos, height / 2 + 75, 20, 20);

    fill(0);

    text(i, xPos, height / 2 + 75);

  }

}

​

function mousePressed() {

  // Check if the mouse is over the gear shift lever

  if (

    mouseX > width / 2 - 10 &&

    mouseX < width / 2 + 10 &&

    mouseY > height / 2 &&

    mouseY < height / 2 + 60

  ) {

    // Shift gears

    gear = (gear % 5) + 1;

  }

}

​