Interaction Design WikiProgramming

Vector Fields

int gridWidth = 40; 
int gridHeight = 40; 
int screenWidth = 700;
int screenHeight = 700;
int distX;
int distY;
PVector reactorPosition;
ArrayList <VectorLine> vectLineList = new ArrayList<VectorLine>();
 
void setup() {
  reactorPosition = new PVector(0, 0);
  size(700, 700);
  background(255);
  stroke(0);
 
  int distX = width/gridWidth+1;
  int distY = height/gridHeight+1;
 
  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) {
    PVector _reactor  = reactor.copy();
    float reactorDistance = dist(_reactor.x, _reactor.y, _pos.x, _pos.y);
    float scaler = reactorDistance*reactorScaler;
 
    _reactor.sub(_pos); // subtract VectorLines position from the reactors position, this effectively gives a reactor coordinate relative to our VectorLine coordinate
    _vector = _reactor.copy();
    _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);
  }
}


 

Example

This is an example solution for the exercises to create a tear-drop form.

 

int gridWidth = 20; 
int gridHeight = 20; 
int screenWidth = 700;
int screenHeight = 700;
int distX;
int distY;
PVector reactorPosition;
ArrayList <VectorLine> vectLineList = new ArrayList<VectorLine>();

void setup() {

  reactorPosition = new PVector(0, 0);
  size(700, 700);
  int distX = width/gridWidth+1;
  int distY = height/gridHeight+1;

  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;
    PVector _reactor = reactor.copy();

    _reactor.sub(_pos);
    _vector = _reactor.copy();
    _vector.normalize();
    _vector.rotate(PI/4);

    PVector _pointTwo = _vector.copy();
    _pointTwo.rotate(PI/2);
    _pointTwo.mult(8);

    PVector _pointTree = _pointTwo.copy();
    _pointTree.rotate(PI/2);

    PVector _pointFour = _pointTree.copy();
    _pointFour.rotate(PI/2);
    _pointTwo.add(_pos);
    _pointTree.add(_pos);
    _pointFour.add(_pos);

    _vector.mult(scaler);
    _vector.add(_pos);

    noStroke();
    fill(0);

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