I just cannot emphasise enough how much I hate 2020. v tired.

Initial illustrator rendition of the composition

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a7d4a4ec-c811-44e2-8cca-dae02563e971/Asfin_export-01.png

Try it out here: https://editor.p5js.org/rajshree.s/full/a0o4VTw9c

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f0847ea8-3e56-4b0f-aaa0-8f259187cea8/IMG_3927.heic

I broke the composition down in layers -

  1. Static background

  2. Moving border text

  3. Text that appears

  4. 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.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2886e7eb-0384-42a5-af2e-7e79b88b9100/Asfin_export-04.png

<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

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d3dd9180-9364-4a7a-96d2-f1130051db9d/Asfin_export-06.png


#3 Other elements: Buttons and nails and bolts

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ad1f9e4-c50e-4411-967f-cbd38e8aec0e/Asfin_export-03.png

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.