Charts, simulations and particles

Kinetic has no chart, physics or particle module, so a scene that needs one writes it, in the same model as every other scene. This page gives the approach for each, and each part links to a worked example in Patterns.

Anything that depends on earlier frames is worked out once, in init() or beside the scene, into plain arrays. The computed or seek(local) then turns the time into an index and reads from them, so a frame comes out the same whichever frames came before it, which a render needs.

Charts

A chart is a few lines of arithmetic over the data, with Kinetic's helpers for the parts that repeat.

  • A linear scale is mix(x0, x1, (v - lo) / (hi - lo)), and bar i of a band sits at x0 + i * (width + gap).
  • ticks(0, max, 5) gives the axis range, its last value covering the largest number, and format() writes the labels.
  • A bar race orders its rows with rank().
  • A pie or donut is one shape('sector') per slice, its angles from a running sum of the shares, in a pool inside the <svg>: A pie from data.
  • A line is path data built from the points, drawn in with trimPath() or the dash recipe.
  • A chart grows in when its values or angles are multiplied by a ramp(), with stagger() for each bar's delay: Bars that grow in.

Simulations

A simulation steps forward in time, and a render asks for frames in any order, so it never runs inside a seek.

  • Run it to the end of its clip at load, with a fixed step finer than a frame, such as 1/240 s for a bounce, and keep each step's state in typed arrays.
  • The seek reads the two steps either side of its time and mixes them: A simulation baked at load.
  • Any physics engine works this way, when it runs at load with a fixed step and takes its randomness from random(seed).
  • A contact that has to be seen goes on a whole frame: A landing on a whole frame.
  • When a learner's setting changes the result, bake again from a watcher on that store field. tick() runs only in interactive mode, so a live world there is extra to the video and never a part of it.

Particles

Particles are a pool of a fixed number of slots, and each particle is a function of its age.

  • Make every particle the clip will have at load, with its birth time and its values from random(seed). At time t its age is t - born, and it shows while its age is between 0 and its life.
  • Its place comes from a closed form of the age, such as x0 + vx * age plus 0.5 * g * age * age for gravity, or from noise() read at the age for a drift.
  • Particle i lives in slot i % SLOTS, with SLOTS the rate times the life, rounded up, plus one: Particles from an emitter.
  • For hundreds of particles, write style in one static pool from seek(local) and use no filters: Bokeh particles with no filter.