Final Project

After extracting the pixel data of the logo, each pixel in a row fetches RGB data from a pixel in front of it depending on the time of the current animation loop and wrapping to the start of the same row. This is why it appears shifting to the left always. I also used Tweakpane to control the animation speed and pixel density. The code can be found here.

Here I filtered out pixels by red value. To get the animation effect you need to find the vector from each pixel agent to the midpoint, the opposite vector moves the agent outwards. Finally change the speed depending on the current time in the animation loop. The code can be found here.

This animation uses the keydown event and setTimeouts to change the state of the animation. The implementation of gravity and collision detection/resolution is from this useful guide. The code can be found here.

These animations built on all of the previous but adding a mouseover effect and simplex noise. Each pixel agent starts from off the screen and decelerates towards its destination as distance decreases. To get the mouseover effect, check distance between the mouse position and each pixel agent and then modify agents that are close enough. The code can be found here.