Skip to content

Instantly share code, notes, and snippets.

@aemkei

aemkei/LICENSE.txt

Forked from 140bytes/LICENSE.txt
Created October 5, 2011 17:06
Show Gist options
  • Star 19 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save aemkei/1265021 to your computer and use it in GitHub Desktop.
Save aemkei/1265021 to your computer and use it in GitHub Desktop.
Download ZIP
JS ASCII Logo - 140byt.es
Raw
README.md

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.

Raw
annotated.js
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
)
}
Raw
index.js
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)}
Raw
LICENSE.txt
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.
Raw
package.json
{
"name": "jsLogo",
"description": "Renders the JS community logo in ASCII art",
"keywords": [
"ascii",
"binary",
"js",
"logo"
]
}
Raw
test.html
<!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
Copy link

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
Copy link
Author

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
Copy link

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
Copy link
Author

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
Copy link

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
Copy link

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
Copy link
Author

aemkei commented Oct 7, 2011

@tsaniel This would leak c to the global scope.

@tsaniel
Copy link

tsaniel commented Oct 7, 2011

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

@janl
Copy link

janl commented Oct 17, 2011

Nice Job!

@hblank
Copy link

hblank commented Oct 17, 2011

Like!

@aemkei
Copy link
Author

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
Copy link
Author

aemkei commented Oct 18, 2011

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

@tsaniel
Copy link

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
Copy link
Author

aemkei commented Oct 18, 2011

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

@aemkei
Copy link
Author

aemkei commented Oct 18, 2011

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

@maettig
Copy link

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