Y

Yannael

@Yannael·69 public vizzes

Loading thumbnail…

Gist d167d007264b16a0990049b042c47c84

This visualization compares large language models by plotting their context window size against input and output pricing per million tokens. It uses a scatterplot with logarithmic scales, encoding each model as a point colored by organization. The code employs D3.js with `d3.forceSimulation` for label placement to avoid overlap, while the data comes from the embedded `lmm.csv` file. Tooltips reveal exact values for context size, pricing, knowledge cutoff, and privacy details, with hover interactions driven by D3 event handlers.

Loading thumbnail…

Gist 80e1a06b1a785d011c15435a72e76f3a

This visualization maps the competitive landscape of large language models by plotting seven LLMs on a force-directed graph, where each node’s position reflects its Arena ELO rank from May 2024, with size encoding context window length and color indicating the organization. The chart uses `d3.forceSimulation` to calculate node placement, with tooltips revealing metadata like license, knowledge cutoff, and context size from the CSV file. Labels are positioned via a collision-avoidance force, and the graph renders with D3’s SVG API, supporting zoom and pan interactions for closer inspection of each model’s attributes.

Loading thumbnail…

Gist 34db926c79af2bdacb2a4019eb260fbb

This visualization compares four embedding models by plotting their key specifications—embedding size, context size, model size in gigabytes, MTEB rank, and release date—as labeled points in a scatterplot-like layout. The chart uses D3.js with a force-directed simulation (`d3.forceSimulation`) to position each model’s marker, while axes encode embedding size against context size, with point color and label text revealing the remaining attributes from the `embeddings_models.csv` data source. Hovering over a point highlights its model name and shows a tooltip with all numeric values, making trade-offs between model dimensions and performance immediately visible.

Loading thumbnail…

desc

This visualization demonstrates a custom Scratch 3 extension that enables hardware communication through a peripheral connection. The code shows how the extension establishes a session, handles incoming serial data through message parsing, and sends commands using a line-buffered text decoder. It uses Scratch’s ArgumentType, BlockType, and formatMessage APIs to define a single command block labeled “block name.” The implementation relies on the runtime’s ioDevices.comm interface for device scanning and writes formatted strings (e.g., `M0 \n`) to trigger external actions.

Loading thumbnail…

Gist 392220bb33ff81da26fe5b1787cd505b

This example visualizes the results of a fraud-detection decision tree model trained on transaction data, showing how the model classifies transactions as fraudulent or non-fraudulent. It displays the test set predictions alongside the true labels, highlighting the top 100 predicted fraud cases for performance assessment. The code uses scikit-learn’s `DecisionTreeClassifier` with a maximum depth of two for interpretability, and evaluates predictions using a custom `performance_assessment` function. The dataset includes engineered features such as transaction amounts, weekend/night indicators, and customer/terminal historical statistics over one, seven, and thirty-day windows.

Loading thumbnail…

Gist f2b16fc0ccd955514d00fbf44683516f

This example demonstrates a temporal split of simulated financial transaction data into training and test sets for fraud detection. The code loads transaction records spanning from July 25 to August 14, 2018, then partitions them into three consecutive seven-day windows: training, delay, and test periods. It uses the custom `read_from_files` function to ingest the data and `get_train_test_set` to perform the split, while counting fraudulent transactions with the `TX_FRAUD` column. The visualization relies on Pandas DataFrames and Python’s `datetime` module to manage the time-based segmentation.

Loading thumbnail…

Gist b5bb72e72049a84c7a5a0b3f0e1a3498

The example shows how to load and prepare simulated credit-card transaction data for fraud-detection analysis. It initializes a Python environment by downloading shared helper functions and cloning a GitHub repository containing pre-transformed datasets. The code uses the `%run` magic command to execute `shared_functions.py` and checks for local data before cloning, ensuring reproducible access to the simulated data source. This setup is a prerequisite for subsequent visualization steps, though no chart or rendering API is invoked in this initialization phase.

Loading thumbnail…

Gist 3b0bbf0a28c405d476f69e40e70fc1ec

This visualization shows an interactive network graph built with D3.js, using `d3.forceSimulation` to position nodes and links in a force-directed layout. The graph is rendered on a canvas, with node positions updated each tick. The code includes a Gaia storage integration for saving and loading user data, as indicated by `uploadToGaiaHub` and encrypted-content handling. It also logs build time and caches content offline, suggesting a blockstack-based app that persists state. The visualization appears to be a prototype, as the console shows a failed decryption attempt when fetching stored data.

Loading thumbnail…

Gist 74cc046474366d9e416365251f7d6ead

The visualization shows a force-directed network graph of interconnected nodes, rendered with d3.forceSimulation to compute layout physics and SVG for display. It uses d3’s drag and zoom behaviors for interaction, while node positions update via the simulation’s tick handler. The underlying data appears to be pulled from a local JSON file, as indicated by file uploads and Gaia Hub storage references. The code also demonstrates error handling for encrypted content parsing, with a fallback to unencrypted data access.

Loading thumbnail…

Gist 26b14b7cb0a646b6652933168d2e36b7

This visualization presents a data-driven dashboard built with Blockstack's Gaia storage system. The application attempts to load user data files (sheetscollection.json, contact.json, uploads.json, integrations.json) from a decentralized storage hub, but the console logs show repeated 404 errors for each requested file, resulting in an empty state with the message "Nothing to see here". The visualization appears to be a personal data management interface that would display user sheets, contacts, uploads, and integrations, but because the associated data files do not exist on the Gaia hub, the interface renders with no content. The example demonstrates error handling for missing data and the initial loading sequence of a Blockstack-based application.

Loading thumbnail…

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.

Loading thumbnail…

Gist d85e660d17b58a7ffd73b56a9d5dfb65

This example verifies a Blockstack ID by displaying a fixed blockchain address in a plain-text file. The visualization shows a single static text line confirming the address, with no graphical rendering. It relies solely on the Blockstack Explorer API link embedded in the file to prove ownership of the ID. No data libraries or rendering code are used; the content is pure text. The address is presented as the primary output, with the explorer link as the verification method.

Loading thumbnail…

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.

Loading thumbnail…

Gist f1bf8c3ebae119b50908ee3e14c67bb9

This visualization shows the evolution of a sparse network of points on a sphere, rendered as an interactive 3D globe. It uses Three.js to display the sphere and its points, while d3.forceSimulation computes a repulsive force between the points to distribute them evenly across the surface. The code reads positions from a data file and applies a custom projection to map geographic coordinates onto the 3D sphere. As the simulation runs, the points visibly repel each other and settle into a more uniform arrangement, with the globe rotating slowly to reveal the entire layout.

Loading thumbnail…

Gist fcaa6cc1968b4cd0eac0f15d1f0ff3f4

This visualization maps geographic data onto a three-dimensional globe using D3.js and Three.js. It renders landmasses as extruded polygons via `d3.geoPath` and converts them to Three.js geometry, while a `d3.forceSimulation` drives the rotation of the globe. The example also applies a canvas-based texture through `getImageData` to overlay graticule lines and subtle shading, and it animates the camera with `transition.attrTween` to smoothly orbit the planet. The data comes from a GeoJSON source embedded in the gist file.

Loading thumbnail…

Corrige2

The visualization displays a photograph of a gestation crate overlaid with the French text "Corrigez s'il vous plaît, car il y a là une obscurité très nette." (Correct it, please, because there is a very clear obscurity there.) As the user presses the spacebar, the text reveals itself one character at a time, while a semi-transparent white rectangle gradually fades in over the image. Pressing "a" resets the counter. Built with p5.js, the code loads the image in `preload()`, draws it in `draw()`, and uses the `keyTyped()` function to advance or reset the displayed substring.

Loading thumbnail…

Corrige2

Corrige2 is an interactive p5.js sketch that superimposes a French sentence ("Corrigez s'il vous plaît, car il y a là une obscurité très nette") over a photograph of a gestation crate, with a semi-transparent pale overlay that gradually fades the image. Pressing the spacebar reveals the text character by character, while pressing "a" resets the display to blank. The code loads the image via `loadImage` from a Wikimedia Commons URL, draws it with `image()`, and uses `textFont`, `textSize`, and `textDisplay.substr()` to render the incremental text on a 500×500 canvas.

Loading thumbnail…

Corrige2

This interactive sketch displays a photograph of a gestation crate overlaid with a semi-transparent white rectangle and a French phrase that reads “Corrigez s’il vous plaît, car il y a là une obscurité très nette” (“Correct it please, for there is a very clear obscurity there”). The text appears letter by letter as the user presses the spacebar, and pressing “a” resets the counter. Built with p5.js, it uses `loadImage`, `createCanvas`, `draw`, and `keyTyped` to handle the animation, with the image sourced from Wikimedia Commons.

Loading thumbnail…

Corrige2

This visualization displays a photograph of a gestation crate overlaid with a semi-transparent white rectangle, while a French sentence ("Corrigez s'il vous plaît...") is typed out character by character in large black text. The p5.js library handles the canvas, image loading, and text rendering. Pressing the spacebar increments a counter that reveals the next character of the message, while pressing "a" resets the counter to zero, restarting the text display. The image is sourced from Wikimedia Commons.

Loading thumbnail…

Corrige2

This interactive sketch displays a photograph of a gestation crate overlaid with a semi-transparent white rectangle, while a French phrase (“Corrigez s'il vous plaît…”) is revealed character by character. Pressing the spacebar increments the counter, revealing more text; pressing “a” resets it. Built with p5.js, the code loads the image in `preload()`, applies a fading overlay in `draw()`, and handles keyboard input via `keyTyped()`. The text uses the “Alpha Sausage” font, with the image sourced from Wikimedia Commons.

Loading thumbnail…

Corrige2

This interactive sketch displays a photograph of a gestation crate with a semi-transparent overlay that gradually obscures the image. A French sentence, “Corrigez s’il vous plaît, car il y a là une obscurité très nette,” appears letter by letter as the user presses the spacebar. The p5.js library loads the image in `preload()`, sets up a 500×500 canvas, and draws the overlay and text in `draw()`. Each spacebar press increments a counter, revealing more characters, while pressing “a” resets the counter to zero.

Loading thumbnail…

Corrige2

A p5.js sketch displays a photograph of a gestation crate, overlaid with a semi-transparent white rectangle that gradually fades as the user presses the spacebar. Each press reveals more of the French text "Corrigez s'il vous plaît, car il y a là une obscurité très nette," typed character by character from a string. Pressing the 'a' key resets the counter to zero, restarting the reveal. The image is loaded via `loadImage` from a Wikimedia Commons URL, and the sketch uses `createCanvas`, `background`, `image`, `text`, and `keyTyped` to handle drawing and interaction.

Loading thumbnail…

Corrige2

The visualization displays a photograph of a gestation crate overlaid with a semi-transparent white rectangle and a French text message that reads "Corrigez s'il vous plaît, car il y a là une obscurité très nette" (Correct, please, for there is a clear obscurity here). The text appears progressively as the user presses the spacebar, with each press adding one character. Pressing the "a" key resets the counter and clears the text. The code uses the p5.js library to load the image, create a 500×500 canvas, and handle keyboard input, while styling the text with the "Alpha Sausage" font.

Loading thumbnail…

Corrige2

The visualization displays a photograph of a gestation crate overlaid with a semi-transparent white rectangle and the phrase "Corrigez s'il vous plaît, car il y a là une obscurité très nette" revealed progressively. Pressing the spacebar advances the text character by character, while pressing "a" resets it. Built with p5.js, it loads the image via `loadImage`, renders it with `image`, and uses `keyTyped` for keyboard interaction.

Loading thumbnail…

Corrige

A p5.js sketch displays a photograph of a gestation crate overlaid with a semi-transparent white rectangle, while the French phrase “Corrigez s'il vous plaît, car il y a là une obscurité très nette” appears letter by letter. Pressing the spacebar reveals each successive character, and pressing ‘a’ resets the counter to zero, restarting the text. The code uses p5.js functions `loadImage`, `createCanvas`, `draw`, and `keyTyped` to manage the image, overlay, and keyboard interaction. The background is dimmed by the overlay, making the text progressively obscure the underlying photo.

Loading thumbnail…

Corrige

This interactive sketch displays a photograph of a gestation crate overlaid with a translucent blue wash and a French phrase that reads “Corrigez s'il vous plaît, car il y a là une obscurité très nette” (“Correct, please, for there is a very clear obscurity here”). The text appears letter by letter as the viewer presses the spacebar, while pressing “a” resets the counter. Built with p5.js, it loads the image from Wikimedia Commons, uses `image()` and `text()` in the `draw()` loop, and handles keyboard input via `keyTyped()`.

Loading thumbnail…

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.

Loading thumbnail…

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.

Loading thumbnail…

Poulp

This example uses the p5.js library to overlay a live webcam feed on a kitten photograph from Wikimedia Commons. The sketch captures video through the browser’s `createCapture(VIDEO)` API, displays it at the top-left corner of a 500×500 canvas, and applies the `filter('INVERT')` effect to the entire canvas each frame. Pressing the spacebar triggers a background color change using `keyPressed` or `keyTyped`. The kitten image is loaded with `loadImage` and drawn with `image()`, while the inverted video creates a surreal composite.

Loading thumbnail…

Poulp

This visualization uses a live webcam feed combined with a static kitten image, processed through a p5.js sketch. The code captures video from the user’s camera and overlays it on a 500×500 canvas, applying an `INVERT` filter each frame to create a negative-color effect. A kitten photo, loaded from Wikimedia Commons, is drawn beneath the video layer. Pressing the spacebar triggers a random pastel background color change, though the exact key-handling logic uses both `keyTyped` and `keyPressed` with inconsistent condition checks. The piece demonstrates real-time image manipulation and user interaction via p5.js’s `createCapture`, `loadImage`, and `filter` APIs.

Loading thumbnail…

Poulp

This visualization uses a webcam feed and a static image of a kitten, both rendered on a 500x500 canvas with p5.js. The video capture is displayed in the top-left corner and inverted with the `filter('INVERT')` method, while the kitten image appears at a fixed position. Pressing the spacebar triggers a random background color change through both `keyTyped` and `keyPressed` event handlers. The code relies on p5.js core and the p5.dom add-on for video capture, showing live camera input overlaid with an imported Wikimedia image.

Loading thumbnail…

Poulp

A single kitten photograph is duplicated and animated across a 500-by-500 pixel canvas. One copy moves in a large circular path driven by the cosine of elapsed milliseconds, while a second static copy remains fixed. The p5.js `draw()` loop continuously updates the moving image’s position and size, and the background can be cleared or recolored by pressing the spacebar, which triggers either a white or random-color background via `keyTyped` and `keyPressed` handlers. The image is loaded from a Wikimedia Commons URL using `loadImage()`.

Loading thumbnail…

Poulp

This example uses p5.js to display a Burmese kitten photograph on a 500-by-500 canvas. The image is drawn twice: once at a fixed position and once with its x-coordinate and width oscillating based on cosine functions of the current time in milliseconds. The animation continuously shifts the moving copy, while the static copy remains centered. Pressing the “a” or “b” key changes the background to magenta or white, and pressing the left arrow key sets a random pink background, using p5’s `keyTyped` and `keyPressed` callbacks.

Loading thumbnail…

Poulp

This interactive p5.js sketch displays a background image of a textured footer pattern, overlaid with a semi-transparent red tint applied to the full canvas. The same image is drawn again at the mouse position, scaled to a smaller size, creating a movable magnified or cloned fragment that follows the cursor. The code uses p5.js functions `preload`, `setup`, `createCanvas`, `image`, and `tint`, loading the image from an external URL. The static backdrop remains visible while the cursor-driven copy updates continuously in the `draw` loop.

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.

Loading thumbnail…

OpenFoodFact

This example uses the p5.js library to load a product from the OpenFoodFacts API and display a fixed text string on a 640×480 canvas. It fetches JSON data from a specific product URL via `loadJSON`, then logs the response to the console. The draw loop renders the sentence "The quick brown fox jumped over the lazy dog." at a fixed position, though no product data is visually represented on screen.

Loading thumbnail…

OpenFoodFact

This visualization demonstrates a simple p5.js sketch that loads product data from the OpenFoodFacts API. The canvas displays a fixed text string while the code fetches JSON from a specific product URL, though the loaded data is not currently visualized. The drawing loop renders text on a 640 by 480 canvas, and the `loadJSON` function retrieves the product information asynchronously. The code includes a commented-out weather-drawing function that would use humidity values to control ellipse opacity, but this behavior is not active in the current version.

Loading thumbnail…

OpenFoodFact

A canvas sketch uses p5.js to display a weather visualization based on live data from the OpenWeatherMap API. The code loads current weather for Moscow, Russia via `loadJSON`, then draws 50 randomly positioned ellipses whose fill transparency is mapped to the reported humidity percentage. A static sentence of sample text also appears in the top-left corner. The background shifts to a blue tone, while the alpha of the cyan ellipses varies with the humidity value retrieved from the JSON response.

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.

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.

Loading thumbnail…

TestOpenProcessing

This example displays a 100x100 canvas filled with a static background image, using the p5.js library. The code defines variables for position, velocity, and acceleration, along with functions to calculate ball movement based on device acceleration data. However, the `draw()` function only clears the background and does not call `ballMove()`, so the bouncing-ball behavior described in the functions is never executed. The visualization therefore shows only the loaded image with no animated elements.

Loading thumbnail…

TestOpenProcessing

A p5.js sketch displays a small canvas where a black ball bounces against the edges. The ball’s movement is driven by the device’s acceleration values, which are read directly as `accelerationX` and `accelerationY` and applied to velocity and position. The sketch also loads and displays a background image from `assets/moonwalk.jpg`. The code uses p5.js functions including `createCanvas`, `loadImage`, and `ellipse` to render the scene, with custom logic for velocity and bounce damping.

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.

Loading thumbnail…

TestOpenProcessing

A small ball moves across a 100-by-100 canvas, bouncing off the edges with reduced velocity. The motion is driven by device acceleration data, which influences both velocity and position each frame. The sketch uses the p5.js library, with `setup()` initializing the canvas and `draw()` updating the ball’s coordinates via the `ballMove()` function. Acceleration values are read directly from `accelerationX` and `accelerationY`, and the ball’s speed and bounce damping are controlled by the constants `vMultiplier` and `bMultiplier`.

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.

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.

Loading thumbnail…

TestOpenProcessing

This example uses the p5.js library to render a small canvas with a single black circle that moves according to the device's accelerometer readings. The ball’s velocity is updated from the acceleration values each frame, and it bounces off the canvas edges with a damping factor. The sketch reads raw accelerationX and accelerationY data directly, translating them into motion without any external dataset or simulation.

Loading thumbnail…

TestOpenProcessing

This example shows a single black ball bouncing around a white canvas, with its motion driven by the device's accelerometer data. Built with p5.js, the sketch continuously reads the acceleration values from `accelerationX` and `accelerationY` to update the ball's velocity and position. The ball accelerates based on tilt, and simple boundary checks reverse its velocity with a damping factor when it hits the canvas edges, creating a responsive, physics-like interaction.

Loading thumbnail…

TestOpenProcessing

A generative fractal tree animation renders eight branching structures radiating from the center of a 650×650 canvas. Each branch recursively draws cyan line segments whose angles and lengths are modulated by a continuously incrementing `theta` value, creating a slowly rotating, symmetric pattern. The sketch uses the p5.js library’s `createCanvas`, `translate`, `rotate`, `push`/`pop`, and recursive `branch` function, with `strokeWeight` tapering as recursion depth increases. No external data is loaded; the visual emerges purely from procedural geometry and time-based animation.

Loading thumbnail…

TestOpenProcessing

This generative sketch uses p5.js to draw a rotating, recursive tree-like structure. Eight branches radiate from the canvas center, each one splitting into three smaller branches with angles controlled by a continuously incrementing theta variable. The line weight thins with each recursion level, and all lines are rendered in a bright cyan color against a black background, creating a hypnotic, organic pattern. The animation runs indefinitely, with the branch angles evolving smoothly over time.

Loading thumbnail…

TestOpenProcessing

An animated fractal tree with glowing cyan branches draws a rotating, nesting pattern that evolves over time. The piece cycles through a sequence of radial symmetry, repeating its branching structure eight times around the center. Built with p5.js, the recursive `branch` function uses rotated segments of varying lengths and a continually shifting `theta` value to create a hypnotic, self-similar visual. The rendering relies on p5.js drawing primitives such as `line`, `pushMatrix`, and `popMatrix` to manage the transformation stack.

Loading thumbnail…

TestOpenProcessing

This generative art piece displays a continuously rotating, branching fractal structure composed of glowing cyan lines on a black background. The rendering uses the p5.js library with the `setup()`, `draw()`, and recursive `branch()` functions to create the tree-like pattern. The sketch applies a constant angular increment to theta, driving the rotation of each branch segment within an eight-fold rotational symmetry layout. Stroke weight and branch length diminish with each recursive step, producing a dynamic, organic form that evolves over time.

Loading thumbnail…

TestOpenProcessing

A fractal tree grows outward from the center of a 650-by-650 canvas, its branching patterns rotating continuously as the angle parameter theta increments by 0.05 each frame. Eight symmetrical branches radiate from the midpoint, each recursively splitting into three sub-branches with lengths divided by the square root of two. The p5.js sketch uses the `pushMatrix`, `popMatrix`, `rotate`, and `translate` functions to position each line segment with cyan strokes, with stroke weight decreasing as recursion depth increases.

Loading thumbnail…

FnCrandow

This interactive visualization combines live weather data with a dynamic, generative drawing canvas. It loads a background image and fetches current humidity levels for Moscow from the OpenWeatherMap API using p5.js’s `loadJSON` function. The humidity value directly controls the alpha transparency of a series of randomly placed circles, creating a weather-responsive overlay. The main drawing loop continuously updates the canvas, adding translucent red rectangles and the background image at random positions, while a time-based timer alternates the background between white and black to create a flickering, animated effect.

Loading thumbnail…

FnCrandow

The visualization alternates between a black and white background, flashing a semi-transparent image at random positions across the canvas each second. Built with p5.js, it loads a footer background image from an external URL in `preload()`, then uses `random()` to set its coordinates during `draw()`, with a `millis()` timer controlling the refresh interval. Mouse presses toggle the background color, while the tint function modulates the image’s appearance.

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.

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.

Loading thumbnail…

fresh block

This example displays the sentence "The quick brown fox jumped over the lazy dog." as static text on a 640×480 canvas using the p5.js library. It also plays a doorbell sound file, loaded via `loadSound()` from p5.sound, with volume set to 0.1. The code does not render any data visualization, animation, or interactive elements beyond the text and audio playback.

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.

Loading thumbnail…

fresh block

This visualization uses the p5.js library to draw a field of translucent cyan circles on a blue background, layered with a fixed line of text. It loads live weather data from the OpenWeatherMap API for Moscow, Russia, and uses the reported humidity percentage to control the alpha transparency of the circles. Each circle’s position is randomly generated on every frame, creating a subtle shimmering effect as the drawing updates continuously.

Loading thumbnail…

fresh block

This example uses p5.js to display a collection of semi-transparent circles over a solid blue background. The sketch loads current weather data for Moscow from the OpenWeatherMap API using `loadJSON`, and the humidity value from the JSON response controls the alpha transparency of the circles. A static sentence of text is also drawn on the canvas. The circles’ positions are randomized each frame with `random(width)` and `random(height)`, creating a shifting, dotted pattern whose opacity fluctuates with the weather.

Loading thumbnail…

fresh block

This example uses the p5.js library to display a static block of sample text over a blue canvas. It fetches current weather data for New York City from the OpenWeatherMap API, then extracts the humidity value to control the transparency of 50 randomly placed circles. The drawing function renders the text and ellipses each frame, while the background color remains constant. The data is loaded asynchronously via loadJSON, with the humidity affecting only the circle fill alpha.

Loading thumbnail…

fresh block

A p5.js sketch renders the sentence "The quick brown fox jumped over the lazy dog." in a 640 by 480 canvas, displaying the text at a fixed position with a 30-pixel font size. The code uses the p5.js `createCanvas` and `text` functions, with `setup()` initializing the canvas and `draw()` repeatedly writing the string. No interactive or animated elements are present, and the example does not load external data, as evidenced by the commented-out `httpGet` call.

Loading thumbnail…

fresh block

This example displays the string returned by an HTTP GET request to a remote CGI endpoint. The visualization uses the p5.js library to create a 640 by 480 pixel canvas and draw the fetched text at a fixed position with a specified size and fill color. The data source is the `fourth.cgi` script hosted on a University of Toronto server, accessed via the `httpGet` function within the continuous `draw` loop.

Loading thumbnail…

fresh block

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.

Loading thumbnail…

p5js Template

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.

Loading thumbnail…

Gist c9f5dbba4fd9c0da80c7

A simple GeoJSON LineString traces a closed, roughly rectangular path around the Brussels region. The visualization uses D3.js to project the geographic coordinates onto a 2D canvas via `d3.geoPath` and `d3.geoMercator`, rendering the shape as a single stroked line. The example demonstrates minimal handling of geographic data, drawing only the coordinate vertices without additional styling or interaction.

Loading thumbnail…

CPI1998

This visualization displays the 1998 Corruption Perceptions Index (CPI) for 85 countries, ranked from Denmark’s high score of 10 to Cameroon’s low of 1.4. The data is loaded from a CSV file using Recline’s memory store, and the view offers grid, graph, and map options. The main.js script initializes the dataset, while the interface provides interactive sorting and browsing capabilities through SlickGrid, allowing users to explore the scores across all territories.

Loading thumbnail…

CPI1998

This visualization presents the Corruption Perceptions Index (CPI) for 85 countries in 1998, ranking them from Denmark’s high score of 10 to Cameroon’s low of 1.4. It uses the Recline.js data explorer with a memory store to load the CSV dataset, offering interactive grid, graph, and map views. The grid employs SlickGrid with editing capabilities, while the map and graph views rely on the underlying Recline backend to render geographic and relational representations of the country scores.