let circles;

let myColor;

let rMax;

let rMin;

let dMin;

let xPos; // X coord of center

let yPos;  // Y coord of center

let initTime; // initial time in millis 

let currTime; // current time in millis

let interval; // Respawn interval in millis

let recentClick; // Boolean to check if user clicked recently

let startTime; // Used for recentClick

//let endTime; // Used for recentClick

const Y_AXIS = 2;

const X_AXIS = 0.4;

let b1, b2, c1, c2;

​

​

​

class Circle

{

  constructor(p_radius, p_x, p_y)

  {

    this.radius = p_radius;

    this.x = p_x;

    this.y = p_y;

    this.nbLines = int(random(3, 25));

    this.rotSpeed = (random(1) < 0.5 ? 1 : -1) * random(0.005, 0.034);

    this.radSpeed = (random(1) < 0.5 ? 1 : -1) * random(0.3, 1.4);

    this.theta = 0;

  }

​

​

  update()

  {

    this.theta += this.rotSpeed;

    this.radSpeed *= abs(this.radius += this.radSpeed) > rMax ? -1 : 1;

  }

}

​

class MyColor

{

  constructor()

  {

    this.minSpeed = 0.2;

    this.maxSpeed = 0.4;

    this.R = random(0,200)/1.5;

    this.G = random(100,200)/2;

    this.B = random(0,200);

    // if ((this.R + this.G + this.B) > 610) {

    //   print("here");

    //   this.R -= 50;

    //   this.G -= 25;

    //   this.B -= 50;

    // }

    this.Rspeed = (random(1) > 0.5 ? 1 : -1) * random(this.minSpeed, this.maxSpeed);

    this.Gspeed = (random(1) > 0.5 ? 1 : -1) * random(this.minSpeed, this.maxSpeed);

    this.Bspeed = (random(1) > 0.5 ? 1 : -1) * random(this.minSpeed, this.maxSpeed);

  }

​

  update()

  {

    this.Rspeed = ((this.R += this.Rspeed) > 255 || (this.R < 20)) ? -this.Rspeed : this.Rspeed;

    this.Gspeed = ((this.G += this.Gspeed) > 255 || (this.G < 20)) ? -this.Gspeed : this.Gspeed;

    this.Bspeed = ((this.B += this.Bspeed) > 255 || (this.B < 20)) ? -this.Bspeed : this.Bspeed;

  }

}

​

​

​

function initialize(p_random)

{ 

  for (var i = 0; i < nbCircles; i++)

  {

    circles[i] = new Circle(random(rMax), 

    p_random ? random(-windowWidth/3, windowWidth/3) : 0, 

    p_random ? random(-windowHeight/3, windowHeight/3) : 0);

  }

  myColor = new MyColor();

}

​

function setGradient(val) {

  pixelDensity(1);

  loadPixels();

  for (var y = 0; y < height; y++) {

    for (var x = 0; x < width; x++) {

      var index = (x + (y * width))*4;

      // pixels[index+0] = x/3;

      // pixels[index+1] = (x+y)/10;

      // pixels[index+2] = y/3; 

      pixels[index+0] = (x+val)/2.5;

      pixels[index+1] = val;

      pixels[index+2] = (y+val)/5; 

      pixels[index+3] = 200;

    }

  }

  updatePixels();

}

​

function setup()

{

  var cnv = createCanvas(windowWidth, windowHeight, P2D);

  cnv.style('display', 'block');

  frameRate(60);

  rMax = min(windowWidth, windowHeight)/1.7; // 2.0

  rMin = min(windowWidth, windowHeight)/3;

  dMin = max(windowWidth, windowHeight)/4; //3.5

  circles = new Array(nbCircles);

  initialize(false);

  setGradient(0);

  xPos = windowWidth/2;

  yPos = windowHeight/2;

  interval = 30*1000; // Auto-reset every 30 seconds

  initTime = millis();

  recentClick = false;

}

​

function windowResized() { // resize if window is resized

  resizeCanvas(windowWidth, windowHeight);

  xPos = windowWidth/2;

  yPos = windowHeight/2;

  graphicReset();

  // TODO

}

​

​

function draw()

{

  currTime = millis();

  if (mouseX < windowWidth && mouseY < windowHeight) {

    cursor(CROSS);

  }

  if (currTime % interval < 100) {

      if (currTime > startTime + (15 * 1000)) { // 20 second check for recent

        recentClick = false;

        xPos = windowWidth/2;

        yPos = windowHeight/2;

        graphicReset();

      }

      if (recentClick == false) {

        xPos = windowWidth/2;

        yPos = windowHeight/2;

        graphicReset();

      }

  }

  noStroke();

  noFill();

  rect(0, 0, windowWidth, windowHeight);

  push();

 // translate(windowWidth/2, windowHeight/2); // change origin

  translate(xPos,yPos);

  myColor.update();

  for (var j = 0; j < nbCircles; j++)

  {

     circles[j].update();

     for (var i = j+1; i < nbCircles; i++)

     {

       connect(circles[j], circles[i]);

     }

   }

   pop();

}

​

function connect(c1, c2)

{

  var d, x1, y1, x2, y2, r1 = c1.radius;

  r2 = c2.radius;

  var rCoeff = map(min(abs(r1), abs(r2)), 0, rMax, 0.16, 1); // 0.08

  var n1 = c1.nbLines

  var n2 = c2.nbLines;

  for (var i = 0; i < n1; i++)

  {

    x1 = c1.x + r1 * cos(i * TWO_PI / n1 + c1.theta);

    y1 = c1.y + r1 * sin(i * TWO_PI / n1 + c1.theta);

    for (var j = 0; j < n2; j++)

    {

      x2 = c2.x + r2 * cos(j * TWO_PI / n2 + c2.theta);

      y2 = c2.y + r2 * sin(j * TWO_PI / n2 + c2.theta);

      d = dist(x1, y1, x2, y2);

      if (d < dMin)

      {

        //stroke(myColor.R + r2/1.5, myColor.G + r2/2.5, myColor.B + r2/1.5, map(d, 0, dMin, 140, 0) * rCoeff);

        stroke(myColor.R + r2/10, myColor.G + r2/10, myColor.B + r2/10, map(d, 0, dMin, 140, 0) * rCoeff);

        line(x1, y1, x2, y2);

      }

    }

  }

}

​

​

function mousePressed()

{

  xPos = mouseX;

  yPos = mouseY;

  graphicReset();

  recentClick = true;

  startTime = millis();

}

​

​

​

function graphicReset() {

  var x = random(1);

  if (x < 0.4) { // Circle 

    clear();

    setGradient(random(0,200));

    //fill(0,60);

    //setGradient(0, 0, displayWidth, displayHeight, c1, c2, Y_AXIS);

    // xPos = windowWidth/2;

    // yPos = windowHeight/2;

    initialize(false);

  }

  else {    // Custom

    clear();

    setGradient(random(0,100));

    //fill(0,60);

    //setGradient(0, 0, width, height, c1, c2, X_AXIS);

    // xPos = mouseX;

    // yPos = mouseY;

    initialize(true);

  }

}

​