How to Create Simple Sketching Art with p5.js: A Step-by-Step Tutorial

Table of Contents

Outline
What is p5.js
What does it do
Setting up your environment
P5.js simple coding examples
Interaction and Event Listeners
Create Interactive Sketching Art with the mouse movements
Conclusion

Outline

Imagine creating interactive visuals, photo filters, simulations, and generative art with just a few lines of code 😱?

Cool, right? 😅

p5.js makes this possible with pre-written functions making coding accessible to everyone.

In this article, I will be guiding you through how to create simple interactive art in p5.js

What is p5.js

It is an open-source javascript library that covers the part of creative coding making coding accessible and inclusive to not just developers but also to designers, artists, educators, and everyone obsessed with art.

What does p5.js do?

• Data Visualization: with p5.js, you can create data visualizations, charts, and graphs that present complex information in a more engaging manner.

• Art and Animation: it is also used to create fine art and interactive storytelling, enabling artists to express their creativity only through code.

• Simulation and Modelling: p5.js can be used to create simulations and models usually for scientific or educational purposes.

• Generative Art: p5.js allows you to generate mesmerizing visuals just by the use of maths concepts and algorithms.

• Image Processing and Photo Filters: p5.js also allows you as a photographer to turn digital images into Pointillist masterpieces!

How does p5.js work?

Before we start the coding start, let's delve into how p5.js works.

If you have been reading from the start or have any basic knowledge of the p5.js library, you should already know that p5.js provides a seamless way of creating interactive and fine art.

But do you know how it works?

p5.js provides two primary built-in functions setup and draw, making it inclusive to even those without a technical background. p5.js uses these primary functions to make sketches and drawings.

Here is a breakdown of the primary functions and how they work:

• Setup: This Built-In Function is responsible for the canvas configuration, With this function, you can set the canvas width and height.

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

• Draw: with the draw function, you can create sketches, draw objects, and add styles to the background of the canvas.

function draw() {
  background(220);
}

Setting up your Environment

p5.js already has a web editor for you where you can make your first sketch. You can click here to create your first sketch.

p5.js Coding Examples

In this section, I will be providing simple examples that will get you started with p5.js

For the first sample, I will be showing you how to draw a circle

Drawing a Circle with p5.js

There are varieties of shapes that you can create with p5.js. They are normally created by the call of the shape name as a function. However, for this part, we will be creating a circle.

Very important: To test out the code samples, ensure to use the p5.js web editor.

To draw a circle,

• Create your setup function. Inside your setup function, initialize the createCanvas function and pass it parameters that serve as the width and height of the canvas as shown below.

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

• After that, create a draw function. This function is where you create your circle sketch.

function draw() {
 //make your drawings here
}

• Inside your draw function, Create your circle by calling the name as a function. Next, create a background for your circle with the background function, and then a describe function that serves as a screen reader-accessible description of the canvas.

function draw() {
  circle(50, 50, 25)
describe("A white circle with black outline in the middle of a gray canvas.")
}

That’s it!! You now have a basic white circle with a gray background.

Interaction and Event Listeners

Interactions are created in p5.js when a function is invoked as a response to a user action. The function invoked can also be called an event listener.

For example. When a mouse is pressed over an element, we call that an action or event. This action invokes a function(event listener) known as “mousePressed”.

There are other event listeners that are used in p5.js, examples of them include:

• mouseOver

• mouseEnter

• mouseLeave

Creating a basic interaction

In this section, you will learn how interactions are created with eventListeners in p5.js.

To create an interaction in p5.js, follow the instructions as shown below:

• Create a setup function. inside the setup function, create a canvas function, pass it parameters, and assign it to a variable.

function setup() {
  // Create a canvas element and
  // assign it to cnv.
  let cnv = createCanvas(100, 100);
}

• After that, create a background for your canvas inside the function.

function setup() {
  // Create a canvas element and
  // assign it to cnv.
  let cnv = createCanvas(100, 100);

  background(200);
}

• Then, create the mouseOver event for your canvas variable and pass it a function called "randomColor" which we will create later:

function setup() {
  // Create a canvas element and
  // assign it to cnv.
  let cnv = createCanvas(100, 100);

  background(200);

  // Call randomColor() when the
  // mouse moves onto the canvas.
  cnv.mouseOver(randomColor);

  describe('A gray square changes color when the mouse moves onto the canvas.');
}

• Finally, create the randomColor function that is invoked or triggered due to the event or action.

function randomColor() {
  let c = random(['red', 'yellow', 'blue', 'green']);
  background(c);
}

There you have it!! You now have a canvas that changes color when the mouse moves onto the canvas.

Now that you have understood how to build a simple interactive visual in p5.js, let's delve further!!

Creating simple interactive sketching Art with the mouse movements

In this section, I will walk you through the process of creating simple interactive sketches with the mouse position.

There are specific system variables that keep track of the mouse position in P5.js. These positions can either be horizontal or vertical.

Examples of the system variables include:

1. MouseX: it keeps track of the horizontal position
2. MouseY: it keeps track of the vertical Position.

By default, in 2d mode, the mouse variables keep track of the mouse position relative to the top-left corner of the canvas. When it is in WEBL mode, it keeps track of the mouse’s position relative to the center of the canvas. Still a bit confused? don’t worry, I will explain.

2D Mode

Let's take this code for an example in 2d mode as shown below:

function setup() {
  createCanvas(100, 100);

  describe("A vertical black line moves left and right following the mouse's x-position.");
}

function draw() {
  background(200);

  // Draw a vertical line that follows the mouse's x-coordinate.
  line(mouseX, 0, mouseX, 100);
}

If you try this out on the web editor, you will notice that the line moves with the mouse position from the left edge to the right edge of the canvas.

Why?

The top left corner of the canvas coordinate is initially taken to be (0,0). So, when you move the position of the mouse on the canvas from the horizontal position, the line moves from 0 to 100 which was passed as parameters to the line on the code provided above.

To display the line coordinates in 2d mode, add these few lines of code to the draw function.

function draw() {
  background(200);

  // Style the text.
  textAlign(CENTER);
  textSize(16);

  // Draw a vertical line that follows the mouse's x-coordinate.
  line(mouseX, 0, mouseX, 100);

  // Display the mouse's coordinates.
  text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
}

WEBL mode

While in the WEBL mode, this is how the code looks like:

function setup() {
  createCanvas(100, 100, WEBGL);

  describe("A vertical black line moves left and right following the mouse's x-position.");
}

function draw() {
  background(200);

let mx = mouseX - 50;

  // Draw a vertical line that follows the mouse's x-coordinate.
  line(mx, -50, mx, 50);
}

If you try this out on the web editor, you will notice that the line moves with the mouse position from the center of the canvas.

Why?

The center of the canvas coordinate is initially taken to be (0,0). So, when you move the position of the mouse on the canvas from the horizontal position, the line moves from -50 to 0 and then to 50 which was passed as parameters to the line on the code provided above.

To also display the line coordinates in WEBL mode, add these few lines of code to the draw function.

function draw() {
  background(200);

  // Style the text.
  textAlign(CENTER);
  textSize(16);

  let mx = mouseX - 50

  // Draw a vertical line that follows the mouse's x-coordinate.
  line(mx, -50, mx, 50);

  // Display the mouse's coordinates.
  text(`x: ${mouseX} y: ${mouseY}`, 50, 50);
}

Conclusion

With p5.js, you can create fine art and make beautiful sketches whether you are a developer or not. Again if you are looking for a suitable environment to code in p5.js syntax and show your creative skills, you should try out the p5.js web editor and check their reference page to learn more. Happy Coding!!