# 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); } } }