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
For you

Programming
Results will update as you type.
  • Tiling and Repetition
  • Reactors
  • Programming Basics: Parametric and Generative Graphic Design 2016
  • Archive
  • High Scores
  • Artificial Neural Network
  • Alternatives to the Processing IDE
  • p5.js Programming
    • p5.js Introduction
    • p5.js Variables
    • p5.js Random Numbers
    • p5.js SVG + Images
    • p5.js WebGL
    • p5.js Classes and Objects
    • p5.js Events and Functions
    • p5.js Loops
    • p5.js Coordinates
    • P5js Nested Loops
    • p5.js Animation Exercise 1
    • p5.js Animation Exercise 2
    • p5.js Conditionals
    • p5.js Arrays and Lists
    • p5.js Simple Collision Detection
    • p5.js Reactors
    • p5.js Tiling and Repetition
    • p5.js Vectors
    • p5.js Animation Solution with Objects
    • p5.js Easing
    • p5.js Perlin Noise
    • p5.js Particle System
    • p5.js Sound
    • p5j.s Typography
    • P5js Archive
      • P5js Motion Reactor
      • P5js Multiple Reactor Points
      • P5js Programming Basics: Parametric and Generative Graphic Design 2016
      • P5js End Exercise 2014
      • P5js End Exercise 2015
      • P5js Ext. Lektion 1 (Force Fields)
      • P5js Ext.Lektionen 2 (Rekursive Funktionen / Fraktale)
      • P5js How Computers Think
      • P5js End Exercise 2016 - Asteroids
      • P5js High Scores
      • P5js Artificial Neural Network
      • P5js Gesture Interactions
      • P5js Lesson 4.2 – Sine function
      • P5js Lesson 4.5 - Exercises
  • Programming in Processing (java)

/
P5js Multiple Reactor Points

P5js Multiple Reactor Points

Jul 30, 2021

 

 

 

 

ArrayList<PVector> reactorList = new ArrayList<PVector>();
int maxPointCount = 20;
int gridWidth = 30;
int gridHeight = 30;
float dist_x = 20; 
float dist_y = 20; 
float shapeWidth = 20;
float shapeHeight = 20;
int xOffset;
int yOffset;
float reactorScaler = .003;

void setup() {
  size(800, 800);
  smooth();
}

void draw() {
  background(255);
  xOffset = floor(width/2-(dist_x*gridWidth/2));
  yOffset = floor(height/2-(dist_y*gridHeight/2));
  PVector temp = new PVector(mouse_X(), mouse_Y());
  reactorList.add(temp);
  if (reactorList.size() >= maxPointCount) {
    reactorList.remove(0);
  }
  pushMatrix(); //saves current position of the coordinate system
  translate(xOffset, yOffset);//translate grid to center 
  noStroke();
  fill(0);
  for (int i = 0; i<gridWidth; i++ ) {
    for (int j = 0; j<gridHeight; j++ ) {
      PVector myPos = new PVector(i*dist_x, j*dist_y);
      PVector cpt = closestPoint(myPos);
      float reactorDistance = dist(cpt.x, cpt.y, myPos.x, myPos.y);
      float scaler = reactorDistance*reactorScaler;
      ellipse(myPos.x, myPos.y, shapeWidth*scaler, shapeHeight*scaler);
    };
  };
  //drawReactors();   // unconment to see the trail of reactors created by mouse movement
  popMatrix();
}

void drawReactors() {


  stroke(255, 0, 0);
  for (int i = 0; i <reactorList.size()-1; i++) {
    line(reactorList.get(i).x, reactorList.get(i).y, reactorList.get(i+1).x, reactorList.get(i+1).y);
  }
}

PVector closestPoint(PVector location) {
  PVector tempPoint = reactorList.get(0);
  float bestDistance = dist(tempPoint.x, tempPoint.y, location.x, location.y);
  for (int i = 0; i < reactorList.size(); i++) {
    float tempDistance = dist(reactorList.get(i).x, reactorList.get(i).y, location.x, location.y);
    if (tempDistance<bestDistance) {
      bestDistance = tempDistance;
      tempPoint = reactorList.get(i).get();
    }
  }
  return tempPoint;
}

int mouse_X() {
  return (mouseX - xOffset); //correct positions matrix translations
}

int mouse_Y() {
  return (mouseY - xOffset); //correct positions matrix translations
}

, multiple selections available,
{"serverDuration": 41, "requestCorrelationId": "2930da7070574014a72149df69f02e78"}