Utilisateur:Audrey

								٩(๑･ิᴗ･ิ)۶٩(･ิᴗ･ิ๑)۶	

Le corps numérique

Réflexion initiale

Fichier:Sims‧gif

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.

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.

Fichier:Ma 1re carte‧jpg

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) :

sans cadre

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) :

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 :

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

sans cadre

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.

• Rome‧jpg

  Rome : simple et efficace, pas mal.

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

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

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);
  }
}