Animating a line graph

Question

Dear javafx coders
I am a physics teacher in London and I am trying to learn JFX so that I can make animations for use in lessons. I don't know much about programming, but so far I have successfully managed to animate a circle which oscillates up and down (please see code below):
package javafxapplication22;
import javafx.stage.Stage;import javafx.scene.Scene;
import javafx.scene.Node;import javafx.scene.shape.Circle;
import javafx.animation.Timeline;import javafx.animation.KeyFrame;
import javafx.scene.input.*;import javafx.animation.*;
import javafx.scene.*;import javafx.animation.transition.*;
import javafx.scene.shape.*;import javafx.scene.paint.*;
import javafx.scene.transform.*;import javafx.stage.*;
import javafx.scene.control.*; import javafx.scene.text.Text;*
*import javafx.scene.Scene;import javafx.scene.text.Text;*
*import javafx.scene.text.Font;*
*var yold:Number=100; //old y pos*
*var ynew:Number=100; //new y pos*
*var yvel:Number=5; //y velocity*
*var yacc:Number=0; // y acceleration*
*var freq=0.001; //frequency of oscillation*
*var time = Timeline {*
*repeatCount: javafx.animation.Timeline.INDEFINITE // never stop*
*keyFrames: for (i in [30..40])*
*javafx.animation.KeyFrame*
*time: 100ms*indexof i // each frame is 100ms apart*
*action: function ()*
*yacc=-39.48*freq*(yold-100); //calculate acceleration
yvel=yvel+yacc; //update velocity
ynew=yold+yvel; //update position
MoveTo {x: 200+i*10 y: yold absolute: false} //graph from old position ...
LineTo {x: 200+(i+1)*10 y: ynew absolute: false} //..to new
yold=ynew;
Stage {
scene: Scene {
width: 400
height: 200
content: [
Circle {
centerX: 100;
centerY: bind ynew,
radius:20,
onMousePressed: function(e:MouseEvent) { time.play(); }
} The circle behaves as expected and oscillates up and down. However, I would also like to graph its motion beside it (using moveTo and lineTo, you can see these two lines above) but no lines at all appear on the screen. The idea is that on each new frame a portion of the line graph is added (i.e. from the old y position to the new y position, also adding on an equal x increment each time as we move along the time axis.
Any help on this would be really appreciated - I am very keen to move away from technologies such as Flash, but at the moment I am finding JFX a bit difficult.
Thank you
Matt Klein

Answer 1

aheem...well! then how about this animation...I think I know what you are trying to do then. If I'm not mistaken, you are trying to do what the Ti-83 can do when graphing.
Well! here is an idea on how I would do a simple animation on a graph
    This is an animation graph
package animationgraph;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.part.NumberAxis;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
* @author JJ
//The start values of x & y for line 1
var line1StartX : Number = 8;
var line1StartY : Number = 10.2;
//The end values of x & y for line 1
var line1EndX : Number = 0;
var line1EndY : Number = 0;
//The x & y values for line 2
var line2X : Number = 0;
var line2Y : Number = 0;
//Creates a line chart
var getLineChart =  LineChart
     title: "Line Chart"
     xAxis: NumberAxis {
          lowerBound: 8
          upperBound: 9.1
     yAxis: NumberAxis {
          lowerBound: 0
          upperBound: 30
     data: [
          LineChart.Series {
               name: "Line 1"
               data: [
                    LineChart.Data { xValue: bind line1StartX  yValue: bind line1StartY}
                    LineChart.Data { xValue: bind line1EndX yValue: bind line1EndY }
//Keeps track the time for line 1
var keepTime1 : Number = 6;
//Animation for the line chart
var line1Animation = Timeline
     keyFrames: KeyFrame
            time:1s
            action:function()
                keepTime1--;
                if(keepTime1==5)
                    line1EndX = 8.1;
                    line1EndY = 10.5;
                if(keepTime1==4)
                    line1EndX = 8.3;
                    line1EndY = 11.0;
                if(keepTime1==3)
                    line1EndX = 8.5;
                    line1EndY = 11.5;
                if(keepTime1==2)
                    line1EndX = 8.7;
                    line1EndY = 13.0;
                if(keepTime1==1)
                    line1EndX = 9;
                    line1EndY = 15.5;
       repeatCount:5
Stage {
    title: "Animation Graph"
    scene: Scene {
        width: 500
        height: 500
        content: [
            getLineChart
line1Animation.play();