Help in P5.js (for fun program)

p5.js Coding Questions
1

Hello! I am having trouble with creating a stopwatch, timer, and decade clock in one program. I am currently having trouble with setting the years, months, etc. Down to milliseconds and have it count down on the timer part of the code. Thanks for the help! Here is my code (sorry, it is a bit long):

var mode;
var speed;
var yrs;
var mnths;
var dys;
var hrs;
var mnts;
var scnds;
var mllscnds;
function setup() 
{
  createCanvas(400, 400);
  angleMode(DEGREES); 
  mode = prompt ("What mode would you like? 1 for Speedrun Timer, 2 for stopwatch, or 3 for Decade Clock.");
  if (mode == 1)
  {
    speedrunTimer();
  }
  if (mode == 2)
  {
      yrs = prompt ("How many Years?");
      mnths = prompt ("How many Months?");
      dys = prompt ("How many Days?");
      hrs = prompt ("How many Hours");
      mnts = prompt ("How many Minutes?");
      scnds = prompt ("How many Seconds");
      mllscnds = prompt ("How many Milliseconds?");
      countDown();
  }
  if (mode == 3)
  {
    decadeClock();
  }
}

function draw() 
{
  if (mode == 3)
  {
    push();
    decadeClock();
    pop();
  }
}
function speedrunTimer()
{
  background (0);
  translate (200,200);
  rotate (-90);
  let yr = year();
  let mo = month();
  let da = day();
  let hr = hour();
  let mn = minute();
  let sc = second();
  let mi = (new Date().getTime()) % 1000;
  background (0);
  translate (200,200);
  rotate (-90);
  strokeWeight (8);
  stroke (255,0,0);
  noFill();
  let millisAngle=map(mi,0,1000,0,360);
  arc(0,0,320,320,0,millisAngle);
  
  stroke (255,150,0);
  let secondAngle=map(sc,0,60,0,360);
  arc (0,0,300,300,0,secondAngle);
  
  stroke (255,255,0);
  let minuteAngle=map(mn,0,60,0,360);
  arc (0,0,280,280,0,minuteAngle);
  
  stroke (150,255,100);
  let hourAngle=map(hr,0,24,0,360);
  arc (0,0,260,260,0,hourAngle);
  
  stroke (0,255,255);
  let dayAngle = map (da,0,30.4375, 0,360);
  arc (0,0,240,240,0,dayAngle);
  
  stroke (0,0,255);
  let monthAngle = map (mo,0,12,0,360);
  arc (0,0,220,220,0,monthAngle);
  
  stroke (255,0,255);
  let yearAngle = map (yr,0,10,0,360);
  arc (0,0,200,200,0,yearAngle);
  
  push();
  rotate(yearAngle);
  stroke(255,0,255);
  line(0,0,90,0);
  pop();
  
  push();
  rotate(monthAngle);
  stroke(0,0,255);
  line(0,0,90,0);
  pop();
  
  push();
  rotate(dayAngle);
  stroke (0,255,255);
  line (0,0,90,0);
  pop();
  
  push();
  rotate(hourAngle);
  stroke (150,255,150);
  line (0,0,90,0);
  pop();
  
  push();
  rotate(minuteAngle);
  stroke (255,255,0);
  line (0,0,90,0);
  pop();
  
  push();
  rotate(secondAngle);
  stroke (255,150,0);
  line (0,0,90,0);
  pop();
  
  push();
  rotate (millisAngle);
  stroke (255,0,0);
  line (0,0,90,0);
  pop();
  
  stroke (255,255,255);
  point(0,0);
}
function countDown()
{ 
  background (0);
  translate (200,200);
  rotate (-90);
  let CMA = mllscnds - millis;
  strokeWeight (8);
  stroke (255,0,0);
  noFill();
  let millisAngle=map(mllscnds,0,1000,0,360);
  arc(0,0,320,320,0,millisAngle);
  mllscnds = mllscnds - 1;
  
  stroke (255,150,0);
  let secondAngle=map(scnds,0,60,0,360);
  arc (0,0,300,300,0,secondAngle);
  
  stroke (255,255,0);
  let minuteAngle=map(mnts,0,60,0,360);
  arc (0,0,280,280,0,minuteAngle);
  
  stroke (150,255,100);
  let hourAngle=map(hrs,0,24,0,360);
  arc (0,0,260,260,0,hourAngle);
  
  stroke (0,255,255);
  let dayAngle = map (dys,0,30.4375, 0,360);
  arc (0,0,240,240,0,dayAngle);
  
  stroke (0,0,255);
  let monthAngle = map (mnths,0,12,0,360);
  arc (0,0,220,220,0,monthAngle);
  
  stroke (255,0,255);
  let yearAngle = map (yrs,0,10,0,360);
  arc (0,0,200,200,0,yearAngle);
  
  push();
  rotate(yearAngle);
  stroke(255,0,255);
  line(0,0,90,0);
  pop();
  
  push();
  rotate(monthAngle);
  stroke(0,0,255);
  line(0,0,90,0);
  pop();
  
  push();
  rotate(dayAngle);
  stroke (0,255,255);
  line (0,0,90,0);
  pop();
  
  push();
  rotate(hourAngle);
  stroke (150,255,150);
  line (0,0,90,0);
  pop();
  
  push();
  rotate(minuteAngle);
  stroke (255,255,0);
  line (0,0,90,0);
  pop();
  
  push();
  rotate(secondAngle);
  stroke (255,150,0);
  line (0,0,90,0);
  pop();
  
  push();
  rotate (millisAngle);
  stroke (255,0,0);
  line (0,0,90,0);
  pop();
  
  stroke (255,255,255);
  point(0,0);
}
function decadeClock()
{
  let yr = year();
  let mo = month();
  let da = day();
  let hr = hour();
  let mn = minute();
  let sc = second();
  let mi = (new Date().getTime()) % 1000;
  background (0);
  translate (200,200);
  rotate (-90);
  strokeWeight (8);
  stroke (255,0,0);
  noFill();
  let millisAngle=map(mi,0,1000,0,360);
  arc(0,0,320,320,0,millisAngle);
  
  stroke (255,150,0);
  let secondAngle=map(sc,0,60,0,360);
  arc (0,0,300,300,0,secondAngle);
  
  stroke (255,255,0);
  let minuteAngle=map(mn,0,60,0,360);
  arc (0,0,280,280,0,minuteAngle);
  
  stroke (150,255,100);
  let hourAngle=map(hr,0,24,0,360);
  arc (0,0,260,260,0,hourAngle);
  
  stroke (0,255,255);
  let dayAngle = map (da,0,30.4375, 0,360);
  arc (0,0,240,240,0,dayAngle);
  
  stroke (0,0,255);
  let monthAngle = map (mo,0,12,0,360);
  arc (0,0,220,220,0,monthAngle);
  
  stroke (255,0,255);
  let yearAngle = map (yr,0,10,0,360);
  arc (0,0,200,200,0,yearAngle);
  
  push();
  rotate(yearAngle);
  stroke(255,0,255);
  line(0,0,90,0);
  pop();
  
  push();
  rotate(monthAngle);
  stroke(0,0,255);
  line(0,0,90,0);
  pop();
  
  push();
  rotate(dayAngle);
  stroke (0,255,255);
  line (0,0,90,0);
  pop();
  
  push();
  rotate(hourAngle);
  stroke (150,255,150);
  line (0,0,90,0);
  pop();
  
  push();
  rotate(minuteAngle);
  stroke (255,255,0);
  line (0,0,90,0);
  pop();
  
  push();
  rotate(secondAngle);
  stroke (255,150,0);
  line (0,0,90,0);
  pop();
  
  push();
  rotate (millisAngle);
  stroke (255,0,0);
  line (0,0,90,0);
  pop();
  
  stroke (255,255,255);
  point(0,0);
}
2

Welcome to the Processing Foundation Forum! Your post has been edited to format the code for better readability. Please review our FAQ for guidance on posting code. Thank you.

ezgif.com-gif-maker (1)

3

OK so what exactly is the problem, and where is the problem in your code? What did you expect to happen and what happened instead?

4

Right now, I am dying to find a way to reset millis() to 0. Or to reset some kind of variable tracking milliseconds to 0 when an event is triggered.

5

Trying not dying oops.

6

You can’t reset millis() but you can offset it.

Example:

var off = 0;

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(220)
  textSize(48)
  textAlign(CENTER, CENTER)
  text(int((millis()-off)/100), width/2, height/2)
}

function mouseClicked()
  {
  off = millis();  
  }

:)

1 Like
7

I got the code working! Thanks for all of your help.

3 Likes