Bouncing DVD Logo
Bouncing DVD Logo
The site is built with:
- HTML/CSS/JS
- p5.js
Code
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
todvd8.svg
are found in theassets/
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.
This logo of the DVD reminds me of the old-time of the early age of my life. Now the audience is moving towards new technologies like https://masterbundles.com/best-ocean-google-slides-and-powerpoint-themes/ to use the new themes on the PowerPoint. You can add up the multiple themes whenever you need.