Displaying from an array

p5.js Beginners
2

Your issue is that you are looping through a set amount of times and calling text(...) each iteration causing each text() call to draw on top of each other.

You can use the frameCount and modulo to get a close representation of a timer, though this is not an accurate account of time … but it may help to get you started. Essentially this is assuming that every 60 frames equals 1 second, in theory p5 runs 60 frames per second, but that is not always true.

const timer = {
  start: 7,
  current: 7,
  canReset: false
};

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER);
}

function draw() {
  background(220);
  textSize(100);
  text(timer.current, width / 2, height / 2);

  if (frameCount % 60 == 0 && timer.current > 0) timer.current--;


  if (timer.current == 0) {
    textSize(20);
    text("click to restart", width / 2, height * 0.7);
    timer.canReset = true;
  }
}

function mouseClicked() {
  if (timer.canReset) timer.current = timer.start;
  timer.canReset = false;
}

I would suggest eventually looking into utilizing millis() to get a more accurate account of time.

3 Likes