let r = 32;

let span = 80;

let delay = 1;

let fps = 30;

let speed;

let redlocation;

let isDouble = false;

var angle = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight,P2D);

  frameRate(fps);

  noStroke();

  redlocation = createVector(0,0);

  reset();

}

​

function reset(){

  speed = span/(delay*fps);

  n = int(max(windowWidth/span,windowHeight/span)) + 1;

}

​

function draw() {

  blendMode(BLEND);

  //background(240);

  fill(255,140);

  rect(0,0,width,height);

  redMove();

  points();

}

​

function points(){

  push();

  translate(windowWidth/3,windowHeight/3);

  rotate(angle);

  blendMode(MULTIPLY);

  for(var x=-n;x<n;x++){

    for(var y=-n;y<n;y++){

      //blue

      fill(4,167,255);

      circle(x*span,y*span,r);

      //red

      fill(255,4,127);

      circle(x*span+redlocation.x,y*span+redlocation.y,r);

    }

  }

  angle +=0.003;

  pop();

}

​

function redMove(){

  //print(redlocation);

  if(redlocation.x<span&&redlocation.y==0){

    redlocation.add(speed,0);

  }else if(redlocation.x==span&&redlocation.y<span){

    redlocation.add(0,speed);

  }else if(redlocation.x>0&&redlocation.y==span){

    redlocation.add(-speed,0);

  }else if(redlocation.x==0&&redlocation.y>0){

    redlocation.add(0,-speed);

  }

  if(redlocation.x<0) redlocation.x = 0;

  if(redlocation.y<0) redlocation.y = 0;

  if(redlocation.x>span) redlocation.x = span;

  if(redlocation.y>span) redlocation.y = span;

}

​

function mousePressed(){

  if(isDouble) {isDouble=false; r=32; span=80;redlocation.div(2);reset();}

  else if(!isDouble) {isDouble=true; r=32*2; span=80*2;redlocation.mult(2);reset();}

}

​

function touchStarted(){

  if(isDouble) {isDouble=false; r=32; span=80;redlocation.div(2);reset();}

  else if(!isDouble) {isDouble=true; r=32*2; span=80*2;redlocation.mult(2);reset();}

}

​