//-------------------------
class RandomWalker {
  constructor(starting_x, color) {
    this.x = starting_x;
    this.y = 0;
    this.color = color;
  }
  
  draw() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, 1, 1);
    let val = Math.round(Math.random()) * 2 - 1;
    this.x += val;
    // console.log(val);
    this.y ++;
    if (this.x > canvas.width) this.x = 0;
    if (this.x < 0) this.x = canvas.width;
    if (this.y > canvas.height) this.y = 0;
    if (this.y < 0) this.y = canvas.height;
  }
}

// Global Variables
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize", () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

let numRandomWalkers = 8;
let randomWalkers = [];

//-------------------------
function setup() {
  ctx.fillStyle = "rgba(0, 0, 0, 0)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  for(let i = 0; i < numRandomWalkers; i++) {
    let h = Math.floor(360 / numRandomWalkers * i);
    let color = `hsl(${h} 100% 50%)`;
    
    randomWalkers.push(new RandomWalker(i * (canvas.width / 3 / numRandomWalkers) + canvas.width/2 - canvas.width/6, color));
  }
}
setup();

//-------------------------
function draw() {
  ctx.fillStyle = "rgba(0, 0, 0, 0.008)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  if(randomWalkers) {
    for(const randomWalker of randomWalkers) {
      randomWalker.draw();
    }
  }
  
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);