A bit of javascript

This page will get a cleanup when me less lazy. Just a dirty dump of some small 2D/3D projects for the time being.


2022-08-28: let's rotate the Moon around the Earth. Too much computation in there. I won't optimize, for simplicity. Not astronomically accurate.

moon_earth.c is a translation in C to generate some movie out of this (needs libjpeg).

[Click image to start/stop animation]
[marche pas!]


2022-05-23: ça marche aussi avec la lune. Faut juste trouver une image de la surface lunaire. Ça tombe bien, la NASA nous file ça. Pis ensuite, paf, 256x128. Bourrin.

[Clique pour animer/stopper.]
[marche pas!]

Un peu cracra mais ça passe. Disons. Plus ou moins. Les pôles sont tout pourris, mais la NASA nous le dit dans leur site. En fait ça a l'air de rien mais c'est gentiment chaud d'avoir une map de la lune comme ça...

Maintenant, évidemment, la prochaine étape est de faire tourner la lune autour de la Terre. Mais là faut coder... et se motiver...

En attendant, je peux te raconter mon vélo du week-end ? Ou parler de la mort. Au choix.

La mort ? Va pour la mort.

Pfff, tu veux pas plutôt le sens de la vie ? Ou le non-sens ?

Ou rien.

Rien c'est le sens.

Oublie les poils pubiens féminins. Le sens du poil pubien féminin. C'est la quintessence du sens pourtant.

Mais non mais parce que s'agiter comme ça gentiment pour rien, tu vois ?

Je me disais ça l'autre jour tiens. Ça tombe bien.

Je me disais que les autres ils sont pas forcément plus heureux en fait. Leurs vies n'ont pas forcément plus de sens.

Peut-être qu'ils font semblant. Peut-être que non, qu'ils y croient.

Ou peut-être pas.

Plusieurs collègues se sont barrés récemment. C'est jamais très bon. Et pourtant on n'aurait pas dit tu vois. Alors ils cachent ? Ils feintent ? Ils simulent ?

Comment tu sais si quelqu'un est honnête ou pas ? Enfin pas "honnête" mais je sais pas, impliqué, dedans. Difficile à dire.

Sur le vélo tu peux pas tricher par exemple. Quand tu grimpes le col de Vence, tu prends cher, tu peux pas faire semblant. C'est direct boum dans ton corps. Tu peux pas te cacher, prétendre. Tu peux pas sourire et faire style tout va bien.

Enfin c'est dur à expliquer.

C'est le réel. C'est boum. Dans ton corps. Boum. T'as pas la forme, c'est boum. Au lieu de monter en je sais pas trois quarts d'heure, boum, ça sera une heure. (Laisse tomber, moins d'une demi-heure va dans une équipe pro, tu perds ton temps à faire chais pas quoi, quoi que tu fasses.) (Sauf si tu détestes la compétition, là, vas-y à fond, explose tous les compteurs.)

Mais sinon, quand tu regardes quelqu'un sourire, est-ce que c'est réel ? La personne pense quoi en vrai ? Comment tu fais la différence ? Comment tu sais ? Tu peux savoir ?

Et pis ça sert à quoi en fait ? Chacun pense comme il veut, qu'est-ce que ça peut bien faire ? Pourquoi seulement se poser cette question ?

Je ferais mieux de faire tourner la lune autour de la Terre moi tiens.

Ce qui n'aurait absolument aucun sens non plus et ne m'apprendrait rien sur le monde, et ne me permettrait pas d'être plus à l'aise ou me sentir plus à ma place. Parce que ça sert à rien.

Le seul truc c'est ça me ferait plaisir de sortir quelque chose de ma tête et que ça ressemble à ce que j'imaginais.

Peut-être qu'il faut s'y croire un peu ? Faire des choses dont on se dit qu'elles ont du sens ? Et s'en foutre du réel ?

Oublier la mort prochaine du soleil ? Oublier qu'on souffre pour rien du tout au final. Mais est-ce que c'est vrai ?

Woo, je laisse cette question tourner dans ma tête trop vieille de penser que rien n'a de sens que questionner la possibilité d'un sens me fait des sensations tellement alien. Comme un vertige.

Y a du sens dans ce monde.

Woo.

Presque une pensée impure. Presque une apostasie. Presque enlever le voile et voir un visage de femme et un sourire et tout qui explose dans ton crâne de fou religieux.

La vie aurait un sens...

La bonne blague. Évidemment cette pensée ne survit pas dans ma tête. Laisse tomber, y a pas de place pour toi dans ma gélatine. Va voir ailleurs. Va contaminer la jeunesse tiens, fais-lui faire la révolution, ça commence à bien faire tout ça.

La vie a un sens !

Rire, rire, rire encore, à s'en défoncer le diaphragme, les côtes, à gigoter la gélatine dans tous les sens à risquer l'avc qui fera tout oublier.

La politesse du désespoir a ses règles indicibles que nul ne saurait exhumer de leur fange fétide et douce.

Alors il faut se taire.

Laisser les sourires s'épanouir sur les visages de ceux qui ont un sens, regader leurs mains serrer la corde vide et espérer (espérer ?) qu'ils ne connaîtront jamais la folie de savoir que le sens n'existe pas.


2022-05-19: elle tourne et se fout de nos misères. (T'as la référence ? Ferré Mouloudji ? Je te mets pas de lien, farfouille.)

C'est notre maison, la seule qu'on aura jamais...

[Clique pour animer/stopper.]
[marche pas!]

L'image c'est pompé de la NASA, enfin je crois. À la base elle fait 4000x2000, je l'ai réduite à 256x128 pour moins de flicker. Et moins d'octets. Et moins de tout.

T'es où toi dessus maintenant ?

Tu vois, les gros pixels c'est joli aussi.

Tout est triste, n'est-ce pas ? Tout est triste...


2022-04-28: allez, on s'amuse encore un peu avec la sphère.

[Clique pour animer/stopper.]
[marche pas!]

C'est mignon, non ?

On calcule la latitude et la longitude (bon pour la latitude on prend y, pas l'angle, mais ça passe).

Ensuite, tout con, on a des bandes de couleur, à la fois en latitude et en longitude, et si le point de la sphère qu'on veut afficher tape dans une de ces bandes, bim ! couleur, sinon blanc.

On a précisément ça:

  lat = y;
  if (Math.floor((lat + 1)/2 * 15) % 2 == 0)
    return { a : 1, color: c1 };

  lon = Math.atan2(x, z);
  if (Math.floor((lon/Math.PI + 1)/2 * 16) % 2 == 0)
    return { a : 1, color: c1 };

Le premier truc c'est de faire lat + 1 (lat est dans [-1, 1]), donc on est dans [0, 2]. Ensuite on /2 * 15, ça nous donne [0, 15], soit 15 bandes. On affiche les bandes qui sont % 2 = 0. Le Math.floor est nécessaire sinon le % (modulo) ça marche pas, faut des entiers, pas des flottants. Bon après c'est ce que je comprends, c'est du javascript, je maîtrise mal, si ça se trouve je raconte des conneries. Mais si je mets pas Math.floor, ça marche pas, donc voilà.

Pour la longitude, on utilise la fonction magique atan2() (tout le monde se lève pour atan2() !). J'adore atan2. Enfin bref. Ça nous donne une longitude dans [-pi, pi]. On divise par pi. On est alors dans [-1, 1]. On fait + 1, bim, [0, 2]. Ensuite, idem que pour latitude, mais on prend 16 bandes, pas 15, parce-que ça loope sur la sphère, du coup si on a 15 bandes, la bande 15 est collée à la bande 1 (en fait c'est 14 et 0) et du coup on va les afficher les deux, et au final ça fait une bande plus grosse. (Si tu visualises rien qu'avec mes phrases, deux conclusions : premièrement t'es complètement cinglé.e et deuxièmement j'explique trop bien je me kiffe !)

Enfin bref. C'est mignon, c'est facile à faire, je me kiffe.

Une autre variation, avec de la transparence cette fois. Je te laisse lire le code pour voir les différences. On veut des bandes plus minces avec plus d'espace entre elles sinon on voit que dalle. Du coup on fait % 4, pas % 2, et on ajuste le nombre de bandes (pour la latitude je sais pas pourquoi je dois mettre 33, mais ça marche pas sinon, go figure...). Et j'ai mis une couleur plus sombre pour l'intérieur de la sphère, pour que ça soit plus visible. Enfin moi je trouve ça plus visible.

Si t'es aveugle, désolé. Tout ça c'est des conneries de toute façon, tu perds rien.

[Clique pour animer/stopper.]
[marche pas!]


2022-04-26: on continue un peu avec cette sphère. Petite variation où on n'affiche pas les points blancs (qui deviennent transparents du coup) et où on met des couleurs différentes.

Du coup on doit tester t0 et t1, du plus proche au plus loin. Dès que y en a un qui tape dans un point non blanc, paf ! on l'affiche. Ça marche tout seul, c'est gratuit, c'est joli. Que demande le peuple ? La mort de Poutine. Le peuple est un petit peu irrévérencieux.

Le choix des couleurs et leurs positions sur la sphère n'est pas anodin ! Si t'as la référence tu gagnes un bisou. Ou une baffe dans ta gueule. Au choix.

Par rapport à hier, on a changé un peu les rotations pour faire un truc qui loope au bout de 100 images, ça fait 4 secondes à 25 images par secondes. Comme ça on peut faire des gifs animées tranquille vite fait. (Par exemple à partir de ce programme.)

[Clique pour animer/stopper.]
[marche pas!]

Tiens, allez, des textes de maths pour le lol.

The grasshopper problem nous parle de quelle forme donner à un truc de surface 1 pour que quand un machin tombe dessus au hasard et saute d'une distance d il retombe sur le truc et pas à côté. C'est mignon. Et c'est un peu rond.

Et ensuite, tiens, Godel's Second Incompleteness Theorem Explained in Words of One Syllable. C'est un peu technique, théorique, mais c'est rigolo. Lis juste la première page. Et laisse ton cerveau s'envoler un peu.

Oublier la folie des hommes. Un peu.


2022-04-25: tiens, en attendant que je fasse ce que j'ai en tête avec cette sphère, je te mets une petite anim vite fait pas du tout maîtrisée mais on s'en fout, c'est joli. Enfin je trouve ça joli. (J'adore ces pixels énormes.)

Je sais pas si les rotations sont bien ou pas (c'est-à-dire que j'ai écrit un code avec une idée en tête mais je n'ai absolument aucune idée quant à la bonne réalisation du bordel), aucun contrôle aucune science là-dedans ! Juste foutre des cosinus et faire > 0.9 et < -0.9 sur les trois dimensions x,y,z et pis voilà tout.

[Clique pour animer/stopper.]
[marche pas!]

Et bonne soirée !

Aujourd'hui je reste poli t'as vu. Le respect de mon lectorat.


2022-04-23: viens on fait un peu de 3D pour changer ! Ça fait longtemps j'ai pas fait de 3D moi tiens.

Tellement ça me saoûle la 3D. J'ai jamais trop aimé ça.

Mais bon, allez, on se motive ! Les angles, les projections, les distances, un peu de raytracing, placement de caméra, toutes ces conneries, l'air de rien ça fait un petit paquet de concepts à faire tourner dans la tête.

Je vais pas trop me casser la tête et rester sur des ronds. En 2D ça s'appelle un cercle (une ellipse). En 3D on dit sphère.

Un jour, lointain, en fonction de la motivation, je ferai une animation du retournement de la sphère. C'est rigolo le retournement de la sphère. Je connais pas bien, je visualise pas dans ma tête alors c'est un peu chaud.

Enfin on verra. Y a des tas de trucs à faire pour afficher le retournement de la sphère.

Pour aujourd'hui on va juste afficher une sphère. On pose la caméra pas trop loin de la sphère qui se trouve au centre du repère orthonormé et on balance des rayons pour tous les pixels de l'écran et on voit si ça tape dans la sphère (de rayon 1) et si oui blanc et sinon bleu.

Pour voir si on est bon on va dire que si le y du point d'intersection est supérieur à genre 0.9 on affiche en gris, pas en blanc. Pour voir ce que ça fait. Devrait y avoir un petit chapeau gris en haut de la sphère.

Ça nous donne ça.

[marche pas!]

Et là c'est le drame. Y a trop de gris la putain de sale rasse !

La sphère elle a un rayon de 1, d'où y a autant de gris en haut comme ça pour y > 0.9 ? Là clairement c'est pas 0.9. Ce serait plutôt 0.5.

Bon déjà le gris est en haut, comme il se doit, c'est déjà ça. Mais y en a trop !

Pour le lol, j'ai testé des bidouilles en mettant du gris sur x > 0.9 et aussi z > 0.9. Pour x ça fait comme y, trop de gris. Pour z c'est du grand n'importe quoi. Même pas j'explique, je comprends que dalle.

Je merde quelque-part. C'est normal, c'est de la 3D. Je crois pas avoir jamais fait un truc en 3D qui marche dans ma tête et ce qui gicle du clavier ça fait ce qu'il faut à l'écran.

Pff. La lose sans déconner.

Bon ben on débugge hein !

[...] (Du temps qui passe... combien ? Trop...)

Bien bien bien.

J'ai trouvé le bug. La lose intégrale.

Bon, donc là on a un rayon et une sphère. On cherche l'intersection des deux. Le rayon c'est t * [vecteur du rayon], enfin un truc comme ça. On a t, c'est un truc paramétrique. C'est pas clair ce que je dis. Enfin on fait pas ax+by+cz+d=0 ou chais pas quoi (ce qui est un plan, il en faut deux pour une droite) (enfin je crois) (enfin on s'en fout, on s'en sert pas !). On a les coordonnées de deux points, et on fait varier une variable t au court du temps, ce qui nous donne x(t), y(t) et z(t) qui sont du genre f(t)=a*t+b. À t=0 on est sur le premier point. À t=1 sur le deuxième. (C'est un choix arbitraire.)

Un point (x,y,z) est sur la sphère de rayon r si x*x+y*y+z*z=r*r.

On veut les deux, donc on doit résoudre x(t)*x(t)+y(t)*y(t)+z(t)*z(t)=r*r.

On se retrouve avec un polynôme de degré deux en t. On sait résoudre.

On fait les calculs (je te passe les détails) pour arriver à la forme a*t*t+b*t+c=0. Hop hop hop, det=b*b-4*a*c. Si det>0 on a deux solutions (le rayon pénètre la sphère) (sans éjaculer). Si det=0 on en a une (le rayon touche la sphère, sans rentrer dedans) (la morale est sauve). Si det<0 on n'en a pas.

Ensuite les deux solutions c'est (-b+/-sqrt(b*b-4*a*c))/(2*a).

Et moi dans le code je faisais :

  var t0 = -b - Math.sqrt(det) / (2 * a);
  var t1 = -b + Math.sqrt(det) / (2 * a);

Voilà voilà. Tout va bien.

Tu mets les parenthèses et tu peux aller te branler au lieu de faire ces conneries à la con de merde.

Et ça donne le truc de dessous. Sauf on fait y > 0.6 parce que maintenant y > 0.9 ça fait pas de gris du tout. Les pixels ils sont trop gros.

[marche pas!]

Pour débugger, j'ai utilisé console.log() et j'ai printé différentes valeurs. À la fin j'ai pris x0=0 et y0=0 et j'ai vu que le t0 et le t1 ils étaient pas bons les enculés. Et du coup, j'ai regardé ce que je calculais vraiment et où sont ces sales putes de parenthèses de merde ? Mon putain de cerveau c'est de la gélatine de merde sérieux.

Et bonne nuit, putain il est tard. Je suis nul et vieux et je t'emmerde.

Faudrait écrire des textes, pas des merdes comme ça. Mais c'est comme des textes, non ? C'est écrire. (Je tire trop sur mes cheveux là, hein ?)

J'ai pas encore fini avec cette putain de sphère. Mais pour la suite c'est un peu plus compliqué. Y aura des angles à trouver. Ça va piquer dans ma tête. Pis faut trouver une meilleure position de caméra, là c'est trop petit.

Enfin bref. La bonne nuit. Je te souhaite de jamais être aussi fou.folle que moi.


2022-04-20: hier, crachant mes poumons, penché en avant, transpirant, je revenais de courir trop vite pour mon état, devant la porte de l'entrée de livraison, celle que tout le monde utilise et qui claque à chaque fermeture, défonçant le silence et tuant la concentration des quelques thésard.e.s occupant le bureau juste à côté mais on s'en fout, ilelles finissent toujours par se barrer, c'est de l'engeance un peu sale tout ça, ça n'a guère d'importance, quand un mouvement éclata mon cerveau depuis ma vision périphérique et ses vieux câblages multi-millénaires et pire que ça, ça doit dater de loin cette vision périphérique, des millions d'années, plus ?

Tournant la tête du mieux que je pouvais, le souffle plus court que la plus courte échelle qui puisse venir vomir sa forme dans ta cervelle en putréfaction, que vis-je ?

Bon faut se calmer avec le passé simple et toutes ces merdes, j'atteins ma limite avec cette langue moisie, revenons au présent, ce sera plus simple, hein ?

Un serpent. Peut-être cinquante centimètres, peut-être plus, qui longeait le mur, se dirigeant vers le bâtiment, beau comme seuls les serpents savent l'être, de cette beauté qui tue, qui les tue parce que faut bien les tuer tous ces serpents, non ? Parce que c'est le mal ? Parce que Adam et Eve ? Parce que tous ces films pourris avec des serpents qui sont mauvais, forcément mauvais hein.

Arrête un peu. Pose-toi et regarde le serpent et admire le serpent, admire sa reptation, admire cette vie dans cette forme si tellement différente de ta laideur humaine.

La question qu'on se pose en de telles circonstances ne tarda pas à gicler dans mon bulbe rachidien. Ou où que ce soit. Merde, j'ai mis un verbe au passé simple.

Couleuvre ou vipère ?

Ni une ni deux je pose mon pied devant pour lui bloquer le passage. Le serpent se rétracte, il plie son corps, comme pour se préparer à une détente la gueule ouverte, les dents en avant, prêt à mordre sans pitié sans presque volonté, comme un réflexe inexcusable et incontrôlable, un peu comme une envie de chier humaine, la seule chose qu'on fasse bien au fond.

Ni une ni deux je retire mon pied, et tant pis, on ne saura jamais. Mais je penche plutôt pour une couleuvre.

Le serpent continue sa route le long du mur et arrivé devant la petite grille au sol, il passe dessous en s'en va dans la rigole qui l'emmène je ne sais où. Il m'avait tout l'air de savoir parfaitement où il allait. J'espère seulement qu'il n'est pas tombé dans un trou d'où il ne pourra plus jamais s'échapper et crever là, dans la folie des constructions humaines froides et insipides.

Passer sa vie dans des cavernes modernes, tu parles d'une réussite, le cul collé sur une chaise, à ne rien faire d'utile ou qui ait un sens quelconque.

D'habitude le mardi je ne cours pas. C'est le lundi et le jeudi. Parce qu'après c'est le week-end et je fais du vélo alors il me faut les jambes bien. Quoiqu'en ce moment avec ce putain de covid qui n'en finit pas de me tourner la tête, le corps n'y coit plus.

Alors je ne reverrai jamais ce serpent.

Et c'est pas grave.

J'écris de la merde aujourd'hui, hein ? C'est le covid.

Pour me faire pardonner, tiens, je te mets une ellipse qui tourne, c'est rigolo.

[Clique pour animer/stopper.]
[marche pas!]

C'est rigolo, non ?

J'ai mis une belle couleur de ciel. Enfin sur mon écran ça ressemble à une belle couleur de ciel. C'est (r : 158, g : 178, b : 235). Beaucoup de bleu, moins de vert, un peu plus de moins de rouge. Dans ma tête ça fait ciel.

Quand j'ai écrit le code j'ai buggé. On a quoi ici ? Une ellipse. On a déjà vu ça l'autre jour. C'est :

    1/(a*a) * x*x + 1/(b*b) * y*y <= 1

On la fait tourner, dans le sens positif, c'est-à-dire dans le sens inverse des aiguilles d'une montre. Et une rotation c'est genre :

  x = x * cos(angle) - y * sin(angle);
  y = y * cos(angle) + x * sin(angle);

Je connais pas ça par cœur mais je sais le dériver du truc de départ qui est de multiplier un nombre complexe (x + i * y) par exp(i * angle) et on sait que exp(i * angle) c'est (cos(angle) + i * sin(angle)) parce qu'on a appris ça à l'école quand on était petit mais pas si petit on devrait apprendre les nombres complexes bien plus jeune, on saurait faire tellement plus de trucs après.

Du coup ni une ni deux je mets ça tel quel dans le code. Et ça marche pas. Parce que le x de la deuxième ligne c'est le nouveau x, pas l'ancien.

Tu peux checker le bouton "bug" pour voir ce qui s'affiche avec ce bug. J'ai ralenti un peu le mouvement aussi pour ce cas pour que t'en profites plus parce que je suis généreux.

Il faut toujours être généreux avec ses lecteur.trices, c'est important.

Mais tu vois j'ai même pas fait attention que ça allait péter et quand le code a tourné et que cette putain d'ellipse s'est mise à se dilater dans tous les sens comme la connasse qu'elle est, j'ai pas compris et j'ai d'abord cru que mon code d'ellipse il était faux alors que c'est cette putain de rotation qui calculait avec le nouveau x au lieu de l'ancien.

Mais j'aurais dû le voir dès le départ.

Mais non.

Je te laisse conclure sur la valeur extrême de mon incompétence.

On y reviendra bientôt à ces histoires d'ellipse. J'ai une idée en tête. Ça devrait être rigolo à la fin. Mais je suis une feignasse en ce moment. Viens on dit c'est le covid !

En attendant j'ai mal aux jambes. La course à pieds c'est vraiment de la merde.

Et la bonne soirée, enculé.e. (Il faut dégenrer l'enculé.e.)


2022-03-27: bien bien bien.

Un peu de vélo et de réflexion et de zeugme plus tard, je m'en vais te présenter mes conclusions.

On va faire différent.

Le problème se réduit toujours à deux points : le centre c du cercle et le point y du cercle qui touche le sol. (En fait dans le code c est représenté par la variable ypos. Confusion ! Tant pis, vis avec.)

On va garder le champ de force, on va garder l'absence de frottement pour le mouvement du point c et les frottements pour la déformation du cercle, le damping, qu'on appelle amortissement en français je crois bien mais pas sûr mais on s'en fout en fait.

On va changer quand y touche le sol par contre.

Dès que y touche le sol on applique une force contraire sur le point c pour qu'il remonte.

Et on va laisser "collé" le point y jusqu'à ce que la longueur vaille 1.5 (c'est 1 pour le cercle au repos) et ensuite normalement quand ça se passe le point c remonte et donc gratos après y ne touche plus le sol et on repart sur le damping à ce moment. Donc en fait le point y fait soit son damping quand il est en l'air soit est collé au sol jusqu'à ce que c soit remonté assez haut pour repartir sur du damping.

C'est clair, n'est-ce pas ? Si tu dis oui, pose-toi des questions, il se peut que tu sois aussi fou.folle que moi. Voire plus.

[marche pas!]

C'est pas trop mal, c'est ce que j'avais en tête au départ, plus ou moins.

Donc là le modèle impose une force constante vers le haut quand la balle touche le sol. C'est pas très physique. Enfin je trouve. Il faudrait mieux que la force dépende de la déformation, je me dis, intuitivement. Pour moi ça met une intention dans la balle. Quand je la regarde, j'ai l'impression qu'elle se pousse elle-même pour remonter vers le haut, comme si elle était vivante et qu'elle contractait des muscles. Ce que la constance de la force quand la balle touche le sol m'évoque.

Hein ? Oui ça je le sais déjà que je suis fou. Tu ne m'apprends rien.

Le problème de ce modèle c'est que quand je change un paramètre, ça fait tout péter, c'est plus trop stable. Par exemple, si je change la position initiale de la balle, c'est-à-dire du point c (ypos = 0.5 au lieu de 1 dans la fonction init()), on obtient le truc suivant.

[marche pas!]

Ça part en sucette au bout d'un moment. J'ai pas attendu assez longtemps pour voir si ça calme plus tard ou pas.

Comment on peut dealer avec ça ? On peut introduire du frottement pour le point c. Plus la vitesse est grande, plus y a de frottement. Par exemple on met speed/10.

Le code passe alors de :

    speed += t * g;

à :

    speed += t * (g - speed / 10.);

Ça donne le machin suivant.

[marche pas!]

Ça a l'air plus stable, mais je sais pas, je trouve ça bizarre.

Mais mettre du damping sur c, ouais, c'est logique. C'est physique. C'est le frottement de l'air.

Reste le problème de la force opposée quand la balle touche le sol. Et là je sais pas trop. Dans les cas précédents on applique une force si la distance entre c et y est inférieure à 1 (c'est b dans le code). Ça veut dire que y a une force si la balle est applatie. On peut vouloir appliquer une force tant que la balle touche le sol.

Donc le code passe de :

    if (b < 1)
      f = -3 * g;
    else
      f = g;

à, plus simplement :

    f = -3 * g;

parce qu'on sépare déjà le cas "dans l'air" du cas "touche le sol" à l'aide du test :

  if (ypos - b > -1.5) {

qui n'est pas très clair d'ailleurs, tiens. On ferait mieux de mettre :

  if (b < ypos + 1.5) {

c'est le même test, mais plus bas dans le code, pour contraindre le point y (représenté par b) à rester collé au sol et pas descendre plus, on fait :

    /* ball touching the floor */
    b = ypos + 1.5;
    if (b > 1.5) b = 1.5;

ça serait donc plus logique, plus consistant. (Quoique à me relire, tout n'est plus si clair...)

Bon, mais enfin bref c'est un détail. Pis faut changer partout, ça me saoûle. Tu vivras avec ça, hein ! Et tu me feras pas chier, merci.

Ça pourrait donner un truc comme ce qui suit. J'ai dû changer le damping pour le point c de speed/10 à speed/3 sinon ça va trop haut.

[marche pas!]

Ça rend pas trop mal. Quand je change le point de départ pour c, le centre du cercle, ça a pas l'air de partir en sucette. Après le choix de speed/3 pour le damping et de -3*g pour la force quand la balle touche le sol est arbitraire (comme toutes les autres valeurs en fait), alors je ne sais trop quoi penser de tout ça en fait.

De toute façon dans la vraie vie, un système comme ça doit exister dans certaines limites sinon ça casse d'une manière ou d'une autre.

Bon mais bref on s'en fout ! Ça ressemble à quelque chose, on va pas se casser la tête plus que ça pour un petit truc comme ça. Faut pas exagérer non plus.

(Je préfère quand même la première version, même si j'ai eu de la chance de choisir de bons paramètres du premier coup et si c'est instable quand on en prend d'autres.)

Le truc rigolo c'est que je suis tombé par hasard sur ce projet (akamaru) aujourd'hui qui donne un lien vers ce machin, et on est pile poil dans notre thème !

C'est rigolo.

(Si tu joues avec akamaru, tu peux arriver à des trucs assez chelous si tu bouges ta souris trop fort trop vite. Là aussi le système est valide dans certaines limites uniquement et ça peut partir en sucette assez facilement.)

J'avais dit que je changerai les couleurs, mais j'ai la flemme, allez hop, problème résolu.

Par contre j'ai mis des petits boutons "voir le code" pour rigoler un peu. Et quand tu cliques dessus le bouton devient "cacher le code" ! Non mais quelle folie ! Tu t'en fous ? T'as bien raison.

Des questions dans l'assistance ? Non ? Allez tous vous faire enculer et bonne fin de week-end alors. Le but du délire c'est pas de faire un tuto sur la mécanique newtonienne non plus.


2022-03-25: allez, on fait rebondir une sorte de balle physiquement improbable bleue sur fond rose, parce que c'est comme ça.

Mais c'est compliqué.

Un premier jet nous donne ça.

[Clique pour animer/stopper.]
[marche pas!]

C'est un peu pourri. Ça rebondit pas au niveau du bas exactement. Y a pas de damping de la déformation de la balle.

Pour le rebond on fera un truc sans frottement, c'est à dire un rebond toujours au même niveau. Par contre il faut du damping pour la déformation.

Et, évidemment, aucune balle physique ne se déforme autant mais on s'en fout. La réalité est là pour qu'on la déforme.

Décomposons le truc. On a deux mouvements en jeu.

Le premier c'est le rebond. La coordonnée y du centre monte et descend selon une parabole (-y^2 + 0.2 on a pris, un truc comme ça, lis le code et fais pas chier).

[Clique pour animer/stopper.]
[marche pas!]

Et le deuxième, c'est la déformation de la balle. La balle c'est les points (x, y) tels que a * x*x + b * y*y <= 1 où a et b servent à déformer. On a pris:

  a = 1 + Math.sin(-2 * Math.PI * frame / 25) / 3;
  b = 1 + Math.sin(2 * Math.PI * frame / 25) / 3;

[Clique pour animer/stopper.]
[marche pas!]

Quand on mélange les deux on a le truc du haut.

Mais l'animation est pourrie comme jamais. Ça va pas du tout.

Il faut trouver les bons paramètres pour donner l'illusion d'un rebond sur le bas de l'image. Et c'est galère. Même pas sûr que ce soit possible, vu que d'un côté on a une parabole et de l'autre un sinus, ça doit pas trop aller ensemble.

Alors on va tout changer !

On va pas se casser le cul à resoudre quoi que ce soit, on va faire de la physique. On a une balle dans un champ de force constant. On va en déduire une vitesse, une position. Pour le rebond on va inverser la vitesse quand la balle touche le sol. Oh mon dieu ! mais que ! Nan c'est pas physique du tout. Mais ça marche, regarde.

[Clique pour animer/stopper.]
[marche pas!]

Bon ok, ça marche bizarre. Le rebond diminue au fil du temps et au bout d'un moment la balle disparaît dans le sol.

Mais on va pas se casser la tête à résoudre. Prendre en compte la déformation de la balle devrait résoudre tout ça pour gratos.

Bon en fait après pause bouffe et réflexion, j'ai trouvé une bidouille qui résoud.

Le code il fait :

function compute_position()
{
  var t = 0.1;
  var g = -1;      /* "gravity" */

  speed += t * g;
  ypos += t * speed;

  if (ypos < -0.5) {
    if (speed < 0)
      speed = -speed;
  }
}

Si on change par :

function compute_position()
{
  var t = 0.1;
  var g = -1;      /* "gravity" */

  speed += t * g;
  ypos += t * speed;

  if (ypos < -0.5) {
    if (speed < 0) {
      speed = -speed;
      ypos += t * speed;
    }
  }
}

Alors on est bon. (Enfin j'ai fait tourner que quelques secondes. Sur le long terme peut-être ça pète aussi.)

Mais on s'en fout. La déformation de la balle va tout résoudre. Enfin j'espère. Quoique, vu que y a le damping je sais pas trop en fait.

Essayons de réfléchir à la déformation de la balle. On part d'un cercle défini par x*x + y*y = 1. Déformer c'est faire une ellipse. On arrive à a * x*x + b * y*y = 1. On a introduit a et b pour déformer dans la direction x et y.

Pour un cercle (la balle au repos) on a a = b = 1. Soit a + b = 2. On va garder cette relation et jouer sur b uniquement.

Un truc élastique c'est une force opposée au sens de la déformation. Genre f = 1 - b. Dans le code on fait (1 - b) * 10 pour que l'animation aille plus vite.

Il faut aussi mettre du damping. C'est une force qui s'oppose à la vitesse (imagine le vent quand tu fais du vélo, ça résiste, plus tu vas vite plus ça résiste). Dans le code on a pris speed / 2. Ça fait joli, ça dampe pas trop vite pas trop lentement.

Ah pis en fait il faut pas faire a * x*x + b * y*y = 1 mais 1/(a*a) * x*x + 1/(b*b) * y*y = 1 pour que le a et b avec lequel on réfléchit génèrent une ellipse qui a la bonne taille.

D'où le truc suivant.

[Clique pour animer/stopper.]
[marche pas!]

Ok, on est bien. Maintenant il faut en quelque sorte mélanger les deux.

On a deux points importants. Le centre du cercle. Et le point y du cercle en bas, celui qui va toucher le sol.

Au début ça descend, pas de déformation. Après le point y du bas touche le sol, mais on continue à descendre, et la force inverse s'accumule, et ça se déforme. Ensuite ça repart dans l'autre sens, ça se déforme toujour et à un moment ça touche plus et ça se déforme avec le damping.

Faut bien réfléchir à comment mixer tout ça...

[Clique pour animer/stopper.]
[marche pas!]

Bon j'ai fait un peu au pif et n'importe quoi dans les calculs.

Et on obtient de la merde. Quelle surprise !

Bon j'ai plus le temps là. Je finirai ça une autre fois.

C'est le bordel ce truc...

Ah oui quand même. La résolution de l'image c'est 160x90 zoomé sur 640x360 avec des gros pixels bien carrés bien aigus (si si un pixel carré c'est aigu, y a beaucoup de fréquences, ça claque).

C'est un choix esthétique totalement volontaire. 160x90 c'est la vie !

Par contre les couleurs, j'avoue c'est un peu pagave. Je vais changer ça pour la prochaine fois. Pis essayer de mieux comprendre la physique du système. Comment je suis mauvais sérieux, on dirait un délinquant de la Seine-Saint-Denis ma parole !


Contact: see this

Created: 2022-07-16
Last update (more or less accurate): 2022-07-16