My p5js clock draws over itself with every update.

TheAshwin

Project link: https://gurbuxani.github.io/time-and-tide/

Problem: As you can see on the link above, my clock updates just fine ... but the pixels created in previous loop are not deleted. It's very obvious if you look at the time in text near the bottom. If you wait till the analog clock goes from 60 seconds to the next minute's first second - the previous arc is not deleted and leaves behind a circle. Please see the attached screenshot for a visual representation.

Update: I have a feeling, it might have something to do with the lack of a background on my canvas. When I add background(0); to draw, it works just fine. But I don't want a black background, I want a transparent one. Using background('rgba(0, 0, 0, 0)') does not solve this either :(

Code: GitHub repo - https://github.com/gurbuxani/time-and-tide

function setup() {
  createCanvas(800, 800);
  angleMode(DEGREES);
}

function draw() {
  translate(400, 400);
  rotate(-90);

  let hr = hour();
  let mn = minute();
  let sc = second();

  // seconds arc
  strokeWeight(2);
  stroke(255);
  noFill();
  let secondAngle = map(sc, 0, 60, 0, 360);
  arc(0, 0, 350, 350, 0, secondAngle);

  // minutes arc
  strokeWeight(4);
  stroke(255);
  let minuteAngle = map(mn, 0, 60, 0, 360);
  arc(0, 0, 280, 280, 0, minuteAngle);

  // hours arc
  strokeWeight(8);
  stroke(255);
  let hourAngle = map(hr % 12, 0, 12, 0, 360);
  arc(0, 0, 150, 150, 0, hourAngle);

  // center point
  strokeWeight(2);
  stroke(255);
  point(0, 0);

  // time in text
  rotate(90);
  fill(255);
  noStroke();
  text(hr + ':' + mn + ':' + sc, 5, 400);
}

What am I doing wrong? How can I fix this?

<3

koogs

Clear screen every frame. Use background()

Hour angle should probably include a portion of the minutes, minutes include a part of the second or it'll look odd.

TheAshwin

@koogs

Thank you very much! It works just as I want it to using this code -

function draw() {
   clear();
   background('rgba(0,0,0,0)');