Vectors

This week we learned about vectors in P5.js which are useful for calculating position and movement values in 2D and 3D space. As practice I rewrote code from my previous Random Walk assignment to use vectors to store coordinates. I also restructured the code below to make use of a Tangle class to generate objects and move them around the screen.

Additionally I am interested in adding a third dimension to this project by enabling WEBGL and adding Z-axis coordinate to the vectors however I am unsure of the best way to approach rendering these shapes in P5.js. The examples I have found to generate 3D shapes using WEBGL make us of primitives such as spheres, cubes, or planes. Ideally I think I would store these shapes as splines, perhaps using the beginShape(), endShape(), and curveVertex() functions. Hopefully I can incorporate something like this as practice into the next assignment about forces.

let position1;
let position2;


function setup() {
  createCanvas(windowWidth, windowHeight);
  background(25);
  position1 = new Tangle(0, 1000, 0, 0.002, 0.01, 25, 1);
  position2 = new Tangle(333, 33333, 33, 0.001, 0.005, 3, 0);
}

function draw() {
  blendMode(LIGHTEST);
  position1.move();
  position1.display();
  
  position2.move();
  position2.display();
  
}

// Tangle object
class Tangle {
  constructor(xoff, yoff, boff, posChange, bChange, scale, mirror)   {
    // position offset
    this.poff = createVector(xoff, yoff);
    // brightness offset
    this.boff = boff;
    this.posChange = createVector(posChange, posChange);
    this.bChange = bChange;
    this.scale = scale;
    this.mirror = mirror;
  }
  
  move(){
    this.poff.x += this.posChange.x;
    this.poff.y += this.posChange.y;
    this.boff += this.bChange;
  }
  
  display(){
    let x = map(noise(this.poff.x), 0, 1, 0, windowWidth);
    let y = map(noise(this.poff.y), 0, 1, 0, windowHeight);
    let b = map(noise(this.boff), 0, 1, 0, 255);
    let d1 = int(dist(x, y, windowWidth-x, windowHeight-y));
    d1 = map(d1, 1, max(windowWidth, windowHeight), this.scale, 1);
    noStroke();
    fill(b);
    ellipse(x, y, d1, d1);
    // Mirror function
    if(this.mirror){
      ellipse(windowWidth-x, windowHeight-y, d1, d1);
    }
  }
}