CALeidoscope: p5 Midterm Project

Note: as always, the code is available on my p5 exercises github repository.

I planned to make a schedule creator tool called CALeidoscope! The idea is that the user would input all of their recurring commitments and the web app would output a color-coded weekly calendar. For my midterm Creative Coding project, I ended up starting out with a less ambitious first step: the artistic side of the calendar. By starting out with my own schedule and hard-coding the data (in json format), I could focus on the style and aesthetic for this project.

The schedule data I used was encoded as a group of objects in the json data format. Each event or moment in the schedule was written as follows:

“day”: “Saturday”,
“starttime”: 8,
“endtime”: 9,
“name”: “My Meeting”,
“type”: “meeting”

The inspiration for this project came from my desire to copy the typography and organization of illustrated bullet-journal pages. Since I don’t have the artistic ability to create pages like the journals I see for inspiration, I personally would use this digital interface that made something equally aesthetically pleasing in an automated way.

The results are a good starting point if I decide to expand this project in the future.
The circles along the columns each represent one object from the schedule. Lines, in turn, are moments that do not take up a chunk of time. It wouldn’t make sense to represent things like ‘wake up’ as circles because they are just a moment, so I decided to make little lines along the same columns representing the days, with y position reflecting the moment’s time.

I would like to eventually add some interaction to this, for example, a mouseover that shows the title of the event when the user is looking at this schedule on the web.
midterm screenshot

I used a lerp color scale to create a harmonious color palette for each type of event or moment. My biggest challenge was getting the horizontal lines to get to be in the correct position using the same mapping code as I used for the center of the circles. The row is correct but the column positioning is still a little buggy.

In general, I learned a lot about how to work with data in p5, and thinking of something that is normal in everyday life (like a calendar schedule) and re-inventing it in a creative and artistic way.

Leave a Reply

Your email address will not be published. Required fields are marked *