Skip to main content
SimilarExport ZIP
100%

Nintendo pixelation

✓ Published0🌍 Public
DDinoJay
Last edited Jun 8, 2017
Created on Jun 8, 2017

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`.

AI-generated description

Convert image to a somewhat NES-style image:

  1. Get the colors of each square of n pixels.
  2. Convert those colors from RGB to LAB and average them.
  3. Round that color to the closest color in the NES palette.
  4. Convert back to RGB and set all n pixels to that color.

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/20a3f4e81d9d54ab5547'>Nintendo pixelation</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Pixels Testing

The visualization animates a full-screen canvas of green noise that shifts between blurry and sharp textures over time. It initializes random green pixel values, then continuously reads and rewrites the image data using Canvas `getImageData` and `putImageData`. Each frame applies a simple convolution blur from neighboring pixels, then blends between that blurred result and a sharpened version based on the current pixel’s horizontal position and an incrementing time variable, creating a wave-like patterning effect across the screen.

CCurran Kelleher
69% 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
69% 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
65% match
Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed
64% match
Loading thumbnail…

Image Processing

This example demonstrates real-time image processing on map tiles using Polymaps and HTML5 Canvas. The map loads a static image from a URL and renders it through a custom canvas layer, where each tile’s pixel data is read with `getImageData` and halved in intensity before being written back via `putImageData`. The code uses `po.canvas()` to define the layer, `drawImage` to place the source, and `createImageData` to prepare the output. The result shows a visibly darkened version of the original image across the panning map.

Mmbostock
64% match
Loading thumbnail…

SCRIPT-8

This example uses SCRIPT-8, a JavaScript fantasy console for creating retro-style games and visualizations. It renders a colorful, animated scene directly to the canvas using the console’s built-in graphics API. The visualization draws sprites and map data from JSON files, with procedural animation driven by the `requestAnimationFrame` loop. SCRIPT-8’s `pixel` and `sprite` functions handle the drawing, while its input and sound APIs are loaded but unused, focusing purely on visual output. The cassette’s empty chains, songs, and phrases files confirm a minimal, self-contained demonstration of the platform’s rendering capabilities.

FFrozenfire92
63% 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
62% match
Loading thumbnail…

Stippling

This stippling example uses a capacity-constrained point distribution algorithm to render a portrait of President Obama from a grayscale source image. The canvas displays 2000 colored sites, each with 15 assigned points, which iteratively swap points and recenter to achieve a uniform, dense stipple pattern. The animation runs in a loop, redrawing the points and site locations every frame. The code uses Canvas `getImageData` to read pixel density, then applies a custom algorithm with flat typed arrays (`Float32Array`, `Uint32Array`) to optimize performance in the browser.

FFrissAnalytics
62% match