Explanation

Scene and nodes

A scene is a tree of nodes, a camera and the settings to draw them. It draws whatever state its nodes are in right now; a timeline changes that state over time.

import { Scene, box, ground } from 'cseen';

const s = new Scene({
  view: 'iso',            // the camera
  size: [320, 200],       // drawing size in viewBox units
  title: 'A box',         // the accessible name
});
s.add(ground(), box({ at: [0, 0, 0] }));

Everything is a node

A shape, a device, a chart and a wave are all nodes. They take the same options, can be grouped, moved and animated the same way, and the renderer gives none of them special treatment.

Option	Meaning
`at`	position of the node’s origin, in its parent
`rot`	rotation in degrees about x, y and z
`scale`	uniform scale
`opacity`	transparency of the whole node, 0 to 1
`layer`	draw order between groups of things, lower first

Position, rotation, scale

Drag to turn, scroll or pinch to zoom, double click to reset.

Open in playground

import { Scene, ground } from 'cseen';
import { laptop } from 'cseen/devices';

const s = new Scene();
s.add(ground());
s.add(laptop({ at: [-3.2, 0, 0], width: 2.4 }));
s.add(laptop({ at: [0, 0, 0], width: 2.4, rot: [0, 0, 35] }));  // turned 35 degrees
s.add(laptop({ at: [3.2, 0, 0], width: 2.4, scale: 0.6 }));     // smaller

Groups

Put nodes in a group to move, turn and scale them together. A group is also a unit for depth sorting.

Groups

Drag to turn, scroll or pinch to zoom, double click to reset.

Open in playground

import { Scene, box, ground, group } from 'cseen';
import { monitor, phone } from 'cseen/devices';

const s = new Scene();
s.add(ground());
const desk = group({ rot: [0, 0, 18] });   // turn the whole group at once
desk.add(box({ at: [0, 0, 0.8], size: [4.4, 2.2, 0.12], fill: 0.1 }));
for (const [x, y] of [[-2, -0.9], [2, -0.9], [-2, 0.9], [2, 0.9]]) {
  desk.add(box({ at: [x, y, 0], size: [0.12, 0.12, 0.8] }));
}
desk.add(monitor({ at: [-0.8, 0.2, 0.92], width: 1.9 }));
desk.add(phone({ at: [1.4, -0.3, 0.92], height: 0.9 }));
s.add(desk);

Colour roles

You never pass a colour. You pass a role, and CSS decides what it looks like: ink, faint, accent, warm, cool, s1 to s8, or any role you define. See Theming.

Colour roles

Drag to turn, scroll or pinch to zoom, double click to reset.

Open in playground

import { Scene, box, ground, label } from 'cseen';

const s = new Scene();
s.add(ground());
['ink', 'faint', 'accent', 'warm', 'cool'].forEach((role, i) => {
  const x = (i - 2) * 1.8;
  s.add(box({ at: [x, 0, 0], size: 1.2, role, fill: 0.5 }));
  s.add(label(role, [x, 0, 1.6], { anchor: 'middle' }));
});

Things that follow things

anchor() gives a point that stays attached to an object. An arrow drawn between two anchors follows both as they move.

import { Scene, box, line } from 'cseen';

const s = new Scene();
const a = s.add(box({ at: [-2, 0, 0], size: 1 }));
const b = s.add(box({ at: [2, 0, 0], size: 1, role: 'accent' }));
s.add(line(a.pt('center'), b.pt('center')));

Things that follow things

Drag to turn, scroll or pinch to zoom, double click to reset.

Open in playground

import { Scene, Timeline, arrow, ground, moveTo, wait } from 'cseen';
import { cloud, phone } from 'cseen/devices';

const s = new Scene();
s.add(ground());
const p = s.add(phone({ at: [-3, 0, 0], height: 1.6 }));
const c = s.add(cloud({ at: [3, 2, 2.4], size: 2 }));
// the arrow is attached to both objects, so it follows them
s.add(arrow(p.anchor([0, 0, 1.7]), c.anchor([-1, 0, 0.5]), { role: 'accent' }));

const tl = new Timeline();
tl.play(moveTo(p, [-3, 2.5, 0], 1.6));
tl.play(moveTo(c, [3, -1, 2.4], 1.6));
tl.play(wait(0.6));

Devices, waves and charts expose named anchors the same way (router.signal(), antenna.signal()), so you attach things to them without writing coordinates.

Transparency

alpha makes a surface see-through; opacity fades a whole object.

See-through surfaces

Drag to turn, scroll or pinch to zoom, double click to reset.

Open in playground

import { Scene, ground, label, rect } from 'cseen';
import { sphere } from 'cseen/devices';

const s = new Scene();
s.add(ground());
[1, 0.5, 0.2].forEach((alpha, i) => {
  const x = -3.6 + i * 2.6;
  s.add(sphere({ at: [x + 0.8, 1.4, 0], r: 0.6, role: 'ink' }));
  s.add(rect([x, -0.4, 0], [1.6, 2], { plane: 'xz', role: 'accent', fill: 1, alpha }));
  s.add(label(`alpha ${alpha}`, [x + 0.8, -0.4, 2.4], { anchor: 'middle' }));
});