Skip to content
← Back to Community
Bouncing DVD Logo
Profile icon
remarkablemark

Bouncing DVD Logo

Bouncing DVD Logo

The site is built with:

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 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.

Voters
Profile icon
JohnAsidera
Profile icon
remarkablemark
Comments
hotnewtop
Profile icon
Chassteven372

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.