let circles = [];

let lines = [];

​

//x and y values used to draw "brush" strokes

let x = 10;

let y = 10;

​

function setup() {

  //random number of circles generated each time you run this program

  let circNum = random(5, 20);

  //3-4 poster ratio, and some other basic setup parameters

  createCanvas(600, 800);

  colorMode(HSB, 100, 100, 100);

  background(100);

  ellipseMode(CENTER);

  rectMode(CENTER);

  //creates 25000 stroke values that fill the canvas left to right, top to bottom

  for (let i = 0; i < 25000; i++) {

    lines[i] = new Line();

    if (x >= width-10) {

      x = 10;

      y = y+5; } else {

        x = x+7;

        }

    if (y >= height - 5) {

      break;

    }

  }

  //creates new "Circle" object, including a set of circle

  ///coordinates, as well as color value and grow direction

  //for each of the random number of circles declared in "circNum"

  for (let i = 0; i < circNum; i++) {

    circles[i] = new Circle();

    }

}

​

function draw() {

  frameRate(20)

  //draw a white rectangle to erase everything each time the loop runs

  fill(100);

  noStroke();

  rect(width/2, height/2, width, height);

  //reset the colors for each line each time the draw loop is run

  //so that circles can move freely without leaving color behind

  for (let h = 0; h < lines.length; h++) {

    lines[h].lC = random(map(lines[h].lY, 0, height, 60, 50), map(lines[h].lY, 0, height, 65, 55));

  }

  //for each line value, cycle through each circle value

  //and decide if the dist between line[n]'s initial x/y coord and circle[n]'s x/y coord

  //is less than the circle's radius, i.e. falls within an imaginary circle

  //if so, assign a new color value to form a circle

  //the new color value selects a random value from two slightly different ranges

  //which are mapped based on the y value for each stroke

  for (let i = 0; i < lines.length; i++) {

    for (let j = 0; j < circles.length; j++) {

      if (dist(lines[i].lX, lines[i].lY, circles[j].cX, circles[j].cY) < (circles[j].cW)/2) {

        lines[i].lC = random(map(lines[i].lY, 0, height, 15, 7), map(lines[i].lY, 0, height, 20, 10)); 

        }

    }

    lines[i].render(); //now that a color has been determined, go ahead and render the line

  }

  //increment circle width value until it hits an edge, then reverse growth until it gets <10px wide

  //then, make it reappear somewhere else on the screen

  for (let i = 0; i < circles.length; i++) {

    if ((circles[i].cY + circles[i].cW/2 >= height) ||

        (circles[i].cY - circles[i].cW/2 <= 0) ||

        (circles[i].cX + circles[i].cW/2 >= width) ||

        (circles[i].cX - circles[i].cW/2 <= 0)) {

        circles[i].growdir *= -1

      } 

      else if (circles[i].cW < 10) {

        circles[i].cX=random(width);

        circles[i].cY=random(height);

        circles[i].growdir *= -1;

      } 

      circles[i].cW += 2*circles[i].growdir;

    }

}

​

//Circle class, constructor simply creates a random width and a random x/y (with circle completely in screen bounds)

//as well as a grow direction that will be retained for each circle

class Circle {

  constructor() {

    this.cW = random(20, 200);

    this.cX = random(this.cW/2, width-this.cW/2);

    this.cY = random(this.cW/2, height-this.cW/2);

    this.growdir = 1;

  }

}

​

//and a Line class that creates x/y at the values declared in Setup and an initial line color 

class Line {

  constructor() {

    this.lX = x;

    this.lY = y;

    this.lC; //doesn't matter since set again first thing in draw

  }

  //and simply render a line with a random stroke weight and length, based on the coords/color set above

  render(){

    stroke(this.lC, 100, 100, 100);

    strokeWeight(random(4, 8));

    line(this.lX, this.lY, this.lX+random(-10, 10), this.lY+random(-10, 10));

  }

}

​

​