Hey so im making an ambient DVD like animation, and i have 3 circles/DVD logos for this setup, i wanna set it’s initial position to be random on a 100% width and 100vh height container (fullscreen) Here’s my current setup:
const container = document.querySelector('.background-container');
const orange = document.querySelector('.circ-o');
const lime = document.querySelector('.circ-l');
const green = document.querySelector('.circ-g');
const FPS = 30;
// Orange circle moving velocity variables
let xPositionO = 10;
let yPositionO = 10;
let xSpeedO = 5;
let ySpeedO = 5;
// Lime circle moving velocity variables
let xPositionL = 10;
let yPositionL = 10;
let xSpeedL = 5;
let ySpeedL = 5;
// Green circle moving velocity variables
let xPositionG = 10;
let yPositionG = 10;
let xSpeedG = 5;
let ySpeedG = 5;
function update(){
orange.style.left = xPositionO + 'px';
orange.style.top = yPositionO + 'px';
lime.style.left = xPositionL + 'px';
lime.style.top = yPositionL + 'px';
green.style.left = xPositionG + 'px';
green.style.top = yPositionG + 'px';
}
setInterval(() => {
if(xPositionO + orange.clientWidth >= window.innerWidth || xPositionO <= 0){
xSpeedO = -xSpeedO;
}
if(yPositionO + orange.clientWidth >= window.innerWidth || yPositionO <= 0){
ySpeedO = -ySpeedO;
}
if(xPositionL + lime.clientWidth >= window.innerWidth || xPositionL <= 0){
xSpeedL = -xSpeedL;
}
if(yPositionL + lime.clientWidth >= window.innerWidth || yPositionL <= 0){
ySpeedL = -ySpeedL;
}
if(xPositionG + green.clientWidth >= window.innerWidth || xPositionG <= 0){
xSpeedG = -xSpeedG;
}
if(yPositionG + green.clientWidth >= window.innerWidth || yPositionG <= 0){
ySpeedG = -ySpeedG;
}
xPositionO += xSpeedO;
yPositionO += ySpeedO;
xPositionL += xSpeedL;
yPositionL += ySpeedL;
xPositionG += xSpeedG;
yPositionG += ySpeedG;
update();
//1000ms divided by FPS constant
}, 1000/FPS)
I set all the xPosition and yPosition of all the circle to start at 10 and i then added a ‘px’ unit in the update function which will be executed each 1000/30ms, each time the 3 circles/DVD logos hit the border of the container, it would then set its speed to a negative value, making it look as if it is bouncing from the borders
Any help on this would be greatly appreciated!