Kevin Powell - Community•16mo ago

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•16mo ago

setInterval is fine if you're not too worried about having the interval be millisecond perfect

MattOP•16mo 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•16mo ago

which is? randomX?

MattOP•16mo ago

newPosition is returning NaN when running

Jochem•16mo ago

newPosition doesn't return anything

MattOP•16mo ago

Shouldn't running the function change the left coordinates?

Jochem•16mo ago

ah! You've got x set to blob.x it should be position.x

MattOP•16mo ago

Missed that 😅 Thank you 😀

Jochem•16mo ago

np!

MattOP•16mo 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•16mo 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...

MattOP•16mo ago

I tried this right before you posted actually. It's still yielding the same result

MattOP•16mo ago

https://gyazo.com/4dbd217b08f2472f138bdc893e013198

Gyazo

Gyazo Screen Video

MattOP•16mo ago

Do I need to trigger a class with JS? https://css-tricks.com/controlling-css-animations-transitions-javascript

SeppeB•16mo ago

Did you set the transition on left and on top?

MattOP•16mo ago

transition: left 100ms ease, top 100ms ease; This works actually:

SeppeB•16mo ago

Could it be that they are transitioning?

MattOP•16mo 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);

MattOP•16mo ago

https://gyazo.com/f1dd87e6efb7ed42bd914f6489919df8

Gyazo

Gyazo Screen Video

SeppeB•16mo ago

what happens if you add the class in html?

MattOP•16mo 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•16mo ago

do you have this code in a codepen perhaps?

MattOP•16mo ago

Sure, one second https://codepen.io/Matt-CopOffMatt/pen/MWZbNor

SeppeB•16mo 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

MattOP•16mo ago

👍 Awesome, thank you so much

SeppeB•16mo ago

no problem, happy to help!

MattOP•16mo ago

!close -close

Jochem•16mo ago

you don't need to close posts, you can add a solved tag if you want

MattOP•16mo ago

Okay cool

Jochem•16mo ago

they autoclose after two weeks or something

MattOP•16mo 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•16mo 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

MattOP•16mo ago

Okay, thank you

Gaming

Programming

Infinite Loop Question