Coding for Visual Learners (Preview)

Using an Online Coding Editor

There are a couple of ways you can start using p5.js and JavaScript. One option is to visit the p5.js website and download the p5.js source code onto your system.

We can also use an online editor to code with p5.js. Here is a link to the official p5.js online code editor: https://editor.p5js.org/. This will be our preferred way of working with JavaScript and p5.js. We don’t need to deal with setting up things on our system just now.

I will also be sharing interactive code snippets throughout this course. They will be hosted on a platform called Codepen. With these snippets, you can see the code running without leaving this course. You can even modify them as you wish! Try changing the value of background(220) to be background(0) to see the color of the screen on the right-hand side update.

When we launch the p5.js or Codepen online editor, we will see an area where we can write our code. A code editor is pretty similar to a text editor, like Notepad or Word, but it has special features that make coding much easier, such as highlighting special words for a given programming language. In our case, that language is JavaScript.

How the p5.js editor work is that whenever we have some code ready to be executed, we will press the play button at the top of the page. This will display the results of our code on the right-hand-side panel.

You can also select the Auto-refresh button to have the code auto-played for you. Codepen also auto-plays your code for you.

Pressing the Play button at this point wouldn’t do much, as we didn’t write any code that draws to the screen. We will see an empty screen get generated. But as we can see, this editor has some code already written into it. This code, we see, is needed for almost all the p5.js programs we will be writing, so it is included here for our convenience.

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

function draw() {
  background(220);
}

Let’s just delete this code for now. Before we use p5.js to learn JavaScript, we will learn some of the fundamentals of JavaScript inside this p5.js editor.

💡 You can find all the code examples for this course in the GitHub repository. GitHub is a website for sharing and storing code in a way that makes collaboration between developers easier.