Le creative coding, une tendance tenace

Technique, User Experience

11 avr, 2018

Depuis quelques années, le concept de “Creative coding” est de plus en plus mis en avant dans les sites web, les galeries, les spectacles, les concerts, les expositions et bien d’autres événements et dispositifs interactifs. Même si vous n’avez jamais su mettre un nom dessus, vous avez déjà rencontré des projets de ce genre et vous en avez même été l’utilisateur central.

Qu’est ce que le creative coding ?

Il est encore difficile de donner une définition précise de ce qu’est le “Creative Coding”. Pour faire simple, il s’agit d’une réalisation expressive et non d’une réalisation fonctionnelle. À la croisée de la création graphique/artistique et de la programmation, le principe de “Creative Coding” repose sur des objectifs visuels. Il arrive souvent que l’on associe le Generative Design (création de formes design statiques ou en mouvements grâce à du code génératif) au “Creative Coding”. Ce dernier est souvent utilisé pour créer des visuels en temps réel, des installations artistiques, des projections, des arts sonores et bien d’autres systèmes créatifs. C’est un excellent moyen pour les développeurs de découvrir de nouvelles technologies et de les associer afin de créer d’impressionnantes oeuvres d’arts.

A noter que la technique découle de nombreuses expérimentations artistiques interactives comme celles de Jean Tinguely, Manfred Mohr, Christa Sommerer et Laurent Mignonneau ou encore Casey Reas.

Pourquoi est-ce une approche de plus en plus intéressante ?

Le “creative coding” reste une approche “innovante” et originale pour la réalisation d’un projet. Par cette association d’art et de programmation, les marques peuvent bénéficier d’une nouvelle forme de communication visuelle et d’interactions, ce qui leur permet de se démarquer de leurs concurrents et d’attirer les consommateurs curieux. De plus, le “creative coding” permet d’offrir des expériences aux consommateurs, leur permettant de se souvenir des marques et d’en parler au détour d’une conversation ainsi que de les faire éventuellement adhérer à la marque. Grâce aux progrès technologiques, le “creative coding” se complexifie et permet une interactivité unique.

circé1 Le creative coding, une tendance tenace

Quelles technologies utilisées ?

Pour se lancer dans le Creative Coding vous pouvez vous baser sur différents langages tel que le Javascript, Java, C++ ou encore Python. Pour chacun de ces langages, il existe plusieurs outils, vous permettant de choisir le plus adapté à votre besoin et à votre réalisation.

image3 Le creative coding, une tendance tenace

Mais sans aller aussi loin, on peut tout simplement utiliser le canvas en HTML/JS, les animations CSS ou encore les animations SVG.
Voyons un peu ce qui existe.

En Javascript
– WebGL : API Javascript qui permet d’afficher des graphismes 2D et 3D dans tous les navigateurs compatibles.
– ThreeJS : librairie Javascript qui permet de créer des scènes en 3D dans les navigateurs. Elle utilise WebGL et simplifie énormément la création des éléments graphiques 3D.
– P5.js : librairie Javascript qui se base sur le principe du Processing que l’on verra un peu plus bas. Elle permet de créer des expériences graphiques et interactives.
– GSAP (GreenSock Animation Platform) : suite d’outils Javascript pour les animations de haute performance HTML5 qui fonctionne sur la plupart des navigateurs.
– D3.js : librairie Javascript qui permet de manipuler, de mettre en forme et donner vie à des donnés grâce à du HTML, CSS et SVG.

En Java
Processing : bibliothèque Java et environnement de développement libre adapté à la création graphique interactive.

En C++
OpenFrameworks : ensemble d’outils open source conçus pour le “creative coding” en fournissant un cadre simple et intuitif pour l’expérimentation. Cette boîte à outil inclut la bibliothèque OpenGL pour le côté graphique.

circé3 Le creative coding, une tendance tenaceSystème de particules dans OpenFrameworks

Autre
OpenGL : interface de programmation qui comprend des fonctions de calcul d’images 2D et 3D, permettant de déclarer des formes géométriques sous forme de points, de vecteurs, de polygones, de bitmaps et de textures.

Quelques exemples de projets tournés “Creative coding”

Makio&Floz

Devx DDD – Sound Experiment, au festival Digital Design Days à Milan de 2017 qui devait répondre à une thématique imposée qui était “Pixel”. Expérience réalisée en WebGL.

Le projet ici.

Matt DesLauriers

Jeu interactif en page d’accueil du site Tendril. L’utilisateur est invité à brosser les plantes avec sa souris afin de les faire s’épanouir et d’émettre des sons musicaux. Projet réalisé en WebGL, utilisant également la WebAudio API pour le fond et les interactions sonores.

Le projet ici (rafraîchissez la page d’accueil jusqu’à avoir l’expérience des feuilles).

circé4 Le creative coding, une tendance tenace

Aristide Benoist

Site web de Jemimah Barnett, une conseillère immobilière Londonienne indépendante.

Le projet ici.

circé5 Le creative coding, une tendance tenace

En bref, le “Creative Coding” reste une solution innovante et intéressante pour les marques qui veulent promouvoir leurs produits et/ou leur concept. Cette association d’art et de programmation restera-t-elle simplement une pratique expérimentale ou deviendra-t-elle un concept incontournable du web ?

Et si vous deveniez “Creative Coder” ? Sautez le pas et imaginez une expérience hors du commun.

Par ailleurs, si l’alliance de la création et de la technologie vous intéresse, n’hésitez pas à continuer sur votre lancée et à lire notre article sur l’art 2.0 !

 

Sources

https://fr.slideshare.net/arivaux/01-gx-d-generative-design-et-creative-coding
https://www.creativebloq.com/features/6-ways-to-get-into-creative-coding

Laisser un commentaire.