Try   HackMD

StudioCréa Paris 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.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

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?
  • Ajtouer le nom de l'espèce en dessous de animatone
  • 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
  • generer un index (par son nom) au debut de la liste
  • 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 ?
  • apparence des images : modifier le type d'opacité, propriété : mix-blend-mode: difference;

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
  • pour l'instant les éléments apparaissent au clic, mais je préfererai que ça soit au survol
  • 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
  • question: comment appliquer une propriété animate.css à un carré?

tombucher regarde cet exemple: https://www.w3schools.com/css/css3_animations.asp

  • ajouter un border 1px solid white pour un effet "fenêtre"

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

tombucher
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.

  • ajouter le titre DÉ-CORPS-TIQUER (comment il apparaît position corps de caractère etc.)
  • 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

tombucher https://www.dailymotion.com/video/x26gno <br> https://i.pinimg.com/600x315/ec/cf/6d/eccf6db621c299608c32a3fd3818023f.jpg

Manon Lecante

  • Le CSS ne s'applique pas (résolu chez @tombucher, mais il persiste le pb chez @manon)
  • 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

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,..).


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>