For this project, we had to basically render an image using generated pixels. I decided to use a dark purple grim reaper with angel wings playing with music turntables and a dj setup.
Here is the original:
To start, I used Moon’s code for inspiration and changed the characters to suit the final picture completely. I put the image from Google into assets, then took the link and inserted it into the code.
In the setup, I set the canvas to fill up whatever the window size of viewers is, and resized the image to be bigger.
The draw() function is where the pixels are oriented and the wave graphic animation is put in. I played around with the grid size and settled on 5, which is basically the size of each square in the grid, which one belongs to each “pixel”. The for() loop assigns the each pixel to the square in the grid, and the map() function in the constrain() will help in iterating a color to each pixel based on the colors of the original photo, which is what fill(r, g, b) does. The translate() and rotate() functions create the waving effect on the drawing. By adding the +x to the rotate function, we tell it to move horizontally. The text() function sets the characters we initially set up as what shows up for each pixel.
In the future, I hope to add more interactivity to it, such as making the pixels explode and return to their initial place when you click the mouse or press the space bar, and center.
Here is the product: code
