My code repository for Creative Coding: Making Visuals with JavaScript
2D animations made in the browser using JavaScript with canvas-sketch and Tweakpane
This animation uses the keydown event and setTimeouts to debounce the text input and then finally extracts the pixel data from the text image. For each white pixel, an agent is created which collides with others and has gravity. The implementation of gravity and collision detection/resolution is from this useful guide. The code can be found here.
After extracting the pixel data of the logo, this animation draws a diamond for each pixel using the RGB data from a pixel to the right of it in it's row depending on the time of the current animation loop and wrapping to the start of the same row if necessary. This is why it appears shifting to the left always. I also used Tweakpane to control the animation speed and pixel density of the image. The code can be found here.