Processing pattern-1 waves

2015-08-05 future learn w2_05 Processing pattern

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.13/processing.min.js"></script>
<canvas></canvas>

CSS

</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var scripts=document.body.getElementsByTagName('script');
    var canvases=document.body.getElementsByTagName('canvas');
    new Processing(canvases[0], scripts[0].text);
}
, false);
 // Here prevent javascript in body from throwing error </script> <style>

JavaScript

/* 
 title: Waves ellipses pattern 
 futurelearn w2_05
 date: 2015-08-05
* drawing shapes based on the
 * current framerate. The movement of individual shapes combine to create a
 * gestalt field of motion.
 */
color[] pastel = {
  #0d60ae, #238acc, #fad31c, #fdb717, #faaa21, #f1753f, #ed5724, #f04639, #ea2830, #bc2326, #8c0c03, #e5185d, #f384ae, #fac6d2, #b296c7, #7b67ae, #5f3577, #c3def1, #55beed, #31a8e0, #ffe617, #143b86, #001b4a, #7dcdc2, #00a8a8, #12959f, #c1d18a, #799155, #80bc42, #4aa03f, #16884a, #003f2e, #381e11, #c05c20, #bf9b6b, #e9d4a7, #e7e6e1, #cfd0d2, #8a8b8f, #778590, #474d4d, #98a2ab, #9f8759, #8c6641, #f7f7f7, #e39b7d, #bcbfa3, #89b399, #6e6460
};

int frame_rate_value;
void setup() {
  size(500, 500);

  frame_rate_value = 10;
  frameRate(frame_rate_value);
  ellipseMode(CORNER);
}


void draw() {
   background(255);
  int num = 16;
  int margin = 5;
  float gutter = 5; //distance between each cell
  float cellsize = ( width - (2 * margin) - gutter * (num - 1) ) / (num - 1);

  int circleNum = 0; // counter
  for (int i=0; i<num; i++) {
    for (int j=0; j<num; j++) {
      circleNum = (i * num) + j; // different way to calculate the circle num from w2_04
      float tx = margin + cellsize * i + gutter * i;
      float ty = margin + cellsize * j + gutter * j;
      movingCircle(tx, ty, cellsize, circleNum);
    }
  }
} 


void movingCircle(float x, float y, float size, int circleNum) {

  float finalAngle;
  finalAngle = frameCount + circleNum;

  //the rotating angle for each tempX and tempY postion is affected by frameRate and angle;  
  float tempX = x + (size / 15) * sin(PI / frame_rate_value * finalAngle);
  float tempY = y + (size / 15) * cos(PI /  frame_rate_value * finalAngle);

  noStroke();
  fill(#bede88);
  //rect(tempX, tempY, size/2, size/1);
  //rect(tempX, tempY, size/1, size/2);
  ellipse(tempX, tempY, size/2, size/2);
  ellipse(tempX, tempY, size/2, size/2);
  //stroke(10,222,250);
  //noFill();
  //stroke(0);
  //line(x, y,...