How to align an ellipse to an arc that is mapped to time/hours? (Creating a sundial clock)

p5.js Coding Questions
1

Hello! I’m trying to create a clock inspired by sundials. I have created an arc that is mapped to the current hour and an ellipse. I want the ellipse to line up with the end of the arc so that when the hour changes it moves inline with the new end of the arc. I think it is to do with the x,y of the ellipse but I can’t quite work it out. This is my first time using p5 so I’m a bit at a loss. Hopefully my explanation makes sense too! Here is the code I have so far:

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

function draw() {
background(194, 233, 255);
  
let hr = hour();
let min = minute();
let s = second();
  
noFill()
stroke(0)
let end = map(hr,0, 12, 0, 180)
arc(225,225,400,400,180,end)
 
let x = end
let y = end

noStroke()
fill(255, 208, 0) 
ellipse(x,y,60,60);
  
textSize(18)
fill(255, 208, 0)
text('6am', 30, 220);
text('6pm', 385, 220);
}

Any help is appreciated! Thank you :slight_smile:

2

Hi,

if I understood well, you want to “stick” your ellipse to the end of your arc. If so, you can easily do it with the basic trick of trigonometry :

  • I set the same center for both arc and ellipse, and use the diameter of the arc to get the radius and find the correct pos from the angle (which is end).
let end = map(hr,0, 12, 0, 180)
let rad = 400;
let arcCenter = createVector(width/2, height/2);
arc(arcCenter.x, arcCenter.y, rad, rad, 180, end)
 
let x = arcCenter.x + (cos(end) * (rad/2))
let y = arcCenter.y + (sin(end) * (rad/2))

ellipse(x, y,60,60);
2 Likes
3

Ahh incredible!! Thanks so much for your help :slight_smile:

1 Like