30:T909,# Keyframe animation The idea of keyframe animation is a powerful one. Simply put, an animated drawing is regarded as a drawing where some of its properties vary with time. In animation lingo, the progression of time is modeled as a succession of *frames*, i.e., states of the drawing. Thus, animation can be accomplished by associating the value of given properties to functions of time (or rather, frame). Keyframing is a method for specifying such functions. Given a property or variable that is to be keyframed, its value for a set of frames is prescribed and a function is built for interpolating between these values, for non-prescribed -- or in-between, as they ar called -- frames. This notebook defines function `animation`(*spec*, ? *frame_pace* ? ), where *spec* is an object where each field is associated with an array of keyframe specifications. Each keyframe specification is an array of the form > [*frame*, *cvalue₁*, ... *cvalue_n*, *value*] where *frame* is a frame number, *value* is the value which the variable should assume at that frame and, the optional *cvalue_i* act as additional control points for the interpolator. If no *cvalue* is specified, the variable is linearly interpolated between the value specified by the previous keyframe for that variable and this *value*. For instance, the *spec* >`{ x: [[0, 5], [2, 6]] }` says that variable `x` should assume value 5 at frame 0, value 5.5 at frame 1 and value 6 at frame 2. Since `x` is the only keyframed variable in the specification, this animation has a duration of exactly 3 frames. Optionally, a slower (or faster) animation can be produced by specifying a *frame_pace* value that is < 1 (or > 1) as the second argument to `animation`. The result returned by `animation` is a *generator* that successively yields an object with the value of each variable in the specification for each frame. For convenience, that object also includes a `frame` field with the number of the interpolated frame. For instance: >```[ ... animation({x:[[0,5],[2,6]]}) ]``` is evaluated as >`${JSON.stringify([ ... animation({x:[[0,5],[2,6]]}) ])}`. **Bonus:** Also included in this notebook is utility function `plotAnim`(*spec*), which returns a plot of all variables defined in specification *spec*. 31:T6a0,// // Returns a frame-by-frame value for variables defined in the animation specification // spec (see explanation above). Optionally, a slower (or faster) animation can be produced by // passing a second argument with a value < 1 (or > 1). // function* animation(spec, frame_pace = 1) { const OUT = 1e30; let variables = Object.keys(spec); let frames = []; let lastFrame = 0; for (let v of variables) { let anim = spec[v]; anim.sort((a, b) => a[0] - b[0]); lastFrame = Math.max(lastFrame, anim[anim.length - 1][0]); } let state = {}; for (let v of variables) { state[v] = { interpolator: (f) => OUT, nextSpecFrame: 0, prevFrame: 0, prevValue: OUT }; } for (let f = 0; f <= lastFrame; f += frame_pace) { for (let v of variables) { let nextSpec = spec[v][state[v].nextSpecFrame]; if (f >= nextSpec[0]) { let prevValue = nextSpec[nextSpec.length - 1]; if (state[v].nextSpecFrame < spec[v].length - 1) state[v].nextSpecFrame++; let prevFrame = f; nextSpec = spec[v][state[v].nextSpecFrame]; let nextFrame = nextSpec[0]; //let nextValue = nextSpec[nextSpec.length-1]; if (f == nextFrame) state[v].interpolator = (frame) => prevValue; else { let bezier = casteljau(prevValue, ...nextSpec.slice(1)); state[v].interpolator = (frame) => bezier((frame - prevFrame) / (nextFrame - prevFrame)); } state[v].prevFrame = f; state[v].prevValue = prevValue; } } let varValues = { frame: f }; for (let v of variables) varValues[v] = state[v].interpolator(f); yield varValues; } }32:T48c,// // Given an animation specification, returns a chart showing the keyframes and // the interpolation functions for the variables // function plotAnim(spec) { let data = []; let anim = [...animation(spec)]; let fields = Object.keys(spec); anim.forEach((d, i) => { for (let key of fields) { data.push({ frame: i, variable: key, value: d[key] }); } }); let interpCurves = vl .markLine() .data(data) .encode( vl.x().fieldQ("frame"), vl.y().fieldQ("value"), vl.color().fieldN("variable") ); data = []; for (let variable of fields) { for (let s of spec[variable]) { data.push({ frame: s[0], variable, value: s[s.length - 1], type: "Interp. value" }); for (let v of s.slice(1, -1)) data.push({ frame: s[0], variable, value: v, type: "control value" }); } } let keyFrames = vl .markPoint() .data(data) .encode( vl.x().fieldQ("frame"), vl.y().fieldQ("value"), vl.color().fieldN("variable"), vl.shape().fieldN("type") ); return vl.layer(interpCurves, keyFrames).height(400).width(600).render(); }33:T861,{ // Drawing with a 4 by 3 aspect ratio const [w, h] = [640, 480]; let theSvg = svg`

\n","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}