Common interview topics for programming interviews.

// create background element
let canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.style.cssText = `
background: var(--background);
position:fixed;
left:0;
top:0;
z-index:-99999;
`
// set it's size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let context = canvas.getContext('2d');

// this will be populated and used later
drawableObjectList = [];

class Splash {
  constructor(distance, x, y) {
    this.distance = distance;
    this.x = x;
    this.y = y;
    this.time = 0;
  }
  draw() {
    context.fillStyle = "#2a232300";
    context.strokeStyle = `rgba(42, 35, 35, ${this.distance + 0.1})`;

    let splashSize = this.distance * (this.time / 100);

    context.beginPath();
    context.ellipse(this.x, this.y, 100 * splashSize, 50 * splashSize, 0, 0, Math.PI * 2);
    context.fill();
    context.stroke();

    if (this.time > 100) {
      drawableObjectList = drawableObjectList.filter((item) => { return item !== this });
    }

    this.time += 1;
  }
}
// this is the object that'll look cool
class Drop {
  constructor() {
    this.x = Math.random() * window.innerWidth;
    this.y = Math.random() * window.innerHeight;

    this.distance = Math.random();
    this.velocity = [(Math.random()-.5) * 5, this.distance + 0.1];
  }
  draw() {
    context.fillStyle = `rgba(255, 255, 255, ${this.distance + 0.1})`;
    context.strokeStyle = `rgba(255, 255, 255, ${this.distance + 0.1})`;

    // draw point
    context.beginPath();
    context.moveTo(this.x, this.y);
    context.lineTo(this.x, this.y - this.distance * 100);
    context.stroke();
    // simulate gravity
    const gravity = 1.05;
    // move point
    this.y += this.velocity[1] ;
    this.x += this.velocity[0] ;
    // Apply gravity to our velccity.
    this.velocity[1] += gravity;

    // keep point in bounds
    if (this.y > window.innerHeight - (1 - this.distance) * 300) {
      // Add splash
      drawableObjectList.push(new Splash(this.distance, this.x, this.y))

      // Apply bounce based on floor
      this.velocity[1] = this.velocity[1] * -1 * 0.95
    }

    // keep point in bounds
  if (this.x > window.innerWidth || this.x < 0) {
      // Add splash

      // Apply bounce based on wall
      this.velocity[0] = this.velocity[0] * -1
    }
  }
}

// populate element array
for (let i = 0; i < 100; i++) {
  drawableObjectList.push(new Drop());
}

function loop() {
  // Loop and clear frame
  requestAnimationFrame(loop);
  context.clearRect(0, 0, window.innerWidth, window.innerHeight);

  // Draw objects.
  drawableObjectList.forEach((point) => {
    point.draw();
  });

  // Handle page size change
  if (canvas.width != window.innerWidth) {
    canvas.width = window.innerWidth;
  }
  if (canvas.height != window.innerHeight) {
    canvas.height = window.innerHeight;
  }
}
loop();