Skip to main content
100%

TestOpenProcessing

✓ Published0🌍 Public
YYannael
Last edited Apr 16, 2016
Created on Apr 16, 2016

This example shows a single black ball bouncing around a white canvas, with its motion driven by the device's accelerometer data. Built with p5.js, the sketch continuously reads the acceleration values from `accelerationX` and `accelerationY` to update the ball's velocity and position. The ball accelerates based on tilt, and simple boundary checks reverse its velocity with a damping factor when it hits the canvas edges, creating a responsive, physics-like interaction.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/5df40d75ef05f4b557973f56e67f55d2'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/7c590fd63e4a7c0129ee508d20181a9b'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/b0e764c122ca3925cc3b057ae9b0e92c'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/a81fa246e7199958b21fd41371e50690'>fresh block</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/5e6777c3d0c0010c414d5ae10ddd8201'>TestOpenProcessing</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/c4f9ddd9b06c520a487e67065ade175c'>TestOpenProcessing</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/9231ef8332f00364d43f17cfd2fb26c1'>TestOpenProcessing</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/962dc3100d43ecf896be7f1dc0504d54'>TestOpenProcessing</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/bfb26079417d7204aa9b880889e6476d'>TestOpenProcessing</a>

forked from <a href='http://bl.ocks.org/Yannael/'>Yannael</a>'s block: <a href='http://bl.ocks.org/Yannael/26b8b44764b870c3ca7059009daf8e02'>TestOpenProcessing</a>

Similar vizzes

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

TestOpenProcessing

A small canvas sketch uses p5.js to simulate a bouncing ball driven by accelerometer data. The ball's velocity and position update continuously from the device's acceleration values, with damping applied on wall collisions to create a physics-like response. The code reads `accelerationX` and `accelerationY` each frame, integrates them into velocity, and applies bounce multipliers at the canvas edges. The sketch renders a simple black ellipse on a white 100x100 background, with the current width value displayed as text in the corner.

YYannael
93% match
Loading thumbnail…

TestOpenProcessing

A bouncing ball moves across a small canvas, responding to the device's accelerometer. The ball's velocity changes based on acceleration values, and it bounces off the canvas edges with a damping effect. The visualization uses the p5.js library, specifically the `accelerationX` and `accelerationY` variables, along with the `createCanvas` and `draw` functions, to animate the ball in real time.

YYannael
92% match
Loading thumbnail…

TestOpenProcessing

A small ball moves across a 100-by-100 canvas, bouncing off the edges with reduced velocity. The motion is driven by device acceleration data, which influences both velocity and position each frame. The sketch uses the p5.js library, with `setup()` initializing the canvas and `draw()` updating the ball’s coordinates via the `ballMove()` function. Acceleration values are read directly from `accelerationX` and `accelerationY`, and the ball’s speed and bounce damping are controlled by the constants `vMultiplier` and `bMultiplier`.

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

TestOpenProcessing

A p5.js sketch displays a small canvas where a black ball bounces against the edges. The ball’s movement is driven by the device’s acceleration values, which are read directly as `accelerationX` and `accelerationY` and applied to velocity and position. The sketch also loads and displays a background image from `assets/moonwalk.jpg`. The code uses p5.js functions including `createCanvas`, `loadImage`, and `ellipse` to render the scene, with custom logic for velocity and bounce damping.

YYannael
90% match
Loading thumbnail…

TestOpenProcessing

This example displays a 100x100 canvas filled with a static background image, using the p5.js library. The code defines variables for position, velocity, and acceleration, along with functions to calculate ball movement based on device acceleration data. However, the `draw()` function only clears the background and does not call `ballMove()`, so the bouncing-ball behavior described in the functions is never executed. The visualization therefore shows only the loaded image with no animated elements.

YYannael
84% match
Loading thumbnail…

p5js Template

A p5.js template demonstrates a simple bouncing ball animation within a canvas. The sketch initializes a circle at a random position and moves it with constant horizontal and vertical speeds, reversing direction when it hits the canvas edges. The code uses p5.js functions `createCanvas`, `background`, `stroke`, `ellipse`, and the global `width` and `height` variables. It draws a red, unfilled circle with a stroke weight of four on a gray background, updating its coordinates each frame in the `draw` loop.

YYannael
70% match