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