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

Sylvain Pollet-Villard

DevRel à Worldline

@sylvainpv.bsky.social

hello F&B!

 📁 software art

    └ 📁 creative coding

= le logiciel constitue l'oeuvre

= le code constitue l'oeuvre

késako le creative coding ?

comment je fais
de l'art avec ça ?

le code a peu de contraintes, donc on en rajoute les nôtres
 les "règles du jeu"

L'art naît
de la contrainte

Théorie

Code Golf

  JS1k 

règle du jeu:
écrire le minimum de caractères de 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

règle du jeu:
le programme doit afficher son propre code source

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)')//

Quines artistiques

Char subsetting

règle du jeu:
utiliser seulement une plage de caractères spécifique pour écrire son code

Down the rabbit hole !

On peut déjà faire plein de trucs avec ces 3 caractères:

[ ] +

 

[x] déclaration littérale d'une Array
x[y] accès à une propriété par index

+x pour cast en Number

++x pour incrémenter

x+[] pour cast en String

0 === +[]

Mais une astuce : [x][0] === x

 

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

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

etc.

+[]++ syntax error !

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

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

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

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

u n d e f i n e d

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

+undefined === NaN

+[][0]+[] === "NaN"

On a la lettre e donc on a accès à la notation exposant !

+("1e308") === 1e+308
+("1e309") === Infinity

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

"I" ===

[+[++[+[]][+[]]+[]+[[]+[][+[]]][+[]][++[++[++[+[]][+[]]][+[]]][+[]]]+[++[+[]][+[]]+[]][+[]]+[+[]]+[+[]]+[+[]]][+[]]+[]][+[]][+[]]

c'est toujours
du JS !

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

Avec les lettres qu'on a, 

on peut commencer à choper des méthodes de Array !

 

[]["find"] === function find() { [native code] }

 

et puis....

c'est tout.

A moins que quelqu'un ait une idée brillante, on n'a pas réussi à aller plus loin avec juste ces 3 caractères 

+ [ ]

On a besoin de !  ou = ou > ou < pour choper les booléens

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

OK, ajoutons le caractère  =  à notre subset:     [ ] + =

4 caractères c'est pas si mal

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

on a toutes les lettres pour
 "constructor" !

"constructor"

 

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

à partir d'ici le code ne tient plus dans l'écran

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

Function("some code")()

 

Function c'est la clé qui ouvre toutes les portes:
ça permet d'évaluer n'importe quel code en String.

On doit juste rajouter les parenthèses.

Avec ces 6 caractères:

[ ] + = ( )

on peut tout faire

Un compilateur en "6chars" fonctionnel:
https://syllab.fr/projets/experiments/xcharsjs/6chars.html

Quel est le plus petit ensemble de caractères qui permet d'écrire n'importe quel programme en JavaScript ?

6

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

Tâcher de descendre plus bas que 6 caractères est
un challenge connu sous le nom de
 Wall of Six

 

J'offre une 🍺 à quiconque y parvient

Voir aussi: jsfuck.com , jscrew.it , Web Application Obfuscation

Pourquoi ?

Creativité
Challenge
Mystère

Fun !

Apprendre plus en profondeur

pas juste résoudre un problème,
mais le faire de façon créative

Faire des découvertes accidentelles

Martin aemkei Kleppe, .mario Heiderich, @FakeUnicode, Mathieu @p01 Henri, Maxime xem Euziere

@sylvainpv.bsky.social

discutons!

feedback

Big up !

Creative coding en JavaScript (2026)

By sylvainpv

Made with Slides.com

Creative coding en JavaScript (2026)

Front-end-Beers, Lille, 10 mars

  • 44

More from sylvainpv