let cls = false;

let clstimer = 100;

let gfx_x, gfx_y;

​

let paused = false;

​

function keyPressed() {

  if (key == " ") paused = !paused;

}

​

// https://sighack.com/post/fifteen-ways-to-draw-a-line

function dline(x1, y1, x2, y2, weight, value, _type, dir) {

  /*

   * Draw a line from (x1, y1) to (x2, y2) with a given

   * weight and darkness (value)

   */

  gfx2.strokeWeight(weight);

  let _c = color(255);//colors[1]; // color(0);

  _c._array[3] = value;

  gfx2.stroke(_c);

​

  // y=mx+b

  let dy = y2 - y1;

  let dx = x2 - x1;

  let m = dy / dx;

​

  if (_type == null) line(x1, y1, x2, y2);

  else if (_type == "jagged") {

    let variance = weight / 2;

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

      strokeWeight(random(0.1, 0.8));

      line(

        x1 + random(-variance, variance),

        y1 + random(-variance, variance),

        x2 + random(-variance, variance),

        y2 + random(-variance, variance)

      );

    }

  } else if (_type == "stippled") {

    let _x = x1;

    for (let _y = y1; _y < y2; _y++) {

      // for (let _x = x1; _x < x2; _x++) {

      _c._array[3] = random(1.0);

      fill(_c);

      noStroke();

      circle(_x, _y, random(weight / 2, weight));

      _x++;

      // }

    }

  } else if (_type == "stippled2") {

    if (dir) {

      let _x = x1;

      for (let _y = y1; _y < y2; _y += random(0.5, 3.0)) {

        // for (let _x = x1; _x < x2; _x++) {

        _c._array[3] = random(1.0);

        gfx2.fill(_c);

        gfx2.noStroke();

        gfx2.circle(_x, _y, random(weight / 2, weight));

        _x += random(-0.2, 0.2); //0.5,3.0);

        // }

      }

    } else {

      let _y = y1;

      for (let _x = x1; _x < x2; _x += random(0.5, 3.0)) {

        // for (let _x = x1; _x < x2; _x++) {

        _c._array[3] = random(1.0);

        gfx2.fill(_c);

        gfx2.noStroke();

        gfx2.circle(_x, _y, random(weight / 2, weight));

        _y += random(-0.2, 0.2); //0.5,3.0);

        // }

      }

    }

  }

}

​

class Circ {

  constructor(x, y, vx, vy, size, col, gfx) {

    this.x = x;

    this.y = y;

    this.vx = vx;

    this.vy = vy;

    this.size = size;

    this.col = col;

    this.gfx = gfx;

    this.turnt = false;

  }

​

  update() {

    this.x += this.vx;

    this.y += this.vy;

​

    if (random() > 0.99 && !this.turnt && this.y < height - height / 6) {

      this.vx = random([-this.vy, this.vy]);

      this.turnt = true;

    }

    if (random() > 0.99 && this.y < height - height / 6) {

      this.vx = random([-this.vy, this.vy]);

      this.turnt = true;

    }

​

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

      this.x = random(40+10,width-40-10);

      this.y = random(height, height * 2);

      this.turnt = false;

    }

  }

​

  draw() {

    this.gfx.noStroke();

    this.gfx.fill(this.col);

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

  }

}

​

function drawShadow(b, g) {

  g.drawingContext.shadowOffsetX = 3;

  g.drawingContext.shadowOffsetY = 3;

  g.drawingContext.shadowBlur = b;

  g.drawingContext.shadowColor = color(0, 0, 0, 50); //"black";

}

​

function setup() {

  circles = [];

  // chromotome / tundra1

  bgcolor = color(242, 242, 242);

  colors = [

    color(64, 112, 140),

    color(142, 153, 140),

    color(93, 63, 55),

    color(237, 105, 84),

    color(242, 233, 226),

  ];

  createCanvas(1000, 1000);

  gfx = createGraphics(width, height);

  gfx2 = createGraphics(width, height);

  gfx_x = 0;

  gfx_y = 0;

​

  background(bgcolor);

​

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

    circles.push(

      new Circ(

        random(40+10,width-40-10),//width / 2,

        random(height, height * 2),

        0,

        random(-1.0, -3.0), //-5.0),

        20,

        random(colors),

        gfx

      )

    );

  }

​

  y_off = height-20;

  frameRate(30);

}

​

let glitchTimer = 0;

​

let y_off;

function drawMoire() {

  gfx2.clear();

  for (let y1 = 40; y1 < height - 40; y1 += 20) {

    gfx2.noStroke();

    gfx2.fill(color(0, 0, 0, map(y1, 40, height - 40, 0, 255)));

    gfx2.rect(40, y1, 100, 10);

    gfx2.rect(40, y1, 100, 10);

​

    // gfx.noStroke();

    // let _c = bgcolor;

    // _c._array[3] = map(y1,40,height-40,0.0, 1.0);

    // gfx.fill(_c);

    //

    gfx2.rect(width - 80 - 60, y1, 100, 10);

  }

​

  // gfx2.stroke(color(255,0,255,random(100)))

  // gfx2.strokeWeight(random(0.5, 2.0));

  // gfx2.line(0,y_off,width,y_off);

  dline(0, y_off, width, y_off, random(0.5,2.0), color(255,0,255,random(255)), "stippled2", false);

  y_off -= random(0.5, 2.0);

  if (y_off < 20) y_off = height;

  image(gfx2, 0, 0);

}

​

let step = 0;

​

function draw() {

  if (!paused) {

    let o = 20;

​

    // background(bgcolor);

​

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

      circles[i].update();

      circles[i].draw();

    }

    drawShadow(1.0, gfx);

​

    drawMoire();

    image(gfx, gfx_x, gfx_y);

​

    if (frameCount % 500 == 0) cls = true;

    if (cls) {

      noStroke();

      let _c = bgcolor;

      _c._array[3] = map(clstimer, 100, 0, 0.0, 1.0);

      fill(_c);

      rect(0, 0, width, height);

      clstimer--;

    }

    glitchTimer++;

    if (clstimer <= 0) {

      clstimer = 100;

      cls = false;

      gfx.clear();

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

        circles[i].y = random(height, height * 2);

​

        if (random() > 0.5) {

          circles[i].vx = 0;

          circles[i].x = width / 2;

        }

      }

      gfx_x = 0;

      gfx_y = 0;

      glitchTimer = 0;

      step++;

    }

​

    if (!cls && step == 1) {

      if (random() > map(glitchTimer, 0, 500, 0.999, 0.7)) {

        // scale(random(100), random(100));

        console.log("glitch");

​

        for (let i = 0; i < random(100); i++) {

          noStroke();

          if (random() > 0.5) fill(255, 0, 255, random(120));

          else fill(0, 255, 0, random(120));

          rect(random(width), random(height), random(width), random(height));

        }

        for (let i = 0; i < random(150); i++) {

          noStroke();

          fill(bgcolor);

          rect(random(width), random(height), random(width), random(50));

        }

      }

​

      // if (random() > 0.99) {

      //   gfx_x += random(width/2);

      //   gfx_y += random(height/2);

      // }

    }

​

    noStroke();

    fill(200);

    rect(0, 0, o, height);

    rect(0, 0, width, o);

    rect(width - o, 0, o, height);

    rect(0, height - o, width, o);

    if (step > 1) {

      console.log("done");

      noLoop();

    }

  }

}

​