cocoscii

by mrspeaker

mrspeaker / cocoscii

Javascript version of ASCIImage

128 Stars 9 Forks Last release: Not found 29 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Cocoscii

This is a javascript (ES2015) version of the neat-o hack ASCIImage by Charles Parnot. ASCIImage lets you create icons by defining some control points for drawing lines, paths, and circles. You can also style each shape individually. Read all about the original project, then come back here.

This is the JavaScript version by Mr Speaker, and creates standard DOM images (see cocoscii.js for the ES6). Usage looks like this:

  const closeImg = cocoscii(`
    · · · · 1 1 1 · · · ·
    · · 1 · · · · · 1 · ·
    · 1 · · · · · · · 1 ·
    1 · · 2 · · · 3 · · 1
    1 · · · # · # · · · 1
    1 · · · · # · · · · 1
    1 · · · # · # · · · 1
    1 · · 3 · · · 2 · · 1
    · 1 · · · · · · · 1 ·
    · · 1 · · · · · 1 · ·
    · · · 1 1 1 1 1 · · ·
`, (idx, style) => {

if (idx === 0) { style.fill = "#000"; } else { style.stroke = "#fff"; }

});

This produces images like:

closeicon lockicon

The format is pretty funny: and a bit complicated to start with - so go read the original docs! The basics are, you fill a grid with the ordered markers

123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnpqrstuvwxyz
. Any other characters are ignored.

If the numbers are sequential, they become a path. If you skip a number, then a new path starts. If a number is repeated twice, it becomes a line. If a number is repeated more than twice, it becomes a circle that fits inside the bounding box of all the points.

The callback function is called once per defined shape. You can use that to alter the fillStyle, strokeStyle, and lineWidth for each shape.

TODO:

  • stroke width too thin compared to ASCIImage
  • implement "ASCIIContextShouldClose"

Building

No dependencies, so run in a ES2015-y browser - otherwise, build with

jspm
:
jspm install

This project uses the

Babel
transpiler, but
Traceur
should work too. The only important file is
src/cocoscii.js
.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.