M

MAKIO135

@MAKIO135·25 public vizzes

Loading thumbnail…

SonicPi In C

This example visualizes the generative music composition "In C" by Terry Riley, using Sonic Pi’s live coding environment. It shows how multiple simultaneous players (five synths) progress through 53 rhythmic phrases, with each phrase represented as a sequence of notes, durations, and amplitudes. The code defines `live_loop` and `play_phrase` functions to schedule notes, while a progression rule limits how far any player can advance ahead of the others, ensuring a coherent, slowly evolving texture. The pulse loop uses `sample :drum_cymbal_closed` to maintain a steady beat, and all timing is derived from a global BPM value.

Loading thumbnail…

Hello Reactor

This example demonstrates a minimal event-driven communication system built with JavaScript. It shows how two listeners attached to the same `'big bang'` event respond to a dispatched payload, with one listener logging a fixed message and the other printing the passed arguments. The code defines a custom `Reactor` class and an `Event` class, showcasing manual event registration, callback storage, and dispatch logic. The implementation relies on JavaScript's array `forEach` method to invoke all registered callbacks with the spread `...eventArgs` syntax. The data originates from a hardcoded dispatch call passing the values `135`, `'test'`, and `[1, 2, 3]`.

Loading thumbnail…

Update Kniwwelino board leds matrix using Serial

This example demonstrates real-time control of a Kniwwelino board’s LED matrix by sending serial messages. The Arduino sketch uses the `Kniwwelino` library’s `MATRIXdrawIcon` function to render the received string pattern on the built-in display. Data arrives as ASCII text over the serial port, terminated by a pipe character (`|`), which triggers parsing and immediate matrix update. The `setup()` initializes the board with WiFi disabled and fast boot enabled, while the main loop continuously reads serial input, buffers it, and applies the icon when the delimiter is received.

Loading thumbnail…

Gist 1825fd83399f5e4df6f8b0d10399f465

This example displays a hexagon grid built from scratch, with two layout modes: flat-topped and pointy-topped hexagons. The visualization shows how hexagonal tiling can be generated programmatically, calculating exact vertex positions and cell centers based on geometric constants. The HexGrid class handles both orientations, spacing cells in a brick-like pattern that accounts for row offsets. Using custom math rather than a charting library, the grid’s points are derived from basic trigonometry and coordinate arithmetic. The code logs grid dimensions and counts to the console, revealing the underlying structure of the hexagonal lattice.

Loading thumbnail…

Gist ec761bad0f5e7bfb19f46d45ba0b3355

This example defines a small JavaScript utility that converts hexadecimal color codes into their red, green, and blue component values. The code presents the `hexToRgb` function, which first parses the hex string—overlooking an optional leading `#`—into an integer, then extracts the separate color channels using bit shifts and bitwise AND operations. The function returns an array of three numbers, each representing the intensity of a channel. This demonstrates a modular approach to color handling, using only core JavaScript without any external libraries or APIs.

Loading thumbnail…

utilities for toggling fullscreen

This utility demonstrates a browser-based fullscreen toggle for data-visualization canvases. A single click event triggers the `toggleFullScreen()` function, which checks the current fullscreen state via `isFullScreen()` and then calls either `requestFullScreen(element)` or `exitFullScreen()`. The code provides cross-browser support by testing for standard and vendor-prefixed APIs (`requestFullscreen`, `msRequestFullscreen`, `mozRequestFullScreen`, `webkitRequestFullscreen`) and their exit counterparts. The script targets the document root element, making it applicable to any visualization rendered in the page.

Loading thumbnail…

canvas-sketch x akai-lpd8

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.

Loading thumbnail…

JS snippet to get the number of occurence in an array

This example extends JavaScript’s Array prototype with a `count` method that returns the number of occurrences of a given value within an array. The code uses `Array.prototype.filter` to test each element against the target value and measures the resulting array’s length. It demonstrates a simple, reusable utility for frequency analysis without relying on external libraries or data sources.

Loading thumbnail…

Gist 0f0c45136069ee6e7366afef684f3373

This animation cycles through the digits of pi, displaying each digit one at a time in a console. The digits are sourced from a remote JSON file containing the mathematical constant. The code uses the `fetch` API to retrieve the data, `console.clear()` and `console.log()` for output, and a `setInterval` timer to control the pace of the digit display.

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.

Loading thumbnail…

Hello WebMIDI

This example demonstrates the use of the WebMIDI API to access MIDI devices and log incoming messages to the console. It requests MIDI access via `navigator.requestMIDIAccess`, iterates over the available inputs, and assigns a handler for `onmidimessage` events. Each MIDI message is parsed into its command, note, and velocity components, which are then logged as an object. The code relies on the browser’s native MIDI support and does not use any external libraries or visual rendering.

Loading thumbnail…

Looper

Looper is an animated canvas visualization that cycles a single white dot along a circular path over time. It can record a 50-frame GIF animation by accumulating multiple motion-blurred samples per frame, blending them with canvas `getImageData` and `putImageData`. The animation runs continuously, but pressing a mouse button adjusts the phase based on cursor position. It uses the gif.js library to encode frames into an exported GIF file, with a configurable shutter angle and samples-per-frame for motion blur.

Loading thumbnail…

flatten Arrays

This example visualizes the recursive flattening of nested arrays into a single linear sequence. It shows a branching tree of values collapsing inward as the algorithm traverses each level, with individual elements animating into a final horizontal row. The code uses a custom `flatten` function that recursively iterates through nested arrays and pushes non-array values into a result array. Rendering relies on D3’s force simulation to position the collapsing nodes and transition paths, while the data itself is generated from arbitrary nested array structures defined in the source gist.

Loading thumbnail…

Gist 3d2406a594700ec447ebd0b208ead916

This example demonstrates a JavaScript implementation of the Fisher–Yates shuffle algorithm, providing two distinct array manipulation methods. The `shuffle()` function returns a new, shuffled copy of the original array without modifying it, while `permShuffle()` permanently rearranges the elements in place. The code extends the native `Array.prototype` with these custom methods, using modern JavaScript syntax including spread operators and destructuring assignments for element swapping. A usage example with a five-element array illustrates both behaviors, showing the original array preserved after copying and altered after permanent shuffling. The implementation relies solely on core JavaScript array operations and the built-in `Math.random()` function.

Loading thumbnail…

sortArrayByKey.js

This example demonstrates a reusable utility for sorting arrays of objects by nested properties, such as `letter` or `values.value2`. The function `sortArrayByKey` first maps each element to extract the target value via dot-notation path traversal, then sorts the mapped indices using a comparator that handles string and numeric comparisons, and finally returns the reordered original objects. It uses plain JavaScript array methods (`map`, `sort`) without external libraries, and the included example generates random test data with `Math.random` to show sorting across different key depths.

Loading thumbnail…

Gist 73e5cb2c456084a9c356f9c3f89f8803

An interactive particle field visualizes the gravitational attraction between a cursor and thousands of moving points. The code uses D3's quadtree for spatial indexing and d3.forceSimulation with custom force functions to compute particle velocities and positions, while a Vue component manages the animation loop and canvas rendering. The display updates in real time, with particles flowing toward and around the pointer position based on distance-based force calculations, creating a dynamic, organic swarm effect on a dark background.

Loading thumbnail…

Gist c0ec6bb768fd2672307b0807e4ee46fb

This example benchmarks four JavaScript loop styles—a standard `for` loop, a reversed `for` loop, a `for…of` loop, and `forEach`—on a fixed array of ten numbers. It measures execution time by repeating each loop a thousand times via `performance.now()` timestamps, accumulating the total milliseconds. The code defines each loop as a separate function and calls them through a `test` helper, logging the sum to the console. The comparison uses a simple in-memory data array, with no external libraries, focusing on raw loop performance in a JavaScript environment.

Loading thumbnail…

Percussion

A beat machine lets users compose a rhythmic loop by toggling 16-step patterns across eight percussion instruments. A live playback cursor highlights the current tick, triggering synthesized sounds via the Howler.js audio library while the grid visually pulses with the beat. The interface supports mouse clicks and keyboard shortcuts (A through semicolon) for real-time pattern editing, and a metronome track is pre-enabled. The animation shows a glowing column sweeping across the grid, with active notes highlighted in purple, built with jQuery, FastClick, and CoffeeScript.

Loading thumbnail…

Gist 8b397c6c25320dd8963daebaa9c8b847

A webcam feed is displayed as a continuously distorted, glitching video stream. The visualization captures the user's webcam video using the `getUserMedia` API and renders it to a canvas, which is then processed in real-time. The glitch effect is achieved by taking the canvas's JPEG data and randomly corrupting individual characters within its base64 encoding using JavaScript, before displaying the result as a dynamically updating image. The animation runs on a timer, cycling the corruption process to create a perpetually shifting, pixelated output.

Loading thumbnail…

ease function

This example demonstrates the mathematical behavior of a simple easing function that animates a variable toward a target value. The visualization shows how the variable converges to the target over time, with the easing strength and sensitivity threshold controlling the speed and precision of the approach. The code defines a JavaScript function, `ease`, which iteratively moves the variable by a fraction of the remaining distance, snapping to the target once the difference falls below a threshold. The rendering is driven by this custom logic, with no external animation or easing libraries involved, making it a bare-bones illustration of frame-by-frame interpolation.

Loading thumbnail…

JS Bin

This example connects a Spark Core IoT device to a web page, turning a div into a virtual LED and potentiometer display. The animation uses requestAnimationFrame to poll the device’s `potarValue` variable every 20 frames, updating a border-left width. Mouse enter and leave events call the `led` function via `device.callFunction` to turn the LED on or off. It demonstrates real-time hardware communication through the Spark JavaScript library, with the device’s status logged to the console.

Loading thumbnail…

JS Bin

A spinning 3D cube displays a live digital clock on each face, using Three.js for WebGL rendering. The clock face itself is drawn into a 2D canvas via the Canvas API (`fillText`, `fillRect`), then mapped onto the cube as a `THREE.Texture` updated each frame. The animation loop rotates the mesh while calling `texture.needsUpdate` to refresh the time display, combining a raw canvas with a Three.js `MeshBasicMaterial`. The scene uses a perspective camera and box geometry sized 200 units.

Loading thumbnail…

Sonic Pi Drum Machine

This example turns a Sonic Pi drum machine script into a visual instrument panel. It shows a sequencer grid for three drum tracks—hi-hat, kick, and snare—with per-step amplitude values (0–9) mapped from the embedded pattern data. The Ruby code defines a `live_loop` and `run_pattern` API to schedule samples, using Sonic Pi’s `sample` and `sleep` functions with a `:pulse` synchronization loop. A selectable `use_kit` command switches between acoustic, electro, and toy sound kits via a `drum_kits` hash. The visualization highlights the code’s structure, not the audio output.

Loading thumbnail…

Maths functions, mostly from Processing.js

This example demonstrates a collection of mathematical visualization techniques implemented in JavaScript, primarily relying on custom pseudo-random number generation and Perlin noise algorithms. The code implements Marsaglia's random number generator and a full Perlin noise implementation with 1D, 2D, and 3D variants, which can be used to create organic, procedural textures and patterns. The visualization likely renders these noise functions as visual output, showcasing how deterministic noise algorithms can produce complex, natural-looking variations. The code is based on Processing.js conventions, with a Math2 class providing random and noise functions similar to those found in the Processing API, allowing for generative art and data-driven graphics.

Loading thumbnail…

Motion Blur + Chromatic Aberration

A single white ellipse traces a Lissajous figure on a black field, its motion captured as a smooth, time-averaged blur. The sketch applies per-channel scaling to simulate chromatic aberration, splitting the image into red, green, and blue layers. It uses Processing’s `P2D` renderer, `loadPixels`, and `updatePixels` to accumulate multiple samples per rendered frame, creating the motion-blur effect.