Happy Coding

Alpha transpareny linked to time

#1

Hi there,

I was wondering if you could help me create a clock in p5.

I want the clock to consist of three circles. Each circle moves through transparency from 0 to 255 determined by the hour, minute and second. Once reached 255 it resets to begin the next hour/min/sec. Not very useful for telling the time, but it something I would like to try (I am a complete beginner!) I have drawn the circles in their positions, but I am stuck trying to link time to their transparencies.

(I put the digital numbers there just as a test as I learn more about coding with time. They won’t be part of the finished clock).

Screenshot 2020-05-14 at 20.00.13
Screenshot 2020-05-14 at 20.00.132860×1304 289 KB

I would be grateful if anyone could help set me off in the right direction!

Thanks,

George.

#2

This sounds like a cool project!

It sounds like you might be looking for the map function. The map function allows you to take a number that’s in one range (for example, 0 to 59) and map that to a different range (for example, 0 to 255).

You can find more info in the reference:

https://p5js.org/reference/

Let us know how it goes!

#3

Hey, thanks for getting back to me!

Here is what Ive managed to create.

Ive used the milli time to change the colour of each circle to show hours mins and seconds.

For some reason, it does not loop back to zero once reaching 255. Any ideas why?

https://editor.p5js.org/loaty/sketches/D8ENXMfsG

#4

Check out the reference for the millis function:

https://p5js.org/reference/#/p5/millis

This function does not return the milliseconds of the current time. It returns the total number of milliseconds the sketch has been running.