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