██████╗██████╗ ███████╗ █████╗ ████████╗██╗██╗   ██╗███████╗                  
██╔════╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝██║██║   ██║██╔════╝                  
██║     ██████╔╝█████╗  ███████║   ██║   ██║██║   ██║█████╗                    
██║     ██╔══██╗██╔══╝  ██╔══██║   ██║   ██║╚██╗ ██╔╝██╔══╝                    
╚██████╗██║  ██║███████╗██║  ██║   ██║   ██║ ╚████╔╝ ███████╗                  
 ╚═════╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═══╝  ╚══════╝                  
                                                                               
                                 ██████╗ ██████╗ ██████╗ ██╗███╗   ██╗ ██████╗ 
                                ██╔════╝██╔═══██╗██╔══██╗██║████╗  ██║██╔════╝ 
                                ██║     ██║   ██║██║  ██║██║██╔██╗ ██║██║  ███╗
                                ██║     ██║   ██║██║  ██║██║██║╚██╗██║██║   ██║
                                ╚██████╗╚██████╔╝██████╔╝██║██║ ╚████║╚██████╔╝
                                 ╚═════╝ ╚═════╝ ╚═════╝ ╚═╝╚═╝  ╚═══╝ ╚═════╝

Sylvain Pollet-Villard

DevRel at Worldline

@SylvainPV

hello Strasbourg !

 📁 software art

    └ 📁 creative coding

= software is the art

= code is the art

wth is creative coding ?

how do you make art
with this ?

code has few constraints,
so we define our own
 "game rules"

art is born
from constraint

Theory

Code Golf

  JS1k 

game rule:
write the minimum amount of characters of code

function getNextFriday13(){
d=new Date();d.setDate(13);m=d.getMonth();while(d.getDay()!=5){d.setMonth(++m)}return d
}

87

function getNextFriday13(){
for(d=new Date,d.setDate(13);d.getDay()!=5;d.setMonth(d.getMonth()+1));return d
}

79

function getNextFriday13(){
for(d=new Date;d.getDay()*d.getDate()!=65;d.setTime(+d+9));return d
}

67

Quine

game rule:
program must print its own source code

aem1k.com/world

eval(z='p="<"+"pre>"/* ,.oq#+     ,._, */;for(y in n="zw24l6k\
4e3t4jnt4qj24xh2 x/* =<,m#F^    A W###q. */42kty24wrt413n243n\
9h243pdxt41csb yz/* #K       q##H######Am */43iyb6k43pk7243nm\
r24".split(4)){/* dP      cpq#q##########b, */for(a in t=pars\
eInt(n[y],36)+/*         p##@###YG=[#######y */(e=x=r=[]))for\
(r=!r,i=0;t[a/*         d#qg `*PWo##q#######D */]>i;i+=.05)wi\
th(Math)x-= /*        aem1k.com Q###KWR#### W[ */.05,0<cos(o=\
new Date/1e3/*      .Q#########Md#.###OP  A@ , */-x/PI)&&(e[~\
~(32*sin(o)*/* ,    (W#####Xx######.P^     T % */sin(.5+y/7))\
+60] =-~ r);/* #y    `^TqW####P###BP           */for(x=0;122>\
x;)p+="   *#"/* b.        OQ####x#K           */[e[x++]+e[x++\
]]||(S=("eval"/* l         `X#####D  ,       */+"(z=\'"+z.spl\
it(B = "\\\\")./*           G####B" #       */join(B+B).split\
(Q="\'").join(B+Q/*          VQBP`        */)+Q+")//m1k")[x/2\
+61*y-1]).fontcolor/*         TP         */(/\\w/.test(S)&&"#\
03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//

Artistic Quines

Char subsetting

game rule:
only use a character subset to write code

You can do many things with these 3 characters:

[ ] +

 

[x] array litterals
x[y] property access

+x casts to Number

++x  increment by one

x+[] casts to String

0 === +[]

Using the trick : [x][0] === x

1 === ++[[]][+[]]

2 === ++[++[[]][+[]]][+[]]

3 === ++[++[++[[]][+[]]][+[]]][+[]]

etc.

+[]++ syntax error

[][0] === undefined
undefined+[] === "undefined"

"u" === [[][+[]]+[]][+[]][+[]]
"n" === [[][+[]]+[]][+[]][++[[]][+[]]]
"d" === [[][+[]]+[]][+[]][++[++[[]][+[]]][+[]]]
"e" === [[][+[]]+[]][+[]][++[++[++[[]][+[]]][+[]]][+[]]]

We got letter e so we have exponential number notation !

+("1e1000") === Infinity

+("1"+"e"+"1"+"0"+"0"+"0")+[] === "Infinity"

"I" ===
[+[++[+[]][+[]]+[]+[[]+[][+[]]][+[]][++[++[++[+[]][+[]]][+[]]][+[]]]+[++[+[]][+[]]+[]][+[]]+[+[]]+[+[]]+[+[]]][+[]]+[]][+[]][+[]]

    Still valid !

We need either !  or = or > or < to get booleans

false ===  []==[];    true === +[]==+[]

Okay, let's add the  =  character to our subset:     [ ] + =

4 is not so bad I guess 

0 1 2 3 4 5 6 7 8 9

a b c d e f g h i

j k l m n o p q

r s t u v w x y z

A B C D E F G H I

J K L M N O P Q

R S T U V W X Y Z

we have all the letters for "constructor" !

"constructor"

 

[[][[[]+[][+[]]][+[]][++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]]+[[]+[][+[]]][+[]][++[++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]][+[]]]+[[]+[][+[]]][+[]][++[[]][+[]]]+[[]+[][+[]]][+[]][++[++[[]][+[]]][+[]]]]+[]][+[]][++[++[++[[]][+[]]][+[]]][+[]]]+[[][[[]+[][+[]]][+[]][++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]]+[[]+[][+[]]][+[]][++[++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]][+[]]]+[[]+[][+[]]][+[]][++[[]][+[]]]+[[]+[][+[]]][+[]][++[++[[]][+[]]][+[]]]]+[]][+[]][++[++[++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]][+[]]][+[]]]+[[]+[][+[]]][+[]][++[[]][+[]]]+[[[]==[]][+[]]+[]][+[]][++[++[++[[]][+[]]][+[]]][+[]]]+[+[++[+[]][+[]]+[]+[[]+[][+[]]][+[]][++[++[++[+[]][+[]]][+[]]][+[]]]+[++[+[]][+[]]+[]][+[]]+[+[]]+[+[]]+[+[]]][+[]]+[]][+[]][++[++[++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]][+[]]][+[]]]+[[+[]==+[]][+[]]+[]][+[]][++[+[]][+[]]]+[[]+[][+[]]][+[]][+[]]+[[][[[]+[][+[]]][+[]][++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]]+[[]+[][+[]]][+[]][++[++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]][+[]]]+[[]+[][+[]]][+[]][++[[]][+[]]]+[[]+[][+[]]][+[]][++[++[[]][+[]]][+[]]]]+[]][+[]][++[++[++[[]][+[]]][+[]]][+[]]]+[+[++[+[]][+[]]+[]+[[]+[][+[]]][+[]][++[++[++[+[]][+[]]][+[]]][+[]]]+[++[+[]][+[]]+[]][+[]]+[+[]]+[+[]]+[+[]]][+[]]+[]][+[]][++[++[++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]][+[]]][+[]]]+[[][[[]+[][+[]]][+[]][++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]]+[[]+[][+[]]][+[]][++[++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]][+[]]]+[[]+[][+[]]][+[]][++[[]][+[]]]+[[]+[][+[]]][+[]][++[++[[]][+[]]][+[]]]]+[]][+[]][++[++[++[++[++[++[[]][+[]]][+[]]][+[]]][+[]]][+[]]][+[]]]+[[+[]==+[]][+[]]+[]][+[]][++[+[]][+[]]]

[]["find"]["constructor"] === Function

Function("some code")()

 

Function is the master key: it lets you evaluate any code as String.

We just need to add parenthesis here.

With this 6 characters subset:

[ ] + = ( )

we can do everything

Working compiler:
https://syllab.fr/projets/experiments/xcharsjs/6chars.html

What is the smallest char subset
than can run run any possible JavaScript program ?

6

[(+=)]      [(+!)]

Trying to find a subset below 6 characters
that can run any JavaScript is a challenge known as
The Wall of Six

 

I offer a 🍺 to anyone that solves it

See also: jsfuck.com , jscrew.it , Web Application Obfuscation

Why ?

Creativity
Challenge
Mystery

Fun !

Deeper level of learning

not only solving a problem,
but in a creative way

Accidental Discoveries

Thanks !

Wanna join ?

Shout-out: Martin aemkei Kleppe, .mario Heiderich, @FakeUnicode, Mathieu @p01 Henri, Maxime xem Euziere

let's talk ! @SylvainPV

Creative coding in JavaScript

By sylvainpv

Made with Slides.com

Creative coding in JavaScript

StrasbourgJS, October 5, 2023

  • 353

More from sylvainpv