Databases
StackOverflow2013
Postsdbo
POAnimating an object through an array of points on Canvas while maintaining a uniform speed?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimating an object through an array of points on Canvas while maintaining a uniform speed?
    primarykey
    data
    text
    <p>(I'm new to coding in Javascript/HTML/CSS so excuse my terrible style!) </p> <p>I'd like to animate an object in an array along a set of coordinates in that array at a static speed: </p> <p>Example of the array: </p> <pre><code>_myPtArr = [{x:297, y:30},{x:299,y:47},{x:350,y:56},{x:305,y:176},{x:278,y:169}, {x:303,y:108},{x:269,y:79},{x:182,y:90},{x:137,y:81},{x:173,y:33},{x:231,y:38}]; </code></pre> <p>What I did to do this was; create a function that runs at the beginning of the program to take in any array and add a distance property (named "dis") to the first of the two points it's calculating the distance of, and that looks like this:</p> <pre><code>function findDist(array) { for (var i = 0; i&lt;array.length-1;i++){ var p = array[i], q = array[i+1], dx = p.x - q.x, dy = p.y - q.y, dist = Math.sqrt(dx*dx + dy*dy); array[i].dis=dist; } } </code></pre> <p>I did this because the way I was animating them was creating a variable named "_tick" which would move them from one point to another by incrementing from 0 thru 1, 0 being the starting point, and 1 being the ending point. And I was going to multiply the tick times the distance so that different line lengths would animate at the same speed. But I haven't gotten anything like that to work! I'm stuck! Here's the function/s which do what I was just talking about: </p> <pre><code>function calculateInnerPts(pts, pos){ var ptArr = []; console.log(pts.length); for(var i = 0; i &lt; pts.length-1; i++){ ptArr[i] = {x: pts[i].x + (pts[i+1].x - pts[i].x) * pos, y: pts[i].y + (pts[i+1].y - pts[i].y) * pos}; } return ptArr; } </code></pre> <p>Being called in a series like so: </p> <p>In the enterFrameHandler (constant iteration) with "section" just incrementing to grab each set of 2 points/objects, so after _tick gets to "1", section++. :</p> <pre><code>ballAnim([_myPtArr[_section],_myPtArr[_section+1]],_tick); </code></pre> <p>then outside: </p> <pre><code>function ballAnim(pts,pos){ var iPts = pts; for(var i = 0; i &lt; pts.length-1; i++){ iPts = calculateInnerPts(iPts, pos); } drawBall(iPts[0]); } </code></pre> <p>Finally, I draw the ball: </p> <pre><code>function drawBall(pts){ var w = 6, h = 2; ctx.clearRect(0,0,400,300); ctx.beginPath(); ctx.arc(pts.x, pts.y, 5, 0, Math.PI * 2); ctx.fillStyle="blue"; ctx.fill(); ctx.strokeStyle="black"; ctx.closePath(); ctx.stroke(); } </code></pre> <p>Could anyone shed any light on how I can accomplish this given this system, or even another better way of accomplishing the same effect? I would like to put in any array and get the same result (meaning the ball animates in a static speed)!</p> <p>NOTE: I would NOT like to use anything but plain ol' Javascript/HTML/CSS; no API's!</p> <p>Thank you all so much, this community is so amazing, and this is my first post, so go easy on me! XD</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USSuper Fighting Robot
    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. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAnimating an object through an array of points on Canvas while maintaining a uniform speed?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

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