Interactive Background Animations Using P5.js

What is P5.js?

P5.js is a JavaScript library that allows Processing to be displayed in web browsers.

Ok, So What Is Processing?

Processing is a language and IDE for learning how to code within the context of the visual arts based in Java. It was originally built for the electronic arts, new media art, and visual design, at MIT Media Lab by two amazing dudes named Casey Reas and Benjamin Fry. If you are into new media art they are worth checking out. The basic premise of Processing was to give non-programmers instant visual feedback so they could see what they are doing.

Processing is also the basis for the Arduino IDE.

Damn It Ethan! What is Arduino?

Arduino is a company and an IDE, and some other things, but basically it’s a low-cost microcontroller for building digital devices that interact in the physical world. You can connect this with pretty much anything electronic like speakers, lights, sensors, motors, etc and write code to control and interact with electronic things. Here’s a photo of one now…

So What Are You Getting At?

Ok, so I learned how to code with Processing in art school. It was really basic stuff. A few for loops and if statements, but it taught me how basic logic works. Needing to type “make the background [this] when you click on [that]” changes the way you think about stuff. When I wanted to start building websites it was simply learning the syntax of the language.

I started as a designer, but now I can code a solid website using my knowledge of HTML, CSS, Javascript and PHP. All of that came from learning a tiny bit of Processing, and now here I am putting that back into my web stuff with a javascript library. I know there are other animation libraries like Two.js and Paper.js, among many others, but these are my roots. This is how I first learned to code, and if I can take that knowledge and apply it inside a browser I think that’s pretty damn nice.

Ok, enough about me, keep scrolling…

Can I Just See The Cool Animations?

Yea, sure. Here you go. Just know the moral of the story is you can write a few lines of code and make something pretty cool looking.