Animating the result of ordinary differential equations (ODE)

The following code shows how you can animate the result of integrating a set of ordinary differential equations. As you see, it is just a combination of the Example: Animation examples with the Example: Integrating ordinary differential equations (ODE) examples.

// Kepler problem
kontrast.addEventListener("load", function() {

// ... create figure and graph

// For 1 drawing (animation frame), calculate (nStep)-steps with dt,
  // The time between 2 frames is nStep * dt.
  let nStep = 1
  let dt = 0.1

let point = graph.createPoints({
    thickness: 10,
    color: 'blue'
  })

//  initial values
  let [x0, y0] = [1, 0]
  let [u0, v0] = [0, 1.2]

function update() {
    // solve the equation of motion
    let result = kontrast.integrateODE({
      quantities: {
        t: { type: 'independent',
             initial: 0, final: nStep * dt, count: nStep },
        x: { type: 'dependent', initial: x0 },
        y: { type: 'dependent', initial: y0 },
        u: { type: 'dependent', initial: u0 },
        v: { type: 'dependent', initial: v0 }
      },
      derivativeCallback: function(s) {
        let xx = s.x.value
        let yy = s.y.value
        let rr = Math.pow(xx * xx + yy * yy, 3/2)
        s.x.derivative = s.u.value
        s.y.derivative = s.v.value
        s.u.derivative = -1.0 * xx / rr
        s.v.derivative = -1.0 * yy / rr
      }
    })

// "initial" values for the next calculation
    x0 = result.quantities.x[nStep]
    y0 = result.quantities.y[nStep]
    u0 = result.quantities.u[nStep]
    v0 = result.quantities.v[nStep]

// move the point
    point.data = {
      x: [ x0 ],
      y: [ y0 ]
    }
    requestAnimationFrame(update)
  }

// draw initial point and run
  point.data = {
    x: [ x0 ],
    y: [ y0 ]
  }
  requestAnimationFrame(update)
})

Examples

Kepler Problem

3-body Problem

Advanced animation

It is more complicated, but you can also write an animation with diminishing traces. Please refer to the source code of this page for more details.