p5js Template

100%

✓ Published0🌍 Public

Last edited Apr 14, 2016

Created on Apr 14, 2016

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Utopiah/'>Utopiah</a>'s block: <a href='http://bl.ocks.org/Utopiah/42fa9fbd2e1dfa2874a087fdc105337b'>P5JS with color testing</a>

forked from <a href='http://bl.ocks.org/Utopiah/'>Utopiah</a>'s block: <a href='http://bl.ocks.org/Utopiah/54f92111e29a3c79f9572ae028ce30fd'>P5JS with color testing</a>

Similar vizzes

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.

UUtopiah

87% match

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.

UUtopiah

86% match

Loading thumbnail…

p5js Template

This example demonstrates a minimal p5.js template that creates a canvas filling the browser window and draws a single rectangle at coordinates (100, 100) with a default size of 100 by 100 pixels. The sketch uses the p5.js library, loaded from a CDN, and relies on the `createCanvas` and `rect` functions in the setup phase. No animation or interaction is implemented, making it a static starting point for further p5.js experiments.

YYannael

77% 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

77% match

Loading thumbnail…

p5.js example

This example displays a simple animated scene where a yellow circle moves horizontally across an 800×500 canvas. It uses the p5.js library, loading it via CDN and the `createCanvas()` and `draw()` functions, with the circle’s x-position incremented each frame and reset when it exits the screen. The sketch sets a gray background and draws the moving shape using p5.js’s `background()` and `circle()` methods, demonstrating basic animation and state management in a blank HTML page with a "Hello!" message.

AAlark Joshi

77% 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

76% 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

76% match

Loading thumbnail…

p5js Template

This example demonstrates a minimal p5.js sketch that draws primitive shapes—a rectangle, an ellipse, and a line—on a canvas sized to the browser window. The code initializes the canvas in the `setup()` function, while the `draw()` function continuously hides the cursor and calls `fullScreen()`. It uses the p5.js library’s `createCanvas`, `rect`, `ellipse`, `line`, `noCursor`, and `fullScreen` APIs to render static geometry without any data source or user interaction.

YYannael

76% match