Adam L

@AdamL3 (2)
🚨THE THEME IS MUSIC🚨: WIN $5,000! We're having another competition!
posted to Share by katyadee


The James-and-Persian gif really captured my immediate feelings about this challenge perfectly.

ᴇʟᴇᴄᴛʀɪᴄ ᴩᴏʟyɢᴏɴᴀʟ ᴄᴀɴᴠᴀꜱ ʟɪɢʜᴛ ᴏʀᴄʜᴇꜱᴛʀᴀ 🗲 💠 🎼 v2.0
posted to Share by AdamL3

@katyadee Of course! I should mention that this is just something that I pieced together while learning and testing how the canvas element works. It just uses a single script to continuously draw shapes to the canvas, and I used a fizz-buzz conditional approach to change up the CSS background filters that are applied to the canvas (e.g., if iterator is currently divisible by 3, set the opacity to x random number within a given range, if i%5=0, rotate the hue to x random number within a given range, etc.). At the same time, there are (global?) css animations that are constantly cycling through certain sequences which produces some of the more smooth transition effects, like the continuous blur/un-blur effect that is applied to the entire canvas. The rest is just randomness that transpired as I was trying things to make the page display as expected on both desktop and mobile devices... So at this time, it really is more of a quirky, experimental art project built with code than it is a program, but I think something like this could pair very well with a project that has more of a back-end Node/angular focus. If I have any ideas over the next week or two, I may add some additional features to make it more interactive, and allow the user to store some data, maybe using React and Firebase. Let me know if you have overall thoughts or advice.