Let's use trigonometry to make an analog clock
Coding Serenity Coding Serenity
988 subscribers
705 views
0

 Published On Mar 14, 2024

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!

show more

Share/Embed