Journal Javascript, golf, et graphismes

Posté par (page perso) . Licence CC by-sa
45
29
déc.
2017

Bonjour Nal,

En ce dernier dredi de 2017, j'ai décidé de t'écrire une dernière fois pour te faire part de ma découverte de Dwitter.

Dwitter est un petit site sur lequel on peut poster du code en Javascript pour faire des animations, ou des jolies nimages. Et il faut le faire en 140 caractères ou moins, d'où le "golf" (une pratique rigolote qui consiste à écrire les programmes les plus petits). On vous demande d'écrire le corps d'une fonction "u(t)", où "t" représente le temps écoulé depuis le début du programme, en secondes. La fonction "u" est appelée 60 fois par seconde. Pour simplifier les choses un peu, les auteurs du site ont raccourci le nom de quelques fonctions (cos et sin) et déjà configuré un canvas, ce qui permet de grappiller quelques caractères supplémentaires.

Voici comment on s'y prend:

Code original

c.width=1920; // efface l'écran
for (i = 0; i< 1920; i++) { // pour toute la largeur
 x.fillStyle=R((960*(1+S(i/10)))/5,255-(960*(1+S(i/10)))/4,255-(960*(1+S(i/10)))/9); // jolies couleurs
 x.fillRect(i,540+200*Math.sin(10*t+i/20)*Math.cos(t+S(i/300)),20,20); // jolie suite de points
}

Variables intermédiaires, change l'ordre de la boucle principale

c.width=w=1920;
for (i = w; i> 0; i--) {
     f = (960*(1+S(i/10)));
     x.fillStyle=R(f/5,255-f/4,(255-f)/9);
     x.fillRect(i,540+200*Math.sin(10*t+i/20)*Math.cos(t+S(i/300)),20,20);
}

Substitutions sin/cos, et remplace 10 par 9 (personne ne verra la différence)

c.width=w=1920;
for (i = w; i> 0; i--) {
     f = (960*(1+S(i/9)));
     x.fillStyle=R(f/5,255-f/4,(255-f)/9);
     x.fillRect(i,540+200*S(9*t+i/20)*C(t+S(i/300)),20,20);
}

Dirime les espaces, point-virgules et parenthèses

c.width=w=1920;for(i=w;i>0;i--)f=(960*(1+S(i/9))),x.fillStyle=R(f/5,255-f/4,(255-f)/9),x.fillRect(i,540+200*S(9*t+i/20)*C(t+S(i/300)),20,20)

Et voila le produit final en exactement 140 caractères !

Après, il y a des gens qui font des trucs de fou, et c'est rigolo de comprendre comment ils y sont arrivés : motif mouvant, raytracer(?), fractal

Allez, Nal, à l'an prochain !

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.