PoseLeDoigt #Processing'Stories Code

1- Coder

Qu’est-ce qu’un shader ?

Un shader ou nuanceur (le mot est issu du verbe anglais to shade pris dans le sens de « nuancer ») est un programme informatique, utilisé en image de synthèse, pour paramétrer une partie du processus de rendu réalisé par une carte graphique ou un moteur de rendu logiciel. Il sert à décrire l'absorption et la diffusion de la lumière, la texture à utiliser, les réflexions et réfractions, l'ombrage, le déplacement de primitives et des effets post-traitement. Par la conception même du processus de rendu, les shaders sont les candidats idéaux pour une exécution parallèle par le processeur graphique d'une carte graphique. https://fr.wikipedia.org/wiki/Shader

Shaders can also be used for special effects. An example of a digital photograph from a webcam unshaded on the left, and the same image with a special effects shader applied on the right which replaces all light areas of the image with white and the dark areas with a brightly colored texture.

Dans notre code 3 effets ont été définis permettant la séparation/ seuil/inversion.

L’image est ainsi re-créée selon une matrice tricolore bleu/blanc/rouge pour répondre à notre réflexion – résidence Stéréolux mai 2014 - sur la marqueFrance dont la problématique fut posée dès 2011 http://www.institut-viavoice.com/viavoice-paris/resultats-de-la-recherche?q=marque+france&f=2

L’effet 3D est le résultat de cette re-création stéréoscopique https://fr.wikipedia.org/wiki/St%C3%A9r%C3%A9oscopie

Tests effectués sur le logo NantesTech – mai 2014

2- Signature Multiple

Adepte de la vidéo, par opportunisme de pratique de communication et motivée par la captation allégée – smartphone - dont d’abord les pratiques journalistiques se font les échos – MOJO – journalisme en mobilité, la base de mon logo est le signe du lancement de programme ‘play’.

Passé dans le sketch processing – voir les extraits ci-dessus – le signe devient succession possible de visuels :

https://youtu.be/plFb6-vH3kg

Comme une multiplication des images-signature

Le logo devient signature – reconnaissable mais différent. Un et multiple

3- Communication digitale

Vaste appellation que la proximité de deux mots tiroirs. J’y entends un programme de pratiques autour de trois axes Conception/Production/Diffusion :

- Conception dont la ligne est portée par 20 de pratiques du message.

- Production par la revendication de formats vidéo allégés pour être nombreux et ‘occupateurs’ d’espace social

- Diffusion croisée pour occuper les plateformes sociales en place ou propulser des mediaMarques - des outils d’abord pensés comme un canal de diffusion, ensuite comme une marque média.

Quel contenu ?

Nous butons sur 50 ans de marketing – produits à l’honneur & captations de marchés – segmentation – personnalisation – communautarisation et puis sans doute des mouvements de re-localisation d’intérêts.

La communication digitale doit reprendre de la hauteur, s’extraire du tout produit pour re-donner sens et intérêt à la machine économie, parler d’ADN d’entreprise, transmettre l’organisationnel – non des recettes ou appellations marketées – mais l’intelligence opérable - voire interopérable [transformation digitale digérée= digitalisation], et donner envie. La RSE est un bon départ. Espérons qu’il ne reste pas qu’un outil de communication, celle stérile dont le flux est unique – émetteur vers récepteur – et qu’il puisse nous rappeler qu’une communication riche est à sens multiple – aller/retour/transversal/diagonal/ascendant/descendant.. etc. Nous avons les outils technologiques. Avons-nous l’esprit ?

Article 37 - Li-iL

Article 36– 2015-11-04

1- Coder

La simulation physique consiste à modéliser un système physique et les lois régissant son fonctionnement. Systèmes mécaniques, biologiques, sociaux, etc. : il est virtuellement possible de simuler tout type de système dont les lois peuvent être mises en équation.

Les phénomènes représentables sont variés et assez réalistes. Les lois régissant ces systèmes sont souvent relativement simples à programmer (F = m.a), mais peuvent conduire à des résultats complexes et imprévisibles ;par exemple appliqués à un système constitué de nombreuses particules. La programmation de ces systèmes est toujours intéressante tant pour le codage que pour le rendu visuel.

La modélisation est simple, sous la forme d'un système régi par les lois de la mécanique qui relient force extérieure et mouvement, par la relation fondamentale :

F = m.a ou a = F / m

F représente une force extérieure appliquée au corps considéré, m la masse du corps, et a l'accélération du corps. L'accélération d'un corps de masse m soumis à une force F est a.

F et a sont des vecteurs, définis par une intensité et une direction. L'accélération d'un objet soumis à une force F est de même direction que F.

F est la somme de toutes les forces qui peuvent être appliquée au corps : gravité, propulsion, freinage, effort d'attraction ou de répulsion, liés à l'utilisation de ressorts, ou pour des particules électrostatiques, etc...

Ne pas oublier l'effort de réaction : un corps exerce une force sur un autre corps (action), celui-ci exerce une force égale en intensité et de direction opposée sur le premier corps (réaction).

La simulation physique d'un objet soumis est basée sur la résolution des équations décrivant son fonctionnement. Pour un système mécanique, l'objectif peut être de déterminer les déplacements d'un corps. Les forces agissant sur le corps sont déterminées et l'accélération résultante peut être calculée. Il est ensuite possible de calculer les mouvements à partir de l'accélération :

Un corps initialement immobile et soumis à une accélération « a » aura au bout  d'un temps « t » une vitesse v = a . t.

De même, un corps se déplaçant à la vitesse « v » se sera déplacé au bout d'un temps « t » de la distance x = v . t.

Une méthode de résolution : la résolution pas à pas. Elle consiste à effectuer en boucle la détermination des efforts appliqués et le calcul des mouvements résultants, chaque boucle étant supposée durer un temps connu (« pas de temps » ou « time step »).

Processing est naturellement adapté à ce genre de résolution, de par son utilisation de la boucle « draw ».

void draw() { … F = …; a = F / m; v = v + a * timeStep; x = x + v * timeStep; t = t + timeStep; … }

La pluie : Modélisation basée sur un système mécanique de particules soumises à deux types de forces extérieures : la gravité et un effort variable de vent.

A chaque « pas de temps » (ie à chaque itération de la boucle draw), la position de chaque particule est mise à jour.

Les traînées donnent une indication visuelle de la vitesse des particules. Elles sont dessinées à partir des positions aux 5 pas de temps précédents qui sont conservées en mémoire pour chaque particule.

Les particules au sol sont dessinées avec un rayon plus grand, afin de représenter une sorte de « flaque » plutôt qu'un ensemble de particules posées côte à côte. Pour cela, le rayon des particules est augmenté lorsque leur vitesse verticale devient proche de zéro (inférieure à un certain seuil).

Le calcul des mouvements : La bibliothèque Box2D. Elle permet également de prendre en compte les contacts entre particules et la collision des particules sur le sol représentées en bas de la fenêtre graphique.

Le calcul des mouvements d'une particule soumise à des forces extérieures est relativement simple à programmer tant que les particules n'interagissent pas entre elles. Par contre la résolution des problématiques de contact est assez complexe à mettre en œuvre ; elle est souvent assez gourmande en temps de calcul. L'utilisation d'une bibliothèque telle que Box2D est alors très efficace pour ce type de problématique et complètement justifiée.

Dans le cas des collisions, Box2D calcule les efforts résultants et permet de représenter des rebonds. Le rebond des gouttes sur le sol est donc obtenu directement par Box2D.

2- Est-ce une araignée qui pleure le vent d'automne Matsuo Bashô (1644-1695)

Sa poésie est plus subtile et crée l'émotion par ce que suggère le contraste ambigu ou spectaculaire d'éléments naturels simples opposés ou juxtaposés.

Né Kinsaku Matsuo et devenu Munefusa Matsuo, Bashô a la paternité, dans son esprit actuel, de cette forme poétique très codifiée d'origine japonaise qu'est le Haiku.

Petit poème, bref, il vise à dire l'évanescence des choses. Il doit donner une notion de saison et doit comporter une césure

3- Li-iL

Résidence artistique 3

Nous avons obtenu 8 jours – du 18 août 2015 au 27 août 2015 - de résidence à Stereolux – Nantes – pour des tâches liées au développement, au dispositif d'installation – prototyper, tester et évaluer en dimensions réelles -  et à la construction d'une cohérence visuelle, au paramétrage des rendus et résolutions pour une optimisation graphique sur écran - prototypage et sur dispositif final sur tulle – prototypage.

Les développements ont concerné tant la capture, sélection, utilisation des data que la création en code processing de pattern de visualisations de données. Au total 9 tableaux connectés et un jingle promotionnelle LiiL.

Pour finir, les optimisations graphiques ont fait l'objet d'un patch pure data pour rendre le paramétrage contrôlable en temps réel.

Notre axe de visualisation repose sur l'interaction : voir une communauté twitter et, en temps réel, décliner les différentes actions qui impactent un compte et ses abonnés, les hashtags récurrents, les RT qui les lient, les mentions qui créent le réseau etc.

Aujourd'hui pattern4, des hashtags et une proposition artistique métaphorique.

Article 35 – 2015-10-27

1- Coder

Dans son chapitre 3 Oscillation, les angles – degrés/ radians –, les mouvements angulaires – rotation / forces –, la trigonométrie, les coordonnées polaires et cartésiennes – article 21 77 éléments en soupe vibratoire -, l'oscillation, les vagues, le pendule, et enfin le :

ressort : http://natureofcode.com/book/chapter-3-oscillation/

La force d'un ressort est directement proportionnelle à son extension.

Entre ressort et flow field, généralement on a des constantes - par exemple on multiplie la force des ressorts par 0.9 et la force du flowfield par 1.125 -.

Faire remonter ces variables pour y accéder plus facilement et pouvoir modifier la dynamique de notre système, est une technique de programmation identifiant ces variables uniques sous forme de constante nommée : Les Magic number. Une constante ainsi utilisée peut entraîner des visuels, des dynamiques très variées et radicalement différentes les unes des autres. Ici c'est plus une utilisation classique de variables en programmation.

2- @b2renger sur twitter #LiiL2015

Agents, flow field, ressorts, magic number, singularité, sonorité, un univers issu de :

The nature of code, les questions posées sont : - Qu'est-ce qui pourrait donner vie aux formes inanimées ? - Et si ces formes pouvaient se mouvoir selon leurs propres lois ? - Et si elles pouvaient espérer et rêver et avoir peur ?

Devenir des agents autonomes ?

Trois composantes : - Capacité de limitation dans un environnement donné - Capacité de réaction face à un contexte - Capacité d'interactions locales entre les agents pour dynamiser un système structuré complexe.

3- Li-iL

Résidence artistique 2/ pattern3

Nous avons obtenu 8 jours – du 18 août 2015 au 27 août 2015 - de résidence à Stereolux – Nantes – pour des tâches liées au développement, au dispositif d'installation – prototyper, tester et évaluer en dimensions réelles -  et à la construction d'une cohérence visuelle, au paramétrage des rendus et résolutions pour une optimisation graphique sur écran - prototypage et sur dispositif final sur tulle – prototypage.

Les développements ont concerné tant la capture, sélection, utilisation des data que la création en code processing de pattern de visualisations de données. Au total 9 tableaux connectés et un jingle promotionnelle LiiL.

Pour finir, les optimisations graphiques ont fait l'objet d'un patch pure data pour rendre le paramétrage contrôlable en temps réel.

Notre axe de visualisation repose sur l'interaction : voir une communauté twitter et, en temps réel, décliner les différentes actions qui impactent un compte et ses abonnés, les hashtags récurrents, les RT qui les lient, les mentions qui créent le réseau etc.

Aujourd'hui pattern3, des profils, un compte central, des RT visibles par un lien temporisé Flowfield et ressorts créent la dynamique. Ici, les ressorts vont prendre le dessus sur le flowfield et céder au bout d'un certain temps sous-tendant la notion de durée de vie.

LiiL2015 Pattern 2 Dernière proposition

LiiL2015

Article 34 – 2015-10-19

1- Coder

Les agents autonomes pourraient être représentés par des colonies. Le code devient l'écriture des comportements : modélisation du mouvement avec vecteurs et forces.

Construire une classe de l'entité.

L'agent autonome a un but et combine ses actions pour y parvenir en fonction de son environnement : sur un chemin, il cherche sa cible, évite d'éventuel obstacle, et poursuit sa route. De calcul en calcul, il évolue.

Sa direction est la différence entre la vitesse désirée et la vitesse en cours parce que la cible est l'occasion d'une prise de décision intelligente de l'agent, fondée sur sa perception de son état propre et de l'environnement.

Pvector steer = Pvector.sub(desired, velocity) ; Pvector desired = Pvector.sub(target, location) ;

Mais y rajouter une accélération dosée… pour compléter une simulation comportementale diversifiée, singulière, intrinsèque ou liée à des paramètres de position (Reynolds et coordonnées polaires) ou impactée par la force gravitationnelle.

Et si chaque agent se trouvait positionné dans une grille composée de cellules dans laquelle une flèche indique une direction : un champs de flux soit FLOW FIELD. Le code doit d'abord décrire une classe Flow field : un tableau à 2 dimensions.

Class FlowField { Pvector [] [] field ; int cols , rows ; int resolution ; }

Les directions peuvent être random, 2D Perlin noise, …

Entre vecteurs, le dot produit permet de solutionner les interrogations d'angle :

static public float angleBetween(PVector v1, Pvector v2) { float dot = v1.dot(v2) ; float theta = (float) math.acos(dot / (v1.mag() * v2.mag())) ; return theta ; }

Pour finir, nous évoquerons rapidement la différence entre 'suivre' un chemin' et 'chercher' un chemin : le second est de l'ordre de l'Intelligence Artificielle, le premier demande à une entité, sur un chemin existant, de s'y cantonner.

2- « Autonomous agent » de Daniel SHIFFMAN

Dans The nature of code, les questions posées sont :

- Qu'est-ce qui pourrait donner vie aux formes inanimées ? - Et si ces formes pouvaient se mouvoir selon leurs propres lois ? - Et si elles pouvaient espérer et rêver et avoir peur ?

Devenir des agents autonomes ?

Trois composantes : - Capacité de limitation dans un environnement donné - Capacité de réaction face à un contexte - Capacité d'interactions locales entre les agents pour dynamiser un système structuré complexe.

3- Li-iL

Résidence prototypage

Nous avons obtenu 8 jours – du 18 août 2015 au 27 août 2015 - de résidence à Stereolux – Nantes – pour des tâches liées au développement, au dispositif d'installation – prototyper, tester et évaluer en dimensions réelles -  et à la construction d'une cohérence visuelle, au paramétrage des rendus et résolutions pour une optimisation graphique sur écran - prototypage et sur dispositif final sur tulle – prototypage.

Les développements ont concerné tant la capture, sélection, utilisation des data que la création en code processing de pattern de visualisations de données. Au total 9 tableaux connectés et un jingle promotionnelle LiiL.

Pour finir, les optimisations graphiques ont fait l'objet d'un patch pure data pour rendre le paramétrage contrôlable en temps réel.

Notre axe de visualisation repose sur l'interaction : voir une communauté twitter et, en temps réel, décliner les différentes actions qui impactent un compte et ses abonnés, les hashtags récurrents, les RT qui les lient, les mentions qui créent le réseau etc.

Aujourd'hui pattern2, un compte central, des profils liés, des hashtags partagés. Flowfield et ressorts créent la dynamique. Ici, le flowfield - en fond de visuel - prend le pas sur le ressort. Le ressort va retenir le hashtag ; il va se tendre jusqu'à céder sous la force du flowfield.

prochain article : les ressorts

Pattern1

Article 33 – 2015-10-12

1- Coder

L'article 22 #IrIdescence parle de couleurs. L'effet iridescence provient du mouvement (variable q) lié au stroke et d'un random dans le fill.

L'iridescence est ici, simulée, traduite en code à partir de ses propriétés physiques : * le tuto sur processing : http://www.mgsx.net/2015/07/23/Processing.html Comment jouer avec un shader ou une texture sous processing * les tutos sur le noise : http://www.mgsx.net/2015/07/22/Noise.html Comment créer un shader : les bases * les tutos sur les gradient : http://www.mgsx.net/2015/07/22/Gradient.html Comment monter en capacité dans ses créations * le tuto sur le shader d'irridescence : http://www.mgsx.net/2015/07/21/006-001-animated-iridescence.html

2- Shader

Nuanceur,

programme informatique utilisé en image de synthèse pour paramétrer une partie du processus de rendu réalisé par une carte graphique ou un moteur de rendu logiciel.À partir de 2001, ils ont été introduits dans les interfaces de programmation 3D temps réel telles que DirectX 8.0 et OpenGL 1.4, puis ont été supportés par les grands constructeurs de cartes graphiques comme nVidia ou ATI. L'avantage principal d'employer des shaders vient de leur flexibilité, qui permet un temps d'élaboration plus rapide ainsi que meilleur marché, mais permet également de rendre les travaux plus riches.

Langage :

Calcul temps réel : shaders conçus pour être exécutés à même le processeur de traitement graphique (GPU) de la carte graphique en se plaçant dans la file de traitement et permettant ainsi des performances optimales. GLSL ou glslang est un langage de shader standardisé par l'OpenGL Architecture Review Board. DirectX high level shader language, couramment appelé HLSL, est une abstraction du langage de shader de type assembleur. Cg langage développé par nVidia et conçu pour faciliter et optimiser la production intégrée.

Pour plus d'informations, en particulier la structure de calcul en temps réel …

3- Li-iL

Installation connectée

Le 24 septembre 2015, dès 19h00, une équipe formée en mai 2015 a présenté une installation interactive et immersive Li-iL pour Lumen Interaction - Immersion Lumière au Lieu Unique à Nantes. Merci à Stereolux pour la résidence – codecreatif-stereolux.

Effectivement depuis l'article 19 Première classe La fonction personnalisée je vous parle de cette production. A la racine du projet, j'ai le plaisir d'en parler ici.

Contexte : @images et réseaux, cluster technologique basé à Rennes veut lorsd'une soirée de gala fêter ses 10 ans d'existence. Il lance un appel à manifestation pour animer sa soirée.-

Nous candidatons, Youna Ouali/ Nicolas Kiéné/ Berenger Recoules – b2renger - / Nicolas Besnard -  beikko - /Germain Aubert – accusé des mgsx.net ci dessus.

Nous gagnons cette participation à budget minimum : 1800 euros TTC.

Nous concevons : l'écoute twitter d'un compte spécifique permet de visualiser en temps réel les interactions de sa communauté : @imagesreseaux – tweet – RT - # - favoris

Nous développons : les visualisations des interactions twitter s'organisent en 9 pattern/ tableaux : communauté/ symbolique/ métaphorique/ lecture de tweets/ hashtags.

Des challenge sous processing : shader/ flowfield/ box2D/ simulations physiques

Nous installons : les 14 pendrilons de tulle permettant une immersion en 3D du public forment le dispositif 10mx10mx5.60m. Un VP Christie 10K en partenariat avec Elacom.

Nous signons : le jingle digital réalisé sur la base de l'Iridium Ir77 sujet traité depuis ce même article 19 permet de promouvoir la réalisation captée et bientôt diffusée.

Sur twitter, Li-iL devient #LiiL2015...

Article 31 – 2015-10-04

1- Coder

Paramétrer pour un motif génératif : le même motif et pourtant singulier, appartenant à chacun par une ligne décision : if (keyPressed == true) { saveFrame("frames/iridium_"+year()+"-"+month()+"-"+day()+"-"+second()+"-" + ".png"); }

A chaque instant, les électrons sont situés différemment et le shader d'iridescence présente une autre facette.

L'image générée en .png permet de conserver la transparence du fond avec l’opacité à 0 void draw() { background(bgColor,0); }

En début de code les paramétrages de couleurs et électrons // couleur de fond du tee-shirt – ici noir color bgColor = color(0,0,0); // couleur d'avant plan sur le tee-shirt – ici blanc color fgColor = color(255, 255, 255); // transparence des electrons int electronAlpha = 128; // electron en mode plein ou fil de fer – ici fil de fer boolean electronWireFrame = true;

Taille de l’image void setup() { size(2505, 1656, OPENGL); }

2- Résolution

La typo a été produite sous illustrator pour vectorisation.

Pour les questions de résolutions, Pour résumer :

Processing sort des images en 72dpi, Pour le print classique on a besoin de 300dpi au minimum Un peu de maths : 1 inch = 25.4 mm Taille d’image finale en 15x10cm = 150x 10mm soit 5.9 inch x 3.9 inch

Résolution écran pour print : 1770px x 1170px

Pour nos T-shirts, Résolution écran processing : 2505x1656

Taille image print à valider sous photoshop avec 'taille de l'impression' en passant en résolution X et Y en 300dpi au minimum.

La taille du fichier final. Ici : 21x14 cm.

Etc...

3- Plexus

Un plexus (du latin plectere, entrelacer, tresser, lui-même du grec « πλέκω » tricoter ) est un rassemblement avec anastomose – connexion entre deux structures, organes, espaces - de différents nerfs ou vaisseaux.

Le plexus solaire ou plexus cœliaque est un plexus nerveux situé au niveau de l'abdomen entre le sternum et le nombril. Il s'agit d'un réseau de nerfs formant les ganglions semi-lunaires, mésentériques supérieurs et aortico-rénaux. Ce plexus ganglionné reçoit ses afférences du nerf vague droit, des nerfs grands et petits splanchniques et du nerf phrénique et innerve les viscères de l'abdomen supérieur : estomac, foie et rate. C'est un plexus viscéral.

Solaire provient de la forme de ce plexus : les multiples nerfs sortants évoquent les rayons du soleil.

Sur nos T-shirts pour homme, le centre de notre atome d'iridium se situe à 21 cm de la base du cou pour se positionner au niveau du plexus solaire. Sur le T-shirt femme, l'encolure plus basse, nous amène à 19 cm.

Article 30 – 2015-09-20

1- Coder

Quand le code est robuste, les classes bien construites, le sketch est source de transformations infinies : couleurs, formes, mouvements.

Chaque projet ouvre une infinitude, certes limitée. Notre esprit est notre plus grande limitation. Le calcul est une infinité pour notre esprit. L'optimisation machine recule l'infinité.

Tandis que notre projet 'Iridium' touche à sa fin et que notre jingle semble prêt à intégrer notre projet de mapping, la fin ouvre de multiples commencements possibles : paradoxe de la création.

La fin semble ne jamais exister en art. Juste la fixation temporaire.

2- IA Intelligence Artistique

L'intelligence artificielle est le nom donné à une discipline scientifique en recherche de méthodes de création et de simulation de l'intelligence humaine. Turing Alan - 1950 – en serait le père.

Concrétisé dans les années 2010, avec les premiers réseaux de neurones artificiels nés à la fin des années 1980, l'ensemble de méthodes d'apprentissage automatique tente de modéliser avec un haut niveau d'abstraction des données, différentes transformations non linéaires, par des architectures articulées : les techniques de deep Learning constituent une classe d'algorithmes de machine learning.

Le deep dream de Google permet à la machine d'extrapoler une forme à partir d'une reconnaissance initiale. En Allemagne, l'histoire de l'art est re-visité par le plaggiat machine.

La machine apprend l'art et en ré-applique des éléments formels, stylistiques. La machine emmagasine par couches successives, de plus en plus profondes.

Pour l'instant la machine apprend et ne connaît pas l'intention. Si l'intention devient algorithme alors la machine est humain, libre de s'inventer un futur.

3- Vision de rêve

Le rêve a constitué depuis des millénaires une méthode de connaissance profonde, comme un lien avec les territoires et puissances invisibles. Le rêve a servi notre volonté de nous rencontrer, le moi/ toi/ soi psychisme et résistances, fixations et névroses. Relayant le rêve, l 'art permet son illustration, sa représentation, son prolongement conscient, construit et sa transmission. L'art est un rêve qui produit un rapport au monde avec intention, l'intention de sortir d'un intérieur et de rencontrer un extérieur.

Produire des images n'est pas nécessairement de l'art. Rêver est humain, peut-être même meta-humain dans un lien au spirituel. Rêver c'est aussi mémoriser, cristalliser et évoluer. Voir en rêve c'est se connecter à soi et peut-être à un au-delà de soi, un en-soi tellement profond qu'il en devient hors du moi.

Le rêve produit des images. La mémoire emmagasine des images. Le rêve est une mémorisation transformée. « La mémoire n'est pas une caméra vidéo » - dans Broadway Therapy – 2015 – Peter Bogdanovich

La machine apprend. Mémorise-t-elle ? Elle reconnaît. Crée-t-elle ? Elle applique. Rêve-t-elle ?