let colors;

let circ_x, circ_y, circ_radius, circ_diameter, circ_rad_sq;

let state;

let recorder;

​

// https://stackoverflow.com/questions/42437971/exporting-a-video-in-p5-js

const btn = document.querySelector("button");

let chunks = [];

function record() {

  chunks.length = 0;

  // let stream = document.querySelector('canvas').captureStream(30),

  //   recorder = new MediaRecorder(stream);

  recorder.ondataavailable = (e) => {

    if (e.data.size) {

      chunks.push(e.data);

    }

  };

  recorder.onstop = exportVideo;

  // btn.onclick = e => {

  //   recorder.stop();

  //   btn.textContent = 'start recording';

  //   btn.onclick = record;

  // };

  recorder.start();

  // btn.textContent = 'stop recording';

}

​

function exportVideo(e) {

  var blob = new Blob(chunks);

  var vid = document.createElement("video");

  vid.id = "recorded";

  vid.controls = true;

  vid.src = URL.createObjectURL(blob);

  document.body.appendChild(vid);

  vid.play();

}

​

function getRandomInt(min, max) {

  min = Math.ceil(min);

  max = Math.floor(max);

  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive

}

​

function inCircle(x, y, cx, cy, rad_sq) {

  // (x - center_x)^2 + (y - center_y)^2 < radius^2.

  x += random(-25, 25);

  y += random(-25, 25);

  if ((x - cx) ** 2 + (y - cy) ** 2 < rad_sq) return true;

  return false;

}

class Particle {

  constructor(x, y, vx, vy) {

    this.position = createVector(x, y);

    this.velocity = createVector(vx, vy);

    this.life = random(100, 500);

​

    if (state == 0) this.color = colors[0];

    //

    else this.color = color(0);

    this.color._array[3] = random(50) / 255;

    //color(0,0,0,random(255));

    this.diameter = random(5);

  }

​

  update() {

    this.position.x += this.velocity.x;

    this.position.y += this.velocity.y;

​

    if (

      !inCircle(this.position.x, this.position.y, circ_x, circ_y, circ_rad_sq)

    ) {

      this.velocity.x *= -1;

      this.velocity.y *= -1;

    }

​

    if (random() > 0.9) {

      this.velocity.x = random(-1, 1);

      this.velocity.y = random(-1, 1);

      this.color._array[3] = random(50) / 255;

    }

    // if (getRandomInt(0,1000) > 990) {

    //   this.color = colors[getRandomInt(0, colors.length)];

    // }

​

    this.life--;

    if (this.life <= 0) return false;

    return true;

  }

  draw() {

    noStroke();

    fill(this.color);

    circle(this.position.x, this.position.y, this.diameter);

  }

}

​

function generate() {

  let num_lines = 500;

  background(0);

​

  // lines

  // stroke(colors[]);

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

    let _c = colors[2];

    _c._array[3] = random(255) / 255;

    stroke(_c);

    let _x1 = random(-width - 1, width + 1);

    let _x2 = _x1 + width;

    let _y1 = random(-height - 1, height + 1);

    let _y2 = _y1 + height;

​

    strokeWeight(random(0.25, 2.0));

    line(_x1, _y1, _x2, _y2);

  }

​

  //   for (let i = 0; i < num_lines; i++) {

  //     let _c = colors[2];

  //     _c._array[3] = random(255) / 255;

  //     stroke(_c);

  //     let _x2 = random(-width - 1, width + 1);

  //     let _x1 = _x2 + width;

  //     let _y1 = random(-height - 1, height + 1);

  //     let _y2 = _y1 + height;

​

  //     strokeWeight(random(0.25, 2.0));

  //     line(_x1, _y1, _x2, _y2);

  //   }

​

  // noStroke();

  // fill(color(0)); //colors[0]);

  // circle(circ_x, circ_y, circ_diameter);

​

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

    let _x, _y;

    do {

      _x = random(width / 2 - circ_radius, width / 2 + circ_radius);

      _y = random(height / 2 - circ_radius, height / 2 + circ_radius);

    } while (!inCircle(_x, _y, circ_x, circ_y, circ_rad_sq));

    // if (inCircle(_x, _y, circ_x, circ_y, circ_rad_sq))

    particles.push(new Particle(_x, _y, random(-1, 1), random(-1, 1)));

  }

}

​

function setup() {

  frameRate(30);

​

  num_particles = 40000;

  particles = [];

  // createCanvas(640, 480);

  createCanvas(3840, 2160);

  background(0);

​

  state = 0;

​

  // https://www.colourlovers.com/palette/4568532/Cyberpunk

  colors = [

    color("#F2E70F"),

    color("#FD3799"),

    color("#72EDFF"),

    color("#40347C"),

    color("#131524"),

  ];

​

  circ_x = width / 2;

  circ_y = height / 2;

  circ_radius = 1000;

  circ_diameter = circ_radius * 2;

  circ_rad_sq = circ_radius ** 2;

​

  generate();

​

  let stream = document.querySelector("canvas").captureStream(30),

    recorder = new MediaRecorder(stream);

  record();

}

​

function draw() {

  for (let i = particles.length - 1; i >= 0; i--) {

    let r = particles[i].update();

    particles[i].draw();

​

    if (!r) particles.splice(i, 1);

  }

  if (particles.length === 0) {

    console.log(`state: ${state}`);

    state++;

​

    if (state == 1) {

      circ_x = width / 2;

      circ_y = height / 2;

      circ_radius = circ_radius / 2;

      circ_diameter = circ_radius * 2;

      circ_rad_sq = circ_radius ** 2;

​

      for (let i = 0; i < num_particles / 4; i++) {

        let _x, _y;

        do {

          _x = random(width / 2 - circ_radius, width / 2 + circ_radius);

          _y = random(height / 2 - circ_radius, height / 2 + circ_radius);

        } while (!inCircle(_x, _y, circ_x, circ_y, circ_rad_sq));

        // if (inCircle(_x, _y, circ_x, circ_y, circ_rad_sq))

        particles.push(new Particle(_x, _y, random(-1, 1), random(-1, 1)));

      }

    } else {

      console.log("done");

​

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

        let _c = color(255, 255, 255, 50); // colors[2];

        _c._array[3] = random(100) / 255;

        stroke(_c);

        let _x2 = random(-width - 1, width + 1);

        let _x1 = _x2 + width;

        let _y1 = random(-height - 1, height + 1);

        let _y2 = _y1 + height;

​

        strokeWeight(random(0.25, 2.0));

        line(_x1, _y1, _x2, _y2);

      }

​

      noLoop();

      recorder.stop();

    }

​

    // generate();

  }

}

​