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

**URL:** <https://discourse.processing.org/t/how-to-align-an-ellipse-to-an-arc-that-is-mapped-to-time-hours-creating-a-sundial-clock/28596>\
**Category:** Coding Questions\
**Created:** [March 16, 2021, 10:02pm UTC](https://discourse.processing.org/t/how-to-align-an-ellipse-to-an-arc-that-is-mapped-to-time-hours-creating-a-sundial-clock/28596 "2021-03-16T22:02:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![keira](https://avatars.discourse-cdn.com/v4/letter/k/9e8a1a/32.png) [@keira](https://discourse.processing.org/u/keira)\
**Post date:** [March 16, 2021, 10:02pm UTC](https://discourse.processing.org/t/how-to-align-an-ellipse-to-an-arc-that-is-mapped-to-time-hours-creating-a-sundial-clock/28596/1 "2021-03-16T22:02:33Z")

</div>

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:

```auto
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 🙂

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [March 16, 2021, 10:35pm UTC](https://discourse.processing.org/t/how-to-align-an-ellipse-to-an-arc-that-is-mapped-to-time-hours-creating-a-sundial-clock/28596/2 "2021-03-16T22:35:15Z")

</div>

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`).

```auto
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);

```

---

<div class="post-metadata">

**Author:** ![keira](https://avatars.discourse-cdn.com/v4/letter/k/9e8a1a/32.png) [@keira](https://discourse.processing.org/u/keira)\
**Post date:** [March 17, 2021, 9:43am UTC](https://discourse.processing.org/t/how-to-align-an-ellipse-to-an-arc-that-is-mapped-to-time-hours-creating-a-sundial-clock/28596/3 "2021-03-17T09:43:26Z")

</div>

Ahh incredible!! Thanks so much for your help 🙂