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

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

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)