I just cannot emphasise enough how much I hate 2020. v tired.
Try it out here: https://editor.p5js.org/rajshree.s/full/a0o4VTw9c
I broke the composition down in layers -
Static background
Moving border text
Text that appears
Other tiny things that could be controlled by the mouse
I coded each layer in isolation and then combined the codes.
#1 Preload: Background, typefaces, 👏
function preload() {
back = loadImage('back-04.png');
border = loadFont('Italiana-Regular.ttf');
scream = loadFont('Jaan.ttf');
button = loadFont('Button.ttf');
clapclap = loadImage('Asset 5.png');
}
The plan was to make the background (just very slightly) dynamic - the easy shapes moving a bit with the cursor - after I sorted out the more complex things.
<aside> ❓ I tried importing SVG into the composition, hoping they'd be imported like vectors but it didn't work. I'm wondering if there's a way to add the more complex shapes to the composition, not as images but as vectors.
</aside>
#2 Text: Can we please just go home now
#3 Other elements: Buttons and nails and bolts
The far-cornered circles were supposed to be a gradient that animated but the radius was too small and the frameRate too high for p5 to register it as a moving gradient.
So, I decided to leave those black and static. Also because I would have had to add an epilepsy trigger warning.