/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://p5js.sketchpad.cc/sp/pad/view/ro.UJk5as1fqbc/rev.275
 * 
 * authors: 
 *   Arash Pandi

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   https://creativecommons.org/licenses/by-sa/3.0/ 
 */ 



function setup() {
  createCanvas(300, 300); // creates a canvas or an screen 
  noFill(); // makes all the shapes to be empty inside (without color)
}

// how long should the radius be


function draw() {
  clear(); // clears the canvas for every frame update 
  background(0); // Set the background color
      
  for (var i = 21; i<width-21; i+=21) {
    for (var j = 21; j<height-21; j+=21) {
      // declaring Angle, Radius & Speed
      var radiusLength = 200;
      var angle = 0;
      var speed = 0.003;
      var radius = Math.sin(angle + frameCount * speed);
      var coLor = map(radius, -1.,1., 50,255); // scaling sine values to color values ( o to 255)
      stroke(100,150,coLor,coLor); // sets the color of lines and borders of shapes
      
      // manipulating the phase of the sine, based on the EVEN or ODD numbers (X&Y positions) 
      if ( i % 2 == 0 && j % 2 == 1) 
      {
        radius = Math.sin(angle + QUARTER_PI + frameCount * speed);
      }
      ellipse(i, j, radius * radiusLength, radius * radiusLength); // (xPostion, yPosition, xRadius, yRadius)

      angle++; // keep adding the angle, in our case every 360 value, we'll have the same angle series,

    }

  }


}