Utilisateur:Audrey : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
(Code pour utiliser deux touches en même temps)
 
(37 révisions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
  
Bienvenue sur la page où Dr. Odré mettra à jour ses folles recherches.
+
  <big> ٩(๑・ิᴗ・ิ)۶٩(・ิᴗ・ิ๑)۶ </big>
 
 
Merci de ne rien plagier..............
 
 
 
  <big>(╯°□°)╯︵ ┻━┻</big>
 
 
 
<big>hiha</big>
 
 
 
  
 
= Le corps numérique  =
 
= Le corps numérique  =
  
 
== Réflexion initiale ==
 
== Réflexion initiale ==
[[Fichier:Sims.gif|300px|vignette|gauche|]]
+
[[Fichier:Sims‧gif|300px|vignette|gauche|]]
La première question a été : "Le corps numérique, qu'est-ce que cela m'évoque ?". Grande gameuse, il est clair que mes neurones se sont tout de suite connectés pour faire apparaître dans mon esprit ces deux mots : jeu vidéo. Dans la plupart des jeux, le joueur incarne un avatar, motivé par différentes quêtes. Le temps d'une partie, on se traduit à l'écran et il nous faut sauver une princesse, un pays, un monde. L'avatar, on le crée à partir de différents paramètres prédéfinis que l'on peut moduler à souhait, arrivant à des résultats différents. C'est '''cette idée de composition''' qui m'a le plus parlé, la possibilité de compositions différentes à partir de mêmes ingrédients.
+
La première question a été : « Le corps numérique, qu'est-ce que cela m'évoque ? ». Pôtite gameuse que je suis, mes neurones se sont tout de suite connectés pour faire apparaître dans mon esprit ces deux mots : jeu vidéo. Dans la plupart des jeux, le joueur incarne un avatar, motivé par différentes quêtes. Le temps d'une partie, on se traduit à l'écran et il nous faut sauver une princesse, un pays, un monde. De plus, lors de mes séances de procrastination intense devant des streaming de jeux vidéos, j'ai remarqué que les défis deviennent presque physiques quand il s'agit d'arriver à un objectif difficilement inatteignable, un peu comme si c'était nous-mêmes qui prenions les coups ou sautions. L'avatar, on le crée à partir de différents paramètres prédéfinis que l'on peut moduler à souhait, arrivant à des résultats différents. C'est cette idée de composition qui m'a le plus parlé, la possibilité de compositions différentes à partir de mêmes ingrédients.
  
 
Là, j'entends dans la salle les gens s'exclamer : "Mais comment faire sur une page HTML ?!"
 
Là, j'entends dans la salle les gens s'exclamer : "Mais comment faire sur une page HTML ?!"
  
 
L'idée du scroll est vite intervenue. Un peu dans l'idée de faire glisser des pièces les unes à côté des autres, mais en utilisant les scrolls, il est très simple de recomposer des contenus (textes, images) à l'aide de la souris.
 
L'idée du scroll est vite intervenue. Un peu dans l'idée de faire glisser des pièces les unes à côté des autres, mais en utilisant les scrolls, il est très simple de recomposer des contenus (textes, images) à l'aide de la souris.
 
  
 
== Première page ==
 
== Première page ==
Ligne 26 : Ligne 18 :
 
== Découverte du CSS Grid ==
 
== Découverte du CSS Grid ==
  
Bill Gates a un jour dit : « ''Je choisis une personne paresseuse pour un travail difficile, car une personne paresseuse trouvera un moyen facile de le faire'' ». Il est clair que cet homme a vu clair dans mon jeu. Je galérais de dingue avec les div et compagnie, et j'ai cherché un générateur de... je ne sais plus trop. Quoi qu'il en soit, j'ai réussi à trouver un générateur de CSS Grid qui permet de diviser les pages en plein de petits blocs comme on le veut, en suivant une grille. Je ne pouvais rêver mieux. C'est ainsi que sont arrivées trois nouvelles versions de mon site.
+
Bill Gates a un jour dit : « ''Je choisis une personne paresseuse pour un travail difficile, car une personne paresseuse trouvera un moyen facile de le faire'' ». Cet homme a vu clair dans mon jeu. Je galérais de dingue avec les div et compagnie, et j'ai cherché un générateur de... je ne sais plus trop. Quoi qu'il en soit, j'ai réussi à trouver un générateur de CSS Grid qui permet de diviser les pages en plein de petits blocs comme on le veut, en suivant une grille. Je ne pouvais rêver mieux. C'est ainsi que sont arrivées trois nouvelles versions de mon site.
  
 +
[[Fichier:Lettre corbeau‧jpg|vignette|gauche|Une lettre anonyme envoyée à un très bon acteur de "Plus Belle La Vie"]]
 
=== Texte ===
 
=== Texte ===
 +
 +
J'ai repris un texte d'une page Wikipédia mais je me demande s'il ne serait pas intéressant de partir sur des collages d'images avec différentes lettres ou mots, pour créer une espèce de compostions comme les lettres anonymes... Ce serait poétique et on pourrait avoir plein de compositions différentes et jolies.
  
 
=== Paysage ===
 
=== Paysage ===
 +
 +
Première idée. J'ai pris des photos de paysages car elles suivent toujours le même code, à savoir une ligne d'horizon mais aussi les éléments qui reviennent souvent (bâtiments, arbres, montagnes, etc). C'est marrant mais ça va 30 secondes, c'est pas ouf le résultat et on s'ennuie vite.
  
 
=== Angelina Jolie ===
 
=== Angelina Jolie ===
 +
 +
Là, j'ai pris une photo gros plan du faciès d'Angeline Jolie (car je l'adore) pour recomposer son visage et créer une espèce de difformité. Mais c'est pas non plus quelque chose que je trouve incroyable. Je pense donc surtout partir sur l'idée de texte.
  
 
[[Fichier:Time Square, dont mon CSS Grid me rappelle les panneaux publicitaires..jpg|300px|vignette|droite|Les panneaux publicitaires de Time Square]]
 
[[Fichier:Time Square, dont mon CSS Grid me rappelle les panneaux publicitaires..jpg|300px|vignette|droite|Les panneaux publicitaires de Time Square]]
 +
 
== Mais que faire du contenu ? ==
 
== Mais que faire du contenu ? ==
  
Ligne 55 : Ligne 55 :
 
== Le tout premier test ==
 
== Le tout premier test ==
  
J'ai donc répertorié le trajet de chaque avatars dans un document, avec l'heure d'arrivée à chaque endroit. Ensuite, j'ai fait un premier brouillon à la main pour avoir une idée d'ensemble. Les lieux ont été assez instinctivement représentés par des lignes droites et parallèles, un peu comme des lignes du temps. Pour le moment, je trouve que ça fait le taf mais je me demande s'il n'y aurait pas moyen de faire ça autrement.
+
=== Répertorier les fichiers ===
 +
J'ai répertorié le trajet de chaque avatars dans un document, avec l'heure d'arrivée à chaque endroit, puisque c'est la matière avec laquelle je souhaitais travailler. C'est plus simple que prendre tous les fichiers présents : ça aurait été un délire sans nom de les mettre tous sur ma future carte et ça m'aurait compliqué la tâche. Ceci dit, je garde l'idée dans un coin de ma tête.
 +
 
  
{|
+
{|  
 
|-
 
|-
 
| '''Choses perdues''' :
 
| '''Choses perdues''' :
Ligne 80 : Ligne 82 :
  
 
spectre @ 12h04
 
spectre @ 12h04
 +
 +
 +
||
 +
 +
||
  
  
Ligne 94 : Ligne 101 :
  
 
suicide @ 12h07  
 
suicide @ 12h07  
 
||
 
  
  
|| '''Le Français''' :
+
'''Le Français''' :
  
 
broceliande @ 11h46
 
broceliande @ 11h46
Ligne 104 : Ligne 109 :
 
suicide @ 12h07
 
suicide @ 12h07
  
 +
 +
 +
 +
||
 +
 +
||
  
 
'''Le Médecin''' :
 
'''Le Médecin''' :
Ligne 126 : Ligne 137 :
  
 
spectre @ 12h04
 
spectre @ 12h04
 +
 +
||
 +
 +
||
  
  
Ligne 132 : Ligne 147 :
 
broceliande @ 11h46
 
broceliande @ 11h46
  
||
 
  
||
 
  
 
'''Numéro Un''' :
 
'''Numéro Un''' :
Ligne 148 : Ligne 161 :
  
 
spectre @ 12h05
 
spectre @ 12h05
 +
 +
||
 +
 +
||
  
  
Ligne 165 : Ligne 182 :
  
 
broceliande @ 12:01
 
broceliande @ 12:01
 +
 +
||
 +
 +
||
  
  
Ligne 173 : Ligne 194 :
 
théâtre magique @ 11h43
 
théâtre magique @ 11h43
  
||
 
 
||
 
  
 
'''Gens Heureux''' :
 
'''Gens Heureux''' :
Ligne 188 : Ligne 206 :
 
un endroit @ 10h30
 
un endroit @ 10h30
  
 +
||
 +
 +
||
  
 
'''Or ''':  
 
'''Or ''':  
Ligne 208 : Ligne 229 :
 
spectre @ 12h05
 
spectre @ 12h05
 
|}
 
|}
 +
 +
=== La Naissance de la 1re carte ===
 +
 +
C'est beaucoup plus simple de commencer à la main, on est pas limité par nos connaissances informatiques. Munie d'un BIC, j'ai donné naissance à ma 1re carte... Le père était absent, mais l'émotion était forte.
 +
 +
[[Fichier:Ma 1re carte‧jpg|vignette|centré]]
 +
 +
Alors, en voyant ça, j'étais un peu contente car j'ai vu que mon idée était réalisable. Ceci dit, quelques détails m'ont énervée (j'exagère bien sûr, je ne m'énerve jamais) :
 +
 +
# Énormément de fichiers passent par Broceliande à 11h46. Après, je me suis dit que ce n'était pas très grave étant donné que dans n'importe quelle ville un tant soit peu peuplée, il y a toujours des stations qui opèrent comme le centre de toutes les connexions. Je pense par exemple à Arts-Lois ou encore à Gare de l'Ouest. Je devrais juste faire attention à mettre ce point au centre pour rendre le tout clair et équilibré.
 +
# Certains avatars font exactement le même trajet, donc c'est flou sur la carte. Mais encore une fois, certains métros font le même trajet que d'autres donc c'est po eux qui vont me saouler.
 +
# Ce qui va me saouler, c'est surtout les avatars qui ne bougent pas !! Comme Or, Re, Vi, X. Là, je n'ai pas encore de solution...
 +
  
 
== On passe sur PC ==
 
== On passe sur PC ==
  
J'étais partie dans l'optique de faire une carte sur https://beno.uk/metromapcreator/#, un site qui donne aux utilisateurs de quoi créer sa propre carte de métro. Il est clair que ce site est super approximatif, très difficile à gérer et que je continuerai malheureusement pas l'aventure avec mais ! j'ai été très contente de l'utiliser pour l'expérience (bien qu'elle ait été mauvaise lol).   
+
J'étais partie dans l'optique de faire une carte sur [https://beno.uk/metromapcreator/# un site] qui donne aux utilisateurs de quoi créer sa propre carte de métro. Le site est super approximatif, très difficile à gérer et je continuerai malheureusement pas l'aventure avec (bye bye les 100.000e) mais ! J'ai été très contente de l'utiliser pour l'expérience (bien qu'elle ait été mauvaise lol) (donc je pense être dans le déni).  Je vous présente la carte de issue des entrailles de Satan (à savoir le site) :
 +
 
 +
[[Fichier:1re carte numérique‧png|500px|sans cadre|centré]]
 +
 
 +
'''What's hot :'''
 +
# C'est clair, c'est plutôt cool.
 +
# Ça ressemble grave à un circuit électrique, cocasse.
 +
 
 +
'''What's not :'''
 +
# Il n'y a pas le nom des fichiers.
 +
# Les couleurs devraient plutôt être sur le trajet des fichiers, et non pas des lieux.
 +
# Que faire des fichiers qui ne bougent pas !!!
 +
# Il faudrait bien mesurer les distances entre chaque arrêt (les heures).
 +
 
 +
Je passe sur Illustrator pour changer ço lo. Voici le résultat avec beaucoup de sang, de larmes et de sueurs (et d'une partie d'échec entre temps, pour éviter tout risque d'AVC) :
 +
 
 +
[[Fichier:Cartes-2.jpg|500px|sans cadre|centré]]
 +
 
 +
'''What's hot :'''
 +
# Les couleurs sur les trajets sont cool, c'est beaucoup plus clair et agréable à l'œil.
 +
# Ça donne un effet très mathématique et par conséquent, un air très intellectuel...
 +
# J'ai réussi à séparer les stations "heures" de façon logique.
 +
 
 +
'''What's not :'''
 +
# Les lignes, j'aime pas, ça perd en dynamisme. Je vais continuer avec cette règle tacite de ne faire que des traits suivant les 8 points cardinaux (ça ne veut rien dire mais on comprend).
 +
# Les heures super espacées !! Je sais pas qui a transféré un truc à 10 h 40 mais ça ne me facilite pas la tâche >:( J'ai déjà supprimé (en attendant bien sûr) le 14 h 48 histoire de voir ce que ça donne dans le cœur de la map et pas m'embêter avec ça mais bon, ça n'a servi à rien vu que le 10 h 40 est toujours là. Mais j'ai une solution pour gérer ça.
 +
# C'est galère sans nom d'aligner les lignes.
 +
 
 +
Nouvelle version avec cette fois l'idée des 8 points cardinaux :
 +
[[Fichier:Cartes-3.jpg|500px|sans cadre|centré]]
 +
 
 +
'''What's hot :'''
 +
# C'est beaucoup mieux que des lignes toutes droites à mon humble avis.
 +
 
 +
'''What's not :'''
 +
# Déjà, je viens de me rendre compte que j'aime pas ce bail de points noirs avec contours blancs. Ce serait dix fois mieux le contraire.
 +
# Les noms des fichiers, je sais pas où je vais les mettre.
 +
# J'ai enlevé les heures pour une raison qui m'échappe, sans doute la sénilité qui commence à s'installer dans mon for intérieur...
 +
 
 +
[[Fichier:Zoom carte‧jpg|500px|sans cadre|centré]]
 +
 
 +
J'ai centré le bail, et j'ai surtout rajouté des petits pointillés pour donner plus de vie (?) à la carte. Ceci dit, je remarque que je m'éloigne de mon tout premier test et je n'aime pas ça car tout a l'air très "packé".
 +
 
 +
La documentation étant importante dans tout projet artistique à visée mondiale, j'ai commencé à enquêter sur les différentes cartes de métro de la planète Terre. Et croyez-le ou non, mais lors d'une aventure procrastinatrice, je suis tombée sur le [https://twitter.com/GraffikDesigner Twitter] d'un type qui s'amuse à refaire plein de cartes de métros et trams... Dieu est grand.
  
 
<gallery>
 
<gallery>
Rome.jpg|Rome : simple et efficace, pas mal.
+
Rome‧jpg|Rome : simple et efficace, pas mal.
Washington DC.jpg|Washington DC : Un peu plus complexe, mais plutôt graphique. J'aime.
+
Washington DC‧jpg|Washington DC : Un peu plus complexe, mais plutôt graphique. J'aime.
Glasgow.jpg|Glasgow : Téméraire comme design. Je ne suis pas fan mais on apprécie le risque.
+
Glasgow‧jpg|Glasgow : Téméraire comme design. Je ne suis pas fan mais on apprécie le risque.
 +
Moscow‧jpg|Moscou : Le rond attire tout de suite l'œil, et l'idée d'avoir un rond parfait et des lignes rectilignes est vraiment sympa.
 +
London‧jpg|Londres : Ce que je retiens de cette carte, c'est surtout le point quand plusieurs lignes passent au même endroit.
 +
Melbourne‧png|Melbourne : La simplicité est très efficace et la légende aussi (points blancs ou noirs).
 
</gallery>
 
</gallery>
 +
 +
Dans un premier temps, l'espace entre les stations (les heures) seront les mêmes. Elles vont de 10h30 à 14h48, je dois donc bien prévoir tout ça. Aussi, on retrouve souvent des légendes sur les cartes, ce qui serait bien utile pour rajouter peut-être des infos ? À méditer.
 +
 +
= Corps & Interface  =
 +
 +
L'idée est de créer ou de détourner une interface mettant en relation le corps et l'ordinateur, pour pouvoir utiliser l'ordinateur d'une façon différente. Je suis partie sur l'idée des accessoires des jeux vidéos (car on ne chang epas une équipe qui gagne lol). J'ai deux pistes !
 +
 +
# Les tapis de danse PlayStation 2.
 +
 +
Ce sont de simples tapis de danse qui suivent le principe des ''Dance Dance Revolution'' ! Il y a huit « boutons » principaux, ainsi que deux boutons « select » et « start ». Il suffit juste de poser ses pieds sur les pads pour lancer les actions liés à chaque pad.
 +
 +
# Les DK Bongos GameCube
 +
 +
Ce sont des contrôleurs de jeux pour le jeu ''Donkey Bonga'', sous forme de bongos. Chaque bongo est composé de deux zones différentes, qu'il faut toucher ou frapper pour enclencher l'action. Il y a aussi un bouton « start » mais surtout, un reconnaisseur (?) de son qui fait que le jeu comprend quand on frappe dans ses mains et ça créé une nouvelle façon d'interagir.
 +
 +
Un type a réussi à faire en sorte d'écrire grâce à son DK Bongo, grâce à un certain système, et explique comment il a fait :
 +
 +
https://medium.com/@jam1garner/how-i-turned-my-dk-bongos-into-a-keyboard-897299f71835
 +
 +
Là, un type qui change le bouton microphone avec lui qui gueule :
 +
 +
https://youtu.be/mh-6k8TmUd8
 +
 +
== En route vers les DK Bongos ==
 +
 +
=== Qu'est-ce que c'est ? ===
 +
 +
Finalement, je pars sur le principe des DK Bongos. Petite présentation de la machine : les DK Bongos, ce sont deux tambours de tailles égales que l'on frappe (ou presse) afin de déclencher une action dans le jeu. Entre eux se trouve un capteur sonore qui a pour but de détecter les clappements de mains, eux aussi nécessaires au contrôle du jeu. Sur la face de la liaison entre les deux tambours se trouve un bouton pressoir Start.
 +
 +
=== Qu'est-ce que je vais en faire ? ===
 +
 +
J'aimerais faire de ces DK Bongos un générateur de dessin sur Processing, dans l'idée d'avoir des résultats graphiques en frappant sur les DK Bongos. Voilà, tout simplement.
 +
 +
== La base ==
 +
 +
Les DK Bongos ont donc 4 inputs, mais ce qui est cool, c'est qu'on peut créer de nouvelles commandes par combinaison. Si j'ai bien compter, je peux faire jusqu'à 15 "effets" différents. Je n'ai pas compté le "start" puisque j'aimerais le réserver à la possibilité d'enregistrer le dessin terminé et reset ? À voir. Commençons calmement.
 +
 +
== Quelques codes utiles pour plus tard ==
 +
=== Code pour utiliser deux touches en même temps ===
 +
<syntaxhighlight lang="processing">int x, y, s;
 +
int grow = 0;
 +
 +
float value1=0;
 +
 +
color color1 = color(random(200), random(200), random(200));
 +
 +
void setup() {
 +
  fullScreen();
 +
  s = 50; // espace entre les lignes
 +
  stroke(color1);
 +
  strokeWeight(12.0);
 +
  strokeCap(PROJECT);
 +
  line(20, 70, 80, 70);
 +
  smooth(); // jsp!!!
 +
  background(0);
 +
  frameRate(350);
 +
}
 +
 +
void draw() {
 +
 +
  point(x++, y);
 +
  if (y>=width) {
 +
    y+=s;
 +
    x=1000;
 +
  }
 +
 +
  point(x++, y);
 +
  if (x>=width) {
 +
    y+=s;
 +
    x=1000;
 +
  }
 +
 +
  if (key == 'a') { // si on appuie, la ligne disparaît
 +
    strokeWeight(value1);
 +
    stroke(random(200), random(200), random(200));
 +
  }
 +
 +
  if (key == 'z') { // si on appuie, la ligne fait 25
 +
    strokeWeight(25);
 +
  }
 +
 +
  if (key == 'e') { // si on appuie, ça change le fond (à changer!!)
 +
  strokeCap(ROUND);
 +
  }
 +
 
 +
    if (key == 'r') { // si on appuie, ça change le fond (à changer!!)
 +
  strokeCap(PROJECT);
 +
  }
 +
 +
  if (key == 'r') { // si on appuie, la ligne fait 10
 +
    strokeWeight(10);
 +
  }
 +
}
 +
</syntaxhighlight>

Version actuelle datée du 22 avril 2021 à 15:47

								٩(๑・ิᴗ・ิ)۶٩(・ิᴗ・ิ๑)۶	

Le corps numérique

Réflexion initiale

La première question a été : « Le corps numérique, qu'est-ce que cela m'évoque ? ». Pôtite gameuse que je suis, mes neurones se sont tout de suite connectés pour faire apparaître dans mon esprit ces deux mots : jeu vidéo. Dans la plupart des jeux, le joueur incarne un avatar, motivé par différentes quêtes. Le temps d'une partie, on se traduit à l'écran et il nous faut sauver une princesse, un pays, un monde. De plus, lors de mes séances de procrastination intense devant des streaming de jeux vidéos, j'ai remarqué que les défis deviennent presque physiques quand il s'agit d'arriver à un objectif difficilement inatteignable, un peu comme si c'était nous-mêmes qui prenions les coups ou sautions. L'avatar, on le crée à partir de différents paramètres prédéfinis que l'on peut moduler à souhait, arrivant à des résultats différents. C'est cette idée de composition qui m'a le plus parlé, la possibilité de compositions différentes à partir de mêmes ingrédients.

Là, j'entends dans la salle les gens s'exclamer : "Mais comment faire sur une page HTML ?!"

L'idée du scroll est vite intervenue. Un peu dans l'idée de faire glisser des pièces les unes à côté des autres, mais en utilisant les scrolls, il est très simple de recomposer des contenus (textes, images) à l'aide de la souris.

Première page

Le premier test a été une simple page web divisée en 3 colonnes, contenant chacune une très grande image de paysage. Ce site n'était qu'un simple test, pour me remettre dans le bain du html et du CSS. La résultat a été concluant puisqu'il a été possible de faire ce que j'avais en tête, mais ça restait toujours très simple.

Découverte du CSS Grid

Bill Gates a un jour dit : « Je choisis une personne paresseuse pour un travail difficile, car une personne paresseuse trouvera un moyen facile de le faire ». Cet homme a vu clair dans mon jeu. Je galérais de dingue avec les div et compagnie, et j'ai cherché un générateur de... je ne sais plus trop. Quoi qu'il en soit, j'ai réussi à trouver un générateur de CSS Grid qui permet de diviser les pages en plein de petits blocs comme on le veut, en suivant une grille. Je ne pouvais rêver mieux. C'est ainsi que sont arrivées trois nouvelles versions de mon site.

Fichier:Lettre corbeau‧jpg
Une lettre anonyme envoyée à un très bon acteur de "Plus Belle La Vie"

Texte

J'ai repris un texte d'une page Wikipédia mais je me demande s'il ne serait pas intéressant de partir sur des collages d'images avec différentes lettres ou mots, pour créer une espèce de compostions comme les lettres anonymes... Ce serait poétique et on pourrait avoir plein de compositions différentes et jolies.

Paysage

Première idée. J'ai pris des photos de paysages car elles suivent toujours le même code, à savoir une ligne d'horizon mais aussi les éléments qui reviennent souvent (bâtiments, arbres, montagnes, etc). C'est marrant mais ça va 30 secondes, c'est pas ouf le résultat et on s'ennuie vite.

Angelina Jolie

Là, j'ai pris une photo gros plan du faciès d'Angeline Jolie (car je l'adore) pour recomposer son visage et créer une espèce de difformité. Mais c'est pas non plus quelque chose que je trouve incroyable. Je pense donc surtout partir sur l'idée de texte.

Les panneaux publicitaires de Time Square

Mais que faire du contenu ?

C'est bien beau tout ça mais en attendant, j'ignore toujours quel sera le contenu de cette page. En travaillant dessus, la composition de tous ces carrés me rappelaient les énormes panneaux publicitaires de Time Square, qui sont tous carrés ou rectangles (comme mon grid) et qui changent régulièrement. C'est énormément d'informations sur de "petits" espaces. Du coup, si dans un premier temps, je pensais surtout à la composition d'images, mon index_texte m'a fait réaliser que je pouvais jouer aussi avec les mots. Pourquoi ne pas mêler images et textes ? Sons ? Vidéos ? GIFs ?! Soyons crazy.

Une narration ?

Cartographier les fichiers

Réflexion intiale

Pour l'exercice de cartographie du parcours des avatars, des fichiers au travers des différents Raspberries, j'ai directement pensé à un parcours de métro : c'est simple, concis, et beau aussi. Du moins, c'est ce que je pensais ! En effet, plein de cartes dans le monde sont moches (sorry not sorry les maps). Mais là n'est pas le sujet. J'ai voulu me concentrer sur les avatars et leur parcours dans les six lieux que représentaient les Rapsberries, un peu comme de véritables personnes qui vont d'un point A à un point B dans la vraie vie.

Le tout premier test

Répertorier les fichiers

J'ai répertorié le trajet de chaque avatars dans un document, avec l'heure d'arrivée à chaque endroit, puisque c'est la matière avec laquelle je souhaitais travailler. C'est plus simple que prendre tous les fichiers présents : ça aurait été un délire sans nom de les mettre tous sur ma future carte et ça m'aurait compliqué la tâche. Ceci dit, je garde l'idée dans un coin de ma tête.


Choses perdues :

broceliande @ 11h46

un endroit @ 10h30


Enfant misérable :

broceliande @ 11h46

omelas @ 11h35


Hirondelle :

broceliande @ 11h46

omelas @ 11h37

spectre @ 12h04



Julie :

broceliande @ 11h46

spectre @ 12h04


L'Anglais :

broceliande @ 11h46

suicide @ 12h07


Le Français :

broceliande @ 11h46

suicide @ 12h07



Le Médecin :

broceliande @ 11h46

spectre @ 12h04

suicide @ 12h07


L'Espagnol :

broceliande @ 11h46

suicide @ 12h07


Micro :

broceliande @ 11h46

spectre @ 12h04


Mon Travail :

broceliande @ 11h46


Numéro Un :

broceliande @ 11h46

spectre @ 12h04


Vi  :

broceliande @ 11h48

spectre @ 12h05


Gamma :

broceliande @ 12:01


Racines :

broceliande @ 12h01

spectre @ 12:05


Réseaux :

broceliande @ 12:01


Rumi :

broceliande @ 12h01

théâtre magique @ 11h43


Gens Heureux :

omelas @ 11h37


Entité :

spectre @ 14h48

un endroit @ 10h30

Or :

spectre @ 12:04


Re :

spectre @ 12h05


Vi :

spectre @ 12h05


X :

spectre @ 12h05

La Naissance de la 1re carte

C'est beaucoup plus simple de commencer à la main, on est pas limité par nos connaissances informatiques. Munie d'un BIC, j'ai donné naissance à ma 1re carte... Le père était absent, mais l'émotion était forte.

Alors, en voyant ça, j'étais un peu contente car j'ai vu que mon idée était réalisable. Ceci dit, quelques détails m'ont énervée (j'exagère bien sûr, je ne m'énerve jamais) :

  1. Énormément de fichiers passent par Broceliande à 11h46. Après, je me suis dit que ce n'était pas très grave étant donné que dans n'importe quelle ville un tant soit peu peuplée, il y a toujours des stations qui opèrent comme le centre de toutes les connexions. Je pense par exemple à Arts-Lois ou encore à Gare de l'Ouest. Je devrais juste faire attention à mettre ce point au centre pour rendre le tout clair et équilibré.
  2. Certains avatars font exactement le même trajet, donc c'est flou sur la carte. Mais encore une fois, certains métros font le même trajet que d'autres donc c'est po eux qui vont me saouler.
  3. Ce qui va me saouler, c'est surtout les avatars qui ne bougent pas !! Comme Or, Re, Vi, X. Là, je n'ai pas encore de solution...


On passe sur PC

J'étais partie dans l'optique de faire une carte sur un site qui donne aux utilisateurs de quoi créer sa propre carte de métro. Le site est super approximatif, très difficile à gérer et je continuerai malheureusement pas l'aventure avec (bye bye les 100.000e) mais ! J'ai été très contente de l'utiliser pour l'expérience (bien qu'elle ait été mauvaise lol) (donc je pense être dans le déni). Je vous présente la carte de issue des entrailles de Satan (à savoir le site) :

What's hot :

  1. C'est clair, c'est plutôt cool.
  2. Ça ressemble grave à un circuit électrique, cocasse.

What's not :

  1. Il n'y a pas le nom des fichiers.
  2. Les couleurs devraient plutôt être sur le trajet des fichiers, et non pas des lieux.
  3. Que faire des fichiers qui ne bougent pas !!!
  4. Il faudrait bien mesurer les distances entre chaque arrêt (les heures).

Je passe sur Illustrator pour changer ço lo. Voici le résultat avec beaucoup de sang, de larmes et de sueurs (et d'une partie d'échec entre temps, pour éviter tout risque d'AVC) :

sans cadre

What's hot :

  1. Les couleurs sur les trajets sont cool, c'est beaucoup plus clair et agréable à l'œil.
  2. Ça donne un effet très mathématique et par conséquent, un air très intellectuel...
  3. J'ai réussi à séparer les stations "heures" de façon logique.

What's not :

  1. Les lignes, j'aime pas, ça perd en dynamisme. Je vais continuer avec cette règle tacite de ne faire que des traits suivant les 8 points cardinaux (ça ne veut rien dire mais on comprend).
  2. Les heures super espacées !! Je sais pas qui a transféré un truc à 10 h 40 mais ça ne me facilite pas la tâche >:( J'ai déjà supprimé (en attendant bien sûr) le 14 h 48 histoire de voir ce que ça donne dans le cœur de la map et pas m'embêter avec ça mais bon, ça n'a servi à rien vu que le 10 h 40 est toujours là. Mais j'ai une solution pour gérer ça.
  3. C'est galère sans nom d'aligner les lignes.

Nouvelle version avec cette fois l'idée des 8 points cardinaux :

sans cadre

What's hot :

  1. C'est beaucoup mieux que des lignes toutes droites à mon humble avis.

What's not :

  1. Déjà, je viens de me rendre compte que j'aime pas ce bail de points noirs avec contours blancs. Ce serait dix fois mieux le contraire.
  2. Les noms des fichiers, je sais pas où je vais les mettre.
  3. J'ai enlevé les heures pour une raison qui m'échappe, sans doute la sénilité qui commence à s'installer dans mon for intérieur...

J'ai centré le bail, et j'ai surtout rajouté des petits pointillés pour donner plus de vie (?) à la carte. Ceci dit, je remarque que je m'éloigne de mon tout premier test et je n'aime pas ça car tout a l'air très "packé".

La documentation étant importante dans tout projet artistique à visée mondiale, j'ai commencé à enquêter sur les différentes cartes de métro de la planète Terre. Et croyez-le ou non, mais lors d'une aventure procrastinatrice, je suis tombée sur le Twitter d'un type qui s'amuse à refaire plein de cartes de métros et trams... Dieu est grand.

Dans un premier temps, l'espace entre les stations (les heures) seront les mêmes. Elles vont de 10h30 à 14h48, je dois donc bien prévoir tout ça. Aussi, on retrouve souvent des légendes sur les cartes, ce qui serait bien utile pour rajouter peut-être des infos ? À méditer.

Corps & Interface

L'idée est de créer ou de détourner une interface mettant en relation le corps et l'ordinateur, pour pouvoir utiliser l'ordinateur d'une façon différente. Je suis partie sur l'idée des accessoires des jeux vidéos (car on ne chang epas une équipe qui gagne lol). J'ai deux pistes !

  1. Les tapis de danse PlayStation 2.

Ce sont de simples tapis de danse qui suivent le principe des Dance Dance Revolution ! Il y a huit « boutons » principaux, ainsi que deux boutons « select » et « start ». Il suffit juste de poser ses pieds sur les pads pour lancer les actions liés à chaque pad.

  1. Les DK Bongos GameCube

Ce sont des contrôleurs de jeux pour le jeu Donkey Bonga, sous forme de bongos. Chaque bongo est composé de deux zones différentes, qu'il faut toucher ou frapper pour enclencher l'action. Il y a aussi un bouton « start » mais surtout, un reconnaisseur (?) de son qui fait que le jeu comprend quand on frappe dans ses mains et ça créé une nouvelle façon d'interagir.

Un type a réussi à faire en sorte d'écrire grâce à son DK Bongo, grâce à un certain système, et explique comment il a fait :

https://medium.com/@jam1garner/how-i-turned-my-dk-bongos-into-a-keyboard-897299f71835

Là, un type qui change le bouton microphone avec lui qui gueule :

https://youtu.be/mh-6k8TmUd8

En route vers les DK Bongos

Qu'est-ce que c'est ?

Finalement, je pars sur le principe des DK Bongos. Petite présentation de la machine : les DK Bongos, ce sont deux tambours de tailles égales que l'on frappe (ou presse) afin de déclencher une action dans le jeu. Entre eux se trouve un capteur sonore qui a pour but de détecter les clappements de mains, eux aussi nécessaires au contrôle du jeu. Sur la face de la liaison entre les deux tambours se trouve un bouton pressoir Start.

Qu'est-ce que je vais en faire ?

J'aimerais faire de ces DK Bongos un générateur de dessin sur Processing, dans l'idée d'avoir des résultats graphiques en frappant sur les DK Bongos. Voilà, tout simplement.

La base

Les DK Bongos ont donc 4 inputs, mais ce qui est cool, c'est qu'on peut créer de nouvelles commandes par combinaison. Si j'ai bien compter, je peux faire jusqu'à 15 "effets" différents. Je n'ai pas compté le "start" puisque j'aimerais le réserver à la possibilité d'enregistrer le dessin terminé et reset ? À voir. Commençons calmement.

Quelques codes utiles pour plus tard

Code pour utiliser deux touches en même temps

int x, y, s;
int grow = 0;

float value1=0;

color color1 = color(random(200), random(200), random(200));

void setup() {
  fullScreen();
  s = 50; // espace entre les lignes
  stroke(color1); 
  strokeWeight(12.0);
  strokeCap(PROJECT);
  line(20, 70, 80, 70);
  smooth(); // jsp!!!
  background(0);
  frameRate(350);
}

void draw() {

  point(x++, y);
  if (y>=width) { 
    y+=s; 
    x=1000;
  }

  point(x++, y);
  if (x>=width) { 
    y+=s; 
    x=1000;
  }

  if (key == 'a') { // si on appuie, la ligne disparaît
    strokeWeight(value1);
    stroke(random(200), random(200), random(200));
  }

  if (key == 'z') { // si on appuie, la ligne fait 25
    strokeWeight(25);
  }

  if (key == 'e') { // si on appuie, ça change le fond (à changer!!)
  strokeCap(ROUND);
  }
  
    if (key == 'r') { // si on appuie, ça change le fond (à changer!!)
  strokeCap(PROJECT);
  }

  if (key == 'r') { // si on appuie, la ligne fait 10
    strokeWeight(10);
  }
}