Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JS ASCII Logo - 140byt.es

JS ASCII Logo - 140byt.es

My second attempt to draw the JS Community logo in less than 140 bytes.

This time parsing binary bitmap data in pure JavaScript. See the example.

Update: The source is now included in the official logo.js repository.

Example output

    ████████████████████████
    ████████████████████████
    ████████████████████████
    ████████████████████████
    ████████████████████████
    ██████████  ████    ████
    ██████████  ██  ████████
    ██████████  ████    ████
    ██████████  ████████  ██
    ██████████  ██  ████  ██
    ██████    ██████    ████
    ████████████████████████

For more information

See the 140byt.es site for a showcase of entries (built itself using 140-byte entries!), and follow @140bytes on Twitter.

To learn about byte-saving hacks for your own code, or to contribute what you've learned, head to the wiki.

140byt.es is brought to you by Jed Schmidt, with help from Alex Kloss. It was inspired by work from Thomas Fuchs and Dustin Diaz.

function f ( // all arguments are placeholder
a, // character to replace
b, // index
c // binary string
){
for (
b = 12; // read 12 lines
b--;
c = [c] + (
4095 ^ [ // combine with 2^12
// reversed bitmap array:
, // 111111111111
396, // 111001110011
82, // 111110101101
66, // 111110111101
76, // 111110110011
80, // 111110101111
76 // 111110110011
][ b ]
).toString(2) // convert decimals to binary presentation
+ 2 // add "2" to end of line
);
return " ■\n"[ // charater map 0 > space, 1 > block, 2 > new line
a // get "0", "1" or "2" from string
] || c.replace( // replace characters
/./g, f // read binary string
)
}
function f(a,b,c){for(b=12;b--;c=[c]+(4095^[,396,82,66,76,80,76][b]).toString(2)+2);return" ■\n"[a]||c.replace(/./g,f)}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 YOUR_NAME_HERE <YOUR_URL_HERE>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "jsLogo",
"description": "Renders the JS community logo in ASCII art",
"keywords": [
"ascii",
"binary",
"js",
"logo"
]
}
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>JS ASCII Logo - 140Byt.es</title>
<style>
#logo {
font-family: "Courier New", monospace;
color: #F0DB4F;
background: #323330;
display: inline-block;
white-space: pre;
line-height: 33px;
font-size: 55px;
}
</style>
</head>
<body>
<div id="logo"></div>
<script>
var logo = function f(a,b,c){for(b=12;b--;c=[c]+(4095^[,396,82,66,76,80,76][b]).toString(2)+2);return" ■\n"[a]||c.replace(/./g,f)}
document.getElementById( "logo" ).innerHTML = logo()
</script>
</body>
@subzey

This comment has been minimized.

Copy link

@subzey subzey commented Oct 6, 2011

Nice one!

Golfing a little: We can reverse the loop in order to get rid of these leading commas, and use ^ (XOR) instead of -~~:

function(b,i,c){for(b=c="",i=12;i--;c+=(4095^[,396,82,66,76,80,76][i]).toString(2)+2);for(i in c)b+=" ■\n"[c[i]];return b}
@aemkei

This comment has been minimized.

Copy link
Owner Author

@aemkei aemkei commented Oct 6, 2011

Sweet XOR stuff and you golfed it to 124 bytes.

Now what? Adding inline colors or double the resolution?

@subzey

This comment has been minimized.

Copy link

@subzey subzey commented Oct 6, 2011

@aemkei, uhh, maybe, 16×16?

function(b,i,c){for(b=c="",i=16;i--;c+=(32767^[,926,2015,707,207,222,216,223,206][i]).toString(2)+12);for(i in c)b+=" ■\n"[c[i]];return b}
@aemkei

This comment has been minimized.

Copy link
Owner Author

@aemkei aemkei commented Oct 6, 2011

Hmm, the font looks a bit heavy in in 16x16 pixels. What about using the 12x12 grid and add "antialised" pixels using special "QUADRANT" Unicode characters:
http://www.fileformat.info/info/unicode/block/block_elements/list.htm

     █ ▟██▖ 
     █ █    
     █ ▝██▖ 
     █   ▝█ 
   ▖ █ █  █ 
   ██▘ ▝██▘ 
@subzey

This comment has been minimized.

Copy link

@subzey subzey commented Oct 6, 2011

These characters are pretty exotic, I suppose. None of my Win 7 browsers could show your ascii- unicode-art properly

@tsaniel

This comment has been minimized.

Copy link

@tsaniel tsaniel commented Oct 7, 2011

Save 1 byte.
function(){for(var b=c="",i=12;i--;c+=(4095^[,396,82,66,76,80,76][i]).toString(2)+2);for(i in c)b+=" ■\n"[c[i]];return b}

@aemkei

This comment has been minimized.

Copy link
Owner Author

@aemkei aemkei commented Oct 7, 2011

@tsaniel This would leak c to the global scope.

@tsaniel

This comment has been minimized.

Copy link

@tsaniel tsaniel commented Oct 7, 2011

@aemkei: Thanks for reminding that, almost forget it.

@janl

This comment has been minimized.

Copy link

@janl janl commented Oct 17, 2011

Nice Job!

@hblank

This comment has been minimized.

Copy link

@hblank hblank commented Oct 17, 2011

Like!

@aemkei

This comment has been minimized.

Copy link
Owner Author

@aemkei aemkei commented Oct 18, 2011

I'm now using the correct HEX colors and added the example: http://fiddle.jshell.net/aemkei/BD8Z8/show/

@aemkei

This comment has been minimized.

Copy link
Owner Author

@aemkei aemkei commented Oct 18, 2011

... and using the string=[string]+ initializer trick to golf it down to 123 bytes.

@tsaniel

This comment has been minimized.

Copy link

@tsaniel tsaniel commented Oct 18, 2011

Save 2 more bytes.

function f(a,b,c){for(b=12;b--;c=[c]+(4095^[,396,82,66,76,80,76][b]).toString(2)+2);return" ■\n"[a]||c.replace(/./g,f)}

Bonus: All browsers compatible when replacing [a] with .charAt(a).

@aemkei

This comment has been minimized.

Copy link
Owner Author

@aemkei aemkei commented Oct 18, 2011

Look: The source is now included in the official logo.js repository.

@aemkei

This comment has been minimized.

Copy link
Owner Author

@aemkei aemkei commented Oct 18, 2011

@tsaniel: Perfect! Using replace instead of the for in loop will shrink it down to 121 bytes!

@maettig

This comment has been minimized.

Copy link

@maettig maettig commented Dec 11, 2011

I tried to crunch the JS logo in 140 bytes SVG. I failed since my version depends on an external resource called "Arial".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment