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,