StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POcurve ball trajectory in javascript
text
Body
copied!<p>i have a JavaScript function that i wrote that makes a red css ball travel randomly across the screen. the problem is, is that since it goes directly from one position to another, it does not look that smooth. making it do a curve when it changes positions would probably make this smoother. based on the code provided, what would be a good way of doing this? </p> <pre><code>$('#menu_button4').click(function(){ $('#ball').show(); cake = function(a,b,u) {return (1-u) * a + u * b;}; draw_pos = function(element, property1, property2, start, end, duration) { var interval = 10; var steps = duration/interval; var step_u = 1.0/steps; var u = 0.0; var theInterval = setInterval(function(){ if (u >= 1.0){ clearInterval(theInterval) } var s = parseInt(cake(start.s, end.s, u)); var d = parseInt(cake(start.d, end.d, u)); var x_pos = s+'%'; var y_pos = d+'%'; el.style.setProperty(property1, x_pos); el.style.setProperty(property2, y_pos); u += step_u; }, interval); }; el = document.getElementById('ball'); property1 = 'top'; property2 = 'left'; startdeg_1 = {s:'0', d:'0'}; enddeg_1 = {s:Math.floor((Math.random()*100)+1), d:Math.floor((Math.random()*100)+1)}; enddeg_2 = {s:Math.floor((Math.random()*100)+1), d:Math.floor((Math.random()*100)+1)}; enddeg_3 = {s:Math.floor((Math.random()*100)+1), d:Math.floor((Math.random()*100)+1)}; enddeg_4 = {s:Math.floor((Math.random()*100)+1), d:Math.floor((Math.random()*100)+1)}; enddeg_5 = {s:'40', d:'25'}; enddeg_6 = {s:'20', d:'20'}; draw_pos(el, property1, property2, startdeg_1, enddeg_1, 80); setTimeout(function(){draw_pos(el, property1, property2, enddeg_1, enddeg_2, 80)}, 700); setTimeout(function(){draw_pos(el, property1, property2, enddeg_2, enddeg_3, 80)}, 1400); setTimeout(function(){draw_pos(el, property1, property2, enddeg_3, enddeg_4, 80)}, 2050); setTimeout(function(){draw_pos(el, property1, property2, enddeg_4, enddeg_5, 80)}, 2650); setTimeout(function(){draw_pos(el, property1, property2, enddeg_5, enddeg_6, 80)}, 3200); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload