Animating Pidge with p5.js

(The GIF converter messed with the quality of the image)

This is the animation with code: https://editor.p5js.org/MackMurphy/sketches/ThcYOZuNA

This animated image is made of 504 lines of code on p5.js. To make this image, I took pictures of Pidge, using the preload function, and used curveVertex(); to trace the images. By getting the code to print out the mouse's x and y positions I could easily enter the points. The hardest part was trying to get the curves to match up with the image, but by playing around with the points, I got it to match up. Around the curveVertex(); points for each shape I put beginShape(); and endShape(); which connected the points and allowed me to fill them in. The eyes and glasses are made using a combination of arcs, ellipses, and curves. To make the animated background, I set the background to: background(118, 71, 255, 100, 100, 100);, this allowed shapes to fade away if they were only put down once. I then used multiple variations of the following code to make the random rectangles (giving the illusion of a glitched screen):

var value=0

while(value<20) {

value=value+1

fill(153, 65, 232);

rect(random(400), random(400), random(20, 50), random(4, 7))

}

Since this went under the draw function (which is looped), it kept getting repeated and drew random rectangles as the other ones faded.

When clicked, the animation displays this image:

(The background would still be animated)

This is made using the if, else function, and it covers the drawing behind it, it disappears when the mouse is released. If I were to make this differently I would want to figure out a way to draw the image more quickly (using something other than curve vertexes), and animate more parts of the image, or make it more interactive. I was able to learn a lot more about how to write code through this project, and finally understand the basics of Javascript.

These are the reference images: