Variables

A very useful and powerful concept of programming is the variable.

A variable defines a space in memory where data is stored.

We can access the data through the name of the variable, which is like an address.

Through variables, data becomes reusable and code becomes flexible.

Reasons for using variables

Adaptable code

With variables we can define relations between objects. Then, if we change one object, it may affect other objects as well.

/* Static code without variables */ 
function setup() {
  createCanvas(400, 400);
  background(220);
  // centered rect half the size of the canvas
  fill(0);
  rect(100, 100, 200, 200);
}

If we now change the size of our canvas and want to remain the relation of the rectangle, we have to modify all four properties of the rectangle. Below is a more variable code:

/* Variable code through the use of variables */
function setup() {
  createCanvas(400, 400);
  background(220);
  // centered rect half the size of the canvas
  fill(0);
  let rect_w = width/2;
  let rect_h = height/2;
  let rect_x = (width-rect_w) / 2;
  let rect_y = (height-rect_h) / 2;
  rect(rect_x, rect_y, rect_w, rect_h);
}

Dynamic code

Without variables code would be static and the output could not change during the execution of the program.

let margin = 10;
let x_pos = margin;

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

function draw() {
  background(200);
  // reset x_pos if it's beyond width-margin
  if (x_pos > width-margin) {
    x_pos = margin;
  }
  // draw a line
  stroke(0);
  line(x_pos, margin, x_pos, height-margin);
  // increase x_pos
  x_pos += margin;
}

p5js built-in variables

P5.js comes with some system variables, like the size of the window. This makes your code adapt to the window of the viewer.

function setup() {
    createCanvas(windowWidth, windowHeight);
}

With the built-in function windowResized, which is triggered by an event-listener, we can adapt the canvas to a changing browser window size.

/* Code from https://p5js.org/reference/#/p5/windowResized */

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0, 100, 200);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Types of Variables

In JavaScript we can use 3 different types of variables:

let, var, const

A const variable needs a value to hold when declared. This value will be constant through the whole program, so you can’t modify it.

const title = "adaptiveness";

The scope of a const is as usual defined through a block or function.

p5.js has some system constants as well: https://p5js.org/reference/#group-Constants

A let variable can be declared without a value. Then the initial value is undefined. It’s possible to modify (override) a value stored in a variable of type let. The scope is the same as with a const, so defined through a block or function.

let margin; // undefined 

margin = 10; // override the variable called margin

Let was introduced with the latest update of the JavaScript language in 2015. Before that, var was used.

The differences are the declaration and scope. Here is a good article about it. The code below is based on it.

You can use the same variable name with var multiple times. If you use it again (even inside blocks), it will override previous (even global) variables.

/* Example from the article, applied to p5.js */

var greeter = "hello";
var greeter = "hey hi"; // it's possible to redeclare a var variable with the same name

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

function draw() {
  background(220);

  var times = 4;

  if (times > 3) {
      var greeter = "say Hello instead"; // this will override the global variable
  }
    
  console.log(greeter) // "say Hello instead"
  noLoop();
}

With let, the variable inside the if-block is local and will not override the global variable:

let greeter = "hello";
// let greeter = "hey hi"; // redeclaration is not allowed
greeter = "hey hi"; // overriding is possible

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

function draw() {
  background(220);

  var times = 4;

  if (times > 3) {
      let greeter = "say Hello instead"; 
  }
    
  console.log(greeter) // "hey hi"
  noLoop();
}

So with var it’s easy to override variables by mistake, with let you’re safe.

Declaring multiple variables in one line

// Destructoring assignment
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
let [a,b,c,d] = [0,1,2,3]
// Using arrow functions
let [r, g, b] = [0, 0, 0].map(() => Math.floor(Math.random() * 256).toString());

(The code below is probably not very clean code.)