Arrays

Difficulty : Beginner-Intermediate

This tutorial assumes you have a basic understanding of coding in Processing or p5, and are comfortable using variables, if statements and for loops.

So far we've learnt that we can use variables to name data in our code, as so:

  var myVariable = 200;
  
  console.log(myVariable);

p5 Edditor

And we know that we can use these variable in our sketch. In the following example I create variables X and Y, and use them to as the x and y coordinates in an ellipse function

var x = 100;
var y = 100;

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

function draw() {
  background(220);
  
  ellipse(x, y, 20,20);
}

p5 Editor

Now what if we wanted to have a lot of circles, like in the image below?

You might be thinking of doing something like this:

var x1 = 20; var y1 = 100; var x2 = 213; var y2 = 209; var x3 = 100; var y3 = 100; var x4 = 100; var y4 = 100;