Databases
StackOverflow2013
Postsdbo
POcurve ball trajectory in javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcurve ball trajectory in javascript
    primarykey
    data
    text
    <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 &gt;= 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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USriyoken
    1. USriyoken
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POcurve ball trajectory in javascript
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POcurve ball trajectory in javascript
      1. This table or related slice is empty.
      1. VTDownMod
    1. COCould [this](http://jsfiddle.net/jfk63/) be of assistance?
      singulars
      1. POcurve ball trajectory in javascript
      1. USalex
    2. COThe first step is to rewrite this from scratch, instead of adding on top of this unreadable and messy code. But it would be easier if you provided a working example or explained what exactly the movement should be.
      singulars
      1. POcurve ball trajectory in javascript
      1. USIngo Bürk
    3. COWhen you say 'smooth', do you mean smooth, as in not jerky or made up of discontinuous movement. Or do you mean smooth, as in it looks polished, refined and smooth? Perhaps you mean something else altogether? Are you interested in simulating the effect of gravity, or would you like movement to be slowest at the start/end of movement, with the highest velocity occuring in the middle of flight (ease-out and ease-in) At times in programming, a single semi-colon makes all the difference. Discussions about programming sometimes need to be equally precise. :)
      singulars
      1. POcurve ball trajectory in javascript
      1. USenhzflep
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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