Mercurial

annotate infinite_canvas/README.md @ 276:b55c22cff335

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add interactive infinite canvas prototype
author MrJuneJune <me@mrjunejune.com>
date Mon, 17 Aug 2026 16:57:56 -0700
parents
children 8d560f50ed4c
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
276
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 # Infinite Canvas
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 Native and WebAssembly Raylib 6 prototype for a world-space, immediate-mode
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 infinite canvas.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 ## Build and run
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 ```bash
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 # Native development build with Raygui controls
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 bazel run //infinite_canvas:dev
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 # Start directly in the ten-browser stress scene
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 INFINITE_CANVAS_BROWSER_STRESS=1 bazel run //infinite_canvas:dev
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 # Native build without development UI
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 bazel run //infinite_canvas:app
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 # Browser build and local server
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 bazel build //infinite_canvas:infinite_canvas_wasm
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 bazel run //infinite_canvas:serve
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 ```
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 Open `http://127.0.0.1:4343/index.html` after starting the server. Pass a
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 different port as an argument only when needed.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 The native development target opens at 1920x1200 and starts with a gallery
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 layout containing one non-overlapping example of every entity type.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 Theme mode defaults to `auto`, which follows the OS light/dark preference at
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 startup. Rendering consumes a shared semantic `Canvas_Theme` palette for the
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 canvas, developer controls, and camera-pinned notifications. Until the planned
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 config file lands, `INFINITE_CANVAS_THEME=light|dark|auto` provides an explicit
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 override. The developer panel also includes a live light/dark mode toggle.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 ## Controls
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 - Middle-mouse drag, or Space + left-mouse drag: pan
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 - Mouse wheel: zoom around the cursor
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 - WASD or arrow keys: pan (disabled while a text area has keyboard focus)
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 - Left-mouse drag on an entity: select and move it
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 - `P`: pin or unpin the selected entity in screen space so it remains visible
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 while the camera pans and zooms; pinned entities show a blue pin badge
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 - Development toolbar: spawn/clear entities, reset the camera, or restore the
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 deterministic demo scene
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 - `View camera context`: open a live, scrollable snapshot of entities
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 intersecting the camera viewport and their current semantic values
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 - `10 browser stress scene`: lay out ten compact independent browser views for
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 performance testing
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 - `White`/`Grid`: toggle the optional grid; the default canvas is pure white
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 Canvas primitives include shapes, lines, text, buttons, editable text areas,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 dropdowns, accordions, cards, calendars, switches, tables, notifications,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 scrollable areas, images, and web content. Accordions
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 expand with eased height, chevron, divider, and content transitions; cards
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 toggle emphasis, calendars select dates, and switches animate their track color
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 and thumb position when toggled. The default browser build embeds
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 `https://mrjunejune.com` in a camera-tracked iframe. Native builds open
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 `https://www.google.com` in a CEF off-screen browser whose pixel buffer is
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 uploaded into a Raylib texture. It remains inside the canvas and participates
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 in pan, zoom, clipping, and entity dragging on Windows, macOS, and Linux. Web
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61 views have no simulated browser toolbar: drag their narrow outer edge to move
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62 them and drag the bottom-right handle to resize them. Multiple web entities have independent
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 browser instances, URLs, focus, input, and rendering. Browser resources are
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 assigned only to visible entities, off-screen views are suspended, and the
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 native CEF pool supports up to twelve live browsers. Small background views
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 render at a reduced frame rate, larger views receive a moderate frame budget,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 and the focused view runs at 30 FPS so scenes with ten compact browsers remain
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 responsive without giving every page the maximum rendering budget. Native
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 browser viewport and texture resolution follow the displayed view size in
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 64-pixel buckets, capped at 1280x800, so resized views become sharper without
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 reallocating continuously during a drag.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 Tables support row selection, and notifications behave as bottom-right toast
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 cards: multiple toasts overlap compactly, fan into a spaced stack on hover,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 and slide/fade away from either Undo or close. Position, size, stack expansion,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 and dismissal all use eased frame-rate-independent transitions. Scrollable areas consume the
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 mouse wheel without zooming the camera. Image
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 entities render HTTPS URLs or native filesystem paths through CEF; browser
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 builds render URLs or paths available in the Emscripten filesystem. Override
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 the demo image in native development with
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 `INFINITE_CANVAS_IMAGE_SOURCE=/path/to/image.png`.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 The first native build downloads the platform CEF 151 minimal distribution.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 Linux stages its runtime once under
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 `~/.cache/zenbu/infinite-canvas/cef-151`; application state and the RGBA paint
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 buffer remain owned by the Dowa arena, while CEF owns its browser internals.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 Buttons animate on hover/press and toggle when clicked. Dropdowns open a real
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 option menu with hover and selection states. Selected text areas accept typing,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 Enter, and Backspace. Dragging still moves every primitive.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 Camera context is derived from the visible world rather than a hidden
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 conversation store. Panning entities outside the viewport removes them;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 zooming out includes and concatenates newly visible entities. Each entry
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 contains identity, type, placement, pin state, and type-specific state such as
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 text content, dropdown selection, switch value, selected calendar date or table
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 row, scroll position, image source, and browser URL. The current text format is
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 intentionally provisional so it can later be replaced by the final API
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 contract.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 The prototype uses the Inter variable font under the SIL Open Font License.
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 ## Memory ownership
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 The application creates one Dowa arena. Application state and the fixed-capacity
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106 entity array are arena-owned, there are no per-frame first-party allocations,
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107 and the arena is released once during native shutdown. Browser lifetime memory
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108 is reclaimed with the WebAssembly runtime when the page closes.