PDA

View Full Version : create moving object from a set of data points



BienvenueJS
11-17-2015, 10:53 PM
Hi,
I want to create a moving image based on a set of data points that I have in a json file.

What would be the best way to create this?
Should I just use plain javascript, or should I use d3 ? SVG?

Please can you point me to a few resources for the same.

styxlawyer
11-18-2015, 02:02 PM
"Moving image" covers a lot of possibilities. Do you want a fixed image to appear at different places on the page or do you want the contents of a rendered image to be dynamic in some way?

BienvenueJS
11-21-2015, 07:34 PM
"Moving image" covers a lot of possibilities. Do you want a fixed image to appear at different places on the page or do you want the contents of a rendered image to be dynamic in some way?

styxlawyer, Given a set of coordinates, I want, say a ball, to draw the line between those points.

Say If I give screen coordinates like
50 200,
200 250,
250 20

I want to see three lines drawn one after another between the coordinates mentioned above, with a small time gap in between.

styxlawyer
11-22-2015, 05:44 PM
Ah, you actually want to plot lines. I suggest you look at the HTML canvas methods, in particular the lineTo() (http://www.w3schools.com/tags/canvas_lineto.asp) function.

BienvenueJS
11-22-2015, 09:12 PM
Ah, you actually want to plot lines. I suggest you look at the HTML canvas methods, in particular the lineTo() (http://www.w3schools.com/tags/canvas_lineto.asp) function.

Thanks styxlawyer, this is useful. I have been looking at it now, and trying out a few examples.

However, I wanted a pen at the end of the line, and add some delay to see the line being drawn, basically it should look like the line is coming out of the pen. Can you give me some pointers on how I can do this?
Imagine drawing a line using a pen from a source point (0, 0) to destination point (300, 150), so you want to see the pen moving from source to destination slowly, and I want to do this in javascript.

styxlawyer
11-23-2015, 12:06 AM
You will have to calculate the intermediate points in JavaScript and simply redraw the line many times (each one a little longer than the previous) and place the image of a pen at the drawing end of the line using the calculated x & y coordinates.

BienvenueJS
11-23-2015, 06:10 AM
You will have to calculate the intermediate points in JavaScript and simply redraw the line many times (each one a little longer than the previous) and place the image of a pen at the drawing end of the line using the calculated x & y coordinates.

Thanks styxlawyer, shall work around this.

styxlawyer
11-24-2015, 07:07 PM
Have a look at this page (http://mydesk.myzen.co.uk/Canvas/).