Atlassian uses cookies to improve your browsing experience, perform analytics and research, and conduct advertising. Accept all cookies to indicate that you agree to our use of cookies on your device. Atlassian cookies and tracking notice, (opens new window)
Confluence
/
Vector Fields

Vector Fields

Nov 27, 2017

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();
  }
}
, multiple selections available,
For you

Programming
Results will update as you type.
  • Tiling and Repetition
  • Reactors
    • Simple Reactor
    • Vector Fields
    • Bitmap or SVG Permutations
    • (Extra) Curve Reactor
    • Lesson 2.4 - Exercises
    • 3D Reactors
  • Programming Basics: Parametric and Generative Graphic Design 2016
  • Archive
  • High Scores
  • Artificial Neural Network
  • Alternatives to the Processing IDE
  • p5.js Programming
  • Programming in Processing (java)

{"serverDuration": 12, "requestCorrelationId": "23b345745f9348cc8042ecd93feb00fb"}