<i class="fa fa-tag"></i> StudioCréa Paris <i class="fa fa-clock-o"></i> 5-15 février 2019 ###### Tags: `StudioCréa Paris` `The Soft Machine` `Workshop` # The Soft Machine Workshop #001 The Soft Machine est une association à but non lucratif. Les membres fondateurs sont : Bernard Baissait, Nathalie Bazoche, Victoire Dubruel, Tom Bücher, Christophe Salaün. Elle a pour objet la création et la diffusion d’outils numériques dédiés à l’édition. www.thesoftmachine.org Présentation des enjeux et problématiques. === ![](https://i.imgur.com/lPwYEEd.png) **Sujet:** Re-présenter les espèces menacées, en voie d’extinction et/ou éteintes. **Outil:** http://dev.onoci.net/soft_machine/V2/ **Base de données proposée:** iucnredlist.org (base de donées des sons d'animaux: http://www.tierstimmenarchiv.de/) ## **Liste des critères** >**Région** >>Central Africa >Eastern Africa >Europe >Global >Gulf of Mexico >Mediterranean >Northeastern Africa >Northern Africa >Pan-Africa >Persian Gulf >Southern Africa >Western Africa > >**Kingdom** >>Animalia > >**Phylum: Classification** >>ANNELIDA, *Vers (Essentiellement dans les eaux)* >ARTHROPODA, *Scarabée* >CHORDATA, *Vertébre* >CNIDARIA, *Aquatique (Méduse/Coraux)* >ECHINODERMATA *Embranchement d’animaux marins (Étoile de mer, oursin, concombre de mer)* >MOLLUSCA, *Molusque* >NEMERTINA, *Vers aquatiques* >ONYCHOPHORA, *Vers de velours* >PLATYHELMINTHES, *Vers plats* > >**Class** >>ACTINOPTERYGII, Poissons à nageoires rayonnées >AMPHIBIA, *Reptiles (Crapeaux, grenouille)* >ANTHOZOA, *Coraux* >ARACHNIDA, *Arachnides (Araignées, scorpion)* >AVES, *Oiseaux (Corbeaux, perroquet)* >BIVALVIA, *Lépidoptères (huitre/oules)* >BRANCHIOPODA, *Crustacés (eaux douce)* >CEPHALASPIDOMORPHI, *Lamproies* >CEPHALOPODA, *Molusque (Pieuvres, méduses, calamars)* >CHILOPODA, *Mille pattes* >CHONDRICHTHYES, *Raie / requin* >CLITELLATA, *Vers de la terre ferme* >DIPLOPODA, *Diplopodes (vivent sous la pierre, sol et bois mort)* >ECHINOIDEA, *Echinides (Oursins)* >ENOPLA, *Vers aquatiques* >ENTOGNATHA, *Entognathes/Hexapodes* >GASTROPODA, *Scaphopoda (Molusque = Coquille)* >HOLOTHUROIDEA, *Gastéropodes (Coquille dorsale torsadée)* >HYDROZOA, *Espèce marine - Cnidaires* >INSECTA, *Insecte* >MALACOSTRACA, *Malacostraca (Crustacé)* >MAMMALIA, *Mammifères (Ours/Lyon)* >MAXILLOPODA, *Maxillopodes* >MEROSTOMATA, *Merostomata* >MYXINI, *Stomozoidae (Ver)* >ONYCHOPHORA, *Vers velours* >OSTRACODA, *Crustacés microscopiques* >POLYCHAETA, *Annélides (marins ou estuariens)* >REPTILIA, *Reptiles* >SARCOPTERYGII, *Sarcoptérygiens* >TURBELLARIA, *Vers plats* > >**Category** >>Critically Endangered, *En danger critique d'extinction* >Data Deficient, *Données insuffisantes* >Endangered, *En danger* >Extinct In The Wild, *Éteint à l'état sauvage* >Extinct, *Éteint* >Least Concern, *Préoccupation mineure* >Lower Risk: Conservation Dependent, *Risque plus faible: dépend de la conservation* >Near Threatened, *Presque menacée* >Vulnerable, *Vulnérable* > > >**image** >>avec image >sans image ## **Références:** swissdesignawards.ch/beautifulbooks/2017/index.html?lang=fr letterror.com/index.html quaternum.net/2018/04/04/une-reappropriation-des-donnees-par-leur-structuration cairn.info/revue-sciences-du-design.html letterror.com esono.com giorgialupi.com louiseveillard.com studiomitsu.com/recherche_9-magneto jean-boite.fr/product/google-volume-1-by-king-zog jasondavies.com/wordtree solar.lowtechmagazine.com veroniquebeland.com/Veronique_Beland/Projets.html claire-malrieux.com **Fonderie:** velvetyne.fr fonts.google.com open-foundry.com **Projets typographiques** http://letterror.github.io/responsiveLettering/www/ **Librairie traitement d'images** http://www.samcodes.co.uk/project/geometrize-haxe-web/ https://experiments.withgoogle.com/ http://paperjs.org/ https://p5js.org/ **Base sonore** http://bbcsfx.acropolis.org.uk/ Projets. === ## **MAI Thanh Tung** **Action et Disparition** La disparition des animaux est étroitement liée aux actions humaines. À travers ce projet, je souhaite que les téléspectateurs fassent un petit geste pour découvrir les informations cachées derrière les symboles. Il faut parcourir et filtrer à la main avec des feuilles des rhodoïd colorées. À travers celles-ci, l'information qui disparaît correspond à l'extinction des animaux de nos jours. **Link** :**https://we.tl/t-5cLwr0CHNG** Nouveau link :https://we.tl/t-Vo3hpE5fYM Nouveau Nouveau link avec fes fiches .svg :https://we.tl/t-oOgHrsvxmB > [name=tombucher https://lineto.com/The+Designers/Norm/] ``` Class. 1 : GASTROPODA 2 : ACTINOPTERYGII 3 : MAMMALIA 4 : REPTILIA 5 : INSECTA 6 : MAXILLOPODA 7 : BIVALVIA 8 : ARACHNIDA 9 : AMPHIBIA 10 : MALACOSTRACA 11 : BRANCHIOPODA 12 : ENOPLA 13 : CHONDRICHTHYES 14 : MEROSTOMATA 15 : CLITELLATA 16 : ECHINOIDEA 17 : ANTHOZOA 18 : CEPHALASPIDOMORPHI 19 : POLYCHAETA 20 : OSTRACODA 21 : SARCOPTERYGII 22 : ONYCHOPHORA 23 : TURBELLARIA 24 : CHILOPODA 25 : DIPLOPODA 26 : HYDROZOA 27 : MYXINI 28 : CEPHALOPODA 29 : HOLOTHUROIDEA 30 : AVES 31 : ENTOGNATHA Région. 1 : Northern Africa 2 : Eastern Africa 3 : Persian Gulf 4 : Europe 5 : Southern Africa 6 : Mediterranean 7 : Western Africa 8 : Central Africa 9 : Global 10 : Gulf of Mexico 11 : Pan-Africa 12 : Northeastern Africa Phylum. 1 : MOLLUSCA 2 : CHORDATA 3 : ARTHROPODA 4 : NEMERTINA 5 : ANNELIDA 6 : ECHINODERMATA 7 : CNIDARIA 8 : ONYCHOPHORA 9 : PLATYHELMINTHES Category. 1 : Critically Endangered 2 : Endangered 3 : Data Deficient 4 : Extinct 6 : Lower Risk: Conservation Dependent 7 : Vulnerable 8 : Near Threatened 9 : Least Concern 11 : Extinct In The Wild Image. 1 : avec image 2 : sans image Criteres 1 : Food 2 : medicine 3 : Manufacturing chemicals 4 : Fuels 5 : Wearing apparel, accessories 6 : Other household goods 7 : Handicrafts, jewellery, etc 8 : Pets/display animals, horticulture 9 : Research 10 : Sport hunting/specimen collecting 11 : Other ``` ## **Giru SHIN** **ANIMATONE** Il s'agit d'une système de couleurs pour représenter les animaux menacés. En s'inspirant de la "couleur de cette anée" de PANTONE elle leur hommage. chaque animal aura son couleur et les couleur seront presenté sur une site et un livret. **LIEN WETRANSFER** :https://we.tl/t-gWZbdueAUc **LIEN WETRANSFER**(couverture&index) :https://we.tl/t-KKafBt5ncV - [ ] peux-t-on afficher la valeur pantone correspondante? - [x] Ajtouer le nom de l'espèce en dessous de animatone - [x] je voudrais utiliser les font "Lato Regular"(pour texte) et "Lato Black"(pour titre) - [ ] au dessus du titre de chaque page écrire "Color that need to be preserved" - [ ] Taile : 43mmX235mm - [ ] classement par numero de pantone - [x] generer un index (par son nom) au debut de la liste - [x] je voudrais imprimer pdf en 4 page par une page A4 - [ ] Pour index, il faut numero de page à la fin de page (à gauche) ## **Garance BAUERNDISTEL** **SPAM** **ANIMAL NOT FOUND** De plus en plus d'espèces animales disparaissent sous nos actions et celles de notre société, volontaires ou non. C'est pourquoi j'aimerais immerger le spectateur dans la visualisation de ces données grâce à des animations dynamiques et interactives (apparition/disparition au survol / son / opacité / clignotements / couleurs) Ces animations seront plus ou moins prononcées en fonction des catégories : en danger, éteint etc... LIEN: https://we.tl/t-fMcPN8dWrg ********NOUVEAU LIEN ****** : https://we.tl/t-NlRtBlKw3P - [ ] je n'arrive pas à modifier la taille des images proportionnellement à leur catégorie ? - [x] apparence des images : modifier le type d'opacité, propriété : mix-blend-mode: difference; > [name=tombucher il faut cibler la classe ".garance-display .popup" et changer la propriété "mix-blend-mode: difference;" dans "css" sous le bouton "rechercher" dans "Flux Option"] - [ ] ajouter un timer : le rafraîchissement s'effectue aléatoirement d'après le timer et non plus au scroll - [x] pour l'instant les éléments apparaissent au clic, mais je préfererai que ça soit au survol - [x] afficher le texte clignotant (au milieu de la page en très grand)de la catégorie au survol pendant 5scds : exemple html/css https://we.tl/t-luQkc1EIqC la typo est dans le dossier c'est terminal_grotesk - [ ] possibilité d'ajouter des sons : https://we.tl/t-x2F62vTqi6 dossier avec chaque son correspondant à la "value" de chaque catégorie - [x] question: comment appliquer une propriété animate.css à un carré? > [name=tombucher regarde cet exemple: https://www.w3schools.com/css/css3_animations.asp] - [x] ajouter un border 1px solid white pour un effet "fenêtre" > [name=tombucher il faut cibler la classe et le tag ".garance-display .popup img" et ajouter une propriété "border: 5px solid #fff" dans "css" sous le bouton "rechercher" dans "Flux Option"] - [ ] répéter l'apparition des images : + de degré de gravité de la catégorie est important + il y aura de répétitions par exemple: extinct (value="4") : 8 réps critically endangered (value="1") : 7 réps endangered (value="2") : 6 réps vulnerable (value="7") : 5 réps near threatened (value="8") : 4 réps least concern (value="9") : 3 réps - [ ] la fenêtre windows "404" remplace l'image de base pour la catégorie "extinct" - [ ] je n'arrive pas à modifier le curseur (via une photo png) son-1.mp3 > [name=tombucher]![](https://i.imgur.com/igW1cTi.png) https://codepen.io/JefReb/pen/qXdmLm http://hadjithomasjoreige.com/scam/ https://raphaelbastide.com/ ## **Mélanie DAS NEVES / Anaïs DERET** **DE-CORPS-TIQUER / DE-ANIMALIS-TIQUER / DE-ANIMALIS-ER** Lorsqu’un animal disparait, notre cerveau commence à ne plus visualiser petit à petit son aspect physique, l’espèce disparue s’efface peu à peu de notre mémoire. Notre représentation des espèces disparues ( et vivantes ) se ferait par création de QR Code qui indiquerait à l’aide de languettes colorées ( reprenant le principe de la méthode cuisenaire ) les différentes catégories où se situe l’animal. - [x] ajouter le titre DÉ-CORPS-TIQUER (comment il apparaît position corps de caractère etc.) - [x] ajouter le nom de l'espèce + le code qui a permis de générer le signe **LIEN WETRANSFER** : https://we.tl/t-NTvP8DsVET ## **Christian BOTA / Sullyvan LABELLE** Nous allons comparer le nombre d’animaux identiques encore en vit, en voie d’extinction ou déjà éteint, entre l’Afrique du Nord, l’Afrique Centrale et l’Afrique du Sud. Afin de bien représenter visuellement ce projet sous forme de DATA, nous remplaceront ces différentes espèces par des formes géométriques et de couleurs. **LIEN** : https://we.tl/t-S9hsF6NAZ3 ## **Manon LECANTE** ### PROPOSITION TITRE : À travers les couleurs, les formes, et le son acoustique des animaux, j’aimerai traiter ces informations autour des espèces animales en voie de disparition, ou malheureusement déjà disparues. L’idée est de créer trois catégories distinctes, avec ces propres caractéristiques et sons. Design **simple** et **sonore**. **LIEN WETRANSFER** : https://we.tl/t-KasT44AqnH > [name=tombucher https://www.dailymotion.com/video/x26gno <br> https://i.pinimg.com/600x315/ec/cf/6d/eccf6db621c299608c32a3fd3818023f.jpg] > [name=Manon Lecante] - [x] Le CSS ne s'applique pas (résolu chez @tombucher, mais il persiste le pb chez @manon) - [x] On ne peut pas ajouter la div ‘menu Grrrr Symphony’ en passant par le html - [ ] Pour le son, il faudrait que visuellement les deux axes partent en même temps pour avoir une symétrie. - [ ] Faire des tentatives de jouer les sons d'une même ligne en même temps ou les sons les uns à la suite des autres (comme c'est le ca maintenant) - [ ] Il faudrait rajouter les mentions légales pour la typo Faune (Alice Savoie / CNAP) au milieu/bas - [ ] Rajouter focus information sur les espèces lorsque l'on clique dessus - [ ] Enlever une des deux barres (droite et bas) de scroll - [ ] Rajouter barre espace pour faire comprendre à l'utilisateur comment le programme marche - [ ] Laisser que 9 points par ligne - [ ] Espace haut et bas équivalent ![](https://i.imgur.com/qOvGqYD.jpg) **LIEN WETRANSFER PDF LIVRE** : https://we.tl/t-m9Y8w2M7XR > ## **Margaux de la Motte** J'aimerai pour parler des différentes espèces, utiliser un contraste entre le visuel et le son. Plus l'espèce est en danger, plus le visuel, à l'aide d'une trame, disparait, et au contraire plus l'ambiance sonore sera élevée afin de "tirer le signal d'alarme". Je vais jouer avec les couleurs et les formes géométriques pour former ces trames. Les formes géométriques/couleurs/mise en page, changeront selon soit la région, soit le critère de l'espèce (éteinte,..). --- > [name=tombucher quelques références en plus selon vos projets https://artsexperiments.withgoogle.com/artpalette/ <br> https://britishmuseum.withgoogle.com/ <br> https://artsexperiments.withgoogle.com/freefall/random<br>]
Last changed by  
 
tombucher

Read more

01/12 Présentation générale

Les différents supports de la connaissance Du papier à l’écran, entre similitudes et faux semblant Papier Écran Lumière indirecte Lumière directe Disponible

9/22/2023
L3.DA3 Digital Design

Location: Salle G

9/20/2023
02/12 Les Interfaces

Les portraits :::warning :book: Si quelqu'un a pris des notes, merci de les reporter ici! (vous pouvez si vous le souhaitez mettre des images) ::: Muriel Cooper Ada Lovelace elle est la pionniere de l'informatique moderne, en créant les premieres machines "programmables" elle est sous estimée par de nombreux nombreux homologuues masculins, dénigrée par le fait qu'elle soit une femme, sont ébauche de programme "ada" est encore utilisée dans de nombreux domaines aux etats unis. Wim Crouwel

9/18/2023
03/12 Interfaces (architecture et wireframes)

Les FUI (fantasy user interface) Une interface? Une interface est la limite commune à deux systèmes, permettant des échanges entre ceux-ci. Les différents types d'interface CLI Command Line Interface Graphic user interface Natural User Interface?

9/18/2023
Read more from tombucher
Published on HackMD