#3 Experimental Clock 🙃

Description

Elements:
outer sphere = social bubble
inner sphere = the movement of time in real word. Unit: second
brain block = symbol of neural system/mindset
texts = current second on the computer

I have two parallel programs written inside me. I feel adapted structuring my life around external/universalized schedules, but at the same time, the other system in which the notion of time constantly changes under different moods works simultaneously. The outer sphere indicates my social bubble, outside of which it's my safety distance where I feel comfortable interacting with people. When people enter the social bubble, where they get too close physically or are being too personal, I'll be irritated and my inner time system will get disturbed.

The inner sphere makes one unit of movement per second. The brain block rotates simutaneously in same rate when the cursor is outside of the bubble. When the cursor is moved into the bubble, the brain starts to shake, while the rotation of the inner sphere doesn't change. It indicates that my inner system is messed up while the external time keeps going, and the inner system stops functioning temporarily.

Reflection

1. Draw the background() in function draw{}.
Otherwise, when the image starts moving, it creates overlapping effect and makes the picture blurry/wonky.

2. For some reason, while the (0,0) point of the canvas is adjusted to the center, mouseX & mouseY still indicates the upper left corner as (0,0). So, when using mouseX, mouseY in WEBGL mode, you have to adjust the distance by adding or subtracting some distance from the mouseX and mouseY.
e.g. line(0,0,mouseX-width/2,mouseY-height/2) instead of line(0,0,mouseX, mouseY)