As developers, we usually think in a functional way that our code should always have a purpose. It should never fail. If it does, it should be handled appropriately, and acceptance criteria should define everything.

Our program is bound to fail if stuff isn't defined well or if the errors aren't handled. But what if we think about it differently, that we want the code to fail to produce a result and that we want our result to be defined only when it runs. With this, we enter creative coding.

What is creative coding?

Creative coding is a different type of programming. Instead of making the code functional, we make it expressive; thus, we create art.

There are multiple things under the creative coding umbrella, from live coding music, generating animations, using a pen plotter to generate on a real canvas, etc.

Tools

There is a big selection of tools that we can use to create our code. Some most notable are:

Processing

Processing is a Java-based programming language used for generating new media art, electronic art. It was created to teach non-technical minds about computer programming in a visual way.

Link: processing.org

Open Frameworks

As stated on their website, openFrameworks is an open-source written in C++. It is considered a more advanced tool since people who are learning creative coding are often digital artists who want to create and not be bothered with the learning curve of C++.

Link: openframeworks.cc

p5.js

p5.js is the brother of processing, the biggest difference being that it is written in Javascript instead of Java. The next big thing about it is that it runs on the browser using the canvas HTML element. This means you can plug it into any website, and you are good to go!

Link: p5js.org

First sketch with p5.js

To get started, we're going to use p5.js since it's my preferred tool. First, follow the link onto editor.p5js.org, where you will be greeted with a code editor on the browser with the following code:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

We have two functions in this code, the first one being the setup and the second one draw.

setup()

The setup function is used for well... setup. What this means is this function is gonna run only once on the startup. Inside we can see a function that calls createCanvas(400,400). What this does is creates a canvas HTML element that's 400 pixels wide and 400 pixels high. Think of it like a real-world canvas that is 400x400.

draw()

The draw function on every frame, meaning it's looped over and over again based on the frame rate we set. Inside there is a background(220) function call, and this means we set the background to an RGB value of 220, 220, 220, which produces grey.

Creating a shape

p5.js provides us with a lot of shapes out of the box. I'm not gonna go through all of them, but for reference, here's where you can find them: p5js.org/reference We're gonna create an ellipse that moves from left to right

Let's add it to our draw function:

function draw() {
  background(220);
  ellipse(200, 200, 50, 50);
}

As you can see, there are certain numbers passed down to the ellipse function. Those you will see throughout your whole journey with p5.js shapes. In the reference for ellipse, we can see those arguments are ellipse(x, y, w, [h]). The xs argument means the horizontal position of the element, the y argument is the vertical position, w is the element's width, and [h] is the height.

Interestingly enough, we can see that [h] is wrapped in parentheses. This indicates that it's optional, meaning if we don't provide it, the height will be the same as the width. An example of this is ellipse(200, 200, 50); which is the same as ellipse(200, 200, 50, 50);

Making the big move

let x = -25;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  ellipse(x, 200, 50, 50);
  x+=1;
}

As you can see, this moves the element from left to right. We have added a let x = -25, and this sets the initial position of the circle outside of the screen. It is not set to 0 since the width of our element is 50 pixels, meaning half of it would stick out if we set our x to 0.

The next change we did is we replaced the first argument of the ellipse with the variable x and then, after the ellipse, incremented it by 1. This makes it move on every frame by 1 pixel.

If we run this, we can see a circle moving from the left to right horizontally. This is awesome, but only for a short period of time. When it reaches the right border, it disappears.

Resetting the circle

In order for our ellipse to go back to the left, we need to reset its position when it goes out of the screen on the right.

Check it out here:

function draw() {
  background(220);
  ellipse(x, 200, 50, 50);
  x += 1;
  if (x === 425) {
    x = -25;
  }
}

We added a conditional statement that checks if our x has reached 425 pixels (400 is the canvas size and 25 is half of the element width, this makes it 425). When the x reaches this number, we set it back to the initial value of -25, which moves the element back to its original position.

Give yourself a round of applause, since you have just created your first sketch with p5! 👏

Conclusion

p5.js and other creative coding tools provide easy access for programmers to unlock their creative side by using the tools they already use all of the time. So if you ever feel like you're in a rut and you want to break out of the loop of defining everything, try it out yourself and share it with me! I would love to see what creations you can come up with it.

Thanks for reading my first blog post, I hope you now have a good understanding of what the world of creative coding brings to the table.