Raconte moi un dessin

Porteur de projet : Aria GIULJ
Projet : par hasard
Cleyet-Merle - Muti
Date : mars 2020
Contexte : cours processing - Pratique Plastique
Lien vers le projet :

Commentaire général - Damien MUTI DESGROUAS

Le plan du wiki n'est pas respecté. Vous présentez brièvement le problème en préambule. Vous détaillez ensuite les différentes étapes de votre recherche graphique (de 1 à 4), en proposant de nombreux visuels. L'étape 4 constitue une recherche graphique pour la version numérique de votre projet effectuée sous Processing. A l'étape 5 vous expliquez les intensions de fonctionnement du programme Processing et vous donnez le fichier compressé de ce dernier, mais il ne s'agit pas de la dernière version sur laquelle nous avions travaillé ensemble. Le code présenté n'est quasiment pas commenté. Le programmes est très fortement inspiré de celui donné en cours pour les affiches interactives. Il faut donner le lien sur l'article du Wiki correspondant : Comment créer une affiche interactive ?. L'algorithme de votre programme n'est pas présenté. Peut-être pourriez-vous rajouter le code commenté en utilisant les balises permettant d'afficher le code. Il faudrait aussi rajouter des visuels des résultats de votre travail. Il faut donc reprendre le compte rendu et approfondir la recherche numérique. Il faut rajouter aussi votre nom sur la page Wiki.

Introduction et présentation du problème - Damien MUTI DESGROUAS

Pour le projet “Par hasard” j'ai décidé de travailler sur la relation visuels / musique. le but étant de créer une boite avec plusieurs mini éditions de visuels, racontant chacun une histoire différente.

Etape n1

Recherches sur formats A6 de différentes feuilles, avec différents outils.

Etape n2

Selection d'une gamme de couleurs, et d'une série de recherches.

Etape n3

Série final visuels en mouvement.

Les minis éditions

Avec toutes mes recherches je vais donc créer des petits livrets de 10 à 12 pages. Ces livrets seront tous rassemblés dans une petite boite en carte au nom du projet. Chaque livret racontera une histoire avec un réel sens ou pas, ces mots seront écrits par le lecteur. La seule indication au bas de la page sera “verbe” “adjectif” etc. C'est ensuite au lecteur de choisir. Un livret raconte une histoire, mais en combinants tous les livrets ensemble, une nouvelle histoire se créer.

Etape n4

Sur processing le but et d’associer à chaque touche du clavier un son ainsi qu'un visuel qui sort au hasard. Ainsi lorsque l’on écrit un mot, une phrase, il y’aura un visuel et du son : une véritable histoire se créer. essaie du codage, en m'inspirant de celui de l'affiche interactive Comment créer une affiche interactive ? + plusieurs codes trouvés sur openprocessing

Inspiration du site https://patatap.com/

Création des visuels “décomposés” pour processing. J'ai repris les mêmes que pour la versions papiers en gardant l'aspect “texture” travaillé sur photoshop avec différents brush. Ces formes décomposées sont des images affectées aux touches du clavier, lorsque l'on clique dessus on peut recréer ou non ces formes dans leur ensemble, mais là n'est pas le but. Voici un exemple d'une forme décomposée :

Premier code

Dernier code

//librairies
import processing.sound.*;
//déclaration des variables
PImage img;
float imX = 0, imY=0; // position initiale de l'image
SoundFile son;
boolean image_active = false;
void setup() {
size(800, 600);
noStroke();
fill(#E3EBF5);
background(0);
noCursor();
// initialisation des variables globales
img=loadImage ("img/Calque 19.png");
son = new SoundFile(this, "sounds/26.mp3");
}
void draw() {
background (0);
stroke (255);
// gestion de l'image
if (image_active) { // si image_active=true alors afficher l'image
image(img, imX, imY, 200, 200);
}
}
void keyPressed(){
//lorsque j'appuie sur la touche A je veux que le son 1 se lance et que l'image 2 apparaisse
if (key == 'a') { //charger le son 1 et le jouer et charge l'image calanque 2
gestionSonImage("sounds/1.mp3", "img/Calque 2.png");
}
if (key == 'z') {
gestionSonImage("sounds/2.mp3", "img/Calque 3.png");
}
if (key == 'e') {
gestionSonImage("sounds/3.mp3", "img/Calque 4.png");
}
if (key == 'r') {
gestionSonImage("sounds/4.mp3", "img/Calque 5.png");
}
if (key == 't') {
gestionSonImage("sounds/5.mp3", "img/Calque 6.png");
}
if (key == 'y') {
gestionSonImage("sounds/6.mp3", "img/Calque 7.png");
}
if (key == 'u') {
gestionSonImage("sounds/7.mp3", "img/Calque 8.png");
}
if (key == 'i') {
gestionSonImage("sounds/8.mp3", "img/Calque 9.png");
}
if (key == 'o') {
gestionSonImage("sounds/9.mp3", "img/Calque 10.png");
}
if (key == 'p') {
gestionSonImage("sounds/10.mp3", "img/Calque 11.png");
}
if (key == 'q') {
gestionSonImage("sounds/11.mp3", "img/Calque 12.png");
}
if (key == 's') {
gestionSonImage("sounds/12.mp3", "img/Calque 13.png");
}
if (key == 'd') {
gestionSonImage("sounds/13.mp3", "img/Calque 14.png");
}
if (key == 'f') {
gestionSonImage("sounds/14.mp3", "img/Calque 16 (2).png");
}
if (key == 'g') {
gestionSonImage("sounds/15.mp3", "img/Calque 16.png");
}
if (key == 'h') {
gestionSonImage("sounds/16.mp3", "img/Calque 17.png");
}
if (key == 'j') {
gestionSonImage("sounds/17.mp3", "img/Calque 18.png");
}
if (key == 'k') {
gestionSonImage("sounds/18.mp3", "img/Calque 19.png");
}
if (key == 'l') {
gestionSonImage("sounds/19.mp3", "img/Calque 20.png");
}
if (key == 'm') {
gestionSonImage("sounds/20.mp3", "img/Calque 21.png");
}
if (key == 'w') {
gestionSonImage("sounds/21.mp3", "img/Calque 22.png");
}
if (key == 'x') {
gestionSonImage("sounds/22.mp3", "img/Calque 23.png");
}
if (key == 'c') {
gestionSonImage("sounds/23.mp3", "img/Calque 24.png");
}
if (key == 'v') {
gestionSonImage("sounds/24.mp3", "img/Calque 25.png");
}
if (key == 'b') {
gestionSonImage("sounds/25.mp3", "img/Calque 26 copie.png");
}
if (key == 'n') {
gestionSonImage("sounds/26.mp3", "img/Calque 27.png");
}
}
////// mes méthodes
void gestionSonImage(String nomDuSon, String nomImage) {
son = new SoundFile(this, nomDuSon);
son.play();
image_active = true; // si image_active = true alors afficher l'image dans le draw()
// définir une position aléatoire
imX = random(5, 500); // random sur la position
imY = random(5, 500); //charger l'image
img=loadImage (nomImage);
}

résultat :

Problème !!

J'aimerais que l'image disparaisse au bout de 5 secondes. Petit + j'aimerais associer plusieurs image à une seule touche du clavier (si possible)

WIP * Je dois recadrer mes images, elles ne sont pas toutes à la bonne taille, quelques images doivent “devenir” des background * Pour que la durée de l'image soit plus longue il faut que je joue avec la fonction length