Coding Challenge #74: Clock with p5.js

References:

Videos:

Related Coding Challenges:

Timestamps:
0:00 Introducing today's topic
0:44 Inspiration
2:15 How do we get the time information?
3:15 Add a digital clock
4:55 Use arcs to visualize the time
7:05 Add angleMode()
9:17 Map the end of the arc to the seconds, minutes, and hour
12:07 Translate to the center of canvas and rotate by -90 degrees
15:15 Add hour, minutes, and second hands
18:57 Concluson and creative possibilities

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#beginner #clocks #generativeart #javascript #p5js

[Lep_]

As fantastic as everything in this video is, my favorite part might have been Dan's sudden realization of the actual time. The fact that it came from his own code just made it so funny.

[sailorsenshiamichan]

it's so adorable that he gives hearts to everyone

[LucasAcosta-uttk]

I love this guy... I don't even know how to proper code with JS, but man... love this.

[TheComputerGuy]

To make the clock more realistic, you could make the minute and hour hands move smoothly. Someone probably posted a better method, but I'd define their angles like this:
let minuteAngle = map(mn, 0, 60, 0, 360) + map(secondAngle, 0, 360, 0, 6);
let hourAngle = map(hr % 12, 0, 12, 0, 360) + map(minuteAngle, 0, 360, 0, 30);

The minute hand moves in steps of 360/60=6 degrees and the hour hand moves in steps of 360/12=30 degrees. Depending where the seconds and minutes are, the extra "map" makes the minute and hour hands move closer to the next step.

[mikeg]

I learn so much from your channel. As a hobbiest with no formal education, I appreciate what you do! Cheers

[can_pacis]

I really don't understand your optimistic behaviours but I mostly admire it. It is getting more and more funny every day...

[peterhayman]

such good color choices, makes me want candy :)

[pedraaldev]

Hi i'm learning web development (so i'm learning basics of JS) since a few weeks and your passion is truly inspiring! Thank you for those learning and entertaining videos!

[tacarson]

You used let! Finally, can't believe it!

[kamilbolka]

I never thought of creating a clock... Well now I need to try!

[Anthony-nctl]

I love your excitement! It makes me want to code even more! Good video!

[VishalAnand]

This will work as well: line(0, 0, r * cos(secAngle), r * sin(secAngle)); where r is radius of the arc and you don't have to think about rotation planes and stuffs

[titarch]

Funny, it was extacly 18:08 when he showed the time, so the time he displayed was right for me x)

[leoking]

You are the God of coding teacher and I am in 8th class and I can understand the concept that you tell you teach in outstanding

[elmo]

My coding skills are kinda okay, but I got no ideas to create, you come with simple, yet inspiring projects.
Thanks! I made a beautiful clock which displays written time in the middle of the circles, displays milliseconds and plays calm music c:

[TheRealKitWalker]

Your videos are a stress buster and inspiring. Thanks.

[happyhuman]

You are too smart!I watched most of your Coding Challenges and they were mind blowing!

[BourNesk]

that modulo operator! wow'ed me a lot!

[mmbower]

Love the dorky personality. Keep up the great work. Thanks for what you do!!

[keshavapiyushprasad]

Everybody: Oh the analog clock looks haard but the digital should be easy
Dan: takes 10 mins to completely overthrow expectations with the digital but finishes the analog clock in 3 mins