This is an example project to demonstrate how to plan and prototype the Timepiece project.
The goal is to make a "cat calendar" that shows different text, color, and images based on the current date/time.
- How do I change the background color?
- How to change the background by time?
- How to show minutes/hours/seconds based on background?
- How to include images to the site?
- How do I change the image based on day of month?
- How to add text?
- How to change text based on day?
Testing out how to have the background color change based on the current time.
- How do I change the background color?
- How to change the background by time?
- How to show minutes/hours/seconds based on background?
Testing out how to load images, and how to have an image display based on the current day of the month.
- How to include images to the site?
- How do I change the image based on day of month?
This is very similar to part 2, but testing how to show text on the screen based on date.
- How to add text?
- How to change text based on day?
In part 3 we were able to add text to the screen, but it didn't look very good! In this alternative prototype of the text aspect, we instead use the p5.dom addon for p5 to render the text in HTML rather than on the p5.js canvas.
Learn more about the p5.dom addon here.
- How to add text?
- How to change text based on day?
Now we combine all of the previous prototypes to see how it all works together.
And finally we add more images/text so that we have a different set for each day of the month.
