How to create fun animations using processing and p5.js

What are processing and p5.js?

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. There are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning and prototyping.

On the other hand, p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! It is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone. The added feature of processing is its easy integration with websites!

Getting familiar with the building blocks

The first step is to learn the basics of coding in processing and p5.js. I would recommend you to first learn to process and then move on to p5.js. There is a lot of documentation and tutorials out there but my favorite are the ones by Daniel Shiffman on his popular youtube channel called the Coding Train.

Daniel Shiffman’s tutorial available on his youtube channel “Coding Train”

Once you have the basics covered it’s time to apply the concepts and have some fun! Here are a few examples I made using processings:

1. Mouse Tracker — The width of the tracker is directly proportional to the speed of the mouse’s movement. It uses the basic formula of distance with the x and y calculated by subtracting the mouse’s previous coordinates from its new ones.
2. Disco Lights — The squares display random colors of the small squares which are controlled via a nested loop.
3. Catch me if you can — The ball will respawn to a new location as your mouse pointer is in the vicinity of the radius of the ball from its center in any direction.
4. Gravity bounce — The square is falling due to gravity and a damping coefficient.
5. Bubbles fizz — They are a simulation of the bubbles in a liquid. The smaller the bubbles the slower they move and also have a random zig-zag motion.

left to right — 1, 2, 3

left to right — 4, 5

I also did some playing around with p5.js and here are a few interesting animations:

1. Solar system — It’s a 2D representation of the solar system. For the purpose of making it appealing, I made the bigger planets travel slower than the smaller ones.
2. Tango Waves — This is a simple representation of vibrating particles with different amplitudes and phases of each wave.
3. Personal Genie — It is a simple text generator made using an array of predefined elements. It changes its copy with the click of the mouse.
4. Chaos — This is a random balls simulator with reflective bounding walls. The initial direction and the size of the balls are random and the reflection adds to the chaos.

left to right — 1, 2

left to right — 3, 4

Applying

After doing a bit of practice I made a user-centric project for my college called outfit tracker, using p5.js! It was basically a filtering system that recommends an outfit based on your preferences. You can read about the project here.

Thanks for your time, I hope you enjoyed reading!