...

const gridWidth = 40;
const int gridHeight = 40;
const int screenWidth = 700;
intconst screenHeight = 700;
intvar distX;
intvar distY;
PVectorvar reactorPosition;
ArrayList <VectorLine>var vectLineList = new ArrayList<VectorLine>();[];

  
voidfunction setup() {
  reactorPosition = new PVectorcreateVector(0, 0);
  sizecreateCanvas(700, 700);
  background(255);
  stroke(0);
  
  intlet distX = width/gridWidth+1;
  intlet distY = height/gridHeight+1;
  
  for (intvar i = 0; i<gridWidth; i++ ) {
    for (intvar j = 0; j<gridHeight; j++ ) {
      vectLineList.addpush(new VectorLine(i*distX, j*distY));
    }
  }
};
  
voidfunction draw() {
  background(255);
  for (intvar i = 0; i<vectLineList.size()length; i++ ) {
    vectLineList.get([i)].drawshow(reactorPosition);
  };
};
  
  
voidfunction mouseMoved() {
  reactorPosition.x = mouseX;
  reactorPosition.y = mouseY;
};
  
  
class VectorLine {

 PVector _pos;
  PVector _vector;
  float reactorScaler = .07;
 
  VectorLine(int x, int y)  constructor(x,y){
    this._vector = new PVectorcreateVector(0, 5);
    this._pos = new PVectorcreateVector(x, y);
    this._vector.add(this._pos);
    this.reactorScaler = 0.07;
  }

   void drawshow(PVector reactor) {
    PVector this._reactor  = reactor.copy();
    float this.reactorDistance = dist(this._reactor.x, this._reactor.y, this._pos.x, this._pos.y);
    float this.scaler = this.reactorDistance * this.reactorScaler;
      this._reactor.sub(this._pos); // subtract VectorLines position from the reactors position, this effectively gives a reactor coordinate relative to our VectorLine coordinate
    this._vector = this._reactor.copy();
    this._vector.normalize();
     this._vector.rotate(PI/4);
     this._vector.mult(this.scaler);
    this._vector.add(this._pos);
     //
    line(this._pos.x, this._pos.y, this._vector.x, this._vector.y);
     ellipse(this._vector.x, this._vector.y, 5, 5);
  }
}

Example

...

Exercise

Use the vector code in the example to produce a flowing arrangement of geometric forms.

Example Solution using tear-drop form

...

 

int

Code Block
language js
const gridWidth = 20; intconst gridHeight = 20; const int screenWidth = 700; intconst screenHeight = 700; intvar distX; intvar distY; PVectorvar reactorPosition; ArrayList <VectorLine>var vectLineList = []; new ArrayList<VectorLine>(); voidfunction setup() { reactorPosition = new PVectorcreateVector(0, 0); sizecreateCanvas(700, 700); background(255); stroke(0); intlet distX = width/gridWidth+1; intlet distY = height/gridHeight+1; for (intvar i = 0; i<gridWidth; i++ ) { for (intvar j = 0; j<gridHeight; j++ ) { vectLineList.addpush(new VectorLine(i*distX, j*distY)); } } }; voidfunction draw() { background(255); for (intvar i = 0; i<vectLineList.size ()length; i++ ) { vectLineList.get([i)].drawshow(reactorPosition); }; }; voidfunction mouseMoved() { reactorPosition.x = mouseX; reactorPosition.y = mouseY; }; class VectorLine { class PVectorVectorLine _pos;{ PVector _vector; float reactorScaler = .1; VectorLine(int x, int y) constructor(x,y){ this._vector = new PVectorcreateVector(0, 5); this._pos = new PVectorcreateVector(x, y); this._vector.add(this._pos); this.reactorScaler = 0.07; } void drawshow(PVector reactor) { this._reactor = reactor.copy(); float this.reactorDistance = dist(this._reactor.x, this._reactor.y, this._pos.x, this._pos.y); float this.scaler = this.reactorDistance * this.reactorScaler; PVector _reactor = reactor.copy(); this._reactor.sub(this._pos); // subtract VectorLines position from the reactors position, this effectively gives a reactor coordinate relative to our VectorLine coordinate this._vector = this._reactor.copy(); this._vector.normalize(); this._vector.rotate(PI/4); this._vector.mult(this.scaler); this._vector.add(this._pos); // PVector this._pointTwo = this._vector.copy(); this._pointTwo.rotate(PI/2); this._pointTwo.mult(8); PVector this._pointTree = this._pointTwo.copy(); this._pointTree.rotate(PI/2); PVector this._pointFour = this._pointTree.copy(); this._pointFour.rotate(PI/2); this._pointTwo.add(this._pos); this._pointTree.add(this._pos); this._pointFour.add(this._pos); this._vector.mult(this.scaler); this._vector.add(this._pos); noStroke(); fill(0); beginShape(); curveVertex(this._vector.x, this._vector.y); curveVertex(this._vector.x, this._vector.y); curveVertex(this._pointTwo.x, this._pointTwo.y); curveVertex(this._pointTree.x, this._pointTree.y); curveVertex(this._pointFour.x, this._pointFour.y); curveVertex(this._vector.x, this._vector.y); curveVertex(this._vector.x,this. _vector.y); endShape(); } }