Circles

//Created by Arnav Mehta

​

//Initial set up of variables as well as predetermined color palette.

var grid = [];

var CircleRad = [];

var bg = "#f1e7de";

var Pallete = ["#343d3a", "#5fd0d4", "#efa93a", "#fd2e58"];

​

//This allows you to change the number of cirlces to be created on the canvas 

var numOfCirc = 300;

​

function setup() {

  createCanvas(0.95*windowHeight, 0.95*windowHeight);

  background(100);

  CircleDraw();

  noStroke();

}

​

function draw() {

  background(bg);

  for(var v = 0; v  < grid.length; v++){

    fill(Pallete[v%4]);

    ellipse(grid[v].x, grid[v].y, 2*CircleRad[v]);

  }

}

​

//If Enter is pressed, this function generates new locations for the various circles and recalculates the radiuses

//Uses similar functions to CircleDraw function

function keyPressed(){

  if(keyCode === ENTER){

    background(bg);

    for(var v = 0; v < grid.length; v++){

      var newX = int(random(0.95*windowHeight));

      var newY = int(random(0.95*windowHeight));

      grid[v].x = newX;

      grid[v].y = newY;

      var numsArray = [newX, newY, 0.95*windowHeight - newX, 0.95*windowHeight - newY];

      var length = min(numsArray);

      CircleRad[v] = length;

​

      for(var i = 0; i < v; i++){

        var test = abs(grid[i].dist(grid[v]) - CircleRad[i]);

        if(test < CircleRad[v]){

          CircleRad[v] = test;

        }

      }

    }

  }

}

​

//This function creates the circles, by generating a random location and determining its radius

function CircleDraw() {

  for(var v = 0; v < numOfCirc; v++){

    var LocX = int(random(0.95*windowHeight));

    var LocY = int(random(0.95*windowHeight));

    var numsArray = [LocX, LocY, abs(0.95*windowHeight - LocX), abs(0.95*windowHeight - LocY)];

    var length = min(numsArray);

    grid.push(createVector(LocX, LocY));

    CircleRad.push(length);

    // by checking its radius with the distance between 2 circles and the other circles radius, 

    //you can adjust the value to fit accordingly so no circles will intersect.

    for(var i = 0; i < grid.length-1; i++){

      var test = abs(grid[i].dist(grid[v]) - CircleRad[i]);

      if(test < CircleRad[v]){

        CircleRad[v] = test;

      }

    }

  }

}