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
/
Lesson 4.2 – Sine function

Lesson 4.2 – Sine function

Dec 07, 2015

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

, multiple selections available,
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
  • Programming in Processing (java)
    • Starting with Processing (en)
    • Variables (en)
    • Classes and Objects (en)
    • Events und Functions (en)
    • Writing our own Functions (en)
    • Random Numbers (en)
    • Conditionals (en)
    • Loops (en)
    • Nested Loops (en)
    • Coordinates (en)
    • Arrays and Lists (en)
    • SVG + Images (en)
    • Motion and Temporality
      • Lesson 4.2 – Sine function
      • Lesson 4.4 - Motion and Multiple Reactor Points
      • Lesson 4.5 - Exercises
      • Motion Reactor
      • Multiple Reactor Points
    • Gesture Interactions
    • Using bitmaps as modifiers
    • Vectors
    • Animation
    • Animation 2
    • Simple Collision Detection
    • Sound
    • Typography

{"serverDuration": 65, "requestCorrelationId": "f2fb1cc973ba4fb48b5cf7b07a0ab3c5"}