Animations with P5.js

After getting started creating simple static drawings with P5, as you can check in my first Intro to Computational Media Post, it’s time to play with simple animations.

I added some fun interactions to my “Night in the City” sketch as you can check below:

In “Night in the City Animated” the main interactive/animated ideas are:

1. Every time you scroll the mouse from left to right, you change the background color from 0 to 255 (black to white) giving this impression that the night turns into morning.

2. Every time you reload the drawing (or the page — just refresh it and you will see) the stars appear in different positions, in an ever changing sky with random star positions and sizes.

3. Also, as you can see in the top of the antenna in my Empire State, there is an on/off red light. The circle becomes red every 1000 milliseconds and then goes of for the next 1000, repeating this function in a loop.
You can see the code in this link.

Getting started with P5.js

At ITP one highly recommended class to take in the first semester is ICM (Introduction to computational media). ICM is a beginner level coding class that is very effective to “break the ice”  with programming and help you get started. Personally, I do have an ok experience with JavaScript and web design, though, I don’t use it for art sketching. I am a creative human, and deeply passionate about art. Still, either physically or digitally, I have never quite found an artistic way to express myself. So, I am excited towards the possibility of exploring programming with this approach.

Furthermore, I really believe in the power of programming and its use to enable human beings to be informed and to inform, to have the power to create. Accordingly, my goal is also to be in an environment where I can see other people learning, maybe people that are programming for the first time. In Brazil, where I am from, this idea of perceiving code as a tool for everyone is not developed yet. Most people see it as something that should be used only for computer engineers and computer science experts. Maybe from what I’ll learn in this course I could help change this dynamics in my country. Who knows!?

So, what is this class is about after all?

It’s about playing to create sketches with code, using P5.js (a JavaScript library) to do that. We can create simple drawings, as this first week’s assignment, and further more complex images using loops, creating animations, interactions, making 3d images…. you can check it in P5.js art tumblr, there are a lot of awesome examples. Also, if you have any interest in getting started, my teacher, Dan Shiffman, has an AWESOME youtube channel . There are a lot of tutorials for beginners and they are a great – and fun – material.

For my first assignment I had to create a simple sketch, using basic shapes, calling basic functions of p5.js.

And TA-DA! here it is:


How did I do that?

The semiotics

Ok, first I looked at a bunch of references to come up with what I was going to create. I knew that I was going to use mostly geometrical forms, and I checked a couple of geometric works of artists I like. Also, I just arrived in NY, so based in my surroundings and mainly in my excitement to live in the city, I decided I would do a code sketch of it.

Usually, when go to Tisch (where my school, ITP is), I get out from the subway ride on the Broadway-Lafayette station and walk 3-4min on Broadway. By possibly getting out of the station through different exits or getting lost in the middle of fast walkers, more than twice I have already gone towards the opposite direction from Tisch’s building, loosing some minutes in the process. So, as a reference to make sure I am going on the right way, I have the Empire State Building. Empire State Building is north, so if I go in its direction I’ll surely arrive at ITP. As I have done that almost every day for the past week, apparently, this image got stuck in my head.


The coding

So, even though it seems like a kid’s paint brush sketch, it was not created in paintbrush – and not by a kid. It was coded! As you can see below.

You can also check the code and add your changes, colors and use it as you prefer. You’re more than welcome to play with 🙂

I read the functions here to create the shapes and add colors.

My challenge was getting used to P5.js coordinates, and by not being able to “inspect” each element, as you are able to do when using html/css.

Have fun,