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.
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.
Choisis ton système d’exploitation. Processing est disponible sur Windows, Mac et Linux. Clique sur le bouton « Télécharger ».
Une fois le téléchargement terminé, ouvre le fichier et suis les instructions d’installation. Le processus d’installation peut varier en fonction de ton système d’exploitation.
Une fois l’installation terminée, tu peux lancer Processing en double-cliquant sur l’icône Processing sur ton bureau.
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.
Clique sur le menu « Fichiers » et sélectionne « Exemples » dans le menu déroulant.
Ceci ouvrira la fenêtre contenant des exemples.
Dans cette fenêtre, tu verras une liste de différentes catégories d’exemples. Choisis une catégorie au hasard, puis sélectionne un exemple. Par exemple, sélectionne l’exemple « Color – Brightness ».
Clique sur le bouton « Run » en haut à gauche de la fenêtre. L’exemple sélectionné sera exécuté et le résultat s’affichera dans une nouvelle fenêtre.
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é.
Voici un exemple: dessines des cercles blancs en bougeant la souris. Quand tu maintiens le clic gauche appuyé, tu dessineras des cercles noirs.
void setup () {
size (480, 480);
}
void draw () {
if (mousePressed) {
fill (#000000);
} else {
fill (#FFFFFF);
}
ellipse (mouseX, mouseY, 80, 80);
}
Q: Que faire si je veux dessiner des cercle colorés lorsque j’appuie sur la souris ?
R : Tu peux choisir une autre couleur en cliquant sur « Outils » et en sélectionnant « Sélecteur de couleur ».
Lorsque tu as choisi ta couleur, appuie sur le bouton « Copier ». Ensuite, tu colles le numéro hexadécimal de la couleur choisi dans le code. Le nombre qui suit le dièse « # » est le code de la couleur.
Comment coller ? Si tu utilises Windows, tu peux utiliser la combinaison « CTRL + V ». Si tu utilises un Mac, tu peux utiliser la combinaison « CMD ⌘ + V ».
Q: Comment dessiner des rectangles?
A: Tu peux aussi dessiner des rectangles en remplaçant la ligne numéro 11 (dans notre exemple) par:
rect(mouseX, mouseY, 80, 80);
L’instruction ci-dessus permet de remplacer une ellipse par un rectangle.
Pour ce faire, tu peux rechercher « rect » dans
https://processing.org/reference/
et trouver rect() pour dessiner un rectangle.
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!
void signifie que cette fonction ne renvoie aucun résultat. Pour voir comment fonctionne une fonction, sélectionne son nom, puis clique avec le bouton droit de la souris et choisis « Find in Reference » dans le menu flottant. Cela ouvrira la référence de cette fonction dans ton navigateur web par défaut. Dans Processing, toutes les fonctions sont écrites en bleu.
void function () {
statements
}
void setup () {
size (480, 480);
}
void draw () {
if (mousePressed) {
fill (#000000);
}
else {
fill (#FFFFFF);
}
ellipse (mouseX, mouseY, 80, 80);
}
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.
Everything that is written inside the void setup() function will be executed only once just after you click on the run button.
Par exemple, le code suivant affiche un cadre de 480 pixels par 480 pixels dans lequel tu pourras dessiner.
void setup () {
size (480, 480);
// Sets the size of the frame to 480 pixels by 480 pixels
}
La fonction « void draw() » continue à dessiner jusqu’à ce que tu fermes la fenêtre.
/* 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);
}
Tu dois d’abord enregistrer ton croquis en cliquant sur « Fichie – Savegarder », puis tu choisis un endroit où le projet sera sauvegardé, comme dans la vidéo suivante.
Tu peux ensuite sauvegarder les dessins. La fonction « saveFrame() » sauvegarde les dessins, et à chaque fois que tu appuies sur la touche, la fonction « keyPressed() » s’exécutera pour appeler « saveFrame() » qui sauvegarde les dessins.
Si tu ajoutes le code suivant à la fin et que tu l’exécutes, et que tu appuies sur n’importe quelle touche, alors le dessin actuel sera sauvegardé (voir la vidéo suivante).
void keyPressed() {
saveFrame(); // Save the frame when a key is pressed
}
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.
Les images suivantes montrent où trouver la taille de ton écran. La vidéo te montrera comment changer la taille des dessins en fonction de sa taille. Clique d’abord sur l’icône Windows, puis sur l’engrenage, choisis « Système », puis « Affichage », et note la taille de ton écran écrit dans « Résolution d’affichage ».
Si tu souhaites créer un arrière-plan pour tes vidéos ou tes posts sur les réseaux sociaux, tu dois trouver la bonne taille. Tu peux rechercher la taille de ton écran dans ton moteur de recherche web préféré, comme dans l’image suivante.
1080 pixels de largeur sur 1920 pixels de hauteur
pour les vidéos : 1080 pixels de largeur sur 1920 pixels de hauteur,
pour les images : 1080 pixels de largeur sur 1080 pixels de hauteur
HD 1280 pixels de largeur sur 720 pixels de hauteur
Full HD 1920 pixels de largeur sur 1080 pixels de hauteur
Quad HD (2K) 2560 pixels de largeur sur 1440 pixels de hauteur
Ultra HD (4K) 3840 pixels de largeur sur 2160 pixels de hauteur
1080 pixels de largeur sur 1920 pixels de hauteur
480 pixels de largeur sur 800 pixels de hauteur
640 pixels de largeur sur 1136 pixels de hauteur
720 pixels de largeur sur 1280 pixels de hauteur
750 pixels de largeur sur 1334 pixels de hauteur
1080 pixels de largeur sur 1920 pixels de hauteur
1440 pixels de largeur sur 2560 pixels de hauteur
// 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 < 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 < 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);
}
Bravo pour avoir terminé le tutoriel!
Nous serions ravis de connaître ton avis sur la façon dont nous pourrions l’améliorer.