Let's use trigonometry to make an analog clock

Trigonometry is often underrated, and it can be quite useful in some coding projects. In this video, we use it to make an analog clock with p5.js.
Some things we covered:
- Trigonometry is a branch of math that's related to angles, triangles, circles, and waves
- In creative coding, we usually use trig functions for finding the components of an angled line segment or making something move back and forth
- Usually sin is used for calculating the vertical component and cos is used for calculating the horizontal component
- An analog clock is an ancient time-telling device that was commonly used before digital clocks were invented
- p5.js is a JavaScript library that makes it easier to create audiovisual projects (usually called sketches)
- Almost every p5 sketch starts with two built-in functions: setup() which is called once on startup, and draw() which is called on every frame
- On an HTML canvas (which is what p5 uses), the positive vertical direction is down, not up
- There are 2 different unit types that are commonly used for measuring angles: degrees (which are usually more convenient to use) and radians (which are more meaningful)
- p5 has several built-in time functions, including hour(), minute(), and second(), which make it easy to get the time. It also has a function called millis(), but that works differently because it gives us the number of milliseconds that have elapsed since the sketch was loaded
- map() is a p5 function that linearly scales a number from one range of values into a new range of values (not to be confused with the JavaScript built-in Array.protoype.map)
- lerp() is a p5 function that linearly interpolates between two values
- Easing is a strategy we can use to make a value smoothly transition to another value over time. There are many ways to do it
Join the Coding Serenity discord server: / discord
Thanks for watching!

[@theblueplanet3576]

Thanks for sharing 👌

[@billestla]

What a terrific video! You covered so much material in an interesting and fun presentation The entire production is really solid! 😊

[@kirupaagar6674]

Absolutely fantastic

[@AMelhuish]

🥧💖 great video!

[@florianfilkohazi1478]

With the second hand of the clock can't you just use "const secondAngle = map(second() + (millis() % 1000) / 1000, 0, 60, 0, 360);"

[@codingserenity]

That's a great suggestion! The only problem is that at the moment the sketch is loaded, the millisecond value of the actual time is very unlikely to be 0, but `millis()` will always start at 0. So when `second()` gets incremented to the next value, `millis() % 1000` probably won't be back to 0 yet, and the second hand will end up jerking between the current second and the next one.
I think we could make it work if we stored the millisecond value of the actual time at the moment the sketch is loaded, but we would need to do it in the traditional JS way, like `new Date().getMilliseconds()`

[@florianfilkohazi1478]

@@codingserenity oh, i didnt think about that