Interaction Design Wiki ･ Programming

p5.js Arrays and Lists

An array is a container that holds a fixed number of values, a bit like a spreadsheet table. With arrays we can store multiple variables of the same type, and access them easily. Arrays can also be imagined as drawers, with variables stored in each drawer. The drawer has a certain type, and each drawer store another set of draws (multidimensional). The individual drawers are numbered and start at 0. The size or length is stored in the variable 'length'.

var valueArray = [50, 100, 150, 200, 250];
print(valueArray.length);
 
for(int i=0; i < valueArray.length; i++) {
   valueArray[i] = i * 2;
 }
print(valueArray);

In JavaScript arrays are dynamic, which means that their size can change, and you can dynamically add or remove elements from them.

var particles = []; //declare an array
var gravity = 0.3;

function setup() { 
  createCanvas(400, 400);
  background(255,0.5);

} 

function draw() { 
   background(255,0.5);

	for(var i= 0; i< particles.length; i+=1){
      var pArray = particles[i];
    
      pArray.moveY = pArray.moveY + gravity;
    
      fill(pArray.colour);
      ellipse(pArray.x,pArray.y, 50, 50);
    
      pArray.x = pArray.x + pArray.moveX;
      pArray.y = pArray.y + pArray.moveY;
    
      if (pArray.x > width){
         pArray.moveX = pArray.moveX * -1;
      }

      if (pArray.x < 0){
         pArray.moveX = pArray.moveX * -1;
      }

      if (pArray.y > height){
        pArray.moveY = pArray.moveY * -1;
      }

      if (pArray.y < 0){
        pArray.moveY = pArray.moveY * -1;
      }  
    }
}
  
function mousePressed(){
  var newArrayElement = {x: mouseX, y: mouseY, moveX: random(-5,5), moveY: random(-5,5), colour: color(random(255),random(200),random(150),55)}  //initialise new element with custom properties		
  particles.push(newArrayElement); 
}

function keyPressed() {
  particles.splice(0, particles.length);
  clear();
  background(255,0.5);
}

Exercise

Use an array to draw animated icons on the screen using the mouse. The arrays can be useful to store the X and Y position of the icons for example.

Exercise Solution

var puffsX = [];
var puffsY = [];
 
var currentPuff= 0;
var angle = 0;

function setup() {
  createCanvas(600,600);
  noStroke();
}
 
function draw() {
  background(0);
 
  for(var i = 0; i < 60; i++) {
    drawPuff(puffsX[i],puffsY[i],i);
  }
  angle+= 0.1;
}
 
function drawPuff(x, y, index) {
  fill(255);
  var puffSize = (sin( angle + index) * 10) + 20;
  ellipse(x, y ,puffSize, puffSize);
}
 
function mouseMoved(){
  currentPuff++;
  if (currentPuff >= puffsX.length) {
    currentPuff = 0;
  }
  puffsX[currentPuff] = mouseX;
  puffsY[currentPuff] = mouseY;
}

Exercise (advanced)

Create a sketch with a selection of graphics randomly distributed on the screen. Code your example so the mouse can control the position of these random points with a Parallax effect (pseudo 3D). Use the mouse click to change the random distribution of the graphics.