Ava

Ava.md

Ava

A project created by Chad Boyce on LiveCodes.

index.html

<canvas id="canvas1"></canvas>

script.js

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Canvas settings
ctx.fillStyle = 'white';
ctx.strokeStyle = 'white';
ctx.lineWidth = 1;

class Particle {
  constructor(effect) {
    this.effect = effect;
    this.x = Math.floor(Math.random() * this.effect.width);
    this.y = Math.floor(Math.random() * this.effect.height);
  }

  draw(context) {
    context.fillRect(this.x, this.y, 10, 10);
  }
}

class Effect {
  constructor(width, height) {
    this.width = width;
    this.height = height;
    this.particles = [];
    this.numberOfParticles = 50;
  }

  init() {
    // create particles
    for (let i = 0; i < this.numberOfParticles; i++) {
      this.particles.push(new Particle(this));
    }
  }

  render() {
    this.particles.forEach((particle) => {
      particle.draw(ctx);
    });
  }
}

let effect = new Effect(canvas.width, canvas.height);
effect.init();
effect.render(ctx);
console.log(effect);

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

canvas {
  background: gray;
  border: orange 2px dashed;
  position: absolute;
  top: 0;
  left: 0;
}