g9-jaxjs | Automatically Interactive Graphics

Basic

Drag either point; the other mirrors its coordinates as (x, y) -> (y, x).

Loss—

Rings

Five colored rings rotate in alternating directions from shared radius and angle parameters.

Loss—

const ringPt = (offset, angle, radius, scale, dir) => {
  const a = angle.ref.mul(dir.ref).add(offset);
  const r = radius.ref.mul(scale.ref);
  return np.concatenate([np.cos(a.ref).mul(r.ref), np.sin(a).mul(r)]);
};
const vmapRing = vmap(ringPt, [0, null, null, null, null]);

return new G9((params) => {
  const rings = Array.from({length: LEVELS}, (_, level) => {
    const scale = LEVEL_SCALE.ref.slice([level, level + 1]);
    const direction = np.array([level % 2 === 0 ? 1 : -1], {dtype: np.float32});
    return vmapRing(OFFSETS.ref, params.angle.ref, params.radius.ref, scale, direction).reshape([PER_LEVEL * 2]);
  });

Cube

Drag any cube edge to rotate a projected 3D wireframe.

Loss—

const projectPoint = (x0, y0, z0, axCos, axSin, ayCos, aySin) => {
  const x1 = x0.ref.mul(ayCos.ref).add(z0.ref.mul(aySin.ref));
  const y1 = y0;
  const z1 = z0.ref.mul(ayCos.ref).sub(x0.ref.mul(aySin.ref));
  const x2 = x1;
  const y2 = y1.ref.mul(axCos.ref).sub(z1.ref.mul(axSin.ref));
  const z2 = y1.ref.mul(axSin.ref).add(z1.ref.mul(axCos.ref));
  const depth = z2.ref.add(Z_SHIFT.ref);
  const px = x2.ref.mul(SCALE.ref).div(depth.ref);
  const py = y2.ref.mul(SCALE.ref).div(depth.ref);
  return np.concatenate([px, py]);
};

return new G9((params) => {
  const axCos = np.cos(params.ax.ref);
  const axSin = np.sin(params.ax.ref);
  const ayCos = np.cos(params.ay.ref);
  const aySin = np.sin(params.ay.ref);
  const projectAt = (idx) => {
    const [x0, y0, z0] = BASE[idx];
    return projectPoint(x0, y0, z0, axCos, axSin, ayCos, aySin);
  };
  const shapes = {};
  EDGES.forEach(([a, b], i) => {
    const aPt = projectAt(a);
    const bPt = projectAt(b);
    shapes["e" + i] = line(np.concatenate([aPt.ref, bPt.ref]), {
      stroke: "#111827",
      "stroke-width": 8,
      "stroke-linecap": "round",
      affects: {ax: true, ay: true},
    });
  });
  BASE.forEach((_unused, i) => {
    shapes["p" + i] = point(projectAt(i), {
      fill: "#0ea5e9",
      r: 4,
      affects: {ax: true, ay: true},
    });
  });
  return shapes;
}, {ax: [0.2], ay: [0.45]});

Particles (100)

A 10x10 particle field with an orange repeller and spring-to-origin regularization.

Loss—

return new G9((params) => {
  const repellerNorm = np.concatenate([params.rx.ref, params.ry.ref]).reshape([1, 2]);
  const repellerPush = np.concatenate([params.rx.ref, params.ry.ref]).reshape([1, 2]);
  const awayNorm = BASE_NORM.ref.sub(repellerNorm.ref);
  const awayPush = BASE_PUSH.ref.sub(repellerPush.ref);
  const dist2 = rowNorm2(awayNorm.ref).add(REPULSE_SOFT.ref).reshape([COUNT, 1]);
  const push = awayPush.ref.mul(REPULSE_GAIN.ref.div(dist2.ref)).mul(KEEP_PUSH.ref);
  const adjusted = BASE_OUT.ref.add(push.ref);

Mini Classifier (2-layer, 10 params)

Drag blue/red samples; side parameter points and network weights update to fit the classes.

Loss—

const TRAINING = [
  {name: "d0", xy: [-92, -50], cls: 1, color: BLUE_PT},
  {name: "d1", xy: [-58, -12], cls: 1, color: BLUE_PT},
  {name: "d2", xy: [-15, 22], cls: 1, color: BLUE_PT},
  {name: "d3", xy: [30, 66], cls: 1, color: BLUE_PT},
  {name: "d4", xy: [72, 98], cls: 1, color: BLUE_PT},
  {name: "d5", xy: [-96, -122], cls: -1, color: RED_PT},
  {name: "d6", xy: [-56, -94], cls: -1, color: RED_PT},
  {name: "d7", xy: [-8, -46], cls: -1, color: RED_PT},
  {name: "d8", xy: [42, 16], cls: -1, color: RED_PT},
  {name: "d9", xy: [94, 56], cls: -1, color: RED_PT},
];

const MODEL_PARAMS = ["w11", "w12", "w21", "w22", "b1", "b2", "v1", "v2", "b3", "s"];
const modelAffects = Object.fromEntries(MODEL_PARAMS.map((name) => [name, true]));
const cellCenters = Array.from({length: CELL_COUNT}, (_, i) => {
  const gx = i % GRID;
  const gy = Math.floor(i / GRID);
  return [AXIS_MIN + gx * STEP, AXIS_MIN + gy * STEP];
});

const initialParams = Object.fromEntries(
  TRAINING.map((item) => [item.name, item.xy]).concat([
    ["w11", [1.2]],
    ["w12", [-1.0]],
    ["w21", [-1.15]],
    ["w22", [0.95]],
    ["b1", [0.0]],
    ["b2", [0.0]],
    ["v1", [1.0]],
    ["v2", [-1.0]],
    ["b3", [0.0]],
    ["s", [1.0]],
  ])
);

const sigmoid = (x) => ONE.ref.div(ONE.ref.add(np.exp(x.neg())));
const softplus = (x) => np.log(np.exp(x).add(ONE.ref));

const forwardLogit = (xy, params) => {
  const x1 = xy.ref.slice([0, 1]);
  const y1 = xy.ref.slice([1, 2]);
  const x2 = xy.ref.slice([0, 1]);
  const y2 = xy.ref.slice([1, 2]);

const h1pre = params.w11.ref.mul(x1.ref).add(params.w12.ref.mul(y1.ref)).add(params.b1.ref);
  const h2pre = params.w21.ref.mul(x2.ref).add(params.w22.ref.mul(y2.ref)).add(params.b2.ref);
  const h1 = np.tanh(h1pre.ref);
  const h2 = np.tanh(h2pre.ref);
  const out = params.v1.ref.mul(h1.ref).add(params.v2.ref.mul(h2.ref)).add(params.b3.ref);
  return out.mul(params.s.ref);
};

return new G9((params) => {
  const shapes = {};
  const secondary = {};
  const model = Object.fromEntries(
    MODEL_PARAMS.map((name) => [name, params[name]])
  );

Array.from({length: CELL_COUNT}, (_, i) => {
    const centerBlue = np.array(cellCenters[i], {dtype: np.float32});
    const centerRed = np.array(cellCenters[i], {dtype: np.float32});
    const logitBlue = forwardLogit(centerBlue, model);
    const logitRed = forwardLogit(centerRed, model);
    const pBlue = sigmoid(logitBlue.mul(SHARP.ref));
    const pBlue2 = sigmoid(logitRed.mul(SHARP.ref));
    const blueCoord = centerBlue.ref.add(HIDE.ref.mul(ONE.ref.sub(pBlue.ref)));
    const redCoord = centerRed.ref.add(HIDE.ref.mul(pBlue2.ref));
    shapes["bgb" + i] = point(blueCoord, {fill: BLUE_BG, r: 5.1, affects: {}});
    shapes["bgr" + i] = point(redCoord, {fill: RED_BG, r: 5.1, affects: {}});
    return null;
  });

TRAINING.forEach((item, i) => {
    const xy = params[item.name];
    const logit = forwardLogit(xy, model);
    const margin = item.cls > 0 ? logit : logit.neg();
    secondary["cls" + i] = softplus(margin.neg());
    shapes[item.name] = point(xy, {
      fill: item.color,
      r: 6,
      affects: {...modelAffects, [item.name]: true},
    });
  });

MODEL_PARAMS.forEach((name, idx) => {
    const anchorX = np.array([235], {dtype: np.float32});
    const anchorY = np.array([-145 + idx * 32], {dtype: np.float32});
    const xPos = anchorX.ref.add(model[name].ref.mul(26));
    const coord = np.concatenate([xPos.ref, anchorY.ref]);
    shapes["param_" + name] = point(coord, {
      fill: PARAM_PT,
      r: 4.5,
      affects: {[name]: true},
    });
  });

return {shapes, secondary};
}, initialParams);

Lines with affects

Three lines: one free, one start-constrained, and one end-constrained via affects masks.

Loss—

Blocker Wall

Drag the orange ball. The entire lane between the two thick black walls is blocked with a strong secondary penalty.

Loss—

return new G9((params) => {
  const sigmoid = (x) => ONE.ref.div(ONE.ref.add(np.exp(x.neg())));
  const insideBand = (value, minVal, maxVal) => {
    const geMin = sigmoid(value.ref.sub(minVal.ref).mul(SHARP.ref));
    const leMax = sigmoid(maxVal.ref.sub(value.ref).mul(SHARP.ref));
    return geMin.ref.mul(leMax.ref);
  };

const wallMinX = WALL_X0.ref.sub(WALL_HALF_WIDTH.ref);
  const wallMaxX = WALL_X1.ref.add(WALL_HALF_WIDTH.ref);
  const inWallX = insideBand(params.bx, wallMinX, wallMaxX);
  const inWallY = insideBand(params.by, WALL_Y0, WALL_Y1);
  const inWall = inWallX.ref.mul(inWallY.ref);

Dragon Curve

Recursive dragon curve with draggable endpoints and squareness control on segments.

Loss—

Fractal Tree

Recursive tree branches; drag to tune split angle, trunk length, and attenuation.

Loss—

return new G9((params) => {
  const pts = {};
  const PI_180 = Math.PI / 180;
  const branchTilt = (depth) =>
    depth === 4 ? params.d4
      : depth === 3 ? params.d3
        : depth === 2 ? params.d2
          : params.d1;
  function branch(base, length, angle, depth, name) {
    const rad = angle.ref.mul(PI_180);
    const dx = np.cos(rad.ref);
    const dy = np.sin(rad);
    const dir = np.concatenate([dx, dy]);
    const tip = base.ref.add(dir.mul(length.ref));
    pts["ln"+name] = line(np.concatenate([base, tip.ref]), {
      stroke: depth > 3 ? "#8B4513" : "#22c55e",
      "stroke-width": Math.max(1, depth*0.7+1),
      "stroke-linecap": "round",
    });
    pts["pt"+name] = point(tip.ref,
      {fill: "#22c55e", r: 3,
       affects: {[`d${Math.max(1, depth)}`]: true}});
    if (depth > 0) {
      const nl1 = length.ref.mul(params.attenuation.ref);
      const la = angle.ref.add(branchTilt(depth).ref);
      branch(tip.ref, nl1, la, depth-1, name+"l");
      const nl2 = length.mul(params.attenuation.ref);
      const ra = angle.sub(branchTilt(depth).ref);
      branch(tip, nl2, ra, depth-1, name+"r");
    }
  }
  const root = np.array([0,120], {dtype: np.float32});
  const startAngle = np.array([-90], {dtype: np.float32});
  branch(root, params.startLength.ref, startAngle, 4, "");
  pts["root"] = point(np.array([0,120], {dtype: np.float32}),
    {fill: "#8B4513", r: 5,
     affects: {startLength: true}});
  return pts;
}, {
  d4: [33],
  d3: [29],
  d2: [26],
  d1: [22],
  startLength: [65],
  attenuation: [0.7],
});

Snake

Cumulative-turn polyline where each segment can be pulled independently.

Loss—

return new G9((params) => {
  const pts = {};
  const turns = [params.r1, params.r2, params.r3, params.r4];
  const segmentLength = 36;
  let angle = np.array([0], {dtype: np.float32});
  let head = np.concatenate([params.x.ref, params.y.ref]);
  pts.p0 = point(head.ref, {
    fill: "#ef4444",
    r: 7,
    affects: {x: true, y: true},
    opt: {regWeight: [0]},
  });

for (let i = 0; i < turns.length; i++) {
    const turnAffects = i === 0
      ? {r1: true}
      : i === 1
        ? {r2: true}
        : i === 2
          ? {r3: true}
          : {r4: true};
    angle = angle.ref.add(turns[i].ref);
    const step = np.concatenate([
      np.cos(angle.ref).mul(segmentLength),
      np.sin(angle.ref).mul(segmentLength),
    ]);
    const next = head.ref.add(step.ref);
    pts["s" + i] = line(np.concatenate([head.ref, next.ref]), {
      stroke: "#1f2937",
      "stroke-width": 5 - i,
      "stroke-linecap": "round",
      affects: turnAffects,
      opt: {regWeight: [0]},
    });
    pts["p" + (i + 1)] = point(next.ref, {
      fill: "#0ea5e9",
      r: 5,
      affects: turnAffects,
      opt: {regWeight: [0]},
    });
    head = next;
  }
  return pts;
}, {
  r1: [6.2594],
  r2: [12.5397],
  r3: [12.7080],
  r4: [6.0184],
  x: [84],
  y: [12],
});

Tongs

Linked tong arms with opening and global rotation controls.

Loss—

const rotate = (xy, a) => {
  const c = np.cos(a.ref);
  const s = np.sin(a.ref);
  const x = xy.ref.slice([0, 1]);
  const y = xy.ref.slice([1, 2]);
  const rx = c.ref.mul(x.ref).sub(s.ref.mul(y.ref));
  const ry = s.ref.mul(x.ref).add(c.ref.mul(y.ref));
  return np.concatenate([rx, ry]);
};

return new G9((params) => {
  const pts = {};
  const SEGMENT = 68;
  let x = np.array([0], {dtype: np.float32});
  let yTop = np.array([0], {dtype: np.float32});
  let yBottom = np.sin(params.b.ref).mul(-SEGMENT);

for (let i = 0; i < 4; i++) {
    const dir = i % 2 === 0 ? -1 : 1;
    const localAffects = i < 3
      ? {b: true}
      : {a: true};
    const nx = x.ref.add(np.cos(params.b.ref).mul(SEGMENT));
    const nyTop = yTop.ref.add(np.sin(params.b.ref).mul(SEGMENT * dir));
    const nyBottom = yBottom.ref.sub(np.sin(params.b.ref).mul(SEGMENT * dir));

const a0 = rotate(np.concatenate([x.ref, yTop.ref]), params.a.ref);
    const a1 = rotate(np.concatenate([nx.ref, nyTop.ref]), params.a.ref);
    const b0 = rotate(np.concatenate([x.ref, yBottom.ref]), params.a.ref);
    const b1 = rotate(np.concatenate([nx.ref, nyBottom.ref]), params.a.ref);

pts["u" + i] = line(np.concatenate([a0.ref, a1.ref]), {
      stroke: "#111827",
      "stroke-width": 8,
      "stroke-linecap": "round",
      affects: localAffects,
    });
    pts["l" + i] = line(np.concatenate([b0.ref, b1.ref]), {
      stroke: "#111827",
      "stroke-width": 8,
      "stroke-linecap": "round",
      affects: localAffects,
    });
    pts["up" + i] = point(a1.ref, {fill: "#0ea5e9", r: 4, affects: localAffects});
    pts["lp" + i] = point(b1.ref, {fill: "#0ea5e9", r: 4, affects: localAffects});

x = nx;
    yTop = nyTop;
    yBottom = nyBottom;
  }
  return pts;
}, {a: [0.3], b: [0.85]});