Code Calligrams
Scr*wing around with JavaScript
@orestesCA
Typographic Art
A little history
Typewriter Art
ASCII art
Animated ASCII art
nc -v nyancat.dakko.us 23
Calligram
Code Calligram
#define _ F-->00 || F-OO--;
long F=00,OO=00;
main(){F_OO();printf("%1.3f\n", 4.*-F/OO/OO);}F_OO()
{
_-_-_-_
_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_-_-_-_
_-_-_-_-_-_-_-_-_
_-_-_-_
}
Pig latin
Hello
https://en.wikipedia.org/wiki/Pig_Latin#Rules
ello h
ello h ay
X X
X X X X
X X X X
X X X X
X X X X
X X X X
X X X X
X X X X X X
X XX X X XX X
X XXX X XXXXXXXXX X XXX X
X XXX X XXXX XXXX X XXX X
X XXXX X XX ainma(){ archa XX X XXXX X
X XXXX X oink[9],*igpa, X XXXX X
X XXXXXX atinla=etcharga(),iocccwa XXXXXX X
X XXXX ,apca='A',owla='a',umna=26 XXXX X
X XXX ; orfa(; (atinla+1)&&(!((( XXX X
X XX atinla-apca)*(apca+umna-atinla) XX X
X X >=0)+((atinla-owla)*(owla+umna- X X
X atinla)>=0))); utcharpa(atinla), X
X X atinla=etcharga()); orfa(; atinla+1; X X
X X ){ orfa( igpa=oink ,iocccwa=( X X
X X (atinla- XXX apca)*( XXX apca+umna- X X
X atinla)>=0) XXX XXX ; (((( X
X atinla-apca XXXXX XXXXXXX XXXXX )*(apca+ X
X umna-atinla XXXXXX )>=0) XXXXXX +((atinla- X
X owla)*(owla+ XXXX umna- XXXX atinla)>=0)) X
X &&"-Pig-" XX "Lat-in" XX "COb-fus" X
X "ca-tion!!"[ X (((atinla- X apca)*(apca+ X
X umna-atinla) X >=0)?atinla- X apca+owla: X
X atinla)-owla X ]-'-')||((igpa== X oink)&&!(*( X
X igpa++)='w') X )||! X (*( X igpa X ++)=owla); * X
X (igpa++)=(( X ( XXX XXX X atinla-apca X
X )*(apca+ X umna XXX - XXX X atinla)>=0) X
X ?atinla- X apca XXX + XXX owla X :atinla), X
X atinla= X X X X etcharga()) X
X ; orfa( X atinla=iocccwa?(( X (atinla- X
X owla)*(owla+ X umna-atinla)>=0 X )?atinla- X
X owla+apca: X atinla): X atinla; ((( X
X atinla-apca)* X (apca+umna- X atinla)>=0)+( X
X (atinla-owla)* X (owla+ X umna-atinla)>= X
X 0)); utcharpa( XX XX atinla),atinla X
X =etcharga()); XXXXXXX orfa(*igpa=0, X
X igpa=oink; * igpa; utcharpa( X
X *(igpa++))); orfa(; (atinla+1)&&(!((( X
X atinla-apca )*(apca+ X
X umna- XXXXX XXXXX atinla)>=0 X
X )+(( XXXXX atinla- X
XX owla)*( owla+umna- XX
XX atinla)>=0))); utcharpa XX
XX (atinla),atinla= XX
XX etcharga()); } XX
XXXX } XXXX
XXXXXXXXX
#define X
#define XX
#define XXX
#define XXXX
#define XXXXX
#define XXXXXX
#define XXXXXXX
#define orfa for
#define XXXXXXXXX
#define archa char
#define ainma main
#define etcharga getchar
#define utcharpa putchar
JavaScript
Make them run
/*
_____ ____ __
/ ___/____ ____ _________ / _/___ _ ______ _____/ /__ __________
\__ \/ __ \/ __ `/ ___/ _ \ / // __ \ | / / __ `/ __ / _ \/ ___/ ___/
___/ / /_/ / /_/ / /__/ __/ _/ // / / / |/ / /_/ / /_/ / __/ / (__ )
/____/ .___/\__,_/\___/\___/ /___/_/ /_/|___/\__,_/\__,_/\___/_/ /____/
/_/
*/
({} +[] )[!+[]
+!+ []] +({}+[])[(!+
[]+!+[])+(!+[]+!+[])] +({}+[])[(!+[]+!+[
])+(!+ []+!+[])+ (!+[]+ !+[])] +(![]+ [])[+!
+[]]+({}+[])[!+[]+!+[]]+({}+[])[( !+[]+!+[])+(!+[]+!+[])]+
({} +[])[(!+[]+!+[])+(!+[ ]+! +[] )]+(!! []+
[]) [+! +[] ]+( ![] +[]
)[(+!+ [])+(! +[] +!+
[])]
How it works
The basics or type coercion abuse
![]
false
false+""
"false"
"false"[1]
"a"
+[]
0
!0
true
"false"[1]
"false"[+!+[]]
(![]+[])[+!+[]]
"a"
+true
1
!+[]
true
+!+[]
1
Playing scrabble
"[object Object]" "true" "true" "false" "[object Object]" "true" "true" "true" "false"
[]+{}
"[object Object]"
([]+{})[2]
"b"
"true"
"false"
({}+[])[!+[]+!+[]] // b
({}+[])[(!+[]+!+[])+(!+[]+!+[])] // e
({}+[])[(!+[]+!+[])+(!+[]+!+[])+(!+[]+!+[])] // t
(![]+[])[+!+[]] // a
({}+[])[!+[]+!+[]] // b
({}+[])[(!+[]+!+[])+(!+[]+!+[])] // e
({}+[])[(!+[]+!+[])+(!+[]+!+[])] // e
(!![]+[])[+!+[]] // r
(![]+[])[(+!+[])+(!+[]+!+[])] // s
// betabeers
({}+[])[!+[]+!+[]]+({}+[])[(!+[]+!+[])+(!+[]+!+[])]+
({}+[])[(!+[]+!+[])+(!+[]+!+[])+(!+[]+!+[])]+(![]+[]
)[+!+[]]+({}+[])[!+[]+!+[]]+({}+[])[(!+[]+!+[])+(!+[
]+!+[])]+({}+[])[(!+[]+!+[])+(!+[]+!+[])]+(!![]+[])[
+!+[]]+(![]+[])[(+!+[])+(!+[]+!+[])];
Making it pretty
~/Projects/code-calligrams: cat art/aliens-1.txt
x x xx
x x xxxx
xxxxxxx xxxxxx
xx xxx xx xx xx xx
xxxxxxxxxxx xxxxxxxx
x xxxxxxx x x xx x
x x x x x x
xx xx x x
~/Projects/calligrams: cat encoded/betabeers.txt
({}+[])[!+[]+!+[]]+({}+[])[(!+[]+!+[])+(!+[]+!+[])]+({}+[])[(!+[]+!+[])+(!+[]+!+[])+(!+[]+!+[])]+(![]+[])[+!+[]]+({}+[])[!+[]+!+[]]+({}+[])[(!+[]+!+[])+(!+[]+!+[])]+({}+[])[(!+[]+!+[])+(!+[]+!+[])]+(!![]+[])[+!+[]]+(![]+[])[(+!+[])+(!+[]+!+[])]
~/Projects/calligrams: node wrap.js --art art/aliens-1.txt \
--string encoded/betabeers.txt --width 3
({} +[] )[!+[]
+!+ []] +({}+[])[(!+
[]+!+[])+(!+[]+!+[])] +({}+[])[(!+[]+!+[
])+(!+ []+!+[])+ (!+[]+ !+[])] +(![]+ [])[+!
+[]]+({}+[])[!+[]+!+[]]+({}+[])[( !+[]+!+[])+(!+[]+!+[])]+
({} +[])[(!+[]+!+[])+(!+[ ]+! +[] )]+(!! []+
[]) [+! +[] ]+( ![] +[]
)[(+!+ [])+(! +[] +!+
[])]
Thanks!
- Watch Martin Kleppe's talk [1]
- Read the JSFuck spec. [2]
[1] https://www.youtube.com/watch?v=-QZSJx8oXus
[2] jsfuck.com
Feedback: @orestesCA
Code Calligrams
By Orestes Carracedo
Code Calligrams
Lightning talk based on Martin Kleppe's talk at ffconf 15 -> http://lanyrd.com/2015/ffconf/sdqhzx/
- 892