THE WOBBLY GRID

let xscl = 1; // global scale
let yscl = 1;

let mode = 2;


function setup() {
  createCanvas(window.innerWidth,window.innerHeight);
  
  xscl = width/20;
  yscl = height/20;

}

function draw() {
  background(220);
  
  for(let x=0;x<20;x++){
  
    
    for(let y=0;y<20;y++){
  
      
      let ppx = x*xscl + xscl/2;
      let ppy = y * yscl + yscl/2;
      
      
    
      
      let curr_dist = dist( mouseX,mouseY, ppx,ppy);
      
      
      // --------------------------------------
      // ----------- mode 1 --------------------
       // --------------------------------------
      
      if(mode == 0){
        let r = 5 + curr_dist*.1;
        
        noStroke();
        fill(0);
        
        ellipse( ppx,ppy , r , r );
      }
      
      
       // --------------------------------------
      // ----------- mode 2 --------------------
       // --------------------------------------
      
      if(mode == 1){
        let r = 100 - curr_dist*.3;
        
        r *= sin(millis()*.001)+y*.01;
        
        ellipse( ppx,ppy , r , r );
      }
      
      
       // --------------------------------------
      // ----------- mode 3 --------------------
       // --------------------------------------
      
      if(mode == 2){
        
        let xoff = sin(millis()*.009);
        let yoff = cos(millis()*.009);
        
        xoff *= curr_dist*.06;
        yoff *= curr_dist*.06;
        
        noStroke();
        
        fill(curr_dist*.95);
        
        // wenn maus nah, dann bitte kein offset bewegung
        
        ellipse( ppx+xoff  ,ppy + yoff , 6 , 6 );
 
      }

    }  
  
  }
 
}


function keyPressed(){

  
  //console.log(keyCode);

   if( keyCode == "49"){  mode = 0;}
   if( keyCode == "50"){  mode = 1;}
   if( keyCode == "51"){  mode = 2;}

  if( keyCode == "32"){
  
     console.log("space hitted");
     save("shot_dynamic_grid.png");
    
  }
  

}