I got my inspiration from László Moholy-Nagy, A 18, 1927 painting. What made me choose it, was the clean geometric, spatial look of the art. I personally like designs that are geometric and give you a sense of space and balance. The author uses shades and transparency to create the spatial effect. Also, uses line intersection and angles to create “offset” shapes. The colors reminded me of a graphic sketch.
Figuring out the coordinates was more difficult than I thought. Polar coordinates definitely will be the way to go but finding the right formula is quite challenging. I managed to create an “offset“ look by calling the translate method. Other difficulties I encountered were related to events and the “page” flow, and probably due to coordinates too. The “set up” function gets executed once so I thought that I could draw all the static images (background in my case). Realized that you cannot “overwrite” color onMouseDragged event but I think adding “objects” on MouseClick event worked fine as my intention was. I moved the background and all the code in the “draw” function so I was able to change the background color onMouseDragged event but I faced another issue. Because “draw” is a loop when you try to add an object on click, if the coordinates are within the "drawing" area, it will be behind all the other objects and I could not find a way to add it on top of all my “layers”, even I tried to stack them in the order I wanted to show, for the first one to the last to overlay the others.
"2D primitive" used: rect(), ellipse(), quad().
Events: mouseDragged (background changes from white, to gray, to black) and mouseClicked (some of the custom quadrilatrals will change color).
Note: The "drawing" border should be black by default which shows correctely in the p5 web version but not in the browser.