bouncing ball (WIP)

bouncing ball story

Bouncing Ball Story (WIP)

Use the continue button to…continue!!

It will present code changes first, then update the visual. Read the code change and have a guess what it will do in advance! (but I will create titles or ‘chapters’)

viewof progress = Inputs.button("➡️ continue", {reduce: async () => {
  // I can't use the values of viewof I'll update... (ANNOYING!)
  if (step_cond) {
    (viewof stepcode).value = stepcode_next;
    (viewof stepcode).dispatchEvent(new CustomEvent('input'), {bubbles:true});
  } else {
    await animation.play('.chart-wrapper');
    (viewof step).value = step_next;
    (viewof step).dispatchEvent(new Event('input'), {bubbles:true})
  }
}})

diff(cul[step],cul[stepcode]+'\n', {outputFormat, context:99999})
viewof outputFormat = Inputs.radio(["side-by-side", "line-by-line"], {label: "diff format", value: 'line-by-line'})
specs = [bounce_0,bounce_1,bounce_2,bounce_3,bounce_4,bounce_5,bounce_6].map(m => gemini.vl2vg4gemini(calcuvizspec({
    models: [m], // TODO show multiple models
    input_cursors: [{dx_in:3,dampener_in:0.8}],
    mark: 'point',
    encodings: {
      x: {name: 'x', type:'quantitative', grid:false, zero:false},
      y: {name: 'y', type: 'quantitative', grid:false, zero:false},
            //column: {name: 'dampener_in', type:'nominal', domain: [0.9,1,0.8]},

      //row: {name: 'formula', type:'nominal', domain: formulae_not_inputs},
      color: {name: 't_in', type: 'nominal', domain:_.range(0,40,1), legend: false},
    },
    width: 300, height:200
})))


embed(specs[step], {renderer:'svg'})
embed(calcuvizspec({
    models: [bounce_6], // TODO show multiple models
    input_cursors: [{dx_in:3}],
    mark: 'text',
    encodings: {
      x: {name: 'formula', type:'nominal', grid:false, domain:['dy','y','bouncing']},
      y: {name: 't_in', type: 'nominal', grid:false, zero:false, domain:_.range(0,60,1)},
      text: {name:'value', type:'quantitative', format:',.3f'},
      row: {name: 'dampener_in', type:'nominal', domain: [0.9,1,0.8,.88]},
      //color: {name: 't_in', type: 'nominal', domain:_.range(0,60,1), legend: false},
    },
    width: 200, height:500
}))

Appendix

import { calcuvizspec } from "@declann/little-calcu-helpers"
embed = require('vega-embed');

//import {diff} from "@jobleonard/diff-tool"
import {diff} from "@declann/diff-tool"

// models
bounce_0 = require(`../../models/bounce/bounce-0.js`);
bounce_1 = require(`../../models/bounce/bounce-1.js`);
bounce_2 = require(`../../models/bounce/bounce-2.js`);
bounce_3 = require(`../../models/bounce/bounce-3.js`);
bounce_4 = require(`../../models/bounce/bounce-4.js`);
bounce_5 = require(`../../models/bounce/bounce-5.js`);
bounce_6 = require(`../../models/bounce/bounce-6.js`);

// calculang
bounce_0_cul_fetch = await fetch(`../../models/bounce/bounce-0-nomemo_esm/cul_scope_0.cul.js`)
bounce_0_cul = bounce_0_cul_fetch.text()
bounce_1_cul_fetch = await fetch(`../../models/bounce/bounce-1-nomemo_esm/cul_scope_0.cul.js`)
bounce_1_cul = bounce_1_cul_fetch.text()
bounce_2_cul_fetch = await fetch(`../../models/bounce/bounce-2-nomemo_esm/cul_scope_0.cul.js`)
bounce_2_cul = bounce_2_cul_fetch.text()
bounce_3_cul_fetch = await fetch(`../../models/bounce/bounce-3-nomemo_esm/cul_scope_0.cul.js`)
bounce_3_cul = bounce_3_cul_fetch.text()
bounce_4_cul_fetch = await fetch(`../../models/bounce/bounce-4-nomemo_esm/cul_scope_0.cul.js`)
bounce_4_cul = bounce_4_cul_fetch.text()
bounce_5_cul_fetch = await fetch(`../../models/bounce/bounce-5-nomemo_esm/cul_scope_0.cul.js`)
bounce_5_cul = bounce_5_cul_fetch.text()
bounce_6_cul_fetch = await fetch(`../../models/bounce/bounce-6-nomemo_esm/cul_scope_0.cul.js`)
bounce_6_cul = bounce_6_cul_fetch.text()

cul_raw = [bounce_0_cul,bounce_1_cul,bounce_2_cul,bounce_3_cul,bounce_4_cul,bounce_5_cul,bounce_6_cul]

cul = cul_raw.map(cul => cul.replace(/export const /g, ''))

Transitions:

gemini = require('https://cdn.jsdelivr.net/gh/uwdata/gemini@v0.1-alpha/gemini.web.js')

viewof step = Inputs.range([0,10], {step:1, label:'step', value:0});

step_next = step+1

viewof stepcode = Inputs.range([0,10], {step:1, label:'step (code)', value:0});

stepcode_next = stepcode+1

step_cond = step == stepcode

gemSpec = ({
      "timeline": {
        "sync": [
          {
            "component": {"mark": "marks"},
            "change": {"data": ["t_in"]},
            "timing": {"duration": {"ratio": 1}}
          },
              {"component": {"axis": "x"}, "timing": {"duration": {"ratio": 0.5}}},
              {"component": {"axis": "y"}, "timing": {"duration": {"ratio": 0.5}}},

        ]
      },
      "totalDuration": 600
    })

animation = gemini.animate(specs[step], specs[step+1], gemSpec)

emojis = [/*"🅾️"*/"⏮️","➡️1️⃣","➡️2️⃣","➡️3️⃣","➡️4️⃣","➡️5️⃣","➡️6️⃣"]