p5JS

100%

✓ Published0🌍 Public

Last edited Jan 17, 2022

Created on Jan 17, 2022

In this interactive visualization, users draw freehand with the mouse, and their drawing is recreated as an animated series of rotating epicycles. The application uses the p5.js library to handle canvas rendering, mouse input, and animation. After the drawing is complete, the code computes its Discrete Fourier Transform to decompose the path into a set of frequency components, then sorts them by amplitude and reconstructs the shape using circular motion. The output shows both the tracing circles and the resulting magenta path being redrawn over time.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

First P5 Assignment

A single circle in the center of the canvas, rendered with the Processing.js library (p5.js), changes color upon mouse click. The visualization shows a static composition of three concentric ellipses, all sharing the same randomly selected RGB color with a semi-transparent fill. The program, written in JavaScript, uses the p5.js `setup()`, `draw()`, and `mousePressed()` functions. When the mouse is pressed within the largest ellipse, new random values for red, green, and blue are assigned, altering the stroke and fill of all shapes. The rendering occurs on a 720x400 pixel canvas.

AAlark Joshi

76% match

Loading thumbnail…

P5_Test

A visualization built with p5.js renders a set of three concentric circles against a dark background. The sketch creates a 1000 by 500 pixel canvas and uses the `createCanvas` and `circle` functions to draw each circle at the same horizontal center with increasing radius and vertical offset. The `noLoop` function stops continuous redrawing, leaving a static composition of purple shapes on a light gray field.

CChandana Srinivas

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

74% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. Each frame, the code computes positions and radii using trigonometric functions of time and grid coordinates, creating swirling, morphing shapes with shifting colors. The animation runs continuously via `requestAnimationFrame`, with a semi-transparent black overlay (Canvas `fillRect`) producing trailing motion blur effects. The canvas resizes dynamically to fit the window, and all rendering uses the native Canvas 2D API, including `arc` and `fill` for circle drawing. No external libraries are used; the math-driven design follows the original MIT tutorial’s approach.

CConvert-Jade

73% match

Loading thumbnail…

mouse_move1

This example demonstrates a real-time interactive visualization of a circle that follows the mouse cursor across an SVG canvas. The React application tracks mouse movement using a `useCallback` event handler, updating the circle’s position with each `clientX` and `clientY` coordinate. The circle is rendered as an SVG `<circle>` element, with its center bound to the stored mouse position state. The code showcases importing local ES6 modules and D3’s `arc` function for constructing geometric paths.

SsunilthkGmail

73% match

Loading thumbnail…

Circular Geometric Patterns

This interactive visualization cycles through circular geometric patterns, drawing a series of overlapping circles and a connecting polyline at the center of an SVG canvas. The pattern evolves automatically as a timer increments both the number of nodes and a "skip factor" that determines the angular spacing between points. Built with React and D3 v5, it uses `d3.range`, `d3.line`, and `d3.curveLinearClosed` to generate points along a circle and construct the path, while React's `useState` and `useEffect` drive the animation loop.

CCurran Kelleher

73% match

Loading thumbnail…

Exit Key

This example uses the p5.js library to render a simple, animated composition of concentric circles against a dark background. The drawing shows three stacked circles, each progressively larger, with a small cluster of three circles positioned to suggest a face at the top. The `setup()` function initializes a 400x400 canvas, while the `draw()` function runs continuously, applying stroke and fill colors before plotting each circle with the `circle()` API. The code relies on p5.js’s built-in rendering loop and canvas methods.

AAllen Jake Polintan

73% match

Loading thumbnail…

Interactive react

A single dark circle follows the cursor across a full-screen SVG canvas, reacting instantly to every mouse movement. The visualization uses React 16.9 with the `useState` and `useCallback` hooks to track pointer coordinates, updating the circle's `cx` and `cy` attributes via ReactDOM rendering. The example demonstrates React's declarative approach to interactive graphics, with the `onMouseMove` event handler on the root SVG element driving all state changes in real time.

LLaura Jackson

72% match