P5js Lesson 4.2 – Sine function

This example uses a similar approach to the last example, with a timer at the the reactor being offset by the distance to each node. What other wave functions could be used to generate patterns in this way, and how could it be made more responsive?

int gridWidth = 20; 
int gridHeight = 20; 
float shapeWidth = 20; 
float shapeHeight = 20;
float dist_x = 20; 
float dist_y = 20; 
int duration = 100;
int duration2 = 50;
int scaleTimer = 0;
float amplitude = 2;
int xOffset;
int yOffset;
PVector reactorPosition;


void setup() {
 size(800, 800);
 xOffset = floor(width/2-(dist_x*gridWidth/2));
 yOffset = floor(height/2-(dist_y*gridHeight/2));
 reactorPosition = new PVector(0, 0);
 background(255);
 noFill();
};

void draw() {
 background(255);
 scaleTimer++;
 pushMatrix(); //saves current position of the coordinate system
 translate(xOffset, yOffset);//translate grid to center 
 for (int i = 0; i<gridWidth; i++ ) {
 for (int j = 0; j<gridHeight; j++ ) { 

 float reactorDistance = dist(reactorPosition.x, reactorPosition.y, i*dist_x, j*dist_y);
 int myStartTime = int(scaleTimer-reactorDistance);
 float angle = radians(myStartTime)*1.5;
 float _scale = sin(angle)*amplitude; 
 ellipse(i*dist_x, j*dist_y, shapeWidth*_scale, shapeHeight*_scale);
 }
 }
 popMatrix();
};



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

int mouse_Y() {
 return (mouseY - xOffset); //correct positions matrix translations
}
void mouseClicked() {
 scaleTimer = 0;
 reactorPosition.x = mouse_X();
 reactorPosition.y = mouse_Y();
};