Skip to main content
100%

Gist 7be9e537d3b1d6886dd5c3d27cd19f35

✓ Published0🌍 Public
UUtopiah
Last edited Aug 24, 2021
Created on Aug 24, 2021

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 8b397c6c25320dd8963daebaa9c8b847

A webcam feed is displayed as a continuously distorted, glitching video stream. The visualization captures the user's webcam video using the `getUserMedia` API and renders it to a canvas, which is then processed in real-time. The glitch effect is achieved by taking the canvas's JPEG data and randomly corrupting individual characters within its base64 encoding using JavaScript, before displaying the result as a dynamically updating image. The animation runs on a timer, cycling the corruption process to create a perpetually shifting, pixelated output.

MMAKIO135
67% match
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.

UUtopiah
65% match
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.

UUtopiah
63% match
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.

UUtopiah
60% match
Loading thumbnail…

[Run it!](https://bl.ocks.org/curran/raw/3184b45f555dae6bebb1536110763824/)

This example displays a live webcam feed as an immersive digital mirror, filling the entire viewport with the video stream. It uses the MediaDevices `getUserMedia` API to request camera access and the `webrtc-adapter` library for cross-browser compatibility, with `window.URL.createObjectURL` to bind the stream to an HTML5 video element. The page relies on minimal CSS and JavaScript, drawing from the camera-control techniques in David Walsh’s tutorial and the MDN documentation for media capture.

CCurran Kelleher
59% match
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.

UUtopiah
57% match
Loading thumbnail…

Poulp

This visualization uses a live webcam feed combined with a static kitten image, processed through a p5.js sketch. The code captures video from the user’s camera and overlays it on a 500×500 canvas, applying an `INVERT` filter each frame to create a negative-color effect. A kitten photo, loaded from Wikimedia Commons, is drawn beneath the video layer. Pressing the spacebar triggers a random pastel background color change, though the exact key-handling logic uses both `keyTyped` and `keyPressed` with inconsistent condition checks. The piece demonstrates real-time image manipulation and user interaction via p5.js’s `createCapture`, `loadImage`, and `filter` APIs.

YYannael
57% match
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.

UUtopiah
56% match