Stage de conception et de réalisation en design

Transcription

Stage de conception et de réalisation en design
Colin BOUVRY
Université de Valenciennes et du
Hainaut-Cambrésis, ISTV, DREAM
Stage de conception et de réalisation
en design numérique sensoriel
Stage du 12 mars au 17 Août
Tuteur : Igor Novitzki
Master 2 ISIS
Année 2006/2007
Stage de conception et de réalisation en design numérique sensoriel
Sommaire
1 Remerciements................................................................................................................................. 4
2 Introduction...................................................................................................................................... 4
2.1 Description de l’entreprise........................................................................................................5
2.1.1 Exemples d'oeuvres réalisées par Endonic........................................................................6
2.1.2 Exemples d'oeuvres produites et diffusées par Numeriscausa
.....................................................................................................................................................7
2.2 Contenu et organisation du stage.............................................................................................. 8
2.3 Déroulement du stage............................................................................................................... 8
3 Installation interactive Nébulosa...................................................................................................... 9
3.1 Introduction.............................................................................................................................10
3.2 Cahier des charges.................................................................................................................. 11
3.3 Objectif................................................................................................................................... 13
3.4 Réalisation.............................................................................................................................. 13
3.5 Nébuleuse................................................................................................................................14
3.5.1 Introduction..................................................................................................................... 14
3.5.2 Synchronisation ..............................................................................................................15
3.6 Son.......................................................................................................................................... 16
3.7 Captation................................................................................................................................. 18
3.7.1 Introduction..................................................................................................................... 18
3.7.2 Réalisation.......................................................................................................................19
3.7.3 Contraintes..................................................................................................................19
3.7.4 Détection.................................................................................................................... 19
3.7.5 Numérotation..............................................................................................................20
3.7.6 Suivi de numéro..........................................................................................................20
3.7.7 Communication.......................................................................................................... 20
3.8 Résultats..................................................................................................................................20
3.9 Conclusion.............................................................................................................................. 20
4 Installation interactive « Détours d'objets » Travaux de Claude Courtecuisse.............................. 21
4.1 Présentation.............................................................................................................................22
4.2 Description de l'installation.................................................................................................... 24
4.3 Objectif................................................................................................................................... 25
4.4 Diaporama...............................................................................................................................26
4.4.1 Introduction..................................................................................................................... 26
4.4.2 Synchonisation................................................................................................................ 26
4.4.3 Réalisation du diaporama................................................................................................26
4.4.4 Principe du diaporama.................................................................................................... 27
4.5 Conclusion.............................................................................................................................. 27
5 Installation Immersive
Twisted Squaring (Quadrillage tordu)................................................................................................28
5.1 Introduction.............................................................................................................................29
5.2 Présentation.............................................................................................................................29
5.3 Objectif................................................................................................................................... 29
5.4 Réalisation.............................................................................................................................. 30
5.4.1 Introduction..................................................................................................................... 30
5.4.2 Traitement d'images de la webcam................................................................................. 30
5.4.3 Graphisme....................................................................................................................... 31
5.4.4 Configuration.................................................................................................................. 33
5.5 Conclusion.............................................................................................................................. 34
6 Installation « Survireuse » de Moebius.......................................................................................... 35
6.1 Introduction.............................................................................................................................36
6.2 Présentation.............................................................................................................................36
Colin Bouvry
Page 2 sur 54
Stage de conception et de réalisation en design numérique sensoriel
6.3 Objectif................................................................................................................................... 37
6.4 Déroulement............................................................................................................................37
6.4.1 Préparation...................................................................................................................... 37
6.4.2 Plan de l'installation........................................................................................................ 37
6.4.3 Liste du matériel..............................................................................................................38
6.4.4 Configuration.................................................................................................................. 38
6.4.5 Éclairage infrarouge........................................................................................................ 38
6.5 Conclusion.............................................................................................................................. 38
7 Simulation d'une Installation Interactive de Feux pour le musée des pompiers de Saragosse.......39
7.1 Introduction.............................................................................................................................40
7.2 Objectif................................................................................................................................... 40
7.3 Réalisation.............................................................................................................................. 40
7.4 Conclusion.............................................................................................................................. 40
8 Simulation Éclairage banque populaire..........................................................................................41
8.1 Introduction.............................................................................................................................42
8.2 Objectif................................................................................................................................... 42
8.3 Réalisation.............................................................................................................................. 42
8.4 Conclusion.............................................................................................................................. 43
9 Conclusion...................................................................................................................................... 44
10 Annexes........................................................................................................................................ 45
10.1 Installation interactive « Détours d'objets »
Travaux de Claude Courtecuisse................................................................................................... 46
10.1.1 Installation du diaporama..............................................................................................46
10.1.1.1 Introduction........................................................................................................... 46
10.1.1.2 Consignes d'installation.........................................................................................46
10.1.1.3 Compte utilisateur................................................................................................. 46
10.1.1.4 Installation du diaporama...................................................................................... 46
10.1.1.5 Configuration du réseau........................................................................................ 47
10.1.1.6 Écran de veille....................................................................................................... 48
10.1.1.7 Extinction automatique de l'ordinateur..................................................................48
10.1.2 Installation de la synchronisation..................................................................................50
10.1.2.1 Introduction........................................................................................................... 50
10.1.3 Configuration du diaporama......................................................................................... 51
10.1.4 Réglage de la synchronisation.......................................................................................51
10.1.5 Réglage de l'extinction automatique de windows......................................................... 51
10.1.6 Symptômes....................................................................................................................51
10.2 Nebulosa............................................................................................................................... 53
10.2.1 PD -> MIDI -> Audiomulch configuration...................................................................53
Colin Bouvry
Page 3 sur 54
Stage de conception et de réalisation en design numérique sensoriel
1
Remerciements
Ce travail est l'aboutissement d'un projet personnel, depuis longtemps attendu, né d'une
volonté de découvrir le monde de l'art numérique à la croisée du design, de l'électronique
et de l'informatique.
Je remercie toute l'équipe Numeriscausa pour m'avoir accueilli et accompagné dans
toutes mes péripéties durant le stage.
Je porte toute ma gratitude à Stéphane Maguet, David Remondeau et Igor Novitzki ainsi
que Julie Miguirditchian et Jean-Noël Colas pour leur confiance et les projets qu'ils ont
bien voulu me confier.
Je tiens à remercier Didier Bouchon, Fréderic Mauclère, Stéphane Sikora mes
développeurs préférés pour me donner des conseils très utiles en C++ et des réponses à
tout problème technique.
Je tiens à saluer les stagiaires Jonathan et Laurène Doussot qui m'ont donné des conseils
et pour leur sympathie, Mister QQ pour son humour, Carlo pour ses festivals à l'italienne
et ses conseils.
Je veux exprimer ma reconnaissance à tout le staff Numeriscausa pour tout ce qu'ils m'ont
apporté,et pour les bonnes conditions de travail.
2
Introduction
Du 12 mars au 17 août, j’ai effectué un stage au sein de l’entreprise Numeriscausa (située
rue Mauconseil dans le premier arrondissement de Paris), dans la conception de système
interactif audiovisuel. J'ai choisi ce stage pour plonger dans un monde où les technologies
sont aux services de projets artistiques. Au cours de ce stage, j’ai pu m’intéresser au
développement informatique d'installations interactives pour des musées, pour des salons
et pour des designers, mais j'ai pu aussi m'adonner à la préparation pour un devis, aux
simulations, à l'installation, à la maintenance, aux rédactions de documents, aux
reportages...
Plus largement, ce stage a été l’opportunité d’appréhender l'enseignement de ce secteur,
le métier, les compétences découvertes dans le but de m'intégrer dans ce type de travail.
Au-delà d’enrichir mes connaissances en programmation, en installation audiovisuelle, en
infographie, ce stage m’a permis de comprendre dans quelle mesure je pouvais appliquer
mes connaissances et mes désirs pour accomplir mon projet professionnel.
Colin Bouvry
Page 4 sur 54
Stage de conception et de réalisation en design numérique sensoriel
2.1
Description de l’entreprise
numeriscausa est née en 2002 et s'est donnée pour mission d'aider les artistes
dans la production et la diffusion de leurs œuvres, en France et sur la scène
internationale. A travers une synergie entre compétences techniques et création artistique,
ils cherchent à valoriser l'hybridation entre les arts numériques, le design et l'architecture.
Pour cela ils ont créé une entité nommée
endonic. Endonic est une marque de
Numeriscausa qui regroupe un ensemble de prestations à la croisée du design, de
l'électronique et de l'informatique. Bénéficiant de plusieurs années d'expériences dans la
conception et la réalisation de technologie interactive et de réalité augmentée, ils
disposent aujourd'hui d'une expertise technique (électronique, informatique) et artistique
mobilisable dans différents contextes. Leur offre s'adresse à tous les corps de métiers
(designers, agences événementielles, décorateurs, scénographes) qui souhaitent intégrer
le design interactif au sein d'espaces et d'objets.
Du microcontrôleur à l'électronique analogique, ils concrétisent toutes sortes de projets
interactifs.
Ils peuvent équiper un lieu ou des objets dotés de fonctions interactives efficaces et
fiables, qui permettent d'interagir de façon autonome et naturelle avec leur environnement.
Offres d'Endonic :
•
•
•
•
•
Étude de positionnement (expertise technique et artistique)
Rédaction de cahier des charges (schéma électronique, architecture informatique)
Réalisation technique (développement informatique et électronique)
Réalisation de prototype, (présérie, tests)
Création et réalisation artistique
Colin Bouvry
Page 5 sur 54
Stage de conception et de réalisation en design numérique sensoriel
2.1.1
Exemples d'oeuvres réalisées par Endonic
Fnac Montparnasse
Depuis le 1er Septembre 2006
Illustration 1: Fnac
Montparnasse
A l'occasion de la rénovation de la FNAC Montparnasse,
numeriscausa & endonic (nouvelle entité de numeriscausa)
présentent à partir du 1er Septembre 2006 deux nouveaux dispositifs
multimédia au sein de l'espace André Essel imaginé par Pierre-Jean
Richard, développé par Gaël Hietin en collaboration avec Jeremy
Bataillou : une "colonne Morris" interactive relatant l'histoire de la
FNAC ainsi qu'une installation représentant une pluie de lettres avec
laquelle le visiteur pourra interagir.
Le Rendez-vous Toyota
du 19 Décembre 2006 au 17 Mars 2007
Dans le cadre du lancement du modèle AURIS, Endonic a développé
deux dispositifs interactifs : un tapis interactif et un jeu sur un mur de
LED incluant du Tracking vidéo et des effets vidéo temps réels.
Illustration 2: Rendez-vous
Toyota
Mathieu Lehanneur
Intégration et design électronique des objets de Mathieu Lehanneur
(lauréat Carte Blanche Via 2005).
« O » diffuseur d'oxygène contrôlé via une interface électronique et
« dB » robot boule se déplaçant vers les sons nuisibles pour les
atténuer à l'aide d'un bruit blanc.
Acquisition 2006 du FRAC Île-de-France
Illustration 3: Mathieu
Lehanneur
Colin Bouvry
Page 6 sur 54
Stage de conception et de réalisation en design numérique sensoriel
2.1.2
Exemples d'oeuvres produites et diffusées par Numeriscausa
Numeriscausa diffuse et produit les artistes ci-dessous notamment le collectif Music2eye
avec les oeuvres « Noemi » : une sculpture interactive capable d’improviser un dialogue
musical avec un spectateur , « Image Mouvement » : un miroir déformant et « Linéa » : un
écran plasma où les pixels s'allongent jusqu'à donner des fils qui soulignent la forme et la
vitesse des objets en mouvement.
Illustration 4: Extrait du site internet Numeriscausa
Colin Bouvry
Page 7 sur 54
Stage de conception et de réalisation en design numérique sensoriel
2.2
Contenu et organisation du stage
Objectif du stage :
Sous la tutelle de développeurs confirmés, le stage s’articulera autour du développement
d’applications logicielles interactives. Ces solutions logicielles seront programmées en
environnement windows (C++, pureData). Elles auront pour fonction d’intégrer en amont
les différents types de capteurs (caméras, micros, accéléromètres etc.) et de pouvoir
contrôler différents systèmes de diffusions (vidéoprojecteur, LEDs, enceintes etc.). Le
stagiaire pourra également intervenir sur le développement des projets en cours. Un projet
complet autour de ces techniques sera accompli à la fin de la période de stage.
2.3
Déroulement du stage
Le stage s'est articulé autour d'un ensemble de projets décrient dans le rapport. Tout
d'abord, j'ai commencé par le projet Nébulosa où j'ai développé en C++ des parties de
programme et où j'ai installé le système à Milan en Italie. J'ai ensuite conçu un diaporama
et je l'ai installé à l'exposition « détours d'objet » au centre Pompidou. Par ailleurs, David
Remondeau m'a confié le développement de son projet « Twisted Squaring », une
installation
immersive
que
j'ai
programmé.
De part, j'ai eu le privilège de collaborer sur une oeuvre du célèbre dessinateur Moebius
conçu par l'association Music2Eye. Pour finir, j'ai travaillé sur une simulation en image de
synthèse avec du feux et des personnages en mouvement pour un designer et une
simulation d'éclairage de façade pour un bâtiment de la banque populaire.
D'autres travaux ont été réalisé, notamment dans l'étude de système afin de déterminer un
devis cohérent et dans le test de technologie.
Colin Bouvry
Page 8 sur 54
Stage de conception et de réalisation en design numérique sensoriel
3
Colin Bouvry
Installation interactive Nébulosa
Page 9 sur 54
Stage de conception et de réalisation en design numérique sensoriel
3.1
Introduction
La marque Capellini a commandé à Numeriscausa / Endonic une installation
artistique pour le salon du meuble à Milan qui a lieu du 18 au 23 avril
2007.
Illustration 5: Salon milan
Nébulosa c'est quoi : c’est un logiciel génératif et interactif qui diffuse
des images des différentes marques du groupe Cappellini sur un écran
circulaire situé au milieu d'un stand de 4500 m².
Illustration 6: Écran circulaire
Le logiciel en question doit composer et décomposer des images à l'aide de
flux de particules plutôt carrées dont la granularité reste à définir.
Voici quelques images qui donnent le ton d'ensemble.
Illustration 7: Exemple de
réalisation
Colin Bouvry
Page 10 sur 54
Stage de conception et de réalisation en design numérique sensoriel
3.2
Cahier des charges
La dynamique d'ensemble doit être particulièrement soignée pour être jolie et les flux
doivent s'inspirer de mouvements naturels.
Plus précisément, on distribue aléatoirement des points d'ancrages pour les
images et celles-ci se composent et se recomposent selon le scénario
suivant :
Comme il y a 6 marques dans le groupe Cappellini, il y a un scénario de
"générativité", chaque marque a 30 secondes où ses images apparaissent
de manière aléatoire puis on passe à l'autre marque et au bout de la
6eme fois on revient à la première marque mais en réagençant son corpus
d'images.
Illustration 8: Meubles
Pour l'interactivité, elle est simple. Dans chaque borne une caméra,
tournée vers le haut, connectée à un ordinateur légé relié en wifi.
Illustration 9: Borne interactive
Illustration 10: Architecture technique
Colin Bouvry
Page 11 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Coté comportement de l'interaction, quand le visiteur pose sa main sur un
endroit de la vitre, il arrête une certaine partie des flux qui se
concentre à l'endroit où il a posé la main. S’il pose ses deux mains, il
y a accumulation en deux points.
Illustration 11: Vitre
Programmation graphique
La programmation sera réalisée en C++ avec les bibliothèques OpenGl. Le programme
comportera des boids pour réaliser des mouvements naturels biologiques comme par
exemple des papillons qui volent.
Effets envisagés :
- Interpolation luminosité/transparence
- Vectorisation de la taille du carré
- Volume / forme particule (ex : bord blanc)
- Interpolation vitesse
- Trajectoire type essaim, colonie d'oiseaux (utilisation de boids)
3 animations principaux :
Apparition:
- Effet de condensation du plus clair vers le plus contrasté
Translation /déplacement :
- Interpolation image vers la même image/ image vers une autre image
Disparition :
- Explosion
Comportement du fond :
- nuée de particules claires
- effet blur
- couleur de fond qui change de manière dynamique (ex : du blanc vers le
rose)
Colin Bouvry
Page 12 sur 54
Stage de conception et de réalisation en design numérique sensoriel
3.3
Objectif
Mon objectif était de concevoir la partie captation sur les bornes interactives, la
synchronisation, communication entre les logiciels, d'installer, de configurer sur place le
matériel et de s'assurer du bon fonctionnement de l'installation.
Didier Bouchon et Stéphane Sikora ont conçu la partie nébuleuse.
3.4
Réalisation
L'installation est composée de trois PCs pour chaque borne interactive avec leur webcam
pour analyser les mouvements des mains. Ces PCs sont connectés au routeur WIFI via
une carte WIFI sur le port PCI de la carte mère. Trois autres PCs sont utilisés pour le
programme principale de la nébuleuse. Ces PCs gèrent entièrement le graphisme avec
trois très bonnes cartes Graphiques NVIDIA FX 1500. Chaque PC gère deux
vidéoprojecteurs
Barco
R18.
Un serveur audio gère le son avec une carte son multivoix « M-audio firewire 410 ». Le
son est diffusé sur un amplificateur multicanaux et six enceintes.
Schéma technique :
Illustration 12: Schéma technique de Nébulosa
Colin Bouvry
Page 13 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Matériels :
– 6 projecteurs BARCO R18+
– 3 PC avec Processeur Dual Core
– 3 cartes Graphiques NVIDIA FX 1500
– 1 amplificateur audio multicanal
– 1 carte audio M-audio firewire 410
– 6 Haut-parleurs
– 3 webcams philips 650
– 3 PCs compacts
3.5
Nébuleuse
3.5.1
Introduction
La nébuleuse comportent un ensemble d'images de meubles et de designers articulés
sous une esthétique particulière.
Les images suivantes montrent des exemples de nébuleuse.
Illustration 13: Nébuleuse
Illustration 14: Nébuleuse 2
La nébuleuse a été élaborée par Stéphane Sikora et Didier Bouchon. Ils ont programmé
principalement des algorithmes de morphing et de boids. Les boids sont sous formes de
particules qui se comportent et se déplacent comme des organismes vivants. Ce qui
ajoute un peu de vie artificielle et rend plus vivant l'oeuvre. Le morphing est utilisé pour les
transitions entre différentes images afin de passer de l'une à l'autre de façon harmonieuse.
Colin Bouvry
Page 14 sur 54
Stage de conception et de réalisation en design numérique sensoriel
3.5.2
Synchronisation
Les logos des six marques suivantes Alias, Cappellini, Cassina, Gufram, Potronafrau et
Thonet s'affichent l'un après l'autre toutes les quarante cinq secondes avec un effet
d'explosion (voir illustration ci-dessous). Un des logos est affiché en même temps six fois
sur tout l'écran circulaire, c'est à dire un logo par vidéoprojecteur.
Scénario de synchronisation :
Illustration 15: Scénario de synchronisation
Colin Bouvry
Page 15 sur 54
Stage de conception et de réalisation en design numérique sensoriel
J'ai donc réalisé un logiciel permettant de synchroniser les trois ordinateurs gérant
l'affichage (voir le schéma logique ci-dessous).
Illustration 16: Schéma logique de la synchronisation
Le logiciel de synchronisation est réalisé en C++ et utilise le protocole OSC pour
communiquer les informations de synchro appelé TOP. Six informations (TOP) différentes
sont utilisées pour chaque marque.
Le réglage de la séquence est possible dans un fichier texte en mettant le nom des TOPs
ligne après ligne. Dans le fichier INI, il est possible aussi de régler le tempo entre chaque
TOPs, les adresses IP de destination et le port de communication. Le logiciel fonctionne
avec un Timer de la librairie SDL qui déclenche un événement afin d'envoyer les TOPs
selon le fichier de séquence, au protocole OSC. Les destinataires reçoivent les TOPs et
les analysent pour actionner le scénario d'affichage de la marque concernée.
3.6
Son
Le son accompagnant la nébuleuse doit permettre aux spectateurs de plonger dans un
monde inconnu, magique et doit renforcer la sensation de proximité d'objets célestes.
Pour réaliser cela, nous disposons de six enceintes placées au dessus des écrans où sont
diffusées des sons ambiants. Ces sons sont modifiés avec un effet granulaire avec un
ensemble de paramètres variant au cours du temps.
Pour réaliser ce son, nous disposons d'un ordinateur, d'une carte audio M-audio firewire
410, d'un amplificateur multicanal et de six haut-parleurs. Pour réaliser les effets sonores
deux logiciels en licence libre sont utilisés :
- Audiomultch pour la lecture des son, les effets sonores et le routage
- PureData pour le contrôle des différents paramètres de audiomultch au cours du temps.
Audiomultch est une station interactive pour musiciens. Il permet la création de textures
sonores et / ou d'un environnement de travail entièrement modulable par l'ajout d'éléments
entre eux.
Pure Data (PD) est un environnement de création en temps réel, permettant la gestion de
l'image, du son ou des données.
Un driver nommé MappleVMC a dû être installé pour communiquer en MIDI entre PD et
Audiomultch. Il permet de créer un câble MIDI virtuel.
Dans le patch, des lecteurs son, des effets granulaires, des matrices de routage, des
mixers et des sorties sont utilisés (voir illustration ci-dessous). Sur l'illustration, à gauche la
partie fonctions et liaisons entre les différentes fonctions, à droite les paramètres de
chaque fonction.
Colin Bouvry
Page 16 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Illustration 17: Patch Audiomultch
Le patch Puredata permet de contrôler un ensemble de paramètres du patch audiomultch
via MIDI. Des métronomes sont utilisés (voir illustration ci-dessous).
Illustration 18: Patch Puredata
Colin Bouvry
Page 17 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Voici
un
sous-patch
permettant
de
contrôler
deux
voix
sonores.
Des fonctions aléatoires pour contrôler la panoramique, l'indicateur, le gel de
l'échantillonneur, et pour gérer la longueur et la densité du grain, sont utilisés (voir
illustration ci-dessous).
Illustration 19: Sous Patch PD Controller 1
Si vous voulez plus d'informations concernant la partie son, je vous invite à consulter
l'annexe partie «Nébulosa».
3.7
Captation
3.7.1
Introduction
Il y a 3 bornes interactives situées autour de la nébuleuse (voir images ci dessous).
En caressant la surface de la borne, la nébuleuse réagit et vous prenez ainsi le contrôle
d'une nébuleuse et il est ainsi possible de la déplacer.
Illustration 20: Borne interactive
Colin Bouvry
Illustration 21: Interaction
Page 18 sur 54
Stage de conception et de réalisation en design numérique sensoriel
3.7.2
Réalisation
Les bornes contiennent une webcam et un PC relié par wifi aux autres PC qui calculent la
nébuleuse. Le logiciel en question calcule la position de la main en traitant les informations
de la webcam et en transmettant les informations via wifi aux calculateurs de la
nébuleuse. Le logiciel est réalisé en C++ avec la librairie OpenCV.
3.7.3
Contraintes
La lumière est constante dans le salon mais elle n'est pas contrôlable, cependant la
lumière à l'intérieur de la borne peut être contrôlée. Le logiciel doit donc être capable de
s'adapter à cette situation de lumière.
Plusieurs mains peuvent être posées sur la borne, le logiciel doit être capable de traiter 2
mains.
3.7.4
Détection
Avec aucune lumière dans la borne, et une lumière ambiante autour de la borne, la main
posée sur le plexiglas apparaît très nettement sur les images de la webcam située dans la
borne. Avec un verre poli ou du calque placé sur la surface, cela a pour effet de diffuser et
de réfléchir la lumière et donc de modifier l'opacité de la surface. Cette technique permet
de varier la sensibilité de la détection selon la proximité de la main au dessus de la
surface. Plus la surface est opaque, plus la main doit y être proche pour qu'elle soit
détectée correctement. Ce principe doit être bien réglé pour éviter de détecter la manche.
Cependant, pleins de cas sont possibles : des manches longues, courtes, pendantes et de
toutes sortes de couleurs mais ces différents cas ne sont pas très gênants pour
l'interactivité et sont difficiles à traiter par logiciel. Ainsi ces cas peuvent être atténués avec
un réglage de l'opacité de la surface.
Le contraste de la main étant très élevé, une simple détection de mouvement basée sur
une soustraction de l'image de fond peut être utilisée.
Qu'est ce qu'une soustraction de l'image de fond ?
LECT URE
VIDEOS
DIFF
IMAGE
DIRECT
DU FOND
CONVERSION
COULEUR
EN GRIS
DEMARRAGE
SEGMENT AT ION
FILT RE
MEDIAN
AFFICHAGE
BUFFER
FOND
Illustration 22: Schéma d'extraction de mouvement
C'est une simple technique de détection de mouvement dans une scène statique.
Le principe est simple :
mouvement = abs(image[I]-referenceImage) > seuil
L'image de référence est enregistrée au démarrage de l'application dans un buffer.
La différence entre l'image courante et l'image de fond donne une information de
mouvement. Cette différence est ensuite seuillée pour avoir une image binaire afin de bien
identifier les parties en mouvement. Le filtre médian permet de supprimer des faux pixels.
Colin Bouvry
Page 19 sur 54
Stage de conception et de réalisation en design numérique sensoriel
3.7.5
Numérotation
Il est ensuite utile d'attribuer pour chaque région (blob) trouvée un numéro.
Pour avoir une cohérence dans la numérotation des mains en mouvements sur plusieurs
images, il est nécessaire que les mêmes mains aient le même numéro du début jusqu'à la
sortie du champ de vision de la caméra. Sauf cas particulier où plusieurs mains se
croisent et en forme plus qu'un, dans ce cas lors de leurs séparations une réattribution
aléatoire sera effectuée entre leurs numéros d'identifiant précédents. Pour numéroter les
régions, une classe d'étiquetage a été utilisé. Des régions parasites peuvent s'introduire
dans l'image. Ces parasites sont enlevés par filtrage selon leurs tailles.
3.7.6
Suivi de numéro
Pour éviter d'avoir des sauts de blobs, il faut que ces mêmes régions aient le même
identifiant au cours du temps. Les paramètres permettant de définir qu'une région est la
même sur deux images consécutives sont la distance inter-régions par rapport au centre
de gravité. Ce suivi fonctionne relativement bien.
3.7.7
Communication
Le but est de communiquer en temps réel aux logiciels qui calculent la nébuleuse, les
positions des mains. Le choix s'est porté sur le protocole OSC qui utilise l'UDP pour
transmettre en temps réel et pour être compatible facilement avec Puredata pour gérer
éventuellement du son interactif.
Le choix s'est porté sur la bibliothèque OSCpack.
Description de OSCpack :
Oscpack est un ensemble de classes C++ de paquets OSC. Oscpack inclut également
une petite bibliothèque de classes de gestion de réseau d'UDP pour Windows et POSIX
(Linux, OSX) qui sont suffisantes pour écrire beaucoup d'applications et serveurs OSC.
Une adresse IP, le numéro de port et l'adresse OSC sont configurés avant d'envoyer les
informations. Après avoir détecté tous les blobs voulus dans une image, le centre de
gravité du blob, normalisé par rapport à la dimension de l'image traitée, est envoyé sous
l'adresse « /blob ».
3.8
Résultats
La lumière ambiante autour d'une borne était très insuffisante d'où un dysfonctionnement
de la détection des mains. En effet, les mains n'étaient bien détectées que sur une moitié
de la surface. L'ensemble de l'installation a bien fonctionné avec quelques petits
problèmes de masques. Les masques permettent de projeter uniquement sur l'écran.
Cependant les écrans rétrécissaient avec la chaleur, du coup la lumière passait
légèrement en dessous de l'écran dans l'après midi.
3.9
Conclusion
Ce projet était très enrichissant comme première immersion aux niveaux de la
programmation informatique, techniques, des relations humaines, du travail en équipe.
C'était très éprouvant car le temps nous était compté et l'expérience me manquait dans ce
genre de travail et la fatigue se faisait ressentir. La prestation à Milan s'est très bien
passée, c'était un succès puisque les clients étaient contents. De nouveaux potentiels
clients étaient intéressés par ce genre d'installation. Cette installation évoluera sans aucun
doute !
Colin Bouvry
Page 20 sur 54
Stage de conception et de réalisation en design numérique sensoriel
4
Installation interactive « Détours d'objets »
Travaux de Claude Courtecuisse
Colin Bouvry
Page 21 sur 54
Stage de conception et de réalisation en design numérique sensoriel
4.1
Présentation
Installation numérique qui permet au public de reproduire de manière simple et intuitive la
démarche de Claude Courtecuisse.
Cette installation a été installée au centre Pompidou dans la galerie des enfants, et sera
exposée dans d'autres lieux à travers le monde.
Le visiteur dispose d’une cinquantaine d’images d’objets. Il est invité à constituer à partir
de 5 d’entre elles un tour, de façon virtuelle. Celle-ci est projetée en grand format, sur un
écran. Le public de l’exposition découvre en temps réel la tour créée, à la manière de
Claude Courtecuisse, par l’un de ses visiteurs.
Illustration 23: Empilement
d'images
L’utilisateur du dispositif peut se mettre en scène et se faire photographier pour intégrer,
en personne, un des éléments proposés.
Illustration 24: Photographie
Illustration 25: Photographie
vidéoprojetée
Il a également la possibilité de choisir un mot qui devient objet au moyen d’une interface
de saisie et qui peut rejoindre la collection d’objets.
Colin Bouvry
Page 22 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Illustration 26: Mots
A l’extérieur du dispositif, un écran rediffuse en permanence et de manière aléatoire les
empilements conçus par les visiteurs.
Illustration 27: Diaporama
Le visiteur qui le souhaite peut récupérer chez lui via internet son image à l’aide d’un ticket
où figure l'adresse du site, ainsi qu'un code personnel.
Illustration 28: Ticket
Colin Bouvry
Page 23 sur 54
Stage de conception et de réalisation en design numérique sensoriel
4.2
Description de l'installation
Mise en route
Au démarrage du logiciel, une interface de configuration succincte permet de choisir via
des drapeaux le pays dans lequel la borne est installée (Si la borne est prévue pour une
itinérance). Cette interface permet également de choisir, le cas échéant, une imprimante
reliée au système.
Une autre interface permet ensuite de gérer la déformation de l'image dûe à la projection.
Un mode d'emploi est prévu. Une fois ces quelques ajustements effectués, l'interactivité
se met en route.
Phase 1
Prise de vue
Un marquage au sol invite le visiteur à venir se placer devant le dispositif, à une distance
optimale.
Quand un visiteur arrive devant le dispositif, celui-ci se déclenche aussitôt.
-
Le visiteur voit la projection de son image, inclue dans un cadre.
En dessous de ce cadre, un compteur est présent (sous la forme d'une barre de
progression par exemple).
Le visiteur dispose de quelques secondes pour prendre une pose qui lui convient.
Une fois le temps écoulé, la photo est prise.
Le visiteur ne peut pas refaire sa prise de vue, sinon en refaisant la queue.
Phase 2
Choix des objets
Le visiteur vient alors se placer devant la borne. Lui est présenté une grille comportant une
cinquantaine de photos d'objets parmi lesquels il devra en choisir 5.
Parmi ceux-ci, figure un cadre contenant la photo prise dans la phase précédente, figure
également une sorte d'icône (icône ABC par exemple) permettant d'accéder à une liste de
mots dans plusieurs langues. (Français, Anglais, Espagnol)
-
En dessous de l'écran, un Trackball permet de faire passer alternativement en
surbrillance les différents objets.
Le fait d'appuyer sur le bouton (situé en dessous de la boule) provoque la
disparition de l'objet sélectionné (mis en surbrillance) sur la borne puis son
apparition sur la projection.
Le dit objet apparaît sur la projection comme tombant sur les objets déjà présents.
Chaque objet est associé à un son. (l’animation est à préciser avec Gérard Chéron,
Beaubourg)
Colin Bouvry
Page 24 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Phase 3
Interface texte
Si le bouton est pressé alors que l'icône ABC est en surbrillance, une interface permettant
de choisir un mot parmi une vingtaine apparaît par dessus la grille d'objets.
-
L'utilisateur se voit proposé une liste, en dessous de laquelle différents drapeaux
permettent de passer d'une langue à une autre.
Une fois un mot choisi, celui-ci apparaît sur la projection comme intégré dans un
objet tombant lui aussi sur les objets déjà présents.
La grille d'objet réapparaît, l'utilisateur peut poursuivre.
Il est à noter que, dans le cadre d'une itinérance, c'est la langue choisie au démarrage de
la borne qui est présentée par défaut quand l'interface de choix de mot apparaît. Sinon
c'est en français que la liste apparaît, avec en dessous les drapeaux anglais et espagnols.
Phase 4
Impression du ticket et site web
-
Lorsque l'empilement est complété (une fois les cinq objets empilés), trois flashes
lumineux signalent la fin du processus.
En France, l'écran de la borne propose alors au visiteur d'imprimer oui ou non un
ticket (voir explication ci-dessous). En itinérance, c'est l'empilement lui-même que
l’on propose pour une impression.
Dans le cas d'une impression de ticket, celui-ci comporte une adresse et un code
personnel, qui permettent au visiteur de retrouver son empilement sur internet, sur le site
du Centre Pompidou.
A ce sujet un mini site web invite l’utilisateur à saisir son code afin d’afficher et de
télécharger son image.
Cette proposition d'impression est faite de manière graphique pour éviter des efforts
supplémentaires de localisation (traduction). On peut imaginer qu'une image d'imprimante
soit affichée, accompagnée d'une icône OUI et d'une icône NON (une coche verte, une
croix rouge).
Une fois l'impression terminée (ou si l'utilisateur a choisi de ne rien imprimer), la borne
retourne dans un état d'attente, état dont elle sortira dès qu'un autre visiteur se présente.
4.3
Objectif
Mon objectif consistait à concevoir le diaporama décrit après et à aider à l'installation.
Ce type de diaporama n'existant pas à ma connaissance, il devait être réalisé sur mesure
par programmation.
Colin Bouvry
Page 25 sur 54
Stage de conception et de réalisation en design numérique sensoriel
4.4
Diaporama
4.4.1
Introduction
Le diaporama permet de diffuser en permanence et de manière aléatoire les empilements
conçus par les visiteurs sur un écran plasma qui se trouve dans le hall d'entrée du centre
Pompidou.
Le diaporama affiche 2 images à la fois avec un balancement gauche droite successif. Il
affiche au minimum les 50 plus récentes, les images sont gardées au minimum une heure
après leur création. Une ambiance sonore accompagne les images lors de la diffusion.
Illustration 29: Diaporama
Le PC supportant le diaporama est connecté par réseau au PC de l'installation.
Une synchronisation d'images entre les deux PC est réalisée régulièrement pour mettre à
jour les images du diaporama. Cette synchronisation a été réalisée avec synchback.
4.4.2
Synchonisation
Le visiteur qui le souhaite peut récupérer chez lui via internet son image à l’aide d’un ticket
où figure l'adresse du site, ainsi qu'un code personnel. Une synchronisation d'images
entre le PC de l'installation interactive et le serveur ftp et le PC du diaporama a été mis en
place via un réseau éthernet.
La synchronisation est gérée avec SyncBack qui est installée sur l'ordinateur central.
Le logiciel de l'installation interactive crée l'image finale dans deux répertoires différents.
Un répertoire pour le diaporama et un répertoire pour le ftp.
Deux synchronisations sont donc réalisées.
4.4.3
Réalisation du diaporama
Le diaporama est particulier car il doit mettre à jour de nouvelles images et doit permettre
une mise en page spécifique. Il a donc été réalisé en C++ avec les librairies SDL,
SDL_image, SDL_config et SGE.
La vidéo a été gérée avec SDL notamment pour être compatible avec les images de type
SDL_Surface. SDL_Surface est le type d'image standard de la SDL, elle permet aussi
d'utiliser d'autres librairies compatibles avec ce format comme la librairie SGE.
SGE a été utilisée pour redimensionner des images sans aliasing.
SDL_config a été utilisée pour externaliser des paramètres dans un fichier INI permettant
ainsi la possibilité aux utilisateurs de changer la configuration, par exemple le temps entre
deux diapositives.
Colin Bouvry
Page 26 sur 54
Stage de conception et de réalisation en design numérique sensoriel
SDL_image a été utilisée pour lire des images dans n'importe quel format et pour couper
les images à la bonne taille.
Si vous voulez plus d'informations concernant l'installation, la configuration, le réglage et la
maintenance de l'installation « détours d'objets », je vous invite à consulter l'annexe partie
« Installation interactive Détours d'objets ».
4.4.4
Principe du diaporama
Le programme commence par lister toutes les images présentes dans le répertoire où se
trouvent les images à afficher. Le listage se fait avec la bibliothèque standard « io » avec
les instructions « _findfirst, _findnext et _findclose ». Ensuite, il fait un tri selon les dates
de création. Le programme supprime les images qui dépassent une heure à condition qui
en est au moins cinquante afin d'afficher les images les plus récentes tout en encombrant
peu le listing des images. Si le dossier présente des milliers d'images, cela peut avoir une
incidence sur le temps mis pour y créer un listing et par conséquent le diaporama risque
de mal fonctionner. C'est pour cette raison que les images sont supprimées.
Une fois le listing des images faites, un choix aléatoire dans la liste est réalisé avec les
conditions que ce ne soit pas une image identique de celle de l'autre côté et de celle
d'avant. Un découpage de l'image est réalisé avec l'instruction « SDL_BlitSurface » pour
retirer les bords noirs de l'image, suivi d'une transformation de l'échelle pour mettre en
page les images avec un bord en haut et en bas et aussi pour compenser la déformation
de l'écran plasma. L'écran plasma a une résolution 1024x768 en 16/9, ce qui se traduit par
un étirement de l'image. La transformation de l'échelle se fait avec l'instruction
« sge_transform » en utilisant le rendu interpolarisé, c'est le mode qui donne le meilleur
résultat mais qui est le plus lent (pas gênant). Pour afficher l'image sur l'écran, il est
nécessaire d'utiliser l'instruction « SDL_UpdateRect » sur la moitié de l'écran, ceci sert à
passer
la
partie
bufferisée
à
la
partie
visible.
L'opération décrite ci-dessus est répétée en alternant la partie gauche et la partie droite,
avec le timer « SDL_SetTimer » pour générer un événement périodique.
La mise en place de l'écran est gérée avec l'instruction « SDL_SetVideoMode » en mode
plein écran et en mode surface (2D).
4.5
Conclusion
Ce projet était très agréable, j'ai appris beaucoup de choses en programmation dans la
réalisation du diaporama, et en techniques d'installations. J'ai appris beaucoup d'astuces
pour
configurer
les
ordinateurs
lors
d'une
prestation.
Les relations humaines avec le personnel du centre Pompidou étaient très enrichissantes.
Je suis fière d'avoir participé à ce projet notamment d'avoir conçu ce diaporama dans le
hall du centre Pompidou visible de tous.
Colin Bouvry
Page 27 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Installation Immersive
Twisted Squaring (Quadrillage tordu)
5
Colin Bouvry
Page 28 sur 54
Stage de conception et de réalisation en design numérique sensoriel
5.1
Introduction
C'est une installation créée par David Remondeau dans le but de le vendre à des clients.
C'est en quelque sorte une démonstration et non pas une oeuvre à part entière avec une
démarche artistique.
5.2
Présentation
C'est une installation immersive composée de trois écrans (voir schéma ci-dessous)
interagissant avec les silhouettes des personnages en scène.
Illustration 30: Installation immersive Twisted Squaring
Cette installation plonge le visiteur dans un environnement 2D. Un quadrillage est projeté
sur plusieurs murs pour créer un espace immersif.
Le spectateur voit instantanément sa forme en deux dimensions grâce à la déformation
du quadrillage. Chacun de ses mouvements sont reproduits, ils sont captés par une
caméra (type webcam ou Infrarouge).
Nous avons la possibilité de paramétrer l’installation à la demande. En effet nous pouvons
gérer les nombres de lignes du quadrillage ainsi que rajouter une texture, une image ou
une vidéo permettant au visiteur de jouer avec sa silhouette en déformant l’image.
5.3
Objectif
Mon objectif était d'élaborer un logiciel en C++ permettant aux spectateurs de plonger
dans un univers où leur silhouette déforme une texture ou un quadrillage en temps réel.
Le programme gérera une caméra, il permettra de régler un ensemble de paramètres
importants et sera esthétique.
Colin Bouvry
Page 29 sur 54
Stage de conception et de réalisation en design numérique sensoriel
5.4
Réalisation
5.4.1
Introduction
L'installation a été réalisée entièrement en C++ avec les librairies OpenCV pour le
traitement des images afin d'extraire les silhouettes des personnages sur scène, SDL pour
gérer les images et l'affichage, et OpenGl pour générer le graphisme.
L'affichage a été géré avec la librairie SDL notamment pour être compatible avec les
images de type SDL_Surface. SDL_Surface est le type d'image standard de la SDL
présentant de nombreux avantages.
SDL_config a été utilisé pour externaliser des paramètres dans un fichier INI permettant
ainsi la possibilité aux utilisateurs de changer la configuration.
SDL_image a été utilisé pour lire des images.
5.4.2
Traitement d'images de la webcam
La captation est réalisée avec la librairie standart OpenCV notamment Cvcam
l'acquisition des images.
pour
Illustration 31: Captation main
J'ai élaboré un algorithme pour extraire le mouvement des personnages devant la
webcam. La webcam étant fixe, il a été construit sur une différence entre l'image courante
et l'image de fond (voir le résultat).
Colin Bouvry
Page 30 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Illustration 32: Résultat de l'extraction
de la main
5.4.3
Graphisme
Le graphisme obtenu est un quadrillage dynamique où sa hauteur varie en fonction du
résultat de la captation. La navigation de l'utilisateur dans le programme est prévue afin de
se déplacer et de cadrer l'affichage. Prenons comme exemple une main captée, les
résultats sont comme ci-dessous (sans texture, avec texture image et avec texture vidéo).
Texte 1: Quadrillage sans texture de la main
Colin Bouvry
Page 31 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Une image peut être mise en texture. L'image est lue avec la librairie SDL_Image et
chargée en texture avec la fonction « gluBuild2DMipmaps » d'OpenGl.
Texte 2: Quadrillage avec une photo en texture
La vidéo est gérée par la librairie Vidéo For Windows permettant de lire une vidéo au
format avi à la bonne cadence. Cette vidéo est ensuite plaquée en texture à chaque
image avec la fonction OpenGl « glTexSubImage2D ».
Texte 3: Quadrillage avec une vidéo en texture
Colin Bouvry
Page 32 sur 54
Stage de conception et de réalisation en design numérique sensoriel
5.4.4
Configuration
En tapant sur la touche F2, vous accédez à la fenêtre ci-dessous afin de configurer la
webcam. Cette fenêtre permet de régler la luminosité, le contraste, le gamma, la
saturation etc... Les fenêtres sont gérées par directShow par l'intermédiaire de la librairie
Cvcam d'OpenCV.
Illustration 33: Propriétés de la webcam
En tapant sur la touche F3, vous accédez à la fenêtre ci-dessous permettant ainsi de
régler la fréquence d'image, l'espace de couleurs et la taille de sortie. Ces paramètres
peuvent être aussi enregistrés dans le fichier INI pour qu'ils deviennent les valeurs par
défaut lors des prochaines exécutions du logiciel.
Illustration 34: Propriétés de format de flux
Colin Bouvry
Page 33 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Le fichier de configuration permet de charger des variables au démarrage du logiciel (voir
l'illustration ci-dessous). Le fichier de configuration est géré par la librairie SDL_Config.
Illustration 35: Fichier de configuration
5.5
Conclusion
Ce projet était très intéressant du point de vue programmation. Un mélange de traitement
d'image d'images et de design graphique avec OpenGl. Ce projet m'a renforcé
sérieusement mes compétences en logiciel. Cela m'a permis de tester, d'élaborer, de
construire et de créer un ensemble de fonctions intéressantes que je pourrai me resservir
à l'occasion d'un autre projet.
Colin Bouvry
Page 34 sur 54
Stage de conception et de réalisation en design numérique sensoriel
6
Colin Bouvry
Installation « Survireuse » de Moebius
Page 35 sur 54
Stage de conception et de réalisation en design numérique sensoriel
6.1
Introduction
L'évènement « les artistes cassent la baraque » organisé par l'association « A3 -art »sur
la place St sulpice a accueilli l'installation de Moebius dans une baraque pendant 2 jours.
D'après le dossier de presse c'est une manifestation, ouverte gratuitement à tous, qui
engendre des échanges privilégiés entre artistes et un large public.
Chaque édition permet de découvrir de nouveaux artistes, voir ou redécouvrir
ceux déjà appréciés lors des quatre éditions précédentes.
Une occasion de provoquer et de célébrer encore plus joyeusement la vitalité et la
création artistique dans sa diversité.
L'oeuvre est de l'artiste Moebius. Le logiciel est créé par l'association MusicToEye, la
construction de la cabine est de Mister QQ, le projet est géré par Stéphane Maguet et Igor
Novitzki.
6.2
Présentation
L'installation se présente sous la forme d'une cabine avec deux écrans, un écran à
l'extérieur pour le public et un grand écran à l'intérieur pour l'acteur. Le spectateur rentre
la tête dans la cabine à travers un rideau translucide et voit l'écran sur lequel son visage
apparaît en style de dessin et avec des tentacules qui poussent et qui s'agitent autour de
sa tête.
Illustration 36: Cabine
Le spectateur acteur, est plongé dans un univers de bande dessinée signé Moebius, avec
des mouvements lents et fluides accompagnés de voix qui lui parle et d'une ambiance
sonore apaisante. Le spectateur rentre ainsi dans un monde reposant, un monde de rêve
et peut s'amuser avec son image transformée et reflétée sur l'écran.
Illustration 37: Intérieur
Colin Bouvry
Page 36 sur 54
Stage de conception et de réalisation en design numérique sensoriel
6.3
Objectif
Mon objectif consistait à préparer, à choisir un éclairage infrarouge, à installer, à
configurer le matériel et à filmer et monter un petit reportage sur l'installation.
6.4
Déroulement
6.4.1
Préparation
L'installation comporte deux PCs : un pour une projection vidéo avec le vidéoprojecteur
Toshiba (voir plan de l'installation et la liste du matériel) et l'autre pour la cabine. Deux
écrans : un plasma grand format à l'intérieur de la cabine et un petit LCD pour les
spectateurs autour de l'installation. Les deux écrans sont branchés sur la même carte
graphique sur ses deux sorties. Une caméra très sensible en niveaux de gris pour suivre
un visage en mouvement et pour l'incruster dans l'oeuvre. La caméra sort un signal vidéo
composite PAL, une carte d'acquisition vidéo externe ou interne à la carte graphique est
donc nécessaire. L'éclairage infrarouge permet d'améliorer les ombres sur le visage tout
en gardant l'obscurité dans la cabine. Des enceintes amplifiées sont utilisées en stéréo
pour restituer l'ambiance sonore et les voix.
6.4.2
Plan de l'installation
Illustration 38: Schéma technique de l'installation
Colin Bouvry
Page 37 sur 54
Stage de conception et de réalisation en design numérique sensoriel
6.4.3
Liste du matériel
●
PC avec une bonne carte graphique
●
Écran PLASMA Panasonic + support
●
Ecran LCD THOMSON + alimentation
●
Paire d'enceintes amplifiées GENELEC
●
Caméra très sensible (domaine visible et IR)
●
Carte d'acquisition
●
PC shuttle pour la projection
●
Vidéoprojecteur Toshiba TLP-X4500 + télécommande + cordon alim + boîte cordons
●
3 projecteurs IR + 3 transfos réglables
●
cordon audio minijack vers 2 XLR ( 5m)
●
sangles pour attacher le vidéoprojecteur
●
2 claviers, 2 souris
●
2 câbles VGA 2m, un VGA 5m et 2 de 15m
●
2 adaptateurs VGA/DVI
●
un câble vidéo composite RCA + adaptateur BNC/RCA
●
7 câbles secteur
●
5 multiprises + 2 rallonges
●
un routeur wifi + 3 câbles droit réseaux
6.4.4
Configuration
L'ordinateur est configuré en mode clone pour la vidéo. VNC est installé sur les deux PC
en serveur pour pouvoir les contrôler à distance depuis un ordinateur portable afin de
faciliter l'accès. Un routeur WIFI est utilisé pour créer un réseau sans fil entre les deux
ordinateurs et les portables.
6.4.5
Éclairage infrarouge
L'éclairage a été réalisé avec un circuit imprimé, quatre vingt leds IR soudées, quatre
résistances, un boîtier, un connecteur d'alimentation et un transformateur en continu.
6.5
Conclusion
C'était une très bonne expérience que je souhaite à tout le monde. Cette mission était un
mélange de technicité : construction électronique, installation et configuration de matériel
mais aussi de très belles rencontres et d'expérience vidéo dans le tournage et le montage.
Colin Bouvry
Page 38 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Simulation d'une Installation Interactive de
Feux pour le musée des pompiers de Saragosse
7
Colin Bouvry
Page 39 sur 54
Stage de conception et de réalisation en design numérique sensoriel
7.1
Introduction
Ce projet est une simulation pour le concours du musée des pompiers à Saragosse pour
« Gérard Cholot » designer. Cette simulation en image de synthèse représente une pièce
avec 6 projections sur le thème des pompiers et une projection de feux sur tout le sol qui
est capable d'interagir avec les spectateurs. Cette animation permettra de présenter le
projet au concours et de renforcer la compréhension du projet.
7.2
Objectif
Mon objectif consistait à créer une animation représentant la pièce réelle avec des
projections sur les écrans et différents scénarios de feux interagissant avec les
spectateurs.
7.3
Réalisation
L'animation est réalisée avec 3dsmax 9 et Character Studio pour l'animation des
personnages. Les effets de feux sont réalisés avec After Effect et les plugins BCC Fire et
Realviz Retimer.
Les mouvements des personnages sont réalisés avec l'outil Motion Mixer de Character
Studio permettant ainsi de mixer des fichiers de Motion capture (.bip ou .bvh). Les fichiers
de mouvements utilisés proviennent de la collection « Motion DAG Capture-Collection
Biped Files ». Le mixage permet de couper, déplacer, changer la vitesse et de placer
plusieurs mouvements différents à la suite en gérant leurs transitions (voir schéma cidessous).
Illustration 39: Motion Mixer
7.4
Conclusion
C'était une bonne expérience dans l'infographie 3d et les effets spéciaux notamment dans
l'apprentissage de Character studio et de afterEffect. Quelques problèmes techniques
dans le feux et l'animation de personnage ont du être surmontés pour satisfaire le
designer Gérard Cholot très content du résultat final.
Colin Bouvry
Page 40 sur 54
Stage de conception et de réalisation en design numérique sensoriel
8
Colin Bouvry
Simulation Éclairage banque populaire
Page 41 sur 54
Stage de conception et de réalisation en design numérique sensoriel
8.1
Introduction
La banque populaire désire éclairer sa façade de verre pour 1 semaine fin décembre
pendant la période des fêtes. Elle demande à Numeriscausa de faire des propositions et
un devis en ne dépassant pas la somme de 15000 euros.
8.2
Objectif
Mon rôle était de créer des simulations d'éclairage de la banque populaire et de proposer
des solutions.
8.3
Réalisation
Les simulations sont réalisées avec Photoshop pour souder deux photos afin d'obtenir une
vue panoramique et AfterEffect pour élaborer des animations de lumières.
L'animation ci-dessous représente un coeur rouge qui bat avec une lumière qui diminue
progressivement jusqu'au centre et qui augmente jusqu'à l'extérieur.
Illustration 40: Coeur au début de l'animation
Illustration 41: Coeur au milieu de l'animation
L'animation ci-dessous est une chenille bleue turquoise sur fond bleu qui traverse les
fenêtres .
Illustration 42: Chenille 1
Colin Bouvry
Page 42 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Illustration 43: Chenille 2
L'animation ci-dessous représente trois couleurs qui changent aléatoirement de couleur
toutes les secondes. Cet effet a été réalisé avec des scripts Aftereffect pour changer la
couleur aléatoirement.
Illustration 44: Aléatoire
L'animation suivante représente deux barres vertes horizontales et verticales se croisant à
des endroits différents.
Illustration 45: Barres vertes
8.4
Conclusion
Cette simulation était encore une fois une bonne expérience, dans l'approfondissement
d'Aftereffect notamment dans la programmation de scripts.
Colin Bouvry
Page 43 sur 54
Stage de conception et de réalisation en design numérique sensoriel
9
Conclusion
Ce stage était très positif, s’est très bien déroulé dans l'ensemble avec parfois des
difficultés que j'ai su surmonter , il m’a été bénéfique en de nombreux points. Il m'a permis
d'approfondir mes connaissances dans les domaines de la programmation C++ orientée
image et vision, de l'installation, de la postproduction et de la communication pour des
projets multimédias.
Tous les projets m'ont été bénéfiques, m'ont apporté du savoir, de l'expérience et me
rendent service. J'ai pris du plaisir dans la plupart des projets et je m'y suis investi.
Enfin, une expérience en entreprise de 24 semaines heureuse qui me motive à continuer
dans ce domaine. D'ailleurs des possibilités de travaux s'offrent déjà à moi après mon
stage, ce qui concrétise mon rêve professionnel. Les nouveaux médias se développant de
plus en plus, je pense que Numeriscausa aura un bel avenir !
Colin Bouvry
Page 44 sur 54
Stage de conception et de réalisation en design numérique sensoriel
10
Colin Bouvry
Annexes
Page 45 sur 54
Stage de conception et de réalisation en design numérique sensoriel
10.1
10.1.1
Installation interactive « Détours d'objets »
Travaux de Claude Courtecuisse
Installation du diaporama
10.1.1.1
Introduction
Le diaporama permet de diffuser en permanence et de manière aléatoire les empilements
conçus par les visiteurs sur un écran plasma qui se trouve dans le hall d'entrée du centre
pompidou.
Le diaporama affiche 2 images à la fois avec un balancement gauche droite successif. Il
affiche au minimum les 50 plus récentes, les images sont gardées au minimum une heure
après leur création. Une ambiance sonore accompagne les images lors de la diffusion.
10.1.1.2
Consignes d'installation
Les consignes d'installations ci-dessous sont faites pour le système d'exploitation
Windows XP.
10.1.1.3
Compte utilisateur
Tout d'abord, il faut un compte administrateur avec le mot de passe (même si lors de
l'allumage de l'ordinateur, ça se logue automatiquement) afin de pouvoir créer des tâches
planifiées. Si vous avez pas le mot de passe, il faut créer un compte administrateur :
panneau de configuration -> comptes d'utilisateurs -> créer un nouveau compte
Nommez le nouveau compte , choisissez le type de compte « administrateur de
l'ordinateur » et créez un compte.
Utiliser autologon.exe (très simple d'utilisation) dans le pack pour se connecter
automatiquement à la cession créée. Voir ci-dessous.
Illustration 46: Autologon
10.1.1.4
Installation du diaporama
Choisissez ou créez un répertoire pour installer les logiciels.
Copiez le répertoire bin dans le PackDiaporama vers le répertoire de destination.
Colin Bouvry
Page 46 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Créez des raccourcis des exécutables « DiaporamaRemovePingPong.exe » et
« SONDIAPOBBG.exe » Ces raccourcis mettez les dans le répertoire de démarrage pour
un démarrage automatique. (voir ci-dessous)
Illustration 47: Démarrage
Le répertoire images doit être impérativement à côté de l'exécutable du diaporama.
C'est dans ce répertoire que la synchronisation des images doit être réalisée.
10.1.1.5
Configuration du réseau
Tout d'abord, il est nécessaire de configurer le même groupe de travail sur les 2
ordinateurs. Clique droit sur poste de travail -> propriétés et onglet nom de l'ordinateur.
Sur modifier... mettre le nouveau groupe de travail « OBJETS » par exemple.
Ensuite, il faut partager le dossiers images contenant les images du diaporama.
Colin Bouvry
Page 47 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Pour cela clique droit sur le dossier images et cliquez sur partage et sécurité...et partagez
Illustration 48: Partage
ce dossier sur le réseau et autorisez les utilisateurs réseau à modifier mes fichiers (voir
illustration ci-dessous).
10.1.1.6
Écran de veille
Clique droit sur le bureau -> propriétés -> onglet écran de veille
Enlevez l'écran de veille, et dans gestion de l'alimentation mettez jamais dans tous les
menus déroulants pour éviter d'éteindre le disque dur et le moniteur.
10.1.1.7
Extinction automatique de l'ordinateur
Pour éteindre automatiquement l'ordinateur, vous pouvez utiliser une tâche planifiée.
Panneau de configuration -> Tâches planifiées -> Création d'une tâche planifiée
Créez une tâche avec shutdown.exe qui se trouve dans le répertoire
C:\WINDOWS\system32\ ensuite configurez l'extinction au moment désiré.
Colin Bouvry
Page 48 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Allez ensuite dans les propriétés de la tâche créée (voir ci-dessous), et rajoutez -s et -f
pour mettre l'ordinateur hors tension et pour forcer les applications en cours d'exécution à
s'éteindre.
Illustration 49: Tâche planifiée shutdown
Si vous voulez avoir plus d'informations concernant les commandes de shutdown, allez
dans la console et faites « cd C:\WINDOWS\system32\ » et tapez shutdown ?/ pour avoir
les informations ci-dessous.
Illustration 50: Commandes de shutdown
Colin Bouvry
Page 49 sur 54
Stage de conception et de réalisation en design numérique sensoriel
10.1.2
Installation de la synchronisation
10.1.2.1
Introduction
Le visiteur qui le souhaite peut récupérer chez lui via internet son image à l’aide d’un ticket ou
figure l'adresse du site, ainsi qu'un code personnel. Une synchronisation entre le PC de
l'installation interactive et le serveur ftp et le PC du diaporama doit être mis en place.
La synchronisation sera gérée avec SyncBack et sera installée sur l'ordinateur central.
Le logiciel de l'installation interactive crée l'image finale dans 2 répertoires différents. Un répertoire
pour le diaporama et un répertoire pour le ftp.
2 synchronisations sont réalisées.
Synchro diaporama :
Créez un type de profil « synchronisation » et choisissez pas de ftp pour la synchro avec le
diaporama. Choisissez le répertoire à gauche et à droite et suivez l'assistant.
Paramétrez une synchronisation toutes les minutes avec une tâche planifiée et les décisions
comme ci-dessous.
Les décisions ci-dessous permettent de faire un miroir entre 2 répertoires (toutes les décisions
suggérées ci-dessous ne sont pas obligatoires).
Illustration 51: Décisions pour la synchronisation
Synchro ftp :
Créez un nouveau profil avec une synchronisation ftp, avec une tâche exécutée toutes les
minutes. Créez des décisions qui copient simplement les images vers le serveur ftp.
Colin Bouvry
Page 50 sur 54
Stage de conception et de réalisation en design numérique sensoriel
10.1.3
Configuration du diaporama
Ouvrez le fichier diaporama_current.cfg avec le bloc-notes, et vous pouvez changer
l'intervalle de temps entre deux diapositives.
Exemple : interval = 2
Une nouvelle image apparaîtra au bout de 2 secondes d'un côté et au bout de 4 secondes
de l'autre côté.
Illustration 52: Configuration du diaporama
10.1.4
Réglage de la synchronisation
Pour régler la synchronisation, il faut ouvrir SyncBackSE et clique droit sur le profil de
transfert de fichier. Ensuite sur le menu «Quand » vous pouvez modifier la tâche planifiée.
10.1.5
Réglage de l'extinction automatique de windows
Dans Panneau de configuration -> Tâches planifiées
Ensuite double cliquez sur shutdown. Dans l'onglet planification, vous pouvez régler les
jours planifiés et l'heure de l'exécution (voir illustration ci-dessous).
10.1.6
Symptômes
En cas de problèmes sur le diaporama ou sur la synchronisation, consultez la
documentation ci-dessous.
Colin Bouvry
Page 51 sur 54
Stage de conception et de réalisation en design numérique sensoriel
Symptômes
Causes
Solutions
Le diaporama ne
s'affiche pas.
Un événement dans
Vérifiez que la case de vérification des
windows le fait sortir du raccourcis du bureau non utilisés soit
mode plein écran.
décochée, que la mise en veille soit
désactivée et que l'alimentation soit toujours
activée (clique droit sur le bureau et
propriété).
Pour remettre le mode plein écran,
sélectionnez et cliquez sur la fenêtre réduite
du diaporama se situant dans la barre des
tâches.
Au démarrage,
plusieurs logiciels sont
lancés en même temps,
ce qui empêche
l'affichage plein écran.
Utilisez un fichier .bat avec les noms des
logiciels et un l'exécutable sleep avec en
paramètre le nombre de seconde avant de
lancer le deuxième logiciel
exemple :
SONDIAPOBBG.exe
sleep 5
Diaporama.exe
L'écran n'est pas
allumé
Allumez l'écran manuellement.
Le diaporama ne se
Il manque les
lance pas au démarrage raccourcis dans le
de windows.
dossier démarrage.
Créez un raccourci du fichier go.bat et le
mettre dans le dossier démarrage (démarrer,
tous les programmes, clique droit démarrage,
choisir explorer).
Windows ne se logue
pas automatiquement.
Vous devez saisir un
mot de passe au
démarrage.
Utilisez un logiciel comme « autologon » très
simple d'utilisation.
La et/ou les
synchronisation(s) ne
fonctionne(nt) pas.
Serveur ftp défectueux Vérifiez si la connexion ftp ou réseau
ou accès vers
fonctionne. Demandez un accès des
l'extérieur non autorisé. ordinateurs vers l'extérieur au service
informatique.
La synchroftp et/ou la
synchro diaporama
dans le planificateur
des tâches sont
absentes.
Mettre dans le planificateur des tâches la
synchroftp et/ou la synchro diaporama.
Mettre le(s) mot(s) de passe dans les tâche(s)
Mot de passe dans le(s) planifiée(s). Ensuite vérifiez l'exécution des
tâche(s) planifiée(s)
tâches dans synchbackSE.
absente(s) ou le mot de
passe de la cession
windows a été modifié.
Colin Bouvry
Page 52 sur 54
Stage de conception et de réalisation en design numérique sensoriel
10.2
Nebulosa
10.2.1
PD -> MIDI -> Audiomulch configuration
1) Download
•
•
•
download puredata (PD) from http://puredata.info/downloads - the system has been tested
with pd-extended for windows v 0.38.4
download virtual midi cable http://www.hurchalla.com/Maple_driver.html to make
applications talk via midi in the same computer
audiomulch (you know that)
2) Install
•
•
•
double click on the PD installer, everything automatic
unzip and double click on the virtual midi cable. Reboot.
Audiomulch: double click
3) Using the software
please follow the exact order – pd might interfere with the audio buffer of audiomulch so
audiomulch should always be started first
3.1) start audiomulch
• Doubleclick on the patch named test2.amh
• configure audiomulch: edit/settings/midi control -> select Maple Midi In: Port 1
• configure audiomulch: edit/settings/midi sync -> maple midi 1 in both fields
• start the audio on audiomulch (click on speaker icon)
• start midi on audiomulch (click on cable icon)
3.2) start PD
• Doubleclick on the patch named midicontroller.pd
• Configure PD: media/midi settings -> set output device 1 to “maple midi out: port 1” and
press ok. Note: you might need to do this step each time you restart PD since it does not
remember the midi device that you should use. Also please note that before restarting
PD you need to close ALL opened PD windows.
4) explanation of the patch
The patch is randomly controlling the Inskip parameter of the audiomulch object BubbleBlower_1.
Inskip has 2 values (max and min), if you right click over the Inskip slide and then Parameter
Modulation… you will see this
Colin Bouvry
Page 53 sur 54
Stage de conception et de réalisation en design numérique sensoriel
As you can see the Minimum is controlled by channel 1 control number 3. This corresponds to
the PD object [ctlout 3 1]. The maximum is controlled by Channel 1 control number 2 (pd
object is [ctlout 2 1].
If you go on the PD patch and click the toggle “click here to spin” you will start hearing
panning effect applied on channel 1-2. You can see the relative MIDI mapping if you right click
on the slide of the audiomulch object called Frosscader_1.
If you can make this patch work, then we only need to do the sound design and optimize
computation and CPU load to the machine we will use.
Best
Enrico
Colin Bouvry
Page 54 sur 54