Lesson 2.2 – Vector Fields

Vector Fields

int gridWidth = 40; 
int gridHeight = 40; 
int screenWidth = 700;
int screenHeight = 700;
int distX = screenWidth/gridWidth+1;
int distY = screenHeight/gridHeight+1;
int xOffset = floor(screenWidth/2-(distX*gridWidth/2));
int yOffset = floor(screenHeight/2-(gridHeight*distY/2));
PVector reactorPosition;
ArrayList <VectorLine> vectLineList = new ArrayList<VectorLine>();
 
void setup() {
        reactorPosition = new PVector(0, 0);
        size(screenWidth,screenHeight);
        background(255);
        smooth();
         for(int i = 0; i<gridWidth; i++ ) {
            for(int j = 0; j<gridHeight; j++ ) {
                vectLineList.add(new VectorLine(i*distX,j*distY));
         }
       }
};
 
void draw() {
background(255);
  for(int i = 0; i<vectLineList.size(); i++ ) {
      vectLineList.get(i).draw(reactorPosition);
  };
 
};
 
 
void mouseMoved(){
          reactorPosition.x = mouseX;
          reactorPosition.y = mouseY;
};
 
 
class VectorLine {
PVector _pos;
PVector _vector;
float reactorScaler = .07;
 
VectorLine(int x, int y) {
   _vector = new PVector(0,5);
   _pos = new PVector(x,y);
   _vector.add(_pos);
}
 
void draw(PVector reactor) {
   float reactorDistance = dist(reactor.x, reactor.y, _pos.x, _pos.y);
   float scaler = reactorDistance*reactorScaler;
    point(_pos.x,_pos.y);
    PVector _reactor  = reactor.get();
   stroke(0);
    _reactor.sub(_pos);
    _vector = _reactor.get();
   _vector.normalize();
    _vector.rotate(PI/4);
    _vector.mult(scaler);
    _vector.add(_pos);
    line(_pos.x, _pos.y, _vector.x,_vector.y); 
    ellipse(_vector.x, _vector.y, 5, 5);
    }
}

Exercise: Use the code in the example to produce a flowing arrangement of geometric forms.
Solution For tear-drop form:

int gridWidth = 20; 
int gridHeight = 20; 
int screenWidth = 700;
int screenHeight = 700;
int distX = screenWidth/gridWidth+1;
int distY = screenHeight/gridHeight+1;
int xOffset = floor(screenWidth/2-(distX*gridWidth/2));
int yOffset = floor(screenHeight/2-(gridHeight*distY/2));
PVector reactorPosition;
ArrayList <VectorLine> vectLineList = new ArrayList<VectorLine>();
 
void setup() {
        reactorPosition = new PVector(0, 0);
        size(screenWidth,screenHeight);
        background(255);
        smooth();
         for(int i = 0; i<gridWidth; i++ ) {
            for(int j = 0; j<gridHeight; j++ ) {
                vectLineList.add(new VectorLine(i*distX,j*distY));
         }
       }
};
 
void draw() {
background(255);
  for(int i = 0; i<vectLineList.size(); i++ ) {
      vectLineList.get(i).draw(reactorPosition);
  };
 
};
 
 
void mouseMoved(){
          reactorPosition.x = mouseX;
          reactorPosition.y = mouseY;
};
 
 
class VectorLine {
PVector _pos;
PVector _vector;
float reactorScaler = .1;
 
VectorLine(int x, int y) {
   _vector = new PVector(0,5);
   _pos = new PVector(x,y);
   _vector.add(_pos);
}
 
void draw(PVector reactor) {
   float reactorDistance = dist(reactor.x, reactor.y, _pos.x, _pos.y);
   float scaler = reactorDistance*reactorScaler;
    point(_pos.x,_pos.y);
    PVector _reactor  = reactor.get();
   stroke(0);
    _reactor.sub(_pos);
    _vector = _reactor.get();
   _vector.normalize();
    _vector.rotate(PI/4);
    
     PVector _pointTwo  = _vector.get();
     _pointTwo.rotate(PI/2);
     _pointTwo.mult(8);
 
    PVector _pointTree  = _pointTwo.get();
    _pointTree.rotate(PI/2);

     PVector _pointFour  = _pointTree.get();
    _pointFour.rotate(PI/2);
   
   _pointTwo.add(_pos);
   _pointTree.add(_pos);
   _pointFour.add(_pos);
   _vector.mult(scaler);
   _vector.add(_pos);
    fill(0,0,0);
    line(_pos.x, _pos.y, _vector.x,_vector.y); 

    fill(255,0,0);

    
     fill(100,100,100);
     beginShape();
     curveVertex(_vector.x, _vector.y);
     curveVertex(_vector.x, _vector.y);
     curveVertex(_pointTwo.x, _pointTwo.y);
     curveVertex(_pointTree.x, _pointTree.y);
     curveVertex(_pointFour.x, _pointFour.y);
     curveVertex(_vector.x, _vector.y);
     curveVertex(_vector.x, _vector.y);
     endShape();
    }
}