ascii nate: anna

100%

ascii nate: anna

✓ Published0🌍 Public

Last edited Sep 27, 2016

Created on Sep 25, 2016

This block converts uploaded images into ASCII art by downsampling them to 72 pixels wide and mapping pixel brightness to characters from a d3 linear scale. The scale's domain and range are editable: double-click to add new values, and drag the numbers to remap intensity thresholds in real time. Rendered with canvas-based image processing and styled with monospace typography, the visualization lets you explore how different character mappings alter the appearance of the resulting text portrait.

AI-generated description

Generate UTF-8 Art. Upload your own picture (it will be downsampled to 72 pixels wide).

Try changing the inputs of the scale, since the initial values are Chinese, you'll need to replace all of them if you are using ASCII for the image to line up.

You can double click on the scale to add a new value. Try dragging the numbers around to see how the image is affected by the scale.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/f8456ac8d3c2e8069571'>ascii nate: dark</a>

mit Licensed

Similar vizzes

Loading thumbnail…

ascii-animation

Two separate animations play side by side: a pre-rendered sequence of block characters cycles through slides showing the growth of urban versus rural population, while a second panel flips the characters of a Donald Trump ASCII portrait line by line to create a mirror effect. The population sequence loads its frames from a text file and swaps them every 500 milliseconds using `setInterval`, updating the text of a `pre` element with `d3.select`. The portrait animation reverses each line’s characters and swaps slash directions every 100 milliseconds, using D3’s `xhr` calls to fetch both text files.

11wheel

65% match

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

64% match

Loading thumbnail…

Fork of Nita's_Episode 3: Sol LeWitt in Vanilla JavaScript version 3

An animated SVG composition generates a grid of two hundred colorful vertical rectangles, each with a randomized fill color and a looping vertical translation animation that shifts it upward by 300 pixels over a random duration. A white circle is drawn at the center of the screen, while a second grid of horizontal rectangles is masked using a circle element within an SVG `<mask>` definition, revealing the horizontal stripes only inside the circular area. The code uses vanilla JavaScript with the Web Animations API (`element.animate`) and dynamically creates SVG elements via `createElementNS`.

Rraturi22@gmail.com

58% match

Loading thumbnail…

AN

This example displays a placeholder visualization on an SVG canvas, showing a large monospace text prompt that invites code editing. The page initializes a 960-by-500-pixel SVG and sets variables for block dimensions, spacing, and layout—though these are not yet used. It uses d3.v4 to append the SVG and a text element, relying on the D3 selection and attribute APIs. The visualization is built with Blockbuilder.org scaffolding and renders solely through SVG elements, with no data source or interactive behavior implemented yet.

Aadamnieman

58% match

Loading thumbnail…

Fork of Fork of Nita's_Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This piece displays a generative animation inspired by Sol LeWitt, in which 200 randomly colored vertical bars rise and fall across the full screen height. A large white circle at the center masks a series of black horizontal bars. Built with vanilla JavaScript and SVG, the code creates animations via the `rect.animate()` API, uses `document.createElementNS` for SVG elements, and generates random RGB colors using the `Math.random` function.

NNita

58% match

Loading thumbnail…

Code Speaking

Typed characters appear in a running transcript alongside their ASCII decimal codes, while a corresponding symbol image fades in for each code. The animation proceeds character by character, with a two-second delay between steps. D3 v5 loads a CSV table that maps ASCII values to image links, and the code also uses `d3.select` to update the text area. User input comes from an HTML form and is processed via a JavaScript loop with `setTimeout` to sequence the transitions.

JJoker-tr

58% match

Loading thumbnail…

block of abk

A blank SVG canvas displays the static text "Edit the code below to change me, abk!" centered horizontally at a fixed y-coordinate. The text is styled with a 36-pixel monospace font. The visualization uses d3.v4 to select the body element, append an SVG with a 960 by 500 pixel viewport, and insert a single text element. No data or dynamic behavior is present; the example solely demonstrates basic SVG text rendering with D3's selection and attribute methods.

Aakollegger

58% match

Loading thumbnail…

fresh block

Letters animate in a horizontal line, appearing, moving, or fading out as a random alphabetical subset of the alphabet is selected every 1.5 seconds. The d3.v4 code uses data joins with enter, update, and exit selections, styling each state with distinct colors and animating positions and opacity via d3.transition. SVG text elements render the glyphs in a monospace font.

Aal1s

57% match