vek 2 new api

some visuals for ‘main’ model

Some visuals

viewof keys = {
  let e = html`<div class='target' style='color:pink; background:#eee' tabIndex=1>Keyboard target</div>`;
  let keys = [];
  e.value = keys;
  let gap = new Date();
  e.addEventListener("keyup", (evt) => {
    keys.push({
      key: evt.key,
      delay: new Date() - gap,
      frame: mutable frame_val
    });
    gap = new Date();
    e.dispatchEvent(new CustomEvent("input"));
    evt.preventDefault(); // for revealjs? not enough
  });
  e.addEventListener("keydown", (evt) => {
    evt.preventDefault();
  });
  return e;
}

mutable frame_val = 0

{
  frame_in;
  mutable frame_val = frame_in;
}

Keyboard target

keys = Array(0) []

mutable frame_val = Mutable {}

frame_val = 0

RuntimeError: frame_in is not defined

OJS Runtime Error (line 46, column 3)

frame_in is not defined

import {Scrubber} from "@mbostock/scrubber"

keys_stream_in = [{ key: "ArrowRight", frame: 20 },
  { key: "ArrowUp", frame: 30 },
  { key: "ArrowLeft", frame: 45 },{ key: "ArrowLeft", frame: 48 },
  { key: "ArrowUp", frame: 60 },
  { key: "ArrowUp", frame: 64 },
  { key: "ArrowUp", frame: 100 },
  { key: "ArrowUp", frame: 200 },
  { key: "ArrowUp", frame: 300 },
  { key: "ArrowUp", frame: 301 },
  { key: "ArrowUp", frame: 304 }]

mutable key_stream_in2 = [{ key: "ArrowRight", frame: 20 }]

//import {viewof keys} from 'd/867e1424e1d093ab'

keys

  import {Scrubber as Scrubber} from "@mbostock/scrubber"

keys_stream_in = Array(11) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

mutable key_stream_in2 = Mutable {}

key_stream_in2 = Array(1) [Object]

Array(0) []

viewof g_in = Inputs.range([-1,2], {value:1, step:0.01, label:'g_in'})

viewof s_in = Inputs.range([-6,6], {value:4, step:0.01, label:'s_in'})
viewof jump_limit_in = Inputs.range([0,3], {value:2, step:1, label:'jump_limit_in'})

g_in

g_in = 1

s_in

s_in = 4

jump_limit_in

jump_limit_in = 2

gameplay (for fixed key stream) (workings are below)

```{ojs}

viewof frame_in = Scrubber(_.range(0,900), {delay: 100, autoplay:false})

viewof keys

main.keys$m.cache

viz_spec = ({
  data: {name: 'data'},
  datasets: {data: viz_data0},
  "mark": {"type": "text", "align": "left", "tooltip": true},

  encoding: {
    x: {field: 'player_x', axis:{grid:false}, type:'quantitative', scale: {domain:[-30,50]}},
    y: {field: 'player_y', axis:{grid:false}, type:'quantitative', scale: {domain:[-5,50]}},
    size: {value: 20},
    text: {field: 'keys_annotation', type: 'nominal'}, // keys_annotation includes the emoji, will fix
  },
  height:150,
  width: 200,
})

viz_data = calcuvegadata({
  models: [main],
  spec: viz_spec,
  domains: {  },
  input_cursors: [{frame_in, keys_stream_in: keys.filter(d =>d.frame == frame_in) /*prob not using memo, but still pure, do a filter?*/, g_in, s_in, jump_limit_in}]
})

viz_data

viewof viz = embed(viz_spec)

keys

{
  console.log(Object.entries(main.player_x$m.cache).length)
  frame_in; keys_stream_in; g_in; s_in; jump_limit_in;
  viz.data("data", viz_data)/*.resize()*/.run();
}

mutable viz_data0 = [] // includes data in spec for when I Open in Vega Editor

htl.html`<button onclick=${() => (mutable viz_data0 = viz_data)}>insert data -> vega editor (dev)</button>`

import { fps, color } from "@ondras/fps"

div = {
  let node = html`<div>fps: ${Math.floor(fps)}</div>`;
  node.style.fontSize = "1em";
  node.style.color = color;
  node.style.textShadow = "0 0 0.08em #000";
  return node;
}


```

OJS Syntax Error (line 115, column 1)Unexpected token

Appendix

import { calcuvegadata } from "baafa4b071a5b66a" // draft API!

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

entrypoint = './models/vek.cul.js'//Inputs.select(['models/main/main.cul.js'], {label:'entrypoint'})

entrypoint_no_cul_js = entrypoint.slice(0,-7)

main = require(`${entrypoint_no_cul_js}.js`);

//import { player_x } from './models/vek-nomemo_esm/cul_scope_0.mjs'

/*md`player x?`

player_x*/

introspection_fetch = await fetch(`${entrypoint_no_cul_js}.introspection.json`)

introspection = introspection_fetch.json({typed:true})

introspection_nomemo_fetch = await fetch(`${entrypoint_no_cul_js}-nomemo.introspection.json`)

introspection_nomemo = introspection_nomemo_fetch.json({typed:true})

inputs = Object.values(introspection.cul_functions).filter(d => d.reason == 'input definition').map(d => d.name).sort()

formulae = Object.values(introspection.cul_functions).filter(d => d.reason == 'definition').map(d => d.name)

// formulae excluding pure inputs
formulae_not_inputs = Object.values(introspection.cul_functions).filter(d => d.reason == 'definition' && inputs.indexOf(d.name+'_in') == -1).map(d => d.name)

  import {calcuvizspec as calcuvizspec} from "@declann/little-calcu-helpers"

entrypoint = "./models/vek.cul.js"

entrypoint_no_cul_js = "./models/vek"

main = Module {keys_stream$m: ƒ(key), keys_stream: ƒ(a), frame$m: ƒ(key), frame: ƒ(a), keys$m: ƒ(key), keys: ƒ(a), keys_annotation$m: ƒ(key), keys_annotation: ƒ(a), key_right$m: ƒ(key), key_right: ƒ(a), key_left$m: ƒ(key), key_left: ƒ(a), key_up$m: ƒ(key), key_up: ƒ(a), key_up_count$m: ƒ(key), key_up_count: ƒ(a), player_vx$m: ƒ(key), player_vx: ƒ(a), g$m: ƒ(key), g: ƒ(a), …}

introspection_fetch = Response {}

introspection = Object {cul_functions: Object, cul_links: Array(98), cul_scope_ids_to_resource: Object, import_sources_to_resource: Object, cul_input_map: Object, dot: "digraph {\n \"0_keys_stream$\" [cul_scope_id=0,name=…r_y_\" [value=\"[object Object]\",label=\"call -\"]\n}\n", memo_map: Object}

introspection_nomemo_fetch = Response {}

introspection_nomemo = Object {cul_functions: Object, cul_links: Array(53), cul_scope_ids_to_resource: Object, import_sources_to_resource: Object, cul_input_map: Object, dot: "digraph {\n \"0_keys_stream\" [cul_scope_id=0,name=k…er_y\" [value=\"[object Object]\",label=\"call -\"]\n}\n", memo_map: Object}

inputs = Array(5) ["frame_in", "g_in", "jump_limit_in", "keys_stream_in", "s_in"]

formulae = Array(15) ["keys_stream", "frame", "keys", "keys_annotation", "key_right", "key_left", "key_up", "key_up_count", "player_vx", "g", "s", "jump_limit", "player_vy", "player_x", "player_y"]

formulae_not_inputs = Array(10) ["keys", "keys_annotation", "key_right", "key_left", "key_up", "key_up_count", "player_vx", "player_vy", "player_x", "player_y"]