Gist f760b119be511c3b97e0f496b4dc1e1c

100%

Gist f760b119be511c3b97e0f496b4dc1e1c

✓ Published0🌍 Public

Last edited Oct 1, 2021

Created on Oct 1, 2021

This example demonstrates a custom lossless image compression algorithm that encodes 16x16 pixel art using Sharp for image processing and node-base91 for encoding. It converts between 4-bit and 8-bit color formats to preserve the original artistic intent, as seen with the reference star and zero images. The code includes functions for converting RGB values to and from short hex codes, and encodes image data through Sharp's WebP lossless format before base91 encoding. The visualization shows compression results as encoded strings, verifying that the algorithm successfully reproduces the original images through lossless decoding.

AI-generated description

Similar vizzes

Loading thumbnail…

Nintendo pixelation

The example converts a static image into a stylized NES-style pixelation by averaging colors in blocks of pixels and mapping them to the closest NES palette color in LAB color space. It processes the image in shuffled batches, updating the canvas progressively to show the transformation over time. The code uses D3 for selection and shuffling, Canvas `getImageData` and `putImageData` for pixel manipulation, and the `requestAnimationFrame` loop to animate the batch processing. The source image is loaded from "magritte.jpg," and the palette comes from the included `nes-palette.js`.

DDinoJay

60% match

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.

MMAKIO135

58% match

Loading thumbnail…

Gist ac01c91d8c9c9dd4b825

This example uses D3.js and the HTML5 Canvas API to render an interactive color picker that visualizes the HCL (Hue-Chroma-Lightness) color space. It shows a 500×500 pixel grid where the horizontal axis maps hue from 360 to 0 degrees, the vertical axis maps lightness from 0 to 100, and chroma is fixed at 35. The code uses `d3.scale.linear` to map pixel coordinates to color values, converts HCL to RGB via `d3.hcl().rgb()`, and writes the results directly to image data with `createImageData` and `putImageData`. Moving the mouse over the canvas triggers `getImageData` to read the pixel color and display its hex value in a label, demonstrating direct pixel manipulation without SVG or DOM elements.

CCaged

55% match

Loading thumbnail…

fresh block

This example demonstrates a pixel-level color manipulation technique using an HTML canvas. It displays a road sign image twice side-by-side: the original on the left and a recolored version on the right. The code loads a PNG file, draws it to the canvas, and then uses the `getImageData` and `putImageData` APIs to modify individual pixels. It shifts the hue of blue pixels toward green, and replaces specific red and light-red colors with custom RGB values. The implementation includes custom `rgbToHsl` and `hslToRgb` conversion functions to perform the hue adjustments in HSL color space.

EEE2dev

54% match

Loading thumbnail…

Base64.js

This example demonstrates a compact implementation of Base64 encoding in JavaScript, showing how binary data can be converted into a six-bit character representation using the standard Base64 alphabet. The code defines a function, `encode`, that iterates over the input string’s character codes and constructs the output by bit-shifting values and selecting characters from a lookup string. It uses standard JavaScript string methods like `charCodeAt` and `charAt` alongside bitwise operators, with no external libraries or visualization components involved. The example serves as a clear, minimal demonstration of encoding logic rather than a data-driven graphic.

Mmbostock

54% match

Loading thumbnail…

Fork of Pixels Testing

This example uses Canvas pixel manipulation to create an animated, generative art piece. The code initializes an `ImageData` buffer with random green values, then in each animation frame applies a cellular automaton-like filter using `getImageData` and `putImageData`. The algorithm calculates a blur from neighboring pixels and mixes it with a sharpened value based on a moving horizontal band, creating a shifting, organic texture. The animation runs via `requestAnimationFrame`, and a `drawImage` call subtly shifts the canvas each frame.

CCurran Kelleher

54% match

Loading thumbnail…

Gist bcaa860506520cefb711aa4a9f885c12

This example assembles a large sprite sheet of data visualization badges, arranging hundreds of PNG icons into a single 8192-pixel square grid. It shows the process of converting individual SVG badge files into a unified texture atlas for efficient loading in a projector tool. The script uses Python’s Pillow library (`Image.open`, `resize`, `paste`) to read, scale, and tile each icon, while calculating the grid dimensions with `math.sqrt`. It sorts the source files from a local SVG directory, converts them to PNGs, and saves the final composite to `sprite_image.png`.

11wheel

53% match

Loading thumbnail…

SVG feGaussianBlur

This example demonstrates SVG’s Gaussian blur filter effect applied to an image of GitHub’s Octocat mascot. A range input controls the blur intensity, updating the `stdDeviation` attribute of an `feGaussianBlur` element in real time. The code uses D3 v3 to create the SVG container, append the filter definition, and bind the input’s change event to the blur update function. The image is loaded asynchronously and rendered as an SVG `<image>` element with the filter reference.

Mmbostock

53% match