Skip to main content
100%

Gist d4a7aba620fdb64af2e06895c4b14491

✓ Published0🌍 Public
UUtopiah
Last edited Jan 19, 2021
Created on Jan 19, 2021

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.

AI-generated description

Similar vizzes

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
67% match
Loading thumbnail…

Untitled

Three smoothed lines trace accelerometer and gyroscope readings from a wearable sensor, mapping z-axis rotation against z-axis acceleration, x-axis rotation against x-axis acceleration, and y-axis rotation against y-axis acceleration. The chart uses `d3.scaleLinear`, `d3.line` with `curveBasis`, and D3 v6 axes to render the paths as blue, red, and green strokes against a grid. Data comes from two CSV files, `sensor.csv` and `sensor2.csv`, capturing movement over time. Axis labels and a title describe the comparison of movement interpretations.

Bbicyclecode
63% match
Loading thumbnail…

Gist d1c4aa87fcfefde869f59c98b73ef3fb

This example uses a custom physics simulation to render a network of nodes and links, with each node’s position updated iteratively and drawn as a smooth curve. The code relies on `d3.forceSimulation` and `d3.forceLink` to compute forces, while custom `requestAnimationFrame` loops and `canvas` paths render the animated edges. The data appears to be generated randomly, with no external dataset, and the visualization emphasizes the evolving structure of the simulated graph over time.

11wheel
59% match
Loading thumbnail…

TestOpenProcessing

This example uses the p5.js library to render a small canvas with a single black circle that moves according to the device's accelerometer readings. The ball’s velocity is updated from the acceleration values each frame, and it bounces off the canvas edges with a damping factor. The sketch reads raw accelerationX and accelerationY data directly, translating them into motion without any external dataset or simulation.

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

UUtopiah
59% match
Loading thumbnail…

Document

A real-time waveform plot on a canvas scrolls horizontally as new random data points arrive, creating a dynamic line graph. The animation updates every 100 milliseconds, shifting the drawing origin leftward and clearing the canvas to simulate an endless stream. Built with the HTML5 Canvas API, it uses `setInterval`, `clearRect`, and `translate` to manage the redraw cycle. The line is drawn in red, showing a continuous trace of fluctuating y-values around a baseline.

KKelvinZCH
59% match
Loading thumbnail…

Gist a8eb67fdfa76e1f3188f

This example demonstrates a scrolling visualization where sections of text trigger changes in a fixed graphic. The page uses D3’s custom `graphScroll` function to monitor scroll position, highlighting the active text section and applying CSS classes to the visualization to indicate whether it is fixed, scrolling, or below the viewport. The graphic responds to scroll progress, with sections becoming active as the user moves through the page, and the visualization dynamically updates its position relative to the viewport. Rendered with SVG and animation, the piece creates a scroll-driven storytelling experience where the graphic stays pinned while the text scrolls past.

BBenHeubl
59% match
Loading thumbnail…

TestOpenProcessing

A small p5.js sketch simulates a bouncing ball on a 100×100 canvas. The ball’s motion is driven by the device’s accelerometer data, with acceleration values from `accelerationX` and `accelerationY` feeding velocity and position updates each frame. The ball rebounds off the canvas edges with a damping factor, and the current x-coordinate is displayed as text in the corner. The code uses the p5.js `setup`, `draw`, `createCanvas`, `ellipse`, and `background` functions, with no external data source beyond live sensor input.

YYannael
59% match