PROCESSING Part2

Processing Part 2

Tu veux faire sortir ta chaîne YouTube du lot?
Apprends à créer un fond d’écran original pour tes vidéos.
Et prépare-toi à donner du style à ta chaîne.

Etape 1: Installe Processing!

La première étape consiste à télécharger et à installer Processing sur ton ordinateur. Processing est un langage de programmation open-source et gratuit, parfait pour créer des dessins et des animations dynamiques. Tu peux télécharger Processing sur le site officiel et l’installer en suivant les instructions.

Etape 2: Joue avec les exemples

Une fois Processing installé, tu peux commencer à explorer quelques exemples fournis avec le logiciel. Cela te permettra de mieux comprendre le fonctionnement de Processing et de l’utiliser pour créer tes propres projets.

Etape 3: Modifie ton code

Examine le code de l’exemple et essaie de modifier les valeurs des différentes variables pour voir comment cela affecte le résultat. Cela te donnera une idée de la façon de modifier le code pour créer ton propre arrière-plan persionnalisé.

Copie ce code

				
					void setup () {
  size (480, 480);
}
void draw () {
  if  (mousePressed) {
    fill (#000000);
} else {
    fill (#FFFFFF);
}
ellipse (mouseX, mouseY, 80, 80);
}

Fonctions

Dans cette étape, nous allons explorer les fonctions et la façon dont elles peuvent nous aider à obtenir les effets désirés. Alors, plongeons dans le vif du sujet et découvrons les fonctions dans Processing!

Qu’est-ce qu’une fonction?

				
					void function () {
  statements
}

Copie ce code

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

void draw () {
  if  (mousePressed) {
    fill (#000000);
  }
  else {
    fill (#FFFFFF);
  }
  ellipse (mouseX, mouseY, 80, 80);
}

Comment coller ?

Si tu utilises Windows, tu peux utiliser la combinaison
CTRL + V, si tu utilises MAC, tu peux utiliser la combinaison « CMD ⌘ + V ».
Pour tester le code ci-dessus, tu peux soit supprimer tout le code sous la fonction « setup() », soit ajouter « /* » avant « void draw() { » et « */ » à la toute fin du code..
Le morceau de code entre « /* » et « */ » est considéré comme un commentaire par Processing et ne sera pas exécuté.
Consulte le code et la vidéo qui suivent.

Copie ce code

				
					void setup () {
  size (480, 480); 
 // Sets the size of the frame to 480 pixels by 480 pixels
}

Copie ce code

				
					/* void draw() {   
	everything that is written here will be executed
	continuously until you close the frame…
 } */

void draw() {   
	if (mousePressed) {     
		fill(0);   
	} else {    
 		fill(255);   
	}  
 	ellipse(mouseX, mouseY, 80, 80);
 }

Enregistre ton fond d'écran

Copie ce code

				
					void keyPressed() {
  saveFrame(); // Save the frame when a key is pressed
}

Aller plus loin

Maintenant que tu as appris à créer un arrière-plan personnalisé pour tes vidéos YouTube à l’aide de Processing, il y a de nombreuses façons d’aller plus loin.

Essaie ce code

				
					// Tutorial used: https://processing.org/examples/sinewave.html


int xspacing = 1;   // How far apart should each horizontal location be spaced
int w = 90;              // Width of entire wave

float theta = 0.0;  // Start angle at 0
float amplitude = 3.0;  // Height of wave
float period = 27.0;  // How many pixels before the wave repeats
float dx;  // Value for incrementing X, a function of period and xspacing
float[] yvalues;  // Using an array to store height values for the wave

float x;
float y;
float headheight = 80.0;
float eyesize = 12.0;
float bodyheight = 70.0;
float ghostwidth = 90.0;

float r, g, b;

int count = 0;

void setup() {
  size(200, 200);
  dx = (TWO_PI / period) * xspacing;
  yvalues = new float[w/xspacing];
}

void draw() {
  background(200);
  x = mouseX;
  y = mouseY;
  drawGhost();
  calcWave();
  renderWave();
  if(count++ % 20 == 0) {
    changeColor();
  }
}

void drawGhost() {
  float left = x - ghostwidth/2;
  stroke(r, g, b);
  fill(200);
  arc(x, y, ghostwidth, headheight, PI, 2*PI, OPEN);
  ellipse(x-20, y, eyesize, eyesize);
  ellipse(x+20, y+2, eyesize, eyesize);
  line(left, y, left, y+bodyheight);
  line(left+ghostwidth, y, left+ghostwidth, y+bodyheight);
}

void calcWave() {
  theta += 0.08;
  float x = theta;
  for (int i = 0; i &lt; yvalues.length; i++) {
    yvalues[i] = sin(x)*amplitude;
    x+=dx;
  }
}

void renderWave() {
  float left = x - ghostwidth/2;
  float helpy = y+bodyheight+amplitude;
  stroke(r, g, b);
  line(left, helpy+yvalues[0], left, y+bodyheight); 
  noStroke();
  fill(r, g, b);
  for (int x = 0; x &lt; yvalues.length; x++) {
    ellipse(left+1+x*xspacing, helpy+yvalues[x], 1, 1);
  }
  stroke(r, g, b);
  line(left+ghostwidth, helpy+yvalues[yvalues.length-1], 
  left+ghostwidth, y+bodyheight); 
}

void changeColor() {
  r = random(256);
  g = random(256);
  b = random(256);
}

Questionnaire

Bravo pour avoir terminé le tutoriel!

Nous serions ravis de connaître ton avis sur la façon dont nous pourrions l’améliorer.