Infinite Loop Question

Hello! I'm attempting to infinitely move an object randomly across the viewport. Below contains some code I used to be able to set random position (based on current position). However, I need to be able to loop this consistently. Which loop should I use?
var element = document.querySelector(".blob");
var blob = element.getBoundingClientRect();

const x = blob.x;
const y = blob.y;

function randomX(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomY(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

element.style.left = element.style.left + randomX(x, 1000) + "px";
element.style.top= element.style.top + randomX(y, 1000) + "px";
var element = document.querySelector(".blob");
var blob = element.getBoundingClientRect();

const x = blob.x;
const y = blob.y;

function randomX(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomY(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

element.style.left = element.style.left + randomX(x, 1000) + "px";
element.style.top= element.style.top + randomX(y, 1000) + "px";
33 Replies
Jochem
Jochem15mo ago
setInterval is fine if you're not too worried about having the interval be millisecond perfect
Matt
Matt15mo ago
I was thinking setInterval as I want to also add a short delay between iterations Cool thank you 👍
let blob = document.querySelector(".blob");
let position = blob.getBoundingClientRect();

let x = blob.x;

function randomX(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function newPosition () {
let newX = randomX(x, 1000) + "px";
blob.style.left = newX;
console.log("success");
}

setInterval(newPosition, 100);
let blob = document.querySelector(".blob");
let position = blob.getBoundingClientRect();

let x = blob.x;

function randomX(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function newPosition () {
let newX = randomX(x, 1000) + "px";
blob.style.left = newX;
console.log("success");
}

setInterval(newPosition, 100);
@Jochem Do you know why this is returning NaN?
Jochem
Jochem15mo ago
which is? randomX?
Matt
Matt15mo ago
newPosition is returning NaN when running
Jochem
Jochem15mo ago
newPosition doesn't return anything
Matt
Matt15mo ago
Shouldn't running the function change the left coordinates?
Jochem
Jochem15mo ago
ah! You've got x set to blob.x it should be position.x
Matt
Matt15mo ago
Missed that 😅 Thank you 😀
Jochem
Jochem15mo ago
np!
Matt
Matt15mo ago
@Jochem Hey if you don't mind, I have a question regarding this. The current code is working now, but I'm looking to have positions change with an animation. I added to the object's CSS class - transition-timing-function: ease; but the position changes are still abrupt. Is there a simple solution to make the position changes gradual?
SeppeB
SeppeB15mo ago
I think you'll have to set a transition, so in the css class try transition: [the property] [the duration] [timing function] So you could say transition: left 100ms ease; I think that should work, Here is a video from Kevin about that: https://youtu.be/YYlFFMc0RAg?si=wqwPf9tfArb8IYJ1
Kevin Powell
YouTube
Animating with CSS Transitions - Using transitions in action
There are a lot of fun and creative ways we can use CSS transitions, and in this video I explore a few of them by animating a few different things, looking at using custom timing functions and how using transition delay can help improve user experience along the way. High performance transitions: https://medium.com/outsystems-experts/how-to-ach...
Matt
Matt15mo ago
I tried this right before you posted actually. It's still yielding the same result
SeppeB
SeppeB15mo ago
Did you set the transition on left and on top?
Matt
Matt15mo ago
transition: left 100ms ease, top 100ms ease; This works actually:
SeppeB
SeppeB15mo ago
Could it be that they are transitioning?
Matt
Matt15mo ago
.blobTransition {
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;
}
.blobTransition {
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-ms-transition: all 100ms linear;
-o-transition: all 100ms linear;
transition: all 100ms linear;
}
blob.classList.add('blobTransition'); ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Would you happen to know why the first iteration doesn't get the transition class?
let blob = document.querySelector(".blob");
let position = blob.getBoundingClientRect();

let x = position.x;
let y = position.y;

function randomX(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomY(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function newPosition () {
let newX = randomX(x, (screen.width - 500)) + "px";
let newY = randomX(y, (screen.height - 500)) + "px";
blob.classList.add('blobTransition');
blob.style.left = newX;
blob.style.top = newY;
console.log("success");
}

setInterval(newPosition, 1000);
let blob = document.querySelector(".blob");
let position = blob.getBoundingClientRect();

let x = position.x;
let y = position.y;

function randomX(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomY(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function newPosition () {
let newX = randomX(x, (screen.width - 500)) + "px";
let newY = randomX(y, (screen.height - 500)) + "px";
blob.classList.add('blobTransition');
blob.style.left = newX;
blob.style.top = newY;
console.log("success");
}

setInterval(newPosition, 1000);
SeppeB
SeppeB15mo ago
what happens if you add the class in html?
Matt
Matt15mo ago
Doesn't fix the issue Seems to only happen on the first loop, I moved the class change before position change and still persisting
SeppeB
SeppeB15mo ago
do you have this code in a codepen perhaps?
SeppeB
SeppeB15mo ago
i think it's because you don't have an initial left and top value it doesn't transition because it has no value to transition from, normally if you add left:0; top:0; to .blob it should work. also, if you do a newPosition(); right before the setInterval the blob will instantly start moving
Matt
Matt15mo ago
👍 Awesome, thank you so much
SeppeB
SeppeB15mo ago
no problem, happy to help!
Matt
Matt15mo ago
!close -close
Jochem
Jochem15mo ago
you don't need to close posts, you can add a solved tag if you want
Matt
Matt15mo ago
Okay cool
Jochem
Jochem15mo ago
they autoclose after two weeks or something
Matt
Matt15mo ago
@Jochem I was going to make another thread, but I don't want to spam them. Would I be able to ask you a CSS-related question here?
Jochem
Jochem15mo ago
it's prefered to make a new one actually. That way the topic matches what gets discussed, and it helps other people find answers too later no worries about spamming threads
Matt
Matt15mo ago
Okay, thank you
Want results from more Discord servers?
Add your server