====== Design Graphique et évolutions technologiques. ====== * Nom de l'étudiant: Bonnet Jean-Alexis * Date: 2020-2021 * Lien vers le karma: [[wiki:karma:jean-alexis-bonnet:accueil|Jean-Alexis Bonnet]] ---- {{ :wiki:accreditations:jean-alexis-bonnet:accred_2.0.pdf |}} {{ :wiki:accreditations:jean-alexis-bonnet:bonnet-accreditation.pdf | Accrédiation ancien model}} {{ :wiki:accreditations:jean-alexis-bonnet:art_numerique.pdf |Pratique numérique}} ---- ===== Construction ===== ==== Problématique: ==== **En quoi le progrès technique et les nouvelles technologies modifient le rapport du Designer graphique à ses procédés de création d'usages.** ==== Intro: ==== La notion de savoir d’usage se réfère à la connaissance qu’a un individu ou un collectif de son environnement immédiat et quotidien, en s’appuyant sur l’expérience et la proximité, ce savoir est en constante évolution. Le domaine du design graphique à subit de nombreux changement depuis le 19ème siècle, la presse typographique, le déploiement de la photographie, puis l'offset ont transformé les procédés de créations du graphiste. Mais c'est, avec l'avènement de l'informatique et de l'ordinateur, que ce métier a le plus été chamboulé. Je cherche au travers de ce mémoire à m’interroger sur les transformations futures qu'aura à anticipé le graphiste dans ces procédés de productions, d'expositions, de diffusions et d'archivages de ces travaux. Pour cela nous chercherons a comprendre comment évolue la demande de création graphique, quels domaines du design graphique se démocratisent au public et quels autres marquent encore la valeur ajouté du créateur graphique, tout en mettant en parallèle l’évolution constante des technologie pouvant parfois cloisonner la création du designer ou au contraire affirmer l'identité de sa création. ==== Plan: ==== ---- ===== Définitions ===== ==== Technologie: ==== ==== Numérique: ==== **Design Génératif:** Le design génératif est un processus de design itératif qui implique un programme qui va générer un certain nombre de sorties répondant à certaines contraintes, et un designer qui affine un espace de recherche par le changement des valeurs minimales et maximales d'un intervalle. Dans cet intervalle, une variable du programme répond à l'ensemble des contraintes, dans le but de réduire ou d'augmenter le nombre de sorties à partir desquelles choisir. Le programme n'a pas besoin d'être exécuté sur une machine comme un ordinateur numérique, il peut être exécuté par un humain, par exemple avec un stylo et du papier. Le concepteur n'a pas besoin d'être un humain, il peut être un programme de test dans un environnement de test ou une intelligence artificielle . (src: [[https://fr.wikipedia.org/wiki/Design_g%C3%A9n%C3%A9ratif|wikipedia]]) Une autre définition bien plus précise a été réalisé par Stéphane Noël sur [[http://arts-numeriques.codedrops.net/spip.php?page=article&id_article=371|son site]] **Machine de Turing:** Une machine de Turing est un modèle mathématique imaginé par Alan Turing en 1936 qui décrit le fonctionnement des appareils de calcul en vue de donner une définition précise au concept d’algorithme ou de « procédure mécanique ». Elle est composée d’un ruban infini divisé en cases consécutives, d’une tête qui peut se déplacer, lire et écrire les symboles sur le ruban, d’un registre d’état qui mémorise l’état courant de la machine et d’une table d’actions qui indique à la machine quel symbole écrire sur le ruban. Tout problème de calcul fondé sur une procédure algorithmique peut être résolu par une machine de Turing. (src: [[http://www.revue-backoffice.com/numeros/02-penser-classer-representer/jean-lassegue-grilles-rubans|Revue BackOffice]]) **Programmation:** La programmation informatique désigne l’ensemble des activités impliquées dans l’écriture des programmes numériques, c’est-à-dire la rédaction de codes source dans des langages de programmation spécifiques. Les codes sources des programmes sont ensuite compilés pour être convertis en langage machine (binaire) pouvant être exécuté par un ordinateur. (src: [[http://www.revue-backoffice.com/numeros/02-penser-classer-representer/jean-lassegue-grilles-rubans|Revue BackOffice]]) **Interface:** Une interface agit comme une jonction entre deux objets distincts, leur permettant d’interagir par un ensemble de règles définies. Dans le champ du numérique, il peut s’agir d’interfaces utilisateurs permettant à un être humain d’interagir avec un ordinateur (en utilisant, par exemple, des représentations visuelles d’objets virtuels, cf.Interface graphique utilisateur), de protocoles de communication entre logiciel et périphérique matériel (pilote) ou encore entre logiciels (API). (src: [[http://www.revue-backoffice.com/numeros/02-penser-classer-representer/jean-lassegue-grilles-rubans|Revue BackOffice]]) **Numérique:** Dans le contexte de l’informatique, le terme numérique, en anglais « digital », désigne un objet virtuel (texte, nombre, image, donnée, programme, etc.) encodé sous forme binaire, c’est-à-dire d’une suite de bits à l’état 0 ou 1. Plus généralement, ce terme qualifie l’ensemble des contenus ou activités liés à l’utilisation d’ordinateurs. (src: [[http://www.revue-backoffice.com/numeros/02-penser-classer-representer/jean-lassegue-grilles-rubans|Revue BackOffice]]) **Encodage:** L’encodage correspond au processus de transcription d’un message textuel ou de données suivant des conventions spécifiques. L’Unicode (1987) est, par exemple un système standardisé d’encodage des caractères attribuant un identifiant numérique unique à chaque glyphe afin d’en garantir le bon affichage, quel que soit la plateforme informatique ou le logiciel utilisé. (src: [[http://www.revue-backoffice.com/numeros/02-penser-classer-representer/jean-lassegue-grilles-rubans|Revue BackOffice]]) **Algorithme:** Un algorithme, de façon générique, est une suite linéaire d’instructions univoques permettant de transformer des données initiales en un résultat attendu. Pour être compris par une machine, un algorithme doit être traduit en langage informatique. (src: [[http://www.revue-backoffice.com/numeros/02-penser-classer-representer/jean-lassegue-grilles-rubans|Revue BackOffice]]) **Cybernétique:** La cybernétique (du grec kubernêtês : pilote, gouverneur) est un terme proposé en 1947 par le mathématicien Norbert Wiener pour caractériser une science du contrôle des systèmes naturels ou artificiels, basée sur l’informatique. Elle manipule des notions comme l’équilibre (et l’entropie), le système (piloté), la boîte noire (black box), la rétroaction (feedback) et l’information (théories du signal, relations input/output). (src: [[http://www.revue-backoffice.com/numeros/02-penser-classer-representer/jean-lassegue-grilles-rubans|Revue BackOffice]]) **Aléatoire:** En informatique, un phénomène aléatoire se caractérise par l’impossibilité théorique d’en prédire la survenue. Généralement dicté par une loi de probabilité, l’aléatoire diffère du hasard dont l’imprévisibilité dépend de facteurs extérieurs à l’observateur. (src: [[http://www.revue-backoffice.com/numeros/02-penser-classer-representer/jean-lassegue-grilles-rubans|Revue BackOffice]]) ==== "Prolétarisation" ==== ---- ===== Bibliographie ===== {{:wiki:accreditations:jean-alexis-bonnet:eg5qrl7woae2nsz.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:coder_le_monde_couv_hyx.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:1504270164-1.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:41jmw9-hedl._sx327_bo1_204_203_200_.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:51efpqz8bbl._sx300_bo1_204_203_200_.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:418pcfhq3ul._sx359_bo1_204_203_200_.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:000626232.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:51726i4zwzl._sx323_bo1_204_203_200_.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:1528335019_9782130628378_v100.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:27397259859_f71e6febf8_b.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:30388266503.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:experience-esthetique-des-lieux.jpg?200|}} ---- ===== Iconographie===== ==== Schultzschultz Graphic ==== Le codage au service du graphisme et de la typographie. (images GIF) {{:wiki:accreditations:jean-alexis-bonnet:game_of_life_type_2.gif?200|game of life 2.0}} {{:wiki:accreditations:jean-alexis-bonnet:scanner-01.gif?200|Scanner}} {{:wiki:accreditations:jean-alexis-bonnet:rasterize.gif?200|Rasterize}} {{:wiki:accreditations:jean-alexis-bonnet:mak_a.gif?200|Controller font}} {{:wiki:accreditations:jean-alexis-bonnet:mak_01_reduced.gif?200|Arduino font}} {{:wiki:accreditations:jean-alexis-bonnet:a-moving-01.gif?200|RGB move}} ==== Live Coding ==== Le Live coding est une technique de programmation basée sur l'utilisation de programmation interactive improvisée. Le Live coding est souvent utilisé pour créer des médias digitaux basés sur des sons et des images. Il est particulièrement représenté en musique assistée par ordinateur. Il combine musique algorithmique et improvisation. {{:wiki:accreditations:jean-alexis-bonnet:alex-mclean-96f632c1974148bda503316fd7b39a28.png?300|}} {{:wiki:accreditations:jean-alexis-bonnet:0017910286_0.jpg?300|}} {{:wiki:accreditations:jean-alexis-bonnet:maxresdefault.jpg?300|}} {{:wiki:accreditations:jean-alexis-bonnet:1_bupibxl8uvkplcerqfj4yq.jpg?300|}} ==== Casa da Música - Stefan Sagmeister ==== Identité visuelle de la “Casa da Música”. En créant ce logo, il crée aussi un logiciel utilisable pour n’importe quelle programmation (musicale). Il récupère également les couleurs des photos / peintures de l’artiste programmé, et en tire une gamme de couleur. (image GIF) {{:wiki:accreditations:jean-alexis-bonnet:498be8e9c747b3e2d286539a4c52b822.gif?600|}} ==== Eno Henze ==== Scénographe et artiste, mélangeant art et machine pour créer ses décors. {{:wiki:accreditations:jean-alexis-bonnet:248d1aacbf4643f47b1dd87885b42c5d.jpg?300|}} {{:wiki:accreditations:jean-alexis-bonnet:puls-by-eno-henze-1024x512.jpg?300|}} {{:wiki:accreditations:jean-alexis-bonnet:c4ac29bc287b45ce392d933dd38c3d0e.jpg?300|}} {{:wiki:accreditations:jean-alexis-bonnet:images.jpg?300|}} ==== Oscillon - Ben F.Laposky ==== Ben F. Laposky, mathématicien et artiste américain qui génère des visuels en manipulant des oscilloscopes. 1953 {{:wiki:accreditations:jean-alexis-bonnet:6-figure6-1.png?200|}} {{:wiki:accreditations:jean-alexis-bonnet:7-figure7-1.png?200|}} {{:wiki:accreditations:jean-alexis-bonnet:benflaposky-oscillon21.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:c4447a3ba33e411b847d5bbd9e083631--sound-design-cheap-designer.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:gca_ill35.jpg?200|}} {{:wiki:accreditations:jean-alexis-bonnet:zdzef.jpg?200|}} ==== Vanity ring - Markus Kison ==== Vanity ring est un anneau surmonté d’un minuscule panneau OLED. Une technologie simple et un écran d’affichage économe en énergie. Markus Kison a choisi d’y afficher ce qui constitue pour lui un des sommets contemporains de la vanité : le résultat en nombre de pages d’un “ego search”. {{:wiki:accreditations:jean-alexis-bonnet:unnamed.jpg?600|}} {{:wiki:accreditations:jean-alexis-bonnet:fdfgdfg.jpg?600|}} ==== John Maeda - 12 O’Clocks ==== Artiste, designer et chercheur au MIT, il base ses créations sur l’utilisation du code et forme, en ce sens, Benjamin Fry et Casey Reas, créateurs du logiciel processing. Maeda a aussi écrit plusieurs ouvrages de référence sur le code créatif et le design génératif. {{:wiki:accreditations:jean-alexis-bonnet:1acc8a9dfa88b5ab93da8d26fd93a95c.jpg?600|}} ==== donottouch.org ==== Vidéoclip interactif réalisé par [[https://puckey.studio/|le studio puckey (Jonathan Puckey)]] pour le morceau Kilo du groupe Light Light. "Avec Do Not Touch, nous célébrons le 50e anniversaire du pointeur d'ordinateur. Pendant des décennies, cette flèche omniprésente, mais discrète, a formé l'interface essentielle reliant l'utilisateur et l'ordinateur." [[http://donottouch.org/]] {{:wiki:accreditations:jean-alexis-bonnet:communicationmotiondesignstudiomonikerdonottouch.jpg?300|}} {{:wiki:accreditations:jean-alexis-bonnet:donottouch.jpg?300|}} {{:wiki:accreditations:jean-alexis-bonnet:tumblr_mlb4y5ae2q1qz9vlao2_1280.png?300|}} {{:wiki:accreditations:jean-alexis-bonnet:nu4de5.jpg?300|}} Il réalisa également un autre site internet jouant sur la localisation du pointeur de la souris (lorsque elle se fige une image apparaît avec une personne pointant du doigt ce pointeur). [[https://pointerpointer.com/]] ==== Zach Lieberman ==== Artiste et professeur basé à New York. Il crée de nombreux outils expérimentaux de dessin et d’animation, et des environnements interactifs qui invitent les participants à devenir des interprètes. Son objectif principal est de savoir comment le calcul peut être utilisé comme “support pour la poésie”. __Ses nombreux projets :__ -[[https://openframeworks.cc/|Co créateur d'openFrameword]] -[[https://lines.chromeexperiments.com/|Land ligns]] -[[https://experiments.withgoogle.com/ink-space|Créateur de inkspace]] //afin d'animer avec l'accéléromètre de son téléphone, des dessins.// -[[http://eyewriter.org/|Créateur de eyewriter]] capteur et logiciel permettant à un ancien graffeur paralysé d'utiliser ses yeux pour dessiner. -[[https://vimeo.com/5233789|Police de caractères réalisée en conduisant un véhicule]] -Créateur de filtres instagram, de programmes de VR et d’AR… ==== GauGAN - Nvidia ==== La société Nvidia développe actuellement un logiciel, permettant de “dessiner” des paysages. En effet grâce au deep-learning, nous pouvons actuellement envoyer des dessins type “paint vulgaire” et l’algorithme le transforme en paysage photo réaliste. Je vous laisse découvrir [[http://nvidia-research-mingyuliu.com/gaugan/|la version beta.]] {{:wiki:accreditations:jean-alexis-bonnet:b6e3c2dc7f369e6e9c462526c383a.jpg?600|}} Ces réalisations créés par un programme nous posent plusieurs questions sur l’évolution de l’art, du métier de photographe, ou encore des banques de donnés d’images payantes qui pourraient se faire dépasser par des programmes tels que celui-ci. ---- ===== Quelques vidéos ===== {{youtube>dcN9QXxmRqk?}} {{youtube>HVnXJf9_tTM?}} {{youtube>_8DMEHxOLQE?}} {{youtube>eBV14-3LT-g?}} {{youtube>bmztlO9_Wvo?}} {{youtube>4vYgUVEsDns?}} {{youtube>tKIVJ2TaS2k?}} {{youtube>99gMbK2QCKE?}} {{youtube>6rxWc-TNIJI?}} {{youtube>4FvjOFwU7bE?}} {{youtube>FqrHmKo-cm4?}} {{youtube>MvTSPwftvyo?}} {{youtube>-jRREn6ifEQ?}} {{youtube>LaarVR1AOvs?}} ---- ===== Sites WEB ===== === Code = Design ? === [[https://www.cnap.fr/code-design]] === Exemples design génératif === [[http://www.olivierevrard.be/master/design_generatif.htm]] [[http://nt2.uqam.ca/fr/delineaires/un-film-montage-generatif-au-musee-dart-contemporain-de-montreal| Film à montage génératif.]] === Exemples Processing === [[https://processingdrawings.tumblr.com/|Tumblr avec de nombreux programmes Processing.]] [[https://www.openprocessing.org/Site d'inspiration, regroupant de nombreux programmes exécutable sur processing.|]] [[http://www.generative-gestaltung.de/|Site regroupant tout les codes des livres Art Génératif.]] [[https://steemit.com/art/@granturismo89/how-to-make-amazing-glitch-art-with-processing-and-asdf-pixel-sort| Glitch Processing]] === Codage Machines d'Art === [[https://www.soonsoonsoon.com/fr/detections/lart-a-lere-des-machines-la-creation-a-lepreuve-de-lia/|L'art à l'ère des machines, la création à l'épreuve de l’intelligence artificielle ]] [[https://www.ted.com/talks/gil_weinberg_can_robots_be_creative#t-43041|Les robots peuvent-ils être créatifs?]] [[https://www.ted.com/talks/blaise_aguera_y_arcas_how_computers_are_learning_to_be_creative|Comment les ordinateurs, apprennent-ils à être créatifs?]] === Thèses / Mémoires === [[https://dumas.ccsd.cnrs.fr/dumas-01691771/document|Les débuts de l’art informatique en France ou la constitution d’un champ artistique autonome par le milieu universitaire.]] === Articles/ Recherches === [[http://nt2.uqam.ca/fr/dossiers-thematiques/lart-generatif| Quand la création flirte avec la programmation.]] [[https://www.jstor.org/stable/1578408?seq=1|Procedural Art with Computer Graphics Technology?]] MIT press. === Exposition === [[https://ars.electronica.art/news/| Ars Electronica,]] centre d'art numérique. ---- ===== Logiciels ===== [[http://ivan-murit.fr/works.php?w=texturing&p=texturing-fr.htm|TexTuring]] est un logiciel pour tramer des images avec des motifs de Turing. Ces trames sont paramétrables et donnent une variété de formes organiques. {{:wiki:accreditations:jean-alexis-bonnet:tumblr_nxrqya0knc1ukw6t6o1_1280-e1463487134649.jpg?600|}} [[https://processing.org/|Processing]] est un environnement de développement libre (sous licence GNU GPL), créé par Benjamin Fry et Casey Reas, deux artistes américains. {{:wiki:accreditations:jean-alexis-bonnet:processing-white-small.png?600|}} [[https://www.arduino.cc/en/main/software|Arduino Software]] utilisé pour transférer du codage sur des cartes Arduino. Les cartes Arduino sont des cartes destinées à la programmation orientée Objets. {{:wiki:accreditations:jean-alexis-bonnet:arduino-21586-1.jpg?600|}} [[https://p5js.org/|P5js]] est une bibliothèque JavaScript pour le codage créatif, avec pour objectif de rendre le codage accessible et inclusif pour les artistes, les concepteurs, les éducateurs, les débutants et quiconque! p5.js est gratuit et open-source. {{:wiki:accreditations:jean-alexis-bonnet:webcam_p5.jpg?600|}} [[https://www.nodebox.net/|NodeBox]] est un outil de Data Visualisation spécialisé dans les Big Data. Il permet également d’intégrer des notions artistiques ou de hasard dans son code. {{:wiki:accreditations:jean-alexis-bonnet:nbl-screenshot.jpg?600|}} [[https://puredata.info/|Pure Data]] est un langage de programmation visuel open source pour le multimédia. Pd-L2ork / Purr-Data est une distribution alternative avec une interface graphique remaniée et de nombreuses bibliothèques externes incluses. {{:wiki:accreditations:jean-alexis-bonnet:screenshot.jpg?600|}} [[https://gephi.org/|Gephi]] est le principal logiciel de visualisation et d'exploration pour tous types de graphiques et réseaux. Gephi est open-source et gratuit. {{:wiki:accreditations:jean-alexis-bonnet:preview4.png?600|}} ---- ==== FIXME ==== FIXME * Notes * Sitographie * Techniques * Iconographie * Bibliographie * Définitions * ... ---- ===== Entretiens ===== ==== Entretien Thomas ==== 31 mars 2020 Un sujet massif qu'il s'agit de dégrossir, la question centrale étant peut-être et à l'instar de László Moholy-Nagy celle d'une dynamique de la vie cybernétique (Wiener); autrement dit: "comment développer un art de vivre avec les machines?". * Texte de László Moholy-Nagy: http://www.multimedialab.be/doc/citations/moholy_nagy_design.pdf * Texte de Lev Manovich: http://manovich.net/content/04-projects/154-ai-aesthetics/manovich.ai_aesthetics_2018.pdf?fbclid=IwAR2gv1NugnAXaR8QfkPnrDntJAsNcp-B9ej0IliuI3_h7jmB44ln4lYuHYw * Iconographie: https://drive.google.com/drive/folders/1Zu1n7fjHxStGjhBOy-nquoUEsGBISi-M?fbclid=IwAR2LH6VzP0pjmlCOCDGIokPSq995w7gx-6-Fs0RyKi6KvqHvVzIdZmLv1IY * Édition originale: https://store.strelka.com/en/items/77?fbclid=IwAR29oKlJ6BdlA_jBnvusufPf-ghU3XRLWWEcfrC8INqR6BJ-FKzX6Pex6YM Vocabulaire: Stérile vs fécond - invention - ars & technè - automatisation - prolétarisation - désajustement technique - objet ouvert... À lire/voir: * Das Netz - https://www.dailymotion.com/video/xi1jcu * Norbert Wiener - Cybernétique & société * [[wiki:textes:objet-ouvert:objet-ouvert|Objet ouvert]] - Gilbert Simondon * La Société industrielle et son avenir - Theodore Kaczynski (Unabomber) Quelques ouvrages cités: * Annick Lantenois - Le vertige du funambule cf. Fabrice * William Morris - Art & artisanat cf. Fabrice * Paul Jorion - Le dernier qui s'en va éteint la lumière * Bertrand Gille - Histoire des techniques * Gilbert Simondon - Imagination & invention * Pekka Himanen - L'éthique hacker * Mc Kenzie Wark - Un manifeste hacker * Hakim Bey - TAZ ---- ==== Entretien Fabrice ==== 30 mars 2020 Le thème est très large et questionne l’usage de la programmation dans les pratiques artistiques. \\ Attention toutefois à bien appréhender le milieu du design en balisant territoire, usager, fonction... \\ Il semble judicieux de bien définir le pourquoi de l’usage ces pratiques ? dans quel(s) intérêt(s) ? Singularité ? réponse à une prolétarisation des outils ? compenser le désajustement technique (Bertrand Gille) ? \\ La dimension théorique est à étayer à avançant par étapes autour de pistes qui t’intéressent, ceci permettra de dégrossir le plan et de nous amener vers une problématique. \\ À voir : \\ Annick Lantenois : Le vertige du funambule \\ William Morris : L’art et l’artisanat \\ Stefan Sagmeister, Schultz Schultz