Introduction to creative coding with p5.js

#javascript #webdev #codepen #computerscience

"Creating a process which makes the process"

Creative coding is addictive, if you really tune into it! It has immense possibilities, and that is why I decided to write this article, to introduce all of you to this wonderful genre of coding with a Javascript library called p5.js, where you can communicate to your audience more artistically than ever before!

What is creative coding?

In my terms, creative coding is just making some art, pattern, background, models, sketches, data visualization, animation, etc with the help of code, in a sort of iterative way to express something. It is about creating something expressive rather than functional, with code. Creative coding is a discipline which is an intersection of technology, art and design.

Didn't get it? Let me show you some examples.

You must be thinking right now : "Whattt? These art forms are made from 'code'? I can't believe it! ". That's what I initially thought, but once you get into this beautiful practice, you'll start to understand how nature itself is just a bunch of repetitive processes which ultimately makes this world, which is kinda what we do in coding, right? We create an algorithm, to solve our problems. The only thing that changes in creative coding is that we create algorithms for expressing something, in the form of art.

p5.js

You could do creative coding with C++ too! But it's not meant for that, that's why we have frameworks specifically for creative coding. Processing is the most famous platform for this, and it uses Java, but it has other variants for other languages as well, and p5.js is the platform we use for creative coding on the web. It obviously, uses Javascript, so it is very easy for web developers to get started with this, which was the primary reason it was made by Lauren McCarthy. So let's just get started.

For a quickstart, just open the p5.js web editor. Now that you have a p5 editor, let's get into some code. So, there are two functions that are most important in p5:

setup()
draw()

So setup() is an inbuilt function which runs only once, at the start of the program, and draw() is also an inbuilt function which runs on loop, which means it runs infinitely by default. Let's understand them individually.

1. function setup()
This is the function in which we put all the things that we want to do initially and only once. It basically sets up the environment and things like screen size, background color, for our "sketch" : which is what we call our program files in p5.js. A very generic setup function looks like this:

function setup(){
 createCanvas(500,500);
 background(120);
}

As we can see, we have a function createCanvas(), which creates a canvas of 500x500 units, and a background() function, which sets up the color for our canvas. If we provide a single argument, it will be a value from 0 to 255, 0 being black and 255 white. If we provide three arguments, it will use RGB color notation, each value ranging from 0 to 255.

2. function draw()
This is where most of the action happens. Here we use various functions, loops, and self made algorithms to make our final artwork. You can work with sound, data, webcams, sensors, and other things to interpolate in your sketch to make it interactive, but that is out of scope of this article. So if we wanna draw a line, circle, rectangle or any shape, we have functions for that:

function draw(){
  fill(233,11,44); // color to fill the shapes
  stroke(1); // stroke color
  strokeWeight(2);
  line(20,20,160,60); // line from (20,20) to (160,60)
  fill(23,44,223); 
  rect(170,170,120,70); // rectangle on (170,170) with 120x70 size
  fill(223,212,44);
  ellipse(120,130,100,100); // ellipse on (120,130) with height 100 and width 100, which makes it a circle
  noLoop();
}

So the code above will produce something like this:

The functions are self explanatory, and by the comments you might have understood what's going on. There was one function at the end called noLoop() , which actually does nothing but stops the draw() function from running infinitely. This is useful in scenarios where you might want to run draw() for a particular number of times.

There are some inbuilt variables in p5 too, which can add complexity to our sketches. Some of them are mouseX and mouseY. They are variables used to store x and y co-ordinates of the mouse cursor.
Look at this sketch:

function setup() {
  createCanvas(400, 400);
  background(200);
}
function draw(){
  fill(233,11,44);
  stroke(1); 
  strokeWeight(2);
  makeShapes();
}
function makeShapes(){
  fill(random(200),random(200),random(200));
  ellipse(mouseX,mouseY,50,50);
  rect(mouseX,mouseY,120,70);
}

The result:

The possibilities

As this is just to introduce you to p5.js, I can't go into complex sketches but I've laid down a path for you, and hopefully you'll create some beautiful things after venturing into the art of creative coding. For inspiration, here are some of my sketches :)

If you've reached till here, thank you for reading! Hope it helped you in some way. If you're interested in CSS, I also write some interesting articles on my website CSS Kenpai.
Some sources for further reading: