How to avoid the white area or blinking that appears when two objects overlap ? [Solved] | Sololearn: Learn to code for FREE!
Neuer Kurs! Jeder Programmierer sollte generative KI lernen!
Kostenlose Lektion ausprobieren
+ 1

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

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 !

11th Jun 2021, 3:49 PM
Abhay
Abhay - avatar
14 Antworten
+ 3
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 ^^)...
11th Jun 2021, 9:26 PM
visph
visph - avatar
+ 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
15th Jun 2021, 4:27 PM
visph
visph - avatar
+ 1
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
11th Jun 2021, 9:46 PM
visph
visph - avatar
+ 1
visph ty again :)
11th Jun 2021, 10:08 PM
Abhay
Abhay - avatar
+ 1
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)...
11th Jun 2021, 10:21 PM
visph
visph - avatar
+ 1
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)
12th Jun 2021, 10:45 AM
visph
visph - avatar
+ 1
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); }
13th Jun 2021, 1:29 AM
visph
visph - avatar
+ 1
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
15th Jun 2021, 5:10 PM
visph
visph - avatar
0
Jan Markus ty ,but my is a very different problem than that .
11th Jun 2021, 4:47 PM
Abhay
Abhay - avatar
0
­ŁŚś­ŁŚ▒­ŁŚÂ­Łśü­Łč«: 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 !
11th Jun 2021, 4:56 PM
Abhay
Abhay - avatar
0
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!
11th Jun 2021, 9:36 PM
Abhay
Abhay - avatar
0
visph ty ,but if you don't mind ,can i know how does es and ea work ?
12th Jun 2021, 8:01 AM
Abhay
Abhay - avatar
0
try, once again :)
13th Jun 2021, 12:40 AM
ASIM FARHEEN ÔŁä´ŞĆÔÜíÔÜí­čĄ│ÔÜíÔÜíÔŁä´ŞĆ
ASIM FARHEEN ÔŁä´ŞĆÔÜíÔÜí­čĄ│ÔÜíÔÜíÔŁä´ŞĆ - avatar
0
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" !?
15th Jun 2021, 2:54 PM
Abhay
Abhay - avatar