Liste/
|
 |
Alexander Calder, The Star, 1960 |
Paramétriser
Le paramètre permet à l'artiste et designer de ne plus faire un choix définitif concernant l'objet final, mais il peut créer des paramètres, des options qui permet de créer différents apparences dans la mesure des possibles combinaisons de ces différentes paramètres. Dans cet optique, les mobiles des A. Calder sont des bonnes exemples d'un oeuvre paramétrisé: L'apparence de l'oeuvre est un perpétuel changement à partir d'un certaine nombre de 'paramètre' (le poids de chaque objet, la longueur des tiges...)
Dans ce cours nous allons aborder de stocker plusieurs valeurs pour plusieurs objets afin de créer par exemple plusieurs objet différents à partir d'un seule 'prototype'.
Liste
Un variable nous permet de stocker des informations pour les réutiliser plus tard. Une liste, array en anglais, peut stocker plusieurs valeurs dans un variable un peu particulier (en effet un liste est un objet, lequel sera aborder plus tard). Autrement dit un array est une liste de variable du même type de donnée (cf variables).
Déclaration d'une liste
On déclare un liste comme un variable, mais on rajoute derrière le type de donné un parenthèse carré.
déclaration d'un variable du type int
int chiffre;
déclaration d'un liste du type int
int[]chiffres;
On peut bien sur déclaré des liste des toute type de donné, aussi des float, boolean, char, string,....Il faut juste respecter que les données stocké dans la liste sont tous du même type de donné.
Liste avec { }
La manière la plus simple (et le plus laborieux) de mettre des données dans un liste est d'utiliser des accolades.
int [] chiffres= {8,6,7,8,100,width};
print(chiffres);
le println va nous imprimer tous les données qui sont stocké dans la liste chiffres de cette manière:
[0] 8
[1] 6
[2] 7
[3] 8
[4] 100
[5] 100 // la largeur d'un fenêtre est par défaut 100
Dans la fenêtre de contrôle processing me n'indique pas seulement les valeurs mais aussi les position dans la liste et comme je peux voir, la première position n'est pas [1] mais bien [0]attention! On appelle la position index
affecter une emplacement précis
Si je veux changer la valeur d'un seul élément dans la liste, je dois indiquer l'index dans la liste. Dans ce cas on écrit à gauche le nom de la liste avec l'index dans le parenthèse carré et à droite on affecte le nouveau valeur.
int [] chiffres= {8,6,7,8,100,width};
chiffres[0]=7;
chiffres[4]=1;
println(chiffres);
Regarde ce que le println imprime.
accéder à l'emplacement
Admettons je veux utiliser maintenant un valeur dans la liste, j'indique le nom de la liste avec son index dans les parenthèses, exactement comme dans l'exemple avant, seulement cet fois ci je l'écrit à droite au directement dans un méthode.
int [] chiffres= {8,6,7,8,100,width};
int x=chiffres[3];
line[10, chiffres[0], 20, 40];
Attention, on confonde facilement l'affectation d'un valeur d'une position dans la liste avec son utilisation. Dans le deux cas, on écrit le nom de le la liste avec la position entre les parenthèse chiffres[2], mais sa signification dépend en gros s'il est à gauche ou à droite de =.
int [] chiffres= {8,6,7,8,100,width};
chiffres[3]=chiffres[2];
println[chiffres[3])
println(chiffres[2]);
Si tu peux deviner ce qui est imprimé dans les deux lignes, tu as tous compris, sinon, recommence avec le paragraphe affecter.
new
Il y a encore une autre façon de créer un liste, c'est avec le mot clef "new". Quand on aborde les "class" on comprendra mieux ce mot. Pour l'instant, sachant simplement qu'il crée des emplacements vides dans le mémoire. Chaque variable est on effet un adresse avec un emplacement dans le mémoire. ! La création de liste se fait en deux étapes, le premier étape qui initialise la liste avec son nom, qui crée l'adresse, et le deuxième qui crée des emplacements à cet adresse. Ceci ressemble à ça:
premier étape comme d'habitude:
int [] chiffres;// on crée un adresse pour un array qui s'appelle chiffres
deuxième étape, on crée des emplacements avec un nombre précis (6)
chiffres =new int[6]; // on crée 6 emplacements du type int pour l'array chiffres
On peut faire ces deux étapes en un:
int []chiffres=new int [6];
for + liste
Il est bien laborieux pour affecter des valeurs aux différents positions de la liste. La plus part des temps, on utilise le boucle for pour faire ceci. Admettons on veut dessiner des cercle tous les 10 points:
int [] points=new int[10] ;
for (int i=0; i<10; i=i+1){
points[i]=i*10;
ellipse (points[i]; height/2, 3, 3);
}
multiple Objets
Pouvoir stocké plusieurs valeurs dans un liste permet de simplifier énormément le travail quand il s'agit d'actualiser plusieurs objets avec des paramètre différents. Imaginons nous voulons créer 20 objets qui bougent chaqun avec sa propre vitesse. Jusqu' à présent, il fallait écrire une ligne pour chaque objet pour lui donner une vitesse, pour le déplacer et puis le dessiner, ça fera au moins 60 lignes, avec les liste on peut le faire en ~15ligne. Le principe est qu'on crée des liste pour les coordonnées de chaque objet et sa vitesse horizontal et vertical. Ensuite nous créerons une seule fois dans le setup une point de départ et une vitesse singulière pour chaque objet et dans le draw() on actualise dans une boucle la position de chaque objet avec sa propre vitesse. Voici le code:
float x[];
float y[];
float vitX[];
float vitY[];
int nbrElement = 20;
float taille[];
void setup(){
size(400,400);
x= new float [nbrElement];
y= new float [nbrElement];
vitX= new float [nbrElement];
vitY= new float [nbrElement];
taille= new float [nbrElement];
for (int i = 0; i< nbrElement; i++){
x[i]= random(width);
y[i]= random(width);
vitX[i] = random(-4, 4);
vitY[i] = random(-4, 4);
taille[i]= abs(vitX[i])*10;
}
noStroke();
smooth();
}
void draw(){
background(0);
for (int i = 0; i< nbrElement; i++){
x[i]+=vitX[i];
y[i]+=vitY[i];
if(x[i]<0||x[i]>width) vitX[i]*=-1;
if(y[i]<0||y[i]>height) vitY[i]*=-1;
ellipse(x[i], y[i], taille[i], taille[i]);
}
}
Proportion, ratio
La proportion ou ratio exprime le rapport d'un nombre à un deuxième. Par exemple un écran d'ordinateur traditionnel est de 3/4 celui du cinéma 16/9 ce qui exprime son rapport de l'hauteur à son largeur sans pour autant s'exprimer sur sa taille réelle. Mais si on connaît l'hauteur on connaît aussi le largeur. Un autre exemple: si on prépare du plâtre il faut respecter la proportion de l'eau au plâtre.
Nous rencontrons souvent le problème de vouloir modifier un valeur d'un manière régulière dans une distance donnée. ça peut être un objet qui bouge de gauche à droite dans un fenêtre de 100, en changeant du blanc à noir en passant par tous les tons de gris; ou bien nous avons un fenêtre d'un largeur de 150 et on veut y insérer 20 lignes d'une manière régulière. Chaque fois nous avons affaire d'un rapport entre une grandeur et un autre. Dans le premier exemple nous avons un premier grandeur ('range' en anglais) qui va de 0 à 100 (la fenêtre) et un deuxième de 0 à 255 (les gris), dans le deuxième exemple nous avons un premier grandeur de 0 à 150 et un deuxième de 0 à 20.
Le ratio dans le premier exemple et 255/100 =2.5, c'est à dire à chaque pixel il faut changer la couleur d'un valeur de 2.5 pour arriver quand nous sommes au pixel 100 à blanc (255).
Dans le deuxième exemple nous avons notre valeur de base est 20 qu'on veut gonfler à 150, le ratio est donc 150/20= 7.5, il faut dessiner alors tous le 7.5px un ligne
Voici la fonction qui nous calcule la proportion
la valeur = la position de la souris
currentLow= gauche de la fenêtre
currentHigh= droite de la fenêtre
targetLow= 0 ou bien noir
targetHigh=255 ou bien blanc
void setup(){
println(ratioMethode(10, 0, 100, 0, 255));
}
float ratioMethode(float valeur, float currentLow, float currentHigh, float targetLow,float targetHigh){
float current= currentHigh - currentLow;
float target= targetHigh - targetLow;
float ratio= target/current;
ratio*=valeur;
return ratio;
}
Si vous avez compris le raisonnement - très bien, sinon vous pouvez aussi utiliser la fonction map() dans processing qui fait exactement la même chose -
http://processing.org/reference/map_.html
Et s'il s'agit seulement de mettre la couleur en rapport avec l'écran, il y a une autre moyen, encore plus simple. ColorMode() nous permet de préciser la manière comment on indique la couleur (soit RGB ou HSB pour l'instant on a toujours utiliser RGB) et une argument qui est indique le valeur maximale de mon 'rang' du couleur. Il est par défaut 255 mais vous pouvez le mettre à 500 ou n'import quel valeur - ou bien à width. Dans ce cas, un objet qui bouge de gauche à droite avec comme valeur pour fill() la position de objet va changer le gris d'une manière proportionnel sur tous le largeur de la fenêtre.
http://www.processing.org/reference/colorMode_.html
Voici encore quelques liens supplémentaires
http://fr.wikipedia.org/wiki/Ratio en français
http://en.wikipedia.org/wiki/Ratio en anglais plus complet
http://www.mathleague.com/help/ratio/ratio.htm en anglais mais très pédagogique
| Ce qu'il faut connaître: |
- savoir initialiser une liste avec les accolades et avec "new"
- savoir affecter une valeur à un emplacement dans la liste et savoir récupérer une valeur dans la liste
- utiliser les listes avec avec le "boucle for"
Exercice
- crée une série d'objet ou chaque objet et différents à travers les différents paramètres du prototype objet. Les paramètres sont des propriétés en forme des listes.