Archives par mot-clé : javascript

Liste des cours Processing + P5JS 2016-2017 [Digital Lab]

Retrouvez la liste complètes des cours de digital lab — processing/P5js (3e. année, option) sur l’année 2016-2017

Semestre 1

Code : l’itération des ensembles d’envergure

C’est un problème qu’on rencontre régulièrement — nous avons un grand nombre d’éléments [particules, points, traits…] qui doivent être traités dans une boucle, par exemple, dans la fonction draw() de Processing. Je vais utiliser Processing comme exemple, mais les mêmes principes s’appliquent à PHP, C, JavaScript, ActionScript…

Par défaut, Processing cherche à rafraîchir l’écran de votre ordinateur 60 fois par seconde. S’il y a trop de traitements à effectuer dans votre boucle principale vous allez faire face à soit des ralentissements, soit, carrément, à un plantage de votre sketch.

Explorons des stratégies pour fluidifier le traitement.

Dans Processing notre boucle de traitement ressemblerait à ceci. [MyObjects est simplement un élément d’exemple — tableau, objet… – qui contient les éléments à itérer.]

Tandis que Processing peut facilement itérer à travers un tableau de 10000 éléments, les problèmes commencent quand, par exemple, vous voulez traiter des collisions avec un autre tableau [array] important.

Supposons un vol de 8000 oiseaux et un essaim de 8000 mouches. Les oiseaux devant attraper et manger les mouches. Dans ce cas, la boucle doit traiter 64 millions de collisions possibles (8000 × 8000) à chaque fois. Cette simple multiplication arithmétique est pourquoi, dans ce cas, votre sketch aura des problèmes.

Vient donc l’idée de ne pas traiter chaque cas lors de chaque itération, de procéder par lots. Dans la meilleure des cas, les humains réagissent en environ 1/30e de seconde à ce qui se produit autour d’eux. En traitant nos éléments par lot, et en rafraichissant l’écran 60 fois par seconde, mais, par exemple, ne traitant que 10  % de notre ensemble lors de chaque boucle, nous pouvons continuer de donner l’illusion d’un mouvement continu. Bien sûr, la taille des lots et le temps de traitement sera dépendant de chaque cas spécifique, mais les exemples ici sont destinés à vous mettre sur des pistes de travail intéressantes.

Alors, comment créer des lots ?

La première stratégie consiste à traiter les éléments aléatoirement.

Dans ce cas, nous ne traitons que la moitié des possibilités pour chaque itération. D’autres valeurs peuvent changer la taille du lot…

La loi des grands nombres impliquent que, considéré sur une période longue, chaque élément sera tout de même traité de manière égale. Toutefois, sur des périodes plus courtes, les éléments de notre tableau seront traités selon une courbe en cloche, qui se lissera plus le temps passe. Ceci implique, pendant les périodes courtes, qu’environ 10 % des éléments sera moins traités que les autres. Toutefois ceci peut être un effet intéressant, par exemple, si vous cherchez à simuler les effets d’essaimage ou de murmuration — oiseaux, insectes, poissons… — où des ‘retards’ au sein du groupe, des retardataires qui suivent le groupe de manière plus paresseusement, peut de fait augmenter la vraisemblance de la simulation.

Une manière plus traditionnelle sera de construire des lots, puis de les traiter en séquence.
Isolons, un échantillon d’un huitième de l’ensemble…

Mais dans ce cas, les sept autres lots sont ignorés. Comment les traiter en séquence ?

Et voilà. Il y a d’autres techniques que nous allons explorer dans l’avenir. Mais ces informations devraient vous aider à démarrer.

Encore plus de possibilités dans le browser

Les développements récents de HTML5 rend le browser de plus en plus puissant comme outil de prototypage [voir de développement] de réalisations qui auparavent devaient se faire en Flash ou par le biais d’un sketch Prototype.

Voici donc un lien vers une expérimentation Move a Cube With Your Head or Head-Tracking With WebGL — Bouger un cube avec votre tête, ou le suivi de visage avec WebGL — qui fait une démonstration, à la fois des librairies récentes de JS [ici, three.js] et les ouvertures du browser vers les dispositifs d’entrée de son ordinateur.