How to avoid the white area or blinking that appears when two objects overlap ? [Solved]

Question

https://code.sololearn.com/WhRtmrC2RSs8/?ref=app

Edit: I am trying to move objects at different speed , and so if the above problem can't be avoided, is there any other way to do it? Tyvm !

Answer 1

Abhay yes: this is certainly the fact of using many setInterval wich each clear the last bounding rect of object that cause the flickering ;)

also, instead of using only once setInterval, I would advise you to rather use only once requestAnimationFrame, in wich you could get a timestamp as argument of the callback: this is more accurate to handle speed of objects to be redrawn (move them with a timing function wich compute the relative move in regard of time ellapsed since last update) and was called jyst before viewport update (the downside is if you need to pass arguments, you should handle them by other way ^^)...

Answer 2

qs apply to document (as root node for finding element matching the query string)

es apply to any element (as root node for finding element matching the query string)

search is only done down in the child three: es never return parent elements (as document, because documenr is the absolute root node of all elements in page)

to search among parents, there'is the .'closest()' method of elements wich search up in the tree, for the first parent matching a query string ;)

*****

dt stand for 'delta time'... (ts for timestamp)
sorry, my bad: I've corrected my mistake now: yes you should read dt instead of ts inside the loop^^

to move an object at speed of 1 pixel per 16 millisecond, you rather must do multiplication by dt*16/1000, not dt/16 ( == 1/16*dt != 1/(16*dt) )...

in fact, that is speed unit that you must multiply, not dt (but math equivalent) to convert speed unit from px per seconds to px per time ^^

however, that doesn't strictly mean object is moved of 1 px every 16 ms, but its average speed is so

Answer 3

Abhay when I'm too lazy to type the long name of most of js built-in functions/methods, I assign them once to a shorter name ;P

if they require binding of specific object, I assign the bounded function:

const qs = document.querySelector.bind(document),
qa = document.querySelectorAll.bind(document),
es = Function.call.bind(document.body.querySelector);
ea = Function.call.bind(document.body.querySelectorAll);

use:
qs(queryString); // select one element from document
qa(queryString); //select all elements from document
qs(target,queryString); // select one element from target element
qa(target,queryString); //select all elements from target element

Answer 4

visph ty again :)

Answer 5

Abhay sorry, I have typed too quickly: I've updated the es and ea assignements to be valid: that's quite morr tricky than what I could have let think... you must bind the right method (attached to a node element rather to the document) as target of the 'call' method (from Function.prototype)...

Answer 6

es and ea works similary...

for es(target, queryString), that's equivalent to:

document.body.querySelector.call(target, queryString)

wich act as:

target.querySelector(queryString)

Answer 7

ASIM FARHEEN [Reets Preets Richa] °~°

the code has been edited and now the problem is fixed ;P

Abhay I see you use the requesAnimationFrame method, but you doesn't use the available timestamp as callback argument: on busy devices (or with less or more objects to animate) that could make the apparent speed of object vary... it would be better to use it ;)

make a variable outside the move function (could be a property of the function itself) to store previous timestamp and use time delta between current and previous timestamp as parameter of move delta...

let prevTS;
function move(ts) {
let dt = prevTS ? ts - prevTS) : 0;
for (obj of objList) {
// obj.speed: pixel (or pos unit) per millisecond
// if you want pixel per second, use dt/1000
// dt/200 => pixel per 1/50 second...
obj.posX += obj.speed * dt;
obj.posY += obj.speed * dt;
obj.draw();
}
prevTS = ts;
requestAnimationFrame(move);
}

Answer 8

Abhay previous post edited to correct a missing 0 ^^

also, about 'bind': I just lost the post I was writting while about it and quite similar 'call' and 'apply' while getting mdn links as complement :(

as the post was quite long, this time I only provide you the links, wich surely explains better and deeper than me their use:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

Answer 9

Jan Markus ty ,but my is a very different problem than that .

Answer 10

𝗘𝗱𝗶𝘁𝟮: I think i should just use one setInterval and instead of varying time i can go with different amount of position that each object move by like 1 , 0.75 !

Answer 11

visph ty sm! I use requestAnimationFrame most of the time but i somehow don't like the name of it or maybe it's just big, lol!

Answer 12

visph ty ,but if you don't mind ,can i know how does es and ea work ?

Answer 13

try, once again :)

Answer 14

visph ty again for all this extra info :) But i have few questions ,

1) How is es different from qs ? Also, honestly i don't understand how "Function.call.bind()" works but i will definitely read about it and ask any questions on it in another post.

2) what is the use of dt in your example?

And why obj.speed is multiplied by ts ? Suppose i want object to move by 1 pixel every 16 milseconds , so should i use "1/16*dt" !?