nzoom = 500;

​

function setup() {

  createCanvas(1920, 1080);

  d = pixelDensity();

  cols = ["#1fbfff","#1fdaff","#2ceef2","#8ccfb9","#d2b04b","#ffb01f","#fd8f21","#fc6722","#ea4334","#d7474c"];

  cirs = [];

  spots = [];

  for(i = 0; i< width; i++){

    for(j = 0; j < height; j++){

      spots[spots.length] = new Spot(i, j, spots.length);

    }

  }

  i = floor(random(spots.length));

  background(0);

  fill(255);

  noStroke();

}

​

function draw() {

  loadPixels();

  if(spots[i] !== undefined){

    spots[i].update()

  } else {

    i = floor(random(spots.length));

  }

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

    cirs[j].update();

  }

}

​

class Spot{

  constructor(x, y, index){

    this.index = index; 

    this.pos = createVector(x, y);

    this.npos = createVector(x, y);

    this.sp = createVector(1, 0);

    this.test = createVector(0, 0);

    this.testp = 0;

    this.testc = 0;

    this.fail = false;

    this.angle = false;

    this.rad = false;

    this.i = 0;

    this.c = c;

    c++

    this.col = color(cols[this.c % cols.length]);

    fill(this.col);

  }

  update(){ 

    for(this.i = 0; this.i < 100; this.i++){

      this.test = p5.Vector.add(this.pos, this.sp);

      this.testp = 4 * (d * floor(this.test.y)) * (d * width) + 4 * (d * floor(this.test.x));

      this.testc = pixels[this.testp] + pixels[this.testp + 1] + pixels[this.testp + 2];

      if(this.testc == 0 && this.test.x > 0 && this.test.x < width & this.test.y > 0 && this.test.y < height){

        this.sp.setHeading(this.sp.heading() + PI * 0.01);

        this.rad = false

      } else {

        this.rad = true;

        this.i = 100;

      }

    }

    if(this.rad == true || this.sp.mag() > 10){

      this.testp = 4 * (d * floor(this.pos.y)) * (d * width) + 4 * (d * floor(this.pos.x));

      this.testc = pixels[this.testp] + pixels[this.testp + 1] + pixels[this.testp + 2];

      if(this.testc == 0){

        // this.col = color(cols[c % cols.length])

        // fill(this.col)

        // circle(this.pos.x, this.pos.y, this.sp.mag() * 2 - 1);

        cirs[cirs.length] = new Cir(this.pos.x, this.pos.y, this.sp.mag() * 2 - 2)

        c++

      } else {

        spots[this.index] = undefined;

        i = floor(random(spots.length));

      }

      this.sp.setHeading(noise(this.pos.x / nzoom, this.pos.y / nzoom) * TWO_PI);

      this.sp.setMag(this.sp.mag() * 2)

      this.npos = p5.Vector.add(this.sp, this.pos);

      this.pos = createVector(this.npos.x, this.npos.y);

      this.sp.setMag(1);

      if(this.pos.x < 0 || this.pos.x > width || this.pos.y < 0 || this.pos.y > height){

        spots[this.index] = undefined;

        i = floor(random(spots.length));

      }

    } else {

      this.sp.setMag(this.sp.mag() + 1);

    }

  }

}

​

class Cir{

  constructor(x, y, size){

    this.pos = createVector(x, y);

    this.c1 = c % cols.length;

    if(this.c1 < cols.length - 1){

      this.c2 = this.c1 + 1;

    } else {

      this.c2 = 0;

    }

    this.ca = 0;

    this.size = size;

    this.col = undefined;

  }

  update(){

    this.ca = this.ca + 0.075;

    if(this.ca >= 1){

      this.ca = 0;

      if(this.c2 < cols.length - 1){

        this.c1 = this.c2;

        this.c2++;

      } else {

        this.c1 = this.c2;

        this.c2 = 0;

      }

    }

    this.col = lerpColor(cols[this.c1],cols[this.c2], this.ca);

    fill(this.col);

    circle(this.pos.x, this.pos.y, this.size);

  }

}