Skip to main content
Log in
U

Utopiah

@Utopiah·114 public vizzes

Loading thumbnail…

Gist ad39e20ce7004353970bc6a1d163e248

This example shows a shell script that automatically converts a video file into a Twitter-compatible GIF by iteratively adjusting the output size. It first attempts a direct conversion with ffmpeg, then repeatedly re-encodes while halving or scaling the width until the resulting GIF falls between 10 and 15 megabytes. The script uses ffmpeg’s filter_complex with palettegen and paletteuse to generate a optimized color palette, and employs shell arithmetic and file-size checks to converge on the target. The process relies solely on command-line tools and standard Unix utilities, with no external JavaScript or visualization libraries involved.

Aug 15, 2022
Loading thumbnail…

doctl-scaling-immers

This example demonstrates the automated, scalable deployment of multiple Immers virtual spaces on DigitalOcean, orchestrated through shell scripts and cloud-init configuration. The visualization maps the creation of three named droplets (`immers1`, `immers2`, `immers3`) on Ubuntu, each pre-configured via cloud-init to run the Immers app in Docker with customized environment variables. The script shows how to dynamically create DNS A records for each server's subdomain, notify the host via a small Node.js/Express server when each instance is ready, and includes a simulation mode for dry runs. The description highlights the interplay between cloud provisioning, DNS setup, and the notification webhook, making the scaling process transparent and auditable.

Jun 14, 2022
Loading thumbnail…

Gist 6ec7169c37cdd07ba6003e3004741d6d

This example demonstrates a workflow for sending academic PDFs to a reMarkable tablet directly from a DOI reference on a webpage. It shows how a DOI retrieved from a hovered reference is used to fetch and download the corresponding PDF, then transfer it to the device via SSH. The code uses Express with CORS to handle HTTP requests, `execSync` for shell commands like `curl` and `wget`, and `scp` for file transfer. The visualization aspect is minimal, focusing on the automated pipeline rather than graphical output.

Apr 24, 2022
Loading thumbnail…

Gist 2492d95a9b8f1ea7c4829b30d896982a

This example shows a live-updating 3D model in a Hubs virtual room, where the displayed GLB asset refreshes automatically whenever new data arrives. It uses an EventSource (Server-Sent Events) to listen for messages from a remote Glitch server, and on each message it updates the `media-loader` component’s `src` attribute by appending a timestamp to the GLB URL, forcing a reload. The code relies on the custom `hubs_utils` helper to find the first matching element, and it demonstrates a simple SSE-driven pipeline for dynamic scene updates without manual intervention.

Apr 9, 2022
Loading thumbnail…

Gist b076c63afe4fb84322089c4f42d4c4ce

This example demonstrates how to fetch and display a web page’s Open Graph description as a text label inside a Mozilla Hubs virtual room, using A-Frame entities and the Fetch API with DOMParser. The code requests `/cloud`, parses the returned HTML for the `og:description` meta tag, and appends a networked A-Frame text element at a fixed position. Because the text is not integrated with Hubs’ NAF schemas, the label is visible only to the local user, not shared across participants.

Feb 20, 2022
Loading thumbnail…

Gist 1c748c68adc016993b3c95f83dca603e

This shell script demonstrates a workflow for syncing highlights from a reMarkable tablet to the Readwise API. It iterates through directories containing highlight files, extracts the document title from accompanying metadata, and processes JSON highlight data using `jq`. The script filters out empty highlights, constructs JSON payloads with the text, title, and author, then sends them via `curl` POST requests to `https://readwise.io/api/v2/highlights/` with an authorization token. The output is a series of API calls that populate a Readwise library with annotated passages.

Feb 16, 2022
Loading thumbnail…

Utils functions for Mozilla Hubs scripting

This example demonstrates a collection of utility functions for scripting Mozilla Hubs scenes, showing how to manipulate entities, load media assets, and query the scene graph. The code uses the A-Frame and Networked-AFRAME APIs to interact with the Three.js object hierarchy. It includes functions to get user media elements via DOM selectors, load assets from URLs by creating `a-entity` elements with `media-loader` and `networked` components, and find avatars by display name. It also traverses the Three.js scene graph to match objects by partial names, and queries media elements by URL patterns using `querySelectorAll` and regex matching.

Feb 14, 2022
Loading thumbnail…

Gist a3437be5adb89eae6d56a2565ad9ad51

This shell script demonstrates how to insert a blank page into a reMarkable tablet PDF file, using the `qpdf` command to split and reassemble pages and `jq` to manipulate the tablet’s JSON metadata. It locates the insertion point from a page title, renumbers all subsequent PDF pages, and shifts the corresponding `.rm` annotation and highlight files to new UUIDs based on the updated `.content` page array. The script relies on `xochitl-data` file paths and handles page-count calculations via `jq`.

Jan 28, 2022
Loading thumbnail…

On device offline dictionary for reMarkable

This script generates an offline dictionary ePub for the reMarkable tablet, converting highlighted words into a reference document. It first extracts single-word highlights from existing ePub files using `grep` and `sed`, then queries the wordset-dictionary JSON files via `jq` to fetch definitions. New definitions are appended to an HTML content file, wrapped in the epubTemplate structure, and compressed into a new ePub using `7z`. The result is automatically copied into the xochitl data directory, with metadata and content JSON created via shell commands, and the xochitl service restarted to load the updated dictionary.

Jan 26, 2022
Loading thumbnail…

Gist 80a7dc5935d9fb21b1c12d26bdc8ef5d

This example shows a Telegram bot that lets users send documents, photos, or URLs to a reMarkable tablet, automatically adding them as readable files. The bot uses `node-telegram-bot-api` with polling to listen for commands and messages, while `child_process.execSync` runs shell commands like `wget` to download content and `adddoc` to insert files into the tablet’s storage. It distinguishes between PDF/EPUB links and other URLs, generating a minimal ePub from a template when needed, then restarts the `xochitl` service to refresh the device’s library.

Jan 26, 2022
Loading thumbnail…

Title of the document

This shell script generates a minimal EPUB 3 template structure for creating e-books on a reMarkable tablet. It creates the required META-INF directory with a container.xml file, the OEBPS directory containing cover, content, and table-of-contents XHTML pages, plus a content.opf package manifest and a mimetype file. The script uses standard Bash echo commands to write each XML and XHTML file, producing a valid, ready-to-fill EPUB skeleton.

Jan 26, 2022
Loading thumbnail…

Gist 5bcd3b7a6ccdbf67fc2cf7e8683ef7b7

This visualization shows the deployment steps of a cloud-init configuration for setting up a Hetzner server with Docker services. It maps the sequence of shell commands, package installations, and Docker Compose operations that migrate existing web applications (Peertube, Jitsi, Dockprom) from a remote source. The code demonstrates Docker CLI usage, docker-compose for service orchestration, and SSH key management for automated transfers. The visualization likely uses a flowchart or timeline representation to display the command order, with plain text annotations highlighting long-running steps and networking setup like custom bridge networks.

Dec 20, 2021
Loading thumbnail…

Gist d26e178be3840d0d68cead166eb45a18

This example shows a shell script that synchronizes PDF and EPUB files from a Nextcloud instance to a reMarkable tablet, automatically adding the necessary metadata and content files so the documents appear in the tablet’s library. The script uses `rsync` to transfer files, `mount.davfs` to access the Nextcloud WebDAV endpoint, and custom helper functions to generate `.metadata` and `.content` JSON files for each new document. It also tracks newly added files in `/tmp/newfilesaddedduringsync` and optionally restarts the `xochitl` service if a configuration file requests it.

Dec 6, 2021
Loading thumbnail…

Gist e2d5c944bbd632e3ae0530e602977f45

This visualization demonstrates a shell-based toolkit for managing a reMarkable tablet’s document library, showing how to query, sync, and convert PDF and EPUB files via command-line functions. It uses `grep`, `sed`, `jq`, and `qrencode` to extract metadata like bookmarked pages and last-read positions, then generates QR codes or PDF summaries with ImageMagick’s `convert`. The code also synchronizes reading progress across two devices using `scp` and `ssh`, restarting the `xochitl` service to trigger file detection. Data originates from the tablet’s local JSON metadata and content files under `~/.local/share/remarkable/xochitl/`.

Dec 3, 2021
Loading thumbnail…

Gist 346c2d11acdcd8e254fa57489ad5f50f

This example shows a QMK-powered macro pad with a 2x4 ortholinear key layout, displaying live status on a built-in OLED screen. The OLED output reads the active layer (“OBS” or “FN”), backlight state, RGB mode number, and current hue, saturation, and value. The code uses QMK’s keyboard APIs, including `oled_write_ln_P`, `rgblight_get_mode`, and `rgblight_get_hue`, along with layer-tap keys like `LT(_FN, KC_ESC)` and mod-tap combinations. RGB lighting is configured via `config.h` with effects like breathing, Christmas, rainbow mood, and snake, while the OLED rotates 180 degrees using `oled_init_user`. The data originates from runtime keyboard state rather than external files.

Dec 1, 2021
Loading thumbnail…

Gist e0a598efbc747e390b5d08367bee63fd

This example turns a Raspberry Pi camera into a simple web-accessible remote snapshot service. The Python script uses the standard `http.server` and `socketserver` modules to run an HTTP server on port 80, with a custom `GetHandler` that responds to the `/photo/` path by launching `raspistill` via `subprocess.Popen` to capture a JPEG to `camera.jpg`, then instructs the browser to load that file. Any other request falls back to the default `SimpleHTTPRequestHandler` behavior, serving static files from the current directory. The visualization is thus a live photograph retrieved on demand, with no charting or rendering library involved.

Oct 15, 2021
Loading thumbnail…

Gist 7be9e537d3b1d6886dd5c3d27cd19f35

A webcam feed is processed in real time to detect hand gestures, which then control a Kodi media player. The system uses the Human library with TensorFlow.js to recognize gestures such as swiping left or right and moving down, triggering volume changes or play/pause commands via the kodi-controller API. Node-webcam captures snapshots, which are converted to tensors for analysis, and the loop refreshes every second.

Aug 24, 2021
Loading thumbnail…

Firefox PDF.js reader autoscroll shorcuts

A short JavaScript snippet adds an autoscroll feature to Firefox’s PDF.js reader. Pressing the “s” key toggles a `setInterval` that calls `scrollBy(0, 1)` on the `#viewerContainer` element every 100 milliseconds, slowly advancing the document. The code uses plain DOM APIs and a keyup event listener, with no external libraries. The animation shows continuous page movement while the shortcut is active.

Aug 16, 2021
Loading thumbnail…

$WikiTitle | {$Group} / {$Title} $ActionTitle

This visualization turns a wiki page into an interactive flashcard deck, hiding each list item’s answer behind a clickable code element and displaying one question at a time. Users click “Remembered” or “Forgotten” to advance, and the results are saved as JSON to a remote wiki page via the `fetch` API with POST requests. The code uses plain DOM manipulation to toggle visibility and opacity, and reads previous session data from a `PIMVRdata` group using `response.json()`.

May 14, 2021
Loading thumbnail…

Gist 34e6ce90cbeecb0bce1d89474d770d28

This example demonstrates a minimal HTTPS setup for PeerJS, showing how to serve a WebRTC signaling page alongside a peer server on the same Express application. The code uses the `express` framework, `https.createServer` with Let’s Encrypt certificates, and `ExpressPeerServer` to handle peer connections at `/peerjs/myapp`. A static HTML page loaded from the root path initializes a `Peer` with a fixed ID, connecting to the specified domain and port. The example relies on the `peerjs` client library and Node.js `fs` to read the SSL credentials, illustrating a secure deployment pattern for WebRTC applications.

Apr 20, 2021
Loading thumbnail…

Gist 0c7905cc49971a9f3b6c86550eb67a35

This example shows how to set up a PostgreSQL database named `hubs` and configure it for use with the Polycosm platform, storing configuration results in `/hab/svc/ita/files/stack-configs.json`. The visualization relies on shell scripting to automate database creation and user authorization, using commands like `createuser`, `createdb`, and `psql` to manage roles and passwords. It also includes a link to a video demonstration, while the code itself focuses on backend infrastructure rather than graphical rendering, making no use of visualization libraries such as D3 or Three.js.

Apr 7, 2021
Loading thumbnail…

Gist 8eb0d83e467d13994fd69c4631130561

This example shows a Mozilla Hubs scene being cloned into a local A-Frame environment by fetching the room’s `objects.gltf` file. The code parses each node’s `HUBS_components.media.src` to load remote media assets, then creates A-Frame entities with `media-loader`, `networked`, and `pinnable` components, preserving translation, scale, and rotation. It uses the browser’s `fetch` API to retrieve the GLTF JSON and manipulates `AFRAME.scenes[0]` directly. The scene data originates from the Hubs room’s hosted GLTF, demonstrating asset reuse across networked 3D spaces.

Mar 23, 2021
Loading thumbnail…

WebExtension main JS to add current URL to PIM (PmWiki POST API)

This example shows a browser extension that saves the current tab’s URL into a PmWiki page via a POST API. It uses the WebExtension `browser.browserAction`, `browser.tabs`, and `browser.windows` APIs to track the active tab and trigger the action. The code fetches the existing page content from the PmWiki source URL, appends the current URL to that text, and sends it back with `fetch` using a `POST` request and `application/x-www-form-urlencoded` headers. It also filters supported protocols to only allow HTTP and HTTPS links.

Mar 13, 2021
Loading thumbnail…

$WikiTitle | {$Group} / {$Title} $ActionTitle

This example turns a web page into a collaborative, multi-user whiteboard and presentation tool. It loads web content as movable cards on a large canvas, where users can drag, snap to a grid, and reposition them. PeerJS enables real-time remote pointers and shared sessions via peer-to-peer connections, while a Jitsi video call can be overlaid for communication. The tool also supports generating a Reveal.js presentation from the arranged cards and toggling a snapping grid for alignment.

Mar 12, 2021
Loading thumbnail…

$WikiTitle | {$Group} / {$Title} $ActionTitle

This example presents a collaborative whiteboard and presentation tool that arranges content cards on an open canvas. The interface uses PeerJS for peer-to-peer connections and a JitsiMeetExternalAPI for video calls, allowing remote collaboration. Users can toggle a snapping grid, generate presentations from the layout, and link to external URLs via iframes. The code also references server-side rendering for previews and includes a custom “monetization” meta tag, indicating a broader integration with web-based sharing and streaming workflows.

Mar 12, 2021
Loading thumbnail…

Gist d4a7aba620fdb64af2e06895c4b14491

A PinePhone’s accelerometer data, read from Linux sysfs paths, streams over HTTP via an Express server to a client that polls the endpoint every 100 ms. The client computes movement by comparing squared y/z values and differences against previous readings, triggering `window.scrollBy(0, 1)` when a step is detected. This animation visualizes walking as automatic page scrolling, using raw sensor values for x, y, and z axes without any charting library.

Jan 19, 2021
Loading thumbnail…

Gist c5f5efe89446d629dad8dba8cfe57dde

This visualization maps the positions of networked avatars in a 3D scene onto a 2D radar-style display using emoji. Every 500 milliseconds, a script queries all elements with the `networked-avatar` attribute, reads their Three.js `object3D.position`, and places corresponding emoji spans on the page using fixed positioning. The local user appears as a grinning emoji, while others use a default smiley. Zombie emoji are removed when their source avatar disappears. The code relies on DOM query selectors and the Three.js scene graph, with no external charting library.

Dec 19, 2020
Loading thumbnail…

Gist 2761dd6bd26cbb45163b317490fa58ff

A WebGL-based virtual reality scene built with Exokit and A-Frame loads a Hubs environment, rendering it through a WebGL 2.0 context. The visualization shows the console log output and error stack traces from the Hubs client, capturing runtime issues such as the MediaRecorder API incompatibility and schema warnings. The example demonstrates how WebXR applications can fail and log errors when running in non-standard environments, using Three.js and the Exokit browser runtime. It highlights error handling and API compatibility challenges in mixed-reality web development.

Nov 9, 2020
Loading thumbnail…

Gist fdfa7a2d6967a2178a3bd0f284dc3c12

A web page uses a Thingy:52 sensor’s gyroscope data to control a three-dimensional avatar in real time. The animation reads gyro values over Web Bluetooth via the Espruino Puck.js library, and when the rotation exceeds a set threshold, the avatar moves forward in the direction the camera faces. Three.js handles the avatar rig and camera rotation, while a 100-millisecond polling interval updates the position. The code runs only in Chromium because it relies on the Web Bluetooth API.

Nov 7, 2020
Loading thumbnail…

Gist 1ab2c1e1ee8b58c4abbd1ee0dde88d77

This example demonstrates a shared virtual room where a light switch and bulb react to the physical state of a Web of Things device, reflecting both local and remote interactions. It shows how a user or another networked avatar can flip the switch, toggling the bulb’s visibility and position while syncing the status to the gateway via HTTP requests. The animation uses A-Frame for scene rendering, the networked-aframe component for multi-user presence, and the Web of Things API to read and update the device’s `on` property. Polling intervals every second check proximity and update the light state accordingly.

Nov 4, 2020
Loading thumbnail…

gateway_thing_pannel.kwinrule

This example demonstrates a KWin window rule configuration that pins a Mozilla Firefox window displaying the WebThings Gateway dashboard to a fixed position and size on a localhost display. The rule, defined in the KWin scripting API’s window rule format, uses properties such as `position`, `size`, `noborder`, and `titlematch` to override default window behavior. It forces the browser window to appear at coordinates 1888,254 with dimensions 450x160 pixels, removing its border while keeping it above other windows. The configuration relies on KWin’s window matching logic, specifically targeting the window class `firefox` and its title, without invoking external JavaScript or data-viz libraries, as the visualization itself is rendered by Firefox’s built-in WebThings Gateway interface.

Oct 31, 2020
Loading thumbnail…

Gist fe5ce76b0cc840bc080dd743b85da077

This example shows a web-controlled traffic light system using a Raspberry Pi’s GPIO pins. Three colored LED lights (red, yellow, green) are toggled via HTTP requests served by Express. The interface presents three full-width color blocks that link to `/start/red`, `/start/yellow`, and `/start/green` routes, each writing a high signal to the corresponding pin using the `onoff` library’s `Gpio` class. A `/stop` route resets all pins to low, while `/shutdown` unexports the GPIO resources. The code runs as a persistent Node.js process.

Oct 25, 2020
Loading thumbnail…

Gist 19159b5e61cfd091dd6f92f5c66f4bb5

A Raspberry Pi–controlled LED blinks on a 250ms interval through an Express web server, toggling via HTTP requests to `/start`, `/stop`, and `/shutdown` endpoints. The animation is driven by the `onoff` Gpio library, which reads and writes pin 21’s state using synchronous calls (`readSync`, `writeSync`). The server listens on port 8888, and the root route confirms the service is running. The example demonstrates how a simple hardware state machine can be exposed as a web-controllable, time-based visual output.

Oct 24, 2020
Loading thumbnail…

Gist c551334af75ff83d1194829e0c5fb51e

This example demonstrates a Stripe webhook integration that automatically provisions Hubs cloud accounts when customers complete a checkout. The Express.js server listens for `checkout.session.completed`, `payment_intent.succeeded`, and `payment_method.attached` events, storing customer email and name data from Stripe payloads. It then calls the Hubs account API using `fetch` with a bearer token to create new accounts. The code uses `node-fetch` for HTTP requests and reads authentication credentials from a local `.ret.credentials` JSON file.

Aug 3, 2020
Loading thumbnail…

Gist a0f917a785ce1a3d2b4ca98ec44c78c3

This example demonstrates a webcam video texture attached to a user’s avatar in a Mozilla Hubs room, with the video element repositioned and scaled to follow the avatar’s movements. The animation runs continuously via a `setInterval` that updates the video’s position and rotation relative to the avatar rig. It uses A-Frame’s `AFRAME.scenes`, the Networked-Aframe (NAF) API for taking ownership of the media element, and JavaScript DOM queries to locate the webcam element by its source hash. The rendering relies on React integration for the Hubs Cloud custom client.

Jul 17, 2020
Loading thumbnail…

Gist 27b0eae72764e9e50963cdf7592e7849

This animation tracks avatar positions in a Mozilla Hubs virtual room over time. A JavaScript interval samples connected users every second, storing their networked IDs and Three.js position vectors in localStorage. The visualization reconstructs movement trails from these recorded snapshots, showing how participants navigate the shared 3D space. It uses the browser’s `setInterval` and `localStorage` APIs, with the Hubs network avatar attributes providing positional data for each connected client.

Jul 5, 2020
Loading thumbnail…

Gist 9e8c4fa996831859a1c099a9906f84e9

This example visualizes the presence of users in a Mozilla Hubs room over time by periodically sampling the room’s member list. It reads the DOM to extract each participant’s nickname and presence status, hashing names for privacy, and stores measurements in `localStorage`. The animation, driven by `setInterval`, appends timestamped snapshots every minute, enabling a temporal view of attendance and activity. The code relies on vanilla JavaScript DOM queries and the `hashCode` function, with no external charting library.

Jul 4, 2020
Loading thumbnail…

Gist 44d38c33dc9ab38f123530e4db1c49b8

This example shows a live console log of participant names appearing in a Hub’s presence log, capturing each new addition with a Unix timestamp. A `MutationObserver` watches the DOM node matching `[class^=presence-log]` and, on every child-list mutation, iterates over added nodes to print `Date.now()` and the node’s text content. The code relies solely on the browser’s native `MutationObserver` API, with no external libraries or rendering. It provides a minimal, text-based trace of when users join or appear in the chat, useful for auditing participation over time.

Jul 3, 2020
Loading thumbnail…

Gist 8bf9375ef73d46b6c471c3ec2abae405

This visualization demonstrates how to automatically select the best available Hubs room from a public list, prioritizing rooms with space for new participants. It fetches room data from a Hubs API endpoint (`/api/v1/media/search`) and evaluates each room based on member count, lobby count, and room capacity, choosing one that is not full. The code uses the Fetch API to retrieve JSON data and iterates through the entries to find a suitable room URL, with a buffer of five slots to avoid overcrowding. The example highlights a practical approach to room balancing in shared virtual spaces.

Jul 3, 2020
Loading thumbnail…

Gist c3927fd16c93fc919a74036325faacd4

In a virtual-reality environment built with A-Frame, a video playlist automatically plays two accessibility-themed VR conference talks inside a networked 3D scene. The code defines an array of MP4 URLs hosted on an S3 bucket, creates an `a-entity` with the `media-loader` and `networked` components, and scales it to ten units while positioning it 35 units away. It disables looping and listens for the video’s `ended` event to switch to the next clip, cycling back to the first after the last. A CORS proxy URL prefixes each source, and the playback jumps near the end for testing.

Jun 8, 2020
Loading thumbnail…

Gist 1c55837a8248d790382976cbb62f37c1

This example displays a volumetric video of a person, loaded and played inside a WebGL scene using the Depthkit.js library. The code creates a script element to load the latest Depthkit.js version, then instantiates a `Depthkit` object to fetch a metadata text file and an MP4 video from a proxy URL. Once loaded, the resulting character is added to the A-Frame scene’s root object, and playback is initiated. The setup targets A-Frame’s boilerplate “hello world” page but fails on Mozilla Hubs due to its custom world-update logic.

Jun 7, 2020
Loading thumbnail…

Gist e788d79614e145d046a33bd7b28a7c55

This example connects a Mozilla Hubs virtual room to a Phoenix channel via the Reticulum client, logging real-time chat messages and presence rollups as they arrive. The code subscribes to channel events with `reticulumCh.channel.on` and tracks room occupancy through `PresenceRollups`, sending a test message with `sendMessage` after five seconds. It uses `HubStats` to record arrival timestamps and `dotenv` for configuration, demonstrating how to build a bot that monitors live activity in a Hubs room.

Jun 6, 2020
Loading thumbnail…

Gist df3588593711a8addd2cff52579ba3dd

This WebGL visualization uses A-Frame and Three.js to detect and highlight intersections between 3D objects in a scene. It calculates bounding boxes for two objects retrieved from the DOM—a burger and an aquarium—using `THREE.Box3().setFromObject()` on their `object3D` components. Yellow and green `Box3Helper` outlines visualize each bounding volume, then the code calls `bbox_burger.intersectsBox(bbox_aq)` to test for overlap, returning a boolean that indicates whether the objects collide.

May 27, 2020
Loading thumbnail…

Gist 273ca366149f0a36c75674dd230980ea

This example demonstrates how to copy and clone pinned 3D objects between rooms in a WebVR scene. It shows the process of serializing object metadata—source, position, rotation, and scale—from the current room, then reconstructing those objects in a target scene. The code uses A-Frame’s `media-loader`, `networked`, and `pinnable` components, along with the browser’s `document.querySelectorAll` and `console.log`. It also directly modifies the `networked-counter` component to raise the default 20-item limit before loading clones, enabling batch duplication of interactive media within the same scene.

May 27, 2020
Loading thumbnail…

Gist b4bdcd5422cc8c12b97fac3776955cb2

This animated presentation showcases a slide deck within Mozilla Hubs, a virtual reality environment, using Three.js and AFRAME to load and position image-based slides in 3D space. The slides, sourced from Unsplash and Twitter, display content about the author’s work with the European Parliament, UNICEF, and Hubs scripting. A custom `slides` object controls navigation via `nextSlide()`, scaling the active slide, and can auto-advance or drop all content using `startAutoPresent()` and `dropAllContent()`. The `media-loader` and `networked` components handle asset loading and sharing in the scene.

May 25, 2020
Loading thumbnail…

Gist 26bae9fecc7a921f8bfd38cf5fc91612

In a WebVR environment, a player physically walks to an execute button to run a Turtle Graphics program that is assembled from image tiles placed on a board. The animation shows a turtle moving through a 3D space, executing commands like "move forward" and "turn left" to solve a maze. The code reads the tiles’ positions using `object3D.position` within a bounding box, sorts them by Y-axis, and runs the instructions with timed `setTimeout` calls, communicating via `hubChannel.sendMessage`. It relies on Three.js and Hubs utilities like `hubs_utils.setPinEntities` for interaction.

May 23, 2020
Loading thumbnail…

Gist e083a79675354e15292c0628307c723f

This example demonstrates a workflow for converting live Networked Drawings into pinned 3D objects within a Three.js-based scene. It shows how each drawing element, selected via `document.querySelectorAll("[networked-drawing]")`, is serialized through the component’s `serializeDrawing()` method and then removed from the view. The resulting GLB data is applied to the most recent networked entity by setting its `pinnable` attribute with `pinned:true`, effectively freezing the drawing as a persistent object. The code relies on the A-Frame component API and JavaScript promises to handle asynchronous serialization.

May 21, 2020
Loading thumbnail…

Gist 6fca8ef5ca087df8d88875360a27898e

This visualization arranges a set of ten idea images across three virtual panels (left, right, and back) in a 3D space using A-Frame entities with `media-loader` components. It captures and restores each image’s position, rotation, and scale via `getIdeasPoses()` and `setIdeasPoses()`, allowing users to switch between initial and new layouts through a dat.GUI control panel. The GUI also provides buttons to snap images back to their panels, pin or unpin them, and generate a fresh layout by sampling new random positions. Images are loaded from external PNG URLs, and the code demonstrates manual object3D manipulation rather than a physics or layout engine.

May 20, 2020
Loading thumbnail…

Gist 7d2dcc343f1204a9cc2385a893786dbe

This example demonstrates how to load and position a 3D model from Sketchfab into a Mozilla Hubs Cloud room using the Hubs Cloud scripting template. The code creates an `<a-entity>` in an A-Frame scene, attaches a `media-loader` component to fetch the model, and sets a `networked` component with the `#interactable-media` template so it appears for all clients. Execution is gated by author, login status, and email regex, and the model is placed at coordinates (1,1,1).

May 20, 2020
Loading thumbnail…

Gist bb77ce7178ad897fb479533651191948

This example pairs a dat.GUI control panel with two GSAP timelines to animate text in a Mozilla Hubs scene. It shows a FizzyText object whose message can be edited live, while sliders for “jump_anim” and “scale_anim” scrub through pre-defined timeline animations. The sliders call `tl_scale.seek(value*1000)` and `tl_jump.seek(value*1000)` on change, mapping slider positions to millisecond offsets. The code also positions the GUI with `gui.domElement.style.marginRight`, demonstrating direct DOM styling alongside the animation controls.

May 18, 2020
Loading thumbnail…

Gist 0249b783d54041950693e61274d62dcc

The example shows a 3D model loaded from Google Poly being controlled through a dat.GUI interface inside Mozilla Hubs, an A-Frame-based social VR environment. A text label displays “dat.gui x Mozilla Hubs” alongside sliders and toggles. The scale slider adjusts the model’s uniform size via `object3D.scale.setScalar`, and the visibility toggle hides or shows the object. The code uses A-Frame’s `media-loader` component to fetch the model, `networked` for multi-user sync, and dat.GUI’s `onChange` callbacks to update the Three.js scene graph.

May 18, 2020
Loading thumbnail…

Gist a0b28a0f9e9463498f93690d50c763eb

This example shows a cross-platform remote camera control system, where Twitch chat messages physically move the camera rig in a Mozilla Hubs virtual room. A MutationObserver on the Twitch chat log captures new messages and timestamps, storing them via a placeholder JSON store, while a polling loop in Hubs fetches that history and triggers panning animations toward a Google Poly burger model or resets the camera to its origin. The camera movement uses the A-Frame animation timeline and Three.js’s `object3D.position`, with the camera identity toggled by modifying the Hubs user profile display name.

May 17, 2020
Loading thumbnail…

Gist b077b41a118451bbcc13bbc94caea681

This example shows a WebVR scene where the user’s viewpoint is repositioned by attaching the active camera-tool entity to an avatar rig. The code selects the last camera-tool element in the A-Frame scene, grabs the avatar rig, and uses Three.js’s `Object3D.attach()` to transfer the camera’s world transform to the rig, effectively making the rig follow the camera’s position and orientation. It demonstrates a simple way to control an avatar’s pose in a virtual environment using A-Frame’s entity-component querying and Three.js’s transform hierarchy.

May 13, 2020
Loading thumbnail…

Gist 7f5cc15d0eae9281c33b735420ae8ee0

This example transforms a PmWiki source page into a searchable interface for code snippets. It fetches the page’s source via the `fetch` API, splits it into lines, and tokenizes text wrapped in `@@` delimiters. Each snippet becomes a clickable link that queries GitHub’s gist search for matches by the user “Utopiah”. The script uses `document.querySelectorAll` to locate existing `<code>` elements in the page and replaces their content with the generated anchor tags, while logging any unmatched snippets. It relies on vanilla DOM manipulation and URL construction, with no external visualization libraries.

May 13, 2020
Loading thumbnail…

Gist eae1ff9b03aed820562579a2572c4efc

The example demonstrates interactive balloon manipulation in a networked 3D space using A-Frame and its body-helper component. It shows how blue and green balloons, identified by hashes and cloned from originals, can be made to float upward by setting dynamic physics with custom gravity values, then reset to a vertical position at height 2, and finally stopped by switching to static bodies. The code uses the Three.js object3D API to adjust positions and relies on the body-helper component for physics simulation, without ownership verification between users.

May 12, 2020
Loading thumbnail…

Gist 7b6be1814abc25f027a85878859ed28a

This example demonstrates a collaborative physics-based game inside a Mozilla Hubs virtual room, where two teams score points by throwing a ball onto targets. It shows real-time networked gameplay with avatars, score tracking, and animated feedback. The code uses A-Frame entities, the networked-aframe (NAF) API for ownership and multiplayer sync, and the Anime.js timeline for star jump-and-scale animations. Assets are loaded from Google Poly via the media-loader component, while target positions are derived from 3D object names in the scene.

May 10, 2020
Loading thumbnail…

Gist 3fe30c4d77ee5d16914b0563deceafe6

This example shows a two-part animated sequence for a virtual-reality avatar, using timed position and rotation changes to create a simple dance-like motion. The code defines two separate animation timelines with the AFRAME.ANIME library, one targeting the avatar rig’s position along the x-axis and another targeting the head node’s rotation. Both timelines loop and pause after their initial setup, with the position shifting by one unit and the head rotating by 0.5 radians. The implementation relies on A-Frame’s entity references (`#avatar-rig` and `#avatar-pov-node`) and object3D properties to apply the transforms.

May 9, 2020
Loading thumbnail…

Gist df11eb7e467ca076297a95d810e7539d

This example demonstrates how to programmatically change a user’s avatar in a Mozilla Hubs client by targeting a specific avatar ID. It shows a function, `changeAvatarByAvatarId`, that updates the user’s profile state using the `window.APP.store.update` method, merging the new `avatarId` into the existing profile object. The code relies on the Hubs application’s internal React state management and exposes a testing hook via `window.APP.store.resetToRandomDefaultAvatar()`. It also references the avatar-editor component’s upload path for potential programmatic avatar customization, using the React framework.

May 9, 2020
Loading thumbnail…

Gist e993403d27f2ac83367cff9794c2ece0

The animation shows a 3D scene that updates live as a new 3D model is exported from Blender. It polls a timestamp file over HTTP via `fetch`; when the timestamp changes, it removes previously uploaded assets and loads the new `model.glb` file into an A-Frame scene. The code uses `AFRAME.scenes[0]`, the `media-loader` component, and the `networked` component to place and share the model, with `setAttribute` positioning it at `0 1 0`.

May 9, 2020
Loading thumbnail…

Gist ea1d4a48f0f962e00002eb8afc95ef20

This example shows how A-Frame entities are dynamically created and networked in a multi-user VR scene using the Networked-Aframe (NAF) schema system. The code defines schemas for static and interactable media templates, then instantiates two `<a-entity>` elements loaded from Google Poly URLs via the `media-loader` component, attaching networked components with template references. One entity uses the `#static-media` template, the other `#test-template`, which is registered through `NAF.schemas.add` to sync only the `position` component. The scene appends these entities to `AFRAME.scenes[0]`, demonstrating how remote clients would synchronize media placement and basic transforms.

May 7, 2020
Loading thumbnail…

Gist 04474e6a8dc5c817fb14edad29c15332

This example integrates Bose Frame audio hardware with a WebXR environment by injecting a custom script into the page. It rotates the avatar’s point-of-view node and appends a `bose-ar-device` element to the body, using the Bose-Frames-Web-SDK and a remote Hubs script. The visualization shows how augmented-reality sessions can receive spatial audio input from connected glasses, with the code relying on `document.createElement` and `object3D.rotateY` to adjust the camera perspective.

May 6, 2020
Loading thumbnail…

Gist db569066a21ec6afce10f185d9c1f60b

This example demonstrates a text-based bot connecting to a Mozilla Hubs room, logging presence updates and chat messages, and sending a greeting after a delay. It uses the ReticulumClient and HubState classes from the Hubs Discord Bot libraries to establish a Phoenix channel connection, while HubStats and PresenceRollups track room occupancy over time. The bot reads configuration from dotenv files and logs timestamped events to the console, showing real-time hub activity without any visual rendering.

May 5, 2020
Loading thumbnail…

Gist e23654b5d95e55cf3eabdf289fc087a3

This example shows a script that exports 3D objects from a Spoke group to Hubs by generating a list of Poly asset URLs. It iterates over child objects of the first object whose name contains “Export”, logging each child’s position, scale, and rotation to the console while constructing its corresponding Poly view link. The code uses Three.js object properties (`object3D.position`, `object3D.scale`, `object3D.rotation`) and the browser’s native `console` API, with `objects3DFromPartialName` as a custom helper for scene traversal. The data source is the Spoke scene’s object hierarchy, and the output is a JavaScript array of Poly URLs for import.

May 5, 2020
Loading thumbnail…

Gist 324400fd51b08d5e22d9e2f3b164d087

An interactive WebXR scene displays a star model that animates through a sequence of scale and position changes. The star scales up and down while simultaneously jumping vertically, creating a looping visual effect. The code uses A-Frame and the anime.js library, specifically `AFRAME.ANIME.default.timeline`, to build two synchronized timelines: one targeting the star’s `object3D.scale` and another targeting its `object3D.position`. The star originates from a Google Poly asset loaded via `getFirstElementFromHash`. The animation restarts both timelines and seeks to a specific time offset to align the motion.

May 4, 2020
Loading thumbnail…

Gist d543cafeb51f2689b1648f6c4e38f700

This interactive multiplayer game, rendered with WebGL animation, turns a Mozilla Hubs room into a competitive ball-throwing arena. Players join red or blue teams by standing near colored signs, then score points by throwing a shared ball into three rainbow disc targets of varying difficulty and point values. The code uses the A-Frame and Networked-Aframe APIs to manage avatars, networked entity ownership, and real-time position tracking, while a `setInterval` gameloop continuously checks ball-to-target distances and updates a score arrow. Team rosters and score announcements are broadcast through the hub channel, and the ball resets when a designated player stands near the fetch sign.

May 3, 2020
Loading thumbnail…

Gist 0a078c962f93acad6420f9af7c503afa

This example shows a multiplayer ball-tossing game inside a Hubs virtual room, where players score points by throwing a networked ball into one of three targets with different point values. The game loop checks the ball’s distance to each target and updates a score arrow’s position accordingly. It uses Three.js for 3D math and rendering, NAF (Networked-Aframe) for ownership and synchronization, and the Hubs utils WebExtension to fetch assets from Google Poly. The scene is animated via a `setInterval` gameloop, with ball retrieval triggered by proximity to a fetch sign.

May 3, 2020
Loading thumbnail…

three object3D finder from partial name

This example demonstrates how to locate and report three-dimensional objects within an A-Frame scene by matching partial names in their hierarchy. The `objects3DFromPartialName` function traverses the scene graph using `AFRAME.scenes[0].object3D.traverse`, filtering for `Object3D` instances whose `name` property matches a regular expression. It then retrieves each matched object’s world position with `THREE.Vector3` and `getWorldPosition`, logging the names and coordinates to the console. The code relies on Three.js and A-Frame’s WebGL rendering to inspect the live scene structure.

May 3, 2020
Loading thumbnail…

Gist 20e943b854f7d56bb5c7bf168325aacc

Three users in a networked Hubs room share a virtual space where red laser objects and ring-shaped hubs orbit around avatars. The code uses A-Frame and the Networked-Aframe (NAF) API to synchronize positions and ownership of entities, with `setInterval` driving an animation loop that calls `attachObjAvatars` to reposition objects every 100 milliseconds. It also demonstrates `NAF.utils.takeOwnership` for controlling shared objects and `getElementsFromHash` to select media-loaded assets by their source URL. The scene shows mixed crowns and lasers attached above named staff avatars, with continuous rotation updates on the objects.

May 1, 2020
Loading thumbnail…

Gist ec675b31a307918b12388d698a79845d

Three avatar-shaped objects in a Hubs room orbit three staff member avatars, their positions and scales updating every 100 milliseconds to follow the users. The animation repeatedly copies each staff avatar’s Three.js position, increments its y-coordinate, and applies a random scale via the A-Frame and Networked-Aframe APIs. Objects are selected by matching a media-loader source hash to a GLB file, and ownership is taken with `NAF.utils.takeOwnership` before transforming the networked element.

May 1, 2020
Loading thumbnail…

Gist 909ed8ec8e459e5e96701e0a3d3247f4

The example demonstrates a networked virtual-reality scene where laser-like media elements continuously rotate and randomly rescale. Using A-Frame and the Networked-Aframe (NAF) API, the code queries all entities loaded via the `media-loader` component whose source URL matches the hash "lase", then applies incremental rotations to each object’s `object3D` transform. Ownership is taken for non-owned networked entities before modifying their rotation and scale. The visualization relies on the browser’s WebXR capabilities through A-Frame, showing real-time collaborative manipulation of shared 3D objects.

May 1, 2020
Loading thumbnail…

Gist e30aac4bd8656b6d68668de3e25042f7

This visualization showcases 3D photogrammetry assets converted from FBX files to GLB format for web display. It uses the FBX2glTF command-line tool to convert models, then generates an HTML scene with A-Frame’s `<a-gltf-model>` component to load the resulting GLTF files. The shell script also converts PNG textures to JPG using ImageMagick, rewrites the GLTF references accordingly, and packs models into binary GLB files with the gltf-import-export library, creating a gallery of textured 3D objects.

Apr 30, 2020
Loading thumbnail…

Gist 2da2793cd17e3359327a13d36ea438c6

A networked virtual scene shows media objects continuously following an avatar through space. The code attaches a video element to the avatar “Utopiah” every 100 milliseconds, repositioning the object’s Three.js coordinates to match the avatar’s position while offsetting it upward and rotating it. It uses A-Frame’s `media-loader` and `networked-avatar` components, along with Networked-Aframe (NAF) utilities to take ownership and sync the object’s transform. The animation loops indefinitely, keeping the video attached to the moving avatar in real time.

Apr 29, 2020
Loading thumbnail…

Gist 35407c28fd6ba2c2097d1b589630c53f

This example demonstrates how to attach 3D objects to specific avatars within a Mozilla Hubs scene, using networked entities and avatar position tracking. The code identifies avatars by their display names and finds media objects by matching URL hashes in their `media-loader` components, then repositions those objects to follow the avatars in real time. It relies on Hubs’ scripting utilities, the A-Frame `AFRAME.scenes` API, and NAF (Networked-Aframe) for ownership and position updates, with object rotations adjusted slightly on each attachment. The script is designed for collaborative VR environments where staff members need virtual items tethered to their avatars.

Apr 28, 2020
Loading thumbnail…

Gist f2b11a8026030b726ecc8c8c9430a9b4

This animation demonstrates an object-snapping interaction in a WebVR scene built with A-Frame and the Networked-Aframe (NAF) API. It shows a media-loaded image (from NPR) being aligned to a wall-mounted texture (from The Dyslexia Shop) when the image comes within a distance threshold. The code uses `setInterval` to repeatedly check proximity via `object3D.position.distanceTo`, then snaps the object by copying the wall’s rotation and position, with a slight random offset. The rendering is animated, using A-Frame’s scene graph and `media-loader` components to identify elements by URL hash.

Apr 28, 2020
Loading thumbnail…

Gist 5aa2bd144b85b3c87117635ea3c3aedd

In this animated network visualization, three named avatars—Utopiah, DJOKOVIC, and Roman—are tracked as colored rings follow their movements in a shared 3D space. The code uses Three.js through A-Frame and the Networked-Aframe (NAF) API to locate avatars and media objects by hash, then continuously repositions each ring above its corresponding avatar every 100 milliseconds. Ownership of each ring is transferred via NAF’s `takeOwnership` to allow remote synchronization. The animation loop relies on `setInterval` and directly copies avatar position data to the ring objects, updating their rotation incrementally.

Apr 27, 2020
Loading thumbnail…

Gist 022700cf05d336b0804c94278e541b0f

In this animated Three.js scene, colored rings follow avatars through a networked virtual environment, with each ring positioned roughly 1.8 meters above its assigned avatar. The code uses AFRAME’s scene graph and networked-avatar selectors to track entities, while NAF.utils’ `getNetworkedEntity` and `takeOwnership` manage object control. A 50-millisecond interval repeatedly copies avatar world positions onto the ring objects, approximating y-values for vertical alignment. The visualization demonstrates real-time multi-user object tracking, pulling avatar data from the scene’s media-loader elements matched against a hash ring identifier.

Apr 25, 2020
Loading thumbnail…

Gist 21469685654d555985edf84357cb2c8e

This example visualizes the spatial distribution of networked avatars in a Three.js scene by extracting their world positions. It shows the relative layout of avatars in 3D space, with a focus on the user’s own avatar as a reference point. The code queries all elements with the `[networked-avatar]` attribute and logs their `object3D.position`, while separately obtaining the user’s position via `getWorldPosition()` on the `.AvatarRoot` element. It uses plain DOM queries and Three.js’s object3D transformation methods, with the data source being live avatar coordinates from the networked environment.

Apr 23, 2020
Loading thumbnail…

Gist a228815e7f945fd39d1dc914fcc32a43

This example uses A-Frame to demonstrate live observation of an HTML attribute change within a 3D scene. It shows how the `MutationObserver` API logs the `position` attribute of an `a-sphere` element as the code updates it from "0 2.75 -5" to "0 1.75 -5". The observer is configured with `{attributes:true}` to trigger on attribute modifications, printing the changed attribute name, new value, and target node to the console. The code directly interacts with the scene via `AFRAME.scenes[0]` and standard DOM querying.

Apr 22, 2020
Loading thumbnail…

Gist a60d72fb8c781bf8832dc4ea9a673382

This interactive WebVR example demonstrates how to inspect and animate 3D objects in an A-Frame scene by linking them to a media asset list. It shows how hovering over an asset in the UI selects a corresponding object, which can then be scaled up or down using the X and Z keys. The code uses A-Frame’s component system, specifically the `media-loader` attribute, to match hashes from the asset list to scene elements, and applies animation via the `AFRAME.ANIME` timeline API.

Apr 21, 2020
Loading thumbnail…

Gist 1866a62d3cb6c066d421a78abd1324e2

This visualization monitors GitHub presence lists by displaying the last four characters of each contributor’s hash in the browser console. It uses a mouseover event listener on presence-list items to extract and log the hash suffix. The code relies on the standard Document Object Model (DOM) API with `querySelectorAll` and `addEventListener`, and does not employ external libraries. The data source is the live presence list rendered by GitHub’s interface, making the example a lightweight, dependency-free tool for observing participant hashes during collaborative sessions.

Apr 21, 2020
Loading thumbnail…

Gist e560cf08abbec5dcd0b2e45475cee171

This example uses A-Frame’s scene graph to locate and highlight a specific 3D element whose `media-loader` component’s source URL matches a given hash string. It queries all entities with `[media-loader]`, filters those whose `attrValue.src` contains the hash, and then scales the first match to a scalar value of 1. The code relies on A-Frame’s component API and the `object3D` property, with a comment referencing NAF’s `getNetworkedEntity()` for networked scenes. The data source is the element’s media URL, and the visualization emphasizes a single hub by adjusting its scale.

Apr 18, 2020
Loading thumbnail…

from screen capture to video timelapse via CLI

This example shows how a sequence of screen captures can be transformed into a playable video timelapse using command-line tools. The process starts with `scrot`, invoked via `watch -n 10`, to take screenshots every 10 seconds. A bash loop then renames the captured PNG files sequentially to `img%03d.png` format, ensuring proper ordering. Finally, `ffmpeg` assembles these frames into an MP4 video at 24 frames per second, scaling the output to 720 pixels wide. The code relies entirely on shell scripting, `scrot`, and `ffmpeg`, with no JavaScript or visualization libraries involved.

Apr 17, 2020
Loading thumbnail…

Gist 51d73414b163626dccd6ae63005f03dc

This example demonstrates a web server that forwards a PDF from a URL directly to a reMarkable tablet. It shows how an HTTP request containing a `pdf` query parameter triggers a download and upload cycle, ultimately returning the uploaded document’s ID as JSON. The code uses Express with CORS for the server, Node’s `https` module for fetching the remote PDF, and the `remarkable-typescript` library to authenticate via a device token and upload the file. The visualization’s behavior is purely functional, with no graphical rendering involved.

Apr 16, 2020
Loading thumbnail…

Gist 3d8c15e486359954c2b5fdaf9e3cb265

An A-Frame scene places PDFs as spatial objects, and a pencil-shaped writing target detects when the user moves within a five-unit proximity. Upon approach, the code sends the PDF’s URL to a local server via `fetch`, triggering a transfer to a reMarkable tablet, while a `setInterval` checks proximity every second. The animation shows the interaction logic, using A-Frame’s `object3D` positioning and the `media-pdf` component to identify source documents, with a deduplication flag preventing repeated sends.

Apr 15, 2020
Loading thumbnail…

send commands to a Mozilla Hubs bot via chat

A Mozilla Hubs bot listens to chat messages and triggers actions when a user types a command. The example shows a "save" command that calls `pimvrSaveRemote("HubsTest", "testFromImportToolLibTris")` to save data. The bot runs in the browser and uses the `hubs_bot_command_via_chat.js` script, which loads the Mozilla Hubs library from `https://mozilla-hubs-lib.glitch.me/client.js`. It polls the chat log every 500 milliseconds by selecting `.Linkify` elements, reads the latest message and its author, and avoids repeating commands. The animation renders the bot's behavior in real time within the Hubs client.

Apr 2, 2020
Loading thumbnail…

Gist 72cb037134b2f91c4df4be644091c0c9

In a WebXR scene built with A-Frame, this animation repeatedly repositions two lamp models relative to the first networked avatar. Every 500 milliseconds, the `setInterval` loop copies the avatar’s position to both lamps, offsets them vertically and horizontally, and randomly scales each lamp using `Math.random()`. The code selects the lamps via `querySelector` for a networked entity and `querySelectorAll("[gltf-model-plus]")` for GLTF models, relying on the `object3D` API from Three.js for transform updates.

Apr 1, 2020
Loading thumbnail…

Getting close to a target object, e.g. here latest added PDF, makes it grow for any avatar within a 5m radius

In this Hubs scene, the most recently added PDF grows incrementally whenever any networked avatar comes within a 5-meter radius, making proximity visually tangible. The code uses Three.js object3D position and scale properties, querying all `[networked-avatar]` elements and the last `[media-pdf]` element from the AFRAME scene. A `setInterval` loop checks distances every 300 milliseconds, adding 0.1 to the PDF’s scale for each nearby avatar, while the animation is driven by the interval rather than a continuous render loop.

Mar 31, 2020
Loading thumbnail…

Locating PDFs with the radius of a predefined entity e.g. where to read/write docs

This example locates PDFs in a networked A-Frame scene by measuring their distance to a predefined writing target, logging the source of any PDF within a radius of five units. It shows how proximity to a specific entity can filter relevant documents for reading or writing workflows. The code uses A-Frame’s `object3D.position.distanceTo()` method, queries entities with `[media-pdf]` and `[gltf-model-plus]` selectors, and accesses the Networked-Aframe (NAF) API via `NAF.utils.getNetworkedEntity()`. The data source is the `attrValue.src` of each PDF component, and the rendering relies on A-Frame’s scene graph and Three.js’s vector math.

Mar 31, 2020
Loading thumbnail…

Pinning all PDFs present in a Mozilla Hubs scene

This example demonstrates a script that pins every PDF present in a Mozilla Hubs scene. It shows how to programmatically iterate over all scene elements tagged with the `media-pdf` attribute and set them as pinned, making them static in the 3D environment. The code uses the A-Frame API to query the scene (`AFRAME.scenes[0].querySelectorAll`) and the Networked-Aframe (NAF) library to access and manage ownership of each entity via `NAF.utils.getNetworkedEntity`, `NAF.utils.isMine`, and `NAF.utils.takeOwnership`. Finally, it applies the `pinnable` component’s `pinned` attribute to lock each PDF in place.

Mar 30, 2020
Loading thumbnail…

Gist 0591ab79900b3fe44d8b1560e3c35f40

This example demonstrates a workflow for converting animated WebP files into GIF format. The script uses `iwatch` to monitor a directory for new WebP files, then extracts each frame with `webpmux` and converts the frames to PNG using ImageMagick’s `convert`. Finally, it assembles the PNG sequence into a GIF with `ffmpeg`, while cleaning up temporary files. The code relies on the WebP tools API, ImageMagick, and FFmpeg’s glob pattern to handle the batch conversion, showing a practical pipeline for format transformation.

Mar 26, 2020
Loading thumbnail…

Gist 79280caf928b23ee59ac2acd56d84be6

This example converts a conference schedule exported from Excel into a localized timetable by manipulating the displayed time values. It shows how the original EDT-based event times are recalculated to reflect the viewer’s timezone, using the browser’s `Date` object and `getTimezoneOffset()` to compute the offset. The script targets specific spreadsheet cells via `document.querySelector` and replaces the “EDT” label with “CET,” while adjusting each event’s hour and minute through string parsing. No external visualization libraries are used; the approach relies purely on vanilla JavaScript DOM manipulation.

Mar 23, 2020
Loading thumbnail…

Gist 7a4aa931c2aa66a9be73b0d0219ae57a

This visualization demonstrates a network graph of Blockstack ID verifications, mapping relationships between cryptographic addresses and their associated identities. It uses d3.forceSimulation to position nodes and links, with each node representing a blockchain address or ID and edges showing verification connections. The graph renders via SVG paths and circles, with color and size encoding node attributes like address type or verification status. Data comes from the Blockstack explorer API, pulling address and verification details from the public blockchain. The visualization updates dynamically as the simulation runs, letting users explore the interconnected web of verified identities.

Nov 21, 2019
Loading thumbnail…

docker warnings from docker info

This visualization parses the text output of `docker info` to surface deprecation and kernel-support warnings as a small, interactive network. It shows each warning as a node, with related messages grouped by their underlying subsystem (memory, CPU, storage). The layout uses `d3.forceSimulation` to position nodes, with collision detection and link forces to keep clusters readable. Data comes from the raw `docker_warnings.txt` file, which is fetched and split into lines, then mapped to nodes and edges based on keyword matching. Hovering highlights a node’s immediate neighbors, while the color encodes warning type—storage warnings appear in red, kernel-capability issues in orange. No animation or temporal data is present; the view is static except for the hover interaction.

Nov 2, 2019
Loading thumbnail…

failed: docker run hello-world

This visualization shows the raw terminal output of a failed `docker run hello-world` command, capturing the moment when Docker cannot mount a layer due to XFS filesystem corruption. The display presents the complete error log, including kernel messages about `ret_from_fork` and XFS SB validation failures. The data originates from a gist by Utopiah, rendered as plain monospaced text without any interactive elements or graphical processing. The visualization relies solely on the terminal output’s inherent structure, using no external libraries or APIs—it simply displays the command, pull progress, and error stack as-is, preserving the original system message format.

Nov 2, 2019
Loading thumbnail…

Gimp script to prepare the captionning of an image

This example demonstrates a GIMP script that automatically prepares an image for captioning by adding a white, semi-transparent band across the lower third of the canvas. It then places placeholder text reading “lorem ipsum” in black at the bottom of that band. The script uses the GIMP Script-Fu API, including functions like `gimp-image-width`, `gimp-layer-new`, `gimp-drawable-fill`, `gimp-layer-translate`, and `gimp-text-fontname`, to create and position the overlay and text. The rendering approach is purely procedural, operating on the active image and layer without external data.

Oct 13, 2019
Loading thumbnail…

Download all your Glitch projects

This example shows a command-line script that downloads every project from a Glitch user account as a compressed archive. It fetches the user’s project list from the Glitch API, then iterates through each project and saves it as a separate `.tar.gz` file using `node-wget`. The script relies on the `node-fetch` library to call `https://api.glitch.com/users/${USER_ID}` with an authorization token, and then triggers downloads from the project download endpoint. It prints the name of each project as it is retrieved, but does not visualize data—it automates file backup.

Mar 25, 2019
Loading thumbnail…

1 liner to remove adult content from the PirateBay top 100 of the last 48hrs

This example filters adult content from the PirateBay top 100 of the last 48 hours. It shows a live, browser-based data-cleaning interaction that hides unwanted torrent entries directly from the page’s DOM. The code uses the Document Object Model (DOM) API via `document.querySelectorAll` to select anchor elements whose `href` attribute ends with `"500"`—the category identifier for adult content—and then hides the corresponding parent table rows by setting their `style.display` to `"none"`. No external libraries are used; the approach relies purely on vanilla JavaScript selectors and inline style manipulation.

Mar 3, 2019
Loading thumbnail…

Gist ce8dc1a794f0819b5df7bc02a84b3baa

This visualization captures the raw output of a USBPcap command-line session, displaying a tree of USB devices connected to a HoloLens and Samsung Mixed Reality headset. The terminal text shows device hierarchy, including a Generic SuperSpeed USB Hub with composite devices and HID-compliant sensors, followed by a prompt asking to select a filter and an "Invalid input" error. The rendering relies on plain terminal text output rather than graphical libraries, using no d3.forceSimulation, Three.js, or Canvas APIs. It presents the unprocessed command-line interaction as the data source, showing how USBPcap reports device enumeration and user input handling.

Jan 8, 2018
Loading thumbnail…

from Blender to WebVR in 1 click

A single click in Blender exports the current 3D scene as a glTF model and publishes it to a remote server, producing a WebVR experience viewable in a browser. The script uses the Blender glTF exporter, the A-Frame library with the aframe-extras animation-mixer component, and Python’s requests module to upload the model, binary, and generated HTML files. The generated page includes an A-Frame scene with a lightblue sky and the model positioned in space, with animation-mixer removed if no actions exist. The backend is a simple PHP file that stores uploads and returns a shareable URL.

Aug 20, 2017
Loading thumbnail…

360 map for offline rendering of an existing heavy scene

The example shows a 360-degree map for offline rendering of a heavy Blender scene, producing browsable equirectangular panoramas at each grid position. It uses Blender’s Python API with the CYCLES engine and GPU device, setting the camera to PANO type with EQUIRECTANGULAR projection. The script renders full-resolution (2048x1024) JPEGs and preview images (512x256) at a 5x5 grid, translating the camera by 1 unit increments. It demonstrates a workflow for pre-rendering immersive views, with planned improvements like stereoscopic renders and shader-based warping.

Aug 11, 2017
Loading thumbnail…

Shading in Blender

The example shows how to apply a custom green shader to the active object in Blender, replacing its material appearance with a flat color. It first switches the 3D viewport to material shading mode and sets the game settings to use GLSL for real-time rendering. The code then assigns a minimal GLSL fragment shader that outputs a fixed RGBA color to every material on the mesh. This demonstrates direct shader manipulation through Blender’s Python API, specifically using `bpy.context` to access the active object and viewport spaces, and `mat.getShader().setSource()` to inject the shader source.

Aug 10, 2017
Loading thumbnail…

Blender Python script to triangulate obj coming from Google Blocks

A Blender Python script converts OBJ files exported from Google Blocks into triangulated OBJ and glTF formats for web-based viewing. It walks through directories, deletes existing scene objects, imports each mesh, selects all geometry, and re-exports with the `use_triangles=True` option, while conditionally calling `export_scene.gltf` when available. The code relies on Blender’s `bpy` API for scene manipulation and file I/O, with the processed result displayed on a demo page.

Aug 3, 2017
Loading thumbnail…

VRLab Brussels members vs active

This animated 3D visualization compares the total membership and active member counts of VRLab Brussels over time, using data from Meetup.com statistics. Rendered in a virtual-reality scene with A-Frame, yellow boxes represent total members and semi-transparent red boxes represent active members, arranged in a circular formation with heights scaled by count. The scene includes a rotating camera view, a yellow sphere, and a floating VR Lab model. D3.js computes the radial layout and bar heights dynamically from two arrays of monthly data points.

Jun 27, 2017
Loading thumbnail…

Exploring smart contract with a web interface using Ethereum and solidity for the Blockchain workshop at iMAL

This example demonstrates a web interface for exploring a smart contract on the Ethereum blockchain, showing account balances, block information, and gas prices retrieved via the Web3.js API. It initializes a connection to an Ethereum node, queries the first four accounts and their balances, and displays details about the latest block and available compilers. The code then defines a ballot contract using an ABI and includes the compiled bytecode for deploying it, enabling interactive voting and delegation functions within the browser.

Nov 6, 2016
Loading thumbnail…

Interactive dataviz for VR

This interactive dataviz places a 3D scatterplot inside a virtual reality scene using A-Frame, with five red spheres positioned along a path connected by a tube. The example shows how D3’s data-driven approach can generate VR entities, as the code iterates over a hardcoded array of coordinates to create each sphere. A gaze-based cursor triggers a custom `cursor-listener` component that raises a sphere on mouseenter, simulating selection without controllers. The scene includes transparent planes as spatial reference grids and a light blue sky, while D3 v4 remains unused beyond its inclusion in the HTML.

Oct 17, 2016
Loading thumbnail…

Wiki data, first 10 pages only (force-Directed Graph with Mouseover)

A force-directed graph visualizes the first 10 pages from a Wikipedia dataset, showing nodes as circles labeled with page names and links as lines between connected pages. Hovering over a node enlarges its circle with a smooth transition. The visualization uses d3.v3’s `d3.layout.force` for layout and animation, with SVG rendering for nodes and links. Data comes from an external `wiki_graph_var.js` script, which provides the `wiki.Nodes` dictionary, while mouseover and mouseout events trigger the radius changes.

Sep 15, 2016
Loading thumbnail…

Wiki data, first 10 pages only (force-Directed Graph with Mouseover)

A force-directed graph displays the first ten pages from a wiki dataset, with nodes representing page titles and links showing their target relationships. The visualization uses D3 v3’s `d3.layout.force` to compute positions, while SVG circles and text labels render each node. Mouseover and mouseout events trigger transitions that enlarge or shrink the circles via `transition().attr("r")`. The underlying data comes from an external JavaScript file (`wiki_graph_var.js`) that defines the node dictionary and link arrays.

Sep 15, 2016
Loading thumbnail…

VR Knowledge Map

A virtual reality knowledge map displays two interactive lessons on positioning and color, each featuring a colored cube, explanatory text, and a code snippet. Built with A-Frame and the aframe-text-component, the scene uses a camera entity with look and WASD controls, plus a cursor for mouse interaction. The code loads lessons from a hardcoded JavaScript object, and a query-string parameter can reposition the camera to a specific lesson. Clicking a “Save” text element opens an email with the current lesson code encoded for sharing.

Jul 5, 2016
Loading thumbnail…

Gist 5374ae5e90acada9f9225c8154461e5f

This visualization presents an interactive tooltip and navigation system built on top of the fullpage.js scrolling framework. The code attaches click handlers to the navigation dots generated by fullpage.js, redirecting users to the corresponding section hash when clicked. It uses jQuery selectors to target the `#fp-nav > ul > li > div` elements and binds a `click` event that navigates via `document.location.href`. The example demonstrates a quick fix for making fullpage.js’s built-in dot navigation clickable, enhancing usability without altering the core library’s behavior. No external data sources or rendering libraries are involved.

Jun 13, 2016
Loading thumbnail…

VR graph

This example renders a force-directed graph as a 3D virtual reality scene using A-Frame and D3.js. It shows five nodes from the Les Misérables dataset as colored spheres, connected by cylinders sized by link value. The code uses D3’s force layout (`d3.layout.force`) to simulate node positions, then updates A-Frame entity attributes (`position`, `geometry`) on each tick. D3’s selection API handles scene creation and event binding, including a fuse cursor on the camera for VR interaction. The scene includes ambient and point lighting, a sky background, and a customized camera with visible cursor.

May 22, 2016
Loading thumbnail…

slave voyages - embarking

This visualization shows the relative scale of the transatlantic slave trade over time, with countries stacked as layered area charts. Each country’s embarkation counts are plotted as a filled area from 1501 to 1866, with the height of each layer proportional to the number of enslaved people embarked per year. The countries—Portugal, Great Britain, France, Spain, Netherlands, and the U.S.A.—are overlaid with a small vertical offset between layers so the viewer can compare both total magnitude and temporal patterns. A legend on the left identifies each country by color, and light vertical gridlines mark every 20 years. The chart is rendered as an SVG using D3, with data sourced from slavevoyages.org.

May 12, 2016
Loading thumbnail…

testing

A red rectangle fades to blue over three seconds, demonstrating a basic SVG transition. The visualization uses D3.js version 3.5.5 to select the body element and append an SVG canvas, then applies a `transition().duration(3000).ease("bounce")` to animate the rectangle’s fill style. The code is minimal, with no data source or interaction, and relies on the blockbuilder.org template. The animation shows a single shape changing color, highlighting D3’s ability to animate SVG attributes with custom easing functions.

Apr 15, 2016
Loading thumbnail…

p5js Template

This example shows a single red circle moving diagonally across a gray canvas, bouncing off the edges. Built with the p5.js library, the sketch uses the `setup()` and `draw()` functions to initialize a 886 by 348 pixel canvas and animate the circle’s position. The `ellipse()` API draws the shape, while global variables track its x and y coordinates and speed; reversing the speed when the circle hits the canvas boundaries creates the bouncing effect. No external data is used.

Apr 14, 2016
Loading thumbnail…

p5js Template

A bouncing white circle moves across a gray canvas, reversing direction when it hits the edges. The sketch uses the p5.js library, with `setup()` initializing the canvas and random starting position, while `draw()` updates the ellipse’s coordinates each frame. Horizontal speed increases slightly on edge collision, while vertical speed flips sign. No external data is loaded; the example demonstrates basic animation and collision logic entirely through p5.js drawing functions.

Apr 14, 2016