fresh block

100%

✓ Published0🌍 Public

Last edited Apr 15, 2016

Created on Apr 15, 2016

A blank canvas follows the mouse as a black or white circle, depending on whether the mouse button is pressed. The sketch uses p5.js’s `setup` and `draw` functions, with `createCanvas` setting a 640×480 drawing area and `ellipse` rendering an 80×80 circle at the current cursor position. The fill color toggles between black and white based on the `mouseIsPressed` state, creating a simple interactive painting tool. No data source is involved; it is a direct mouse-driven drawing example.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

fresh block

The sketch alternates between a black and a white background every second, layering a small, semi-transparent image at random positions across the canvas whenever the mouse is pressed. It uses the p5.js library, specifically the `preload`, `setup`, and `draw` functions, along with `loadImage`, `image`, `background`, and `millis`. The displayed image is loaded from an external URL, and the random placement is driven by `random(width)` and `random(height)`. The composition shifts abruptly between states, producing a flickering, collage-like effect.

YYannael

77% match

Loading thumbnail…

fresh block

This example displays a static image of a decorative banner, loaded from an external URL and drawn onto a 640×480 canvas using p5.js. The sketch preloads the image file in the `preload()` function and renders it with `image(img, 0, 0, 400, 200)` in `setup()`. Although the `draw()` loop contains logic to change the fill color based on mouse input, no shapes are actually drawn in that loop, so the visualization remains purely a fixed image. The code relies on p5.js’s `loadImage`, `createCanvas`, and `image` functions.

YYannael

76% match

Loading thumbnail…

p5js Template

This example shows an abstract generative drawing on a 500-by-500 canvas, where a semi-transparent rectangle is placed at random positions each frame, while an ellipse centered at the canvas origin resizes based on the current mouse coordinates. The piece uses the p5.js library’s `createCanvas`, `draw`, `fill`, `stroke`, `rect`, and `ellipse` functions to produce layered, translucent shapes with color values that mix fixed and mouse-driven parameters. The rendering approach is purely procedural, with no external data source, and the mouse position directly influences the ellipse’s width and height, creating a dynamic, interactive visual effect.

YYannael

74% match

Loading thumbnail…

fresh block

This visualization shows a blank SVG canvas with dimensions of 960 by 500 pixels. The code creates an SVG element and appends it to the document body, but does not draw any data or shapes. The interaction is limited to the static empty canvas. The example uses the D3.js version 4 library, specifically referencing the `d3.select` API to initiate the SVG creation.

HHilje

73% match

Loading thumbnail…

fresh block

This example draws a single ellipse on an SVG canvas using the D3.js library. It first creates an SVG container and appends an ellipse element, positioning it with `cx` and `cy` attributes and setting its horizontal and vertical radii with `rx` and `ry`. The code uses `d3.select` to access the DOM and `append` to add the shape, with the SVG scaled to fill the viewport. The visualization demonstrates a minimal static rendering, showing only the ellipse without any data binding or interaction. The source is a simple inline script from a gist, built with Blockbuilder.

DDinoJay

73% match

Loading thumbnail…

fresh block

An empty SVG canvas is rendered at a fixed size of 960 by 500 pixels using D3 v4. The page contains no visible data or interactive elements; instead, it provides a blank starting point for further code. The script selects the body, appends an SVG element, and sets its dimensions, but no shapes, axes, or text are drawn. The commented-out text and code indicate the intended area for user edits, though the current visualization displays only a blank white space.

ZZaraKinneen

72% match

Loading thumbnail…

fresh block

A single static circle is drawn on a blank SVG canvas using D3 v4. The code selects the body, appends an SVG element with fixed dimensions, and places the circle at coordinates (300, 300) with a set radius, though several attribute chains remain incomplete. The example demonstrates the basic structure for creating simple geometric shapes with D3’s selection and attribute methods, relying on the SVG namespace for rendering. No interaction, data binding, or scales are involved, making it a minimal starting point for understanding D3’s core drawing syntax.

JJorrisVerboon

71% match

Loading thumbnail…

fresh block

This example uses the p5.js library to create an interactive sound and color visualization. It displays a black canvas that turns yellow when a key is pressed, while simultaneously playing an audio file loaded via the p5.js-sound extension’s `loadSound` and `soundFile.play` methods. The sketch shows how keyboard input can trigger both visual feedback and audio playback, with the background reverting to black when the key is released. The code relies on p5.js’s `setup`, `keyPressed`, and `keyReleased` functions to manage the interaction.

YYannael

71% match