TP No 1

Mise en route

Ouvrez le terminal et tapez processing&
Sauvegardez en donnant le nom TD1exo1
Ajoutez une fonction setup et draw vides (une fonction s'ecrit void mafonction(){} )
Appuyez sur le bouton avec un triangle pour exécuter ce code vide ...
Rajoutez size(400, 300); dans la fonction setup(). Qu'est ce que ca change ?
Rajoutez ellipse(50, 100, 30, 30); dans la fonction draw(). Qu'est ce que ca change ?

Rectangles et lignes simples

Nous vous proposons de remplacer le code vide par le programme Processing suivant (faites un copier-coller)

void setup() {
  size(640,480);
  noLoop();
}

void draw() {
  background(0, 200, 255);
  stroke(0, 0, 0);
  strokeWeight(1);
  line(0, 0, width, height);
  line(0, height, width, 0);
}

une zone de dessin de 640x480 pixels

2 lignes diagonales sur un fond mauve

Que signifie width et height en anglais ?
Modifiez l'épaisseur du trait
Modifiez la couleur du trait et la couleur de fond
Rajoutez un trait vertical et un trait horizontal passant par le milieu du graphisme (sans utiliser de nombres comme 320 ou 240 mais en faisont un calcul sur width et height !)
Rajoutez l'instruction rect (10, 20, 30, 40); dans la fonction de dessin.

Questions subsidiaires :

Remplacez les valeurs de couleur (255, 127, 0) pour faire du orange

Un résultat attendu

Un peu de méthode

Nous vous proposons de rajouter l'affichage d'un texte dans une méthode que processing appelle de lui-même, pour cela rajoutez simplement ces 3 lignes de code et baladez votre souris sur la zone de dessin. Attention il faut faire apparaitre la zone de texte en attrapant la barre noire en bas de votre graphisme.

void mouseMoved() {
  println("la souris est "+mouseX+", "+mouseY);
}

Si necessaire, ouvrez le terminal et tapez processing&
Sauvegardez-Sous en donnant le nom TD1exo2
Affichez un message similaire dans d'autres fonctions mousePressed() et mouseReleased()
Tentez de rajouter du code de dessin magenta dans la fonction mouseMoved(). Que se passe t-il ?
Tenlevez le noLoop() de setup(). Que se passe t-il ?
Créez deux variables globales px et py en dehors de toute fonction : int px, py;
Ajoutez deux affectations : px=mouseX; et py=mouseY; à la fin de la fonction mouseMoved()
Ajoutez une fonction de dessin qui dépende de px et py dans la fonction draw()
Rajoutez un appel à redraw() dans mouseMoved() OU enlevez le noLoop() de setup()

Questions subsidiaires :

Complétez le drapeau de la Grande-Bretagne dans TP1exo3.
Mettez ce drapeau derrière des barreaux !

Résultats Attendus

Grenouille, Points et vecteurs

Ouvrez le terminal et tapez processing&
Sauvegardez sous TP1Exo4.
modifiez le code ci-dessous pour faire un visage de grenouille dont la bouche reste toujours dans l'axe AB.

void setup(){
  size(500, 500);
}

void frogFace(int xA, int yA, int xB, int yB){
  int dx = xA-xB;
  int dy = yA-yB;
  float d = sqrt(dx*dx+dy*dy);
  noStroke();
  fill(0, 255, 0);
  ellipse((xA+xB)/2, (yA+yB)/2, d, d);
  beginShape();
  /* mettre ici des appels a vertex(...)*/
  endShape();
  stroke(0);
  line(xA, yA, xB, yB);
}

void draw(){
  frogFace(100, height-130, width-140, 55);
}

un cercle vert

void setup(){
  size(500, 500);
}

float t=0;

void frogFace(float xA, float yA, float xB, float yB){
  float dx = xB-xA;
  float dy = yB-yA;

  float xC = xA+dx/4+(yB-yA)/8;
  float yC = yA+dy/4-(xB-xA)/8;

  float xD = xA+dx/2;
  float yD = yA+dy/2;

  float xE = xA+3*dx/4+(yB-yA)/8;
  float yE = yA+3*dy/4-(xB-xA)/8;

  float xF = xA+dx/4;
  float yF = yA+dy/4;

  float xG = xA+dx/2-(yB-yA)/5;
  float yG = yA+dy/2+(xB-xA)/5;

  float xH = xA+3*dx/4;
  float yH = yA+3*dy/4;

  float xI = xA+4*dx/10+(yB-yA)/2;
  float yI = yA+4*dy/10-(xB-xA)/2;

  float xJ = xA+6*dx/10+(yB-yA)/2;
  float yJ = yA+6*dy/10-(xB-xA)/2;

  float d = sqrt(dx*dx+dy*dy);
  noStroke();



  fill(0, 255, 0);
  ellipse((xA+xB)/2, (yA+yB)/2, d, d);
  fill(255, 0, 0);
  beginShape();
  vertex(xA, yA);
  vertex(xC, yC);
  vertex(xD, yD);
  endShape();

  beginShape();
  vertex(xB, yB);
  vertex(xE, yE);
  vertex(xD, yD);
  endShape();

  beginShape();
  vertex(xF, yF);
  vertex(xG, yG);
  vertex(xH, yH);
  endShape();

  stroke(0);
  fill(0,255,0);
  ellipse(xI, yI, 80, 80);
  ellipse(xJ, yJ, 80, 80);
  fill(0);
  ellipse(xI, yI, 20, 20);
  ellipse(xJ, yJ, 20, 20);
  line(xA, yA, xB, yB);
}

void draw(){
  t=t+0.01;
  background(255);
  frogFace(150, height-70-60*cos(t), width-140, 155+60*cos(t));
}

une tête de grenouille

Questions subsidiaires :

Animez la tête de grenouille en changeant juste les points A et B au cours du temps (créez une variable t qui augmente de 0.001 à chaque appel de draw())
Mettez ce drapeau derrière des barreaux !