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.

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”
  1. Disco Lights — The squares display random colors of the small squares which are controlled via a nested loop.
  2. 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.
  3. Gravity bounce — The square is falling due to gravity and a damping coefficient.
  4. 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
  1. Tango Waves — This is a simple representation of vibrating particles with different amplitudes and phases of each wave.
  2. 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.
  3. 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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store