Bouncing DVD Logo

The site is built with:

• HTML/CSS/JS
• p5.js

Code

• Repl.it demo
• GitHub repository

Explanation

Initialize the variables:

var images = [];
var imageIndex = 0;
var position = createVector(0, 0);
var velocity = p5.Vector.fromAngle(45);
velocity.mult(5);

During preload(), load the DVD images:

function preload() {
  for (var i = 1; i < 8; i++) {
    var image = loadImage('assets/dvd' + i + '.svg');
    images.push(image);
  }
}

dvd1.svg to dvd8.svg are found in the assets/ directory.

During setup(), create a canvas with the same width and height as the window:

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
}

During draw(), move the DVD towards its path and check for boundary collision:

function draw() {
  background('#111');
  var image = images[imageIndex];
  var hasCollision = checkBoundaryCollision(image);
  if (hasCollision) {
    imageIndex++;
    if (imageIndex + 1 > images.length) {
      imageIndex = 0;
    }
    image = images[imageIndex];
  }
  position.add(velocity);
  image(image, position.x, position.y);
}

Here's how the boundary collision is checked:

function checkBoundaryCollision(image) {
  var hasCollision = false;

  // left or right collision
  if (position.x < 0 || position.x + image.width > width) {
    velocity.x *= -1;
    hasCollision = true;
  }

  // top or bottom collision
  if (position.y < 0 || position.y + image.height > height) {
    velocity.y *= -1;
    hasCollision = true;
  }

  return hasCollision;
}

---

This article was originally published on remarkablemark.org on January 12, 2021.