desc

Scratch

This example showcases the Scratch visual programming environment, highlighting its role in fostering computational thinking through interactive games, animations, and educational projects. It curates a collection of Scratch projects, ranging from classic games like Asteroids and Pacman to custom experiments such as a recursive Fibonacci generator. The visualization also introduces complementary block-based programming platforms, including Blockly, BioBlocks, and NetsBlox. The underlying data is presented as a static HTML page with embedded links and images, using no dynamic JavaScript libraries for rendering, relying instead on standard Markdown and HTML for its layout.

CCliffordAnderson

65% match

fresh block

A p5.js sketch displays the string "Un exemple" one character at a time, with the current character rendered in large yellow text on a blue rectangle against a gray background. Pressing the spacebar advances the counter to show the next character in the sequence. The code uses the p5.js `setup`, `draw`, and `keyTyped` functions, along with `textFont`, `textSize`, and `fill` to style the output. The text font is set to "Alpha Sausage," and the canvas is fixed at 500 by 500 pixels.

55% match

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.

54% match

fresh block

This interactive sketch displays a photograph of a gestation crate overlaid with a semi-transparent blue wash and a French sentence that appears letter by letter. Pressing the spacebar reveals one additional character, while pressing “a” resets the text to empty. Built with p5.js, it loads the image via `loadImage()`, renders it with `image()`, and uses `keyTyped()` to manage the progressive text reveal.

54% match

Gist 89c4423b643a4f399aa4d8d19aeb07ad

The visualization displays a Blockstack-based data storage interface, showing a collection of file upload and retrieval attempts through the Gaia hub. It presents a series of console log messages and network requests, including 404 errors for missing files like `sheetscollection.json` and `contact.json`, alongside a `TypeError` from `Buffer.from` during `encryptECIES` encryption. The code uses Blockstack’s `getFile` and `putFile` APIs, along with `setTimeout`-driven retry logic, to handle asynchronous operations. The view reveals the user’s storage state, with no data successfully loaded, emphasizing the debugging process.

test-block

This example demonstrates a p5.js sketch that renders the phrase “hello world” in an interactive, real-time manner. The sketch draws text on a canvas, with the fill color changing randomly every few frames as the word is repeatedly redrawn. A mouseMoved function listens for pointer movement and displays individual letters at the cursor’s position, cycling through the message’s characters in sequence. The code uses the p5.js library (version 0.5.14) and is wrapped in an instance mode with the canvas attached to a specific HTML container.

SSammeSheikh

test-block

This example uses a p5.js canvas to explore typography and interactivity. The code predefines an array of characters spelling “hello world” and sets up a 960×500 drawing area with styled Georgia italic text. The display logic is incomplete, with commented-out calls to `text()`, but the `mouseMoved()` listener contains the working interactive component: it randomly changes the fill color to semi-transparent RGB values and renders the message at the canvas center whenever the mouse moves. The sketch thus demonstrates how mouse events can drive dynamic visual changes in a p5.js environment.

BBartholomaeusAstrum

Gist 4dd85693f71aa8cb49b95371c091b29a

This example verifies a Blockstack ID by displaying its associated blockchain address. It shows a static confirmation message, linking the ID to the address 1934iXrpvRwM43m1sKhb5cfsrjfUWKH362 with a clickable URL to the Blockstack explorer. The visualization uses plain HTML text and a hyperlink, with no graphical or interactive data-rendering code. The underlying data is the literal address string embedded in the gist file, and the rendering approach is standard web markup without any JavaScript libraries or canvas APIs.