P5.js: Update Math Reference Examples on p5js.org to ES6

[stalgiag]

Update the Math section of the p5js reference to ES6. This will entail updating all of the examples that fall under @module Math.

As a step forward in the transition to ES6 all of the reference examples on p5js.org should be updated to use ES6 standard. This will often mean simply switching 'var' to 'let' or in some cases using es6 classes where applicable.

There are tons of resources online for learning about ES6. Here is an interactive guide that covers the biggest features.

[vedhant]

I would like to take up this issue!

[vedhant]

Should i also implement the usage of arrow functions in the examples?

[stalgiag]

I think the goal is to write these examples for absolute beginners. I can't think of an instance when an arrow function would be the clearest possible approach for an absolute beginner. Functions are already a difficult concept for many early programmers, making functions anonymous might be one step too advanced for the purpose of these examples. That said, if you feel there is a strong case for using an arrow function in any one case feel free to point it out and we can discuss it here.

[vedhant]

var v0, v1;
function setup() {
  createCanvas(100, 100);

  v0 = createVector(0, 0);
  v1 = createVector(50, 50);
}

function draw() {
  background(240);

  drawArrow(v0, v1, 'black');
  v1.set(v1.x + random(-1, 1), v1.y + random(-1, 1));

  noStroke();
  text('x: ' + round(v1.x) + ' y: ' + round(v1.y), 20, 90);
}

// draw an arrow for a vector at a given base position
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}

Should I use let for global variables too ( v0 and v1 in first line ) ?

[stalgiag]

This is open for discussion but imo let makes more sense even for global variables. Block-scoping is more inline with most other programming languages, and I think that the difference between var and let would be confusing for absolute beginners.

[vedhant]

3405 solves this!