canvas-sketch x akai-lpd8

100%

canvas-sketch x akai-lpd8

✓ Published0🌍 Public

Last edited Mar 27, 2019

Created on Mar 26, 2019

This example shows a real-time abstract drawing that responds to MIDI controller input. It maps knob positions to the x and y coordinates and size of an ellipse, which is drawn repeatedly to create a flowing, generative trail. Pads and the fourth knob trigger resets and color changes. The sketch uses the `canvas-sketch` framework with p5.js, and the `akai-lpd8` library to read control changes and note-on events from the hardware device.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 7942740a263d3aa26e8c77adad206372

This visualization is an interactive canvas-based musical instrument that maps a two-dimensional grid of colored, circular nodes to specific musical notes. It shows how different spatial regions correspond to different tones, with the size and color of each node likely encoding additional sonic parameters such as pitch or octave. The application uses a custom `PitchDetector` algorithm and a `Player` class to translate node interactions into audio output, while the rendering relies on Canvas drawing operations. The code references the `notes_midi_freq.csv` dataset to map note names and MIDI numbers to their corresponding frequencies, enabling the generation of accurate musical tones.

MMAKIO135

62% match

Loading thumbnail…

p5JS

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.

TTanmay Bishnoi

62% match

Loading thumbnail…

Drawing pad

This interactive drawing application allows users to paint freeform strokes on a Canvas element. It uses a toolbar to select stroke color and line width, and includes a clear button to reset the drawing surface. The code uses the Canvas `getContext`, `lineTo`, and `stroke` methods to render paths as the user drags the mouse, with the canvas resizing to fit the window. The interface is styled with CSS flexbox and a gradient title.

CCora

60% match

Loading thumbnail…

Canvas Animation

This canvas animation draws a rotating, flower-like pattern of curved lines radiating from a central point, with small solid circles placed at each outer endpoint. The design morphs continuously as the entire shape rotates and dashed lines shift in a repeating loop. Built with raw JavaScript and the Canvas API, the code uses a quadratic curve for each spoke, along with rotation transforms, dashed strokes, and a semi-transparent overlay to create the illusion of motion. The animation is driven by `requestAnimationFrame`, updating the line dash offset and rotation angle over time.

11Cr18Ni9

60% match

Loading thumbnail…

Javascript

This example demonstrates a basic canvas-based drawing application. Users can sketch freehand on the canvas by dragging the mouse, with sliders and color pickers to adjust pen width and color. The code uses JavaScript with the HTML5 Canvas API, including methods like `ctx.lineTo`, `ctx.stroke`, and `ctx.clearRect` to manage drawing and erasing. It is a direct illustration of interactive vector graphics in the browser, independent of D3.js.

SShane Carey

60% match

Loading thumbnail…

05_Mathematical Graphic Patterns

This animated canvas visualization generates shifting mathematical graphic patterns from a procedural grid of circles. Based on tutorial code from MIT, it uses raw Canvas 2D API calls like `getContext('2d')`, `fillRect`, and `arc` to render the motion. A `requestAnimationFrame` loop updates time parameters, causing sinusoidal positions, radii, and RGB color values to oscillate continuously, creating a dynamic, kaleidoscopic effect. The embedded dataset of angular and value pairs influences the pattern’s underlying structure, though the visual output is entirely algorithmic rather than data-driven.

AAbdul Salam Almadani

59% match

Loading thumbnail…

SCRIPT-8

This example uses SCRIPT-8, a JavaScript fantasy console for creating retro-style games and visualizations. It renders a colorful, animated scene directly to the canvas using the console’s built-in graphics API. The visualization draws sprites and map data from JSON files, with procedural animation driven by the `requestAnimationFrame` loop. SCRIPT-8’s `pixel` and `sprite` functions handle the drawing, while its input and sound APIs are loaded but unused, focusing purely on visual output. The cassette’s empty chains, songs, and phrases files confirm a minimal, self-contained demonstration of the platform’s rendering capabilities.

FFrozenfire92

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

59% match