Conseils de programmation de traitement intéressants pour Designer - Chargement des médias et événement : 13 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Le traitement peut être chargé de nombreuses données externes, parmi lesquelles il existe trois types très couramment utilisés. Ils sont image, audio et vidéo séparément.

Dans ce chapitre, nous allons parler de la façon de charger de l'audio et de la vidéo en détail, en les combinant avec des événements. En fin de compte, vous pouvez créer votre propre clavier musical ou palette musicale.

Étape 1: Lire l'image

Avant de commencer, revenons sur la méthode de chargement des images.

Étape 2: Fonctions liées à l'image

Avant d'utiliser ces fonctions, nous devons créer un objet image via PImage. Ensuite, nous pouvons utiliser ces fonctions pour définir toutes sortes de propriétés d'image.

N'oubliez pas de stocker vos sources d'images dans un fichier de données avant d'exécuter votre programme.

Étape 3: Chargement, lecture et arrêt de la musique

Dans ce qui suit, nous commençons à vous présenter formellement l'invocation de la musique. Très similaire au chargement d'image, vous devez déclarer un objet audio au début. Vous pouvez vous référer à l'exemple ci-dessous pour la grammaire réelle.

Exemple de code (10-1):

[cceN_cpp theme="dawn"] import processing.sound.*;

SoundFile son;

void setup() {

taille (640, 360);

arrière-plan (255);

sound = new SoundFile(this, "1.mp3");

}

tirage nul () {

}

void keyPressed() {

//Jouer son

if (clé == 'p') {

son.play();

}

//Arrêter le son

if (clé == 's') {

son.stop();

}

} [/cceN_cpp]

Préparation:

Le traitement lui-même ne comporte aucune bibliothèque de sons. Vous devez le télécharger par vous-même. Donc, avant d'écrire votre code, vous feriez mieux de faire les préparatifs suivants.

Ajouter une bibliothèque au traitement. Voici la pratique courante. Choisissez dans la barre de menu "Outil"-- "Ajouter un outil", puis passez à "Bibliothèques". Saisissez les mots clés de la bibliothèque dans la colonne de recherche afin de pouvoir la télécharger et l'installer directement.

Cependant, si nous utilisons cette fonction dans notre pays d'origine (en Chine), nous ne pouvons pas la télécharger en nous connectant directement au Web. Nous devons démarrer VPN. Même si nous le commençons, il y aura des conditions instables. Il faut donc être patient pour l'essayer plusieurs fois. C'est la méthode de chargement la plus pratique. Si vous ne pouvez pas installer, vous devez télécharger à partir du site officiel par manuel. (https://processing.org/reference/libraries/) La méthode d'installation manuelle étant très compliquée, nous en discuterons plus en détail dans l'autre chapitre.

Expliquez le code:

La bibliothèque de sons peut fonctionner correctement une fois la préparation terminée. Faites face au code ci-dessus, cliquez sur RUN, puis il fonctionnera. Appuyez sur la touche "P" pour jouer de la musique, "S" pour arrêter la musique.

S'il est habitué au programme, nous devons d'abord le charger. Au début, nous devons ajouter une phrase "import processing.sound.*". « import » est le mot clé, signifiant littéralement le chargement. Ajoutez le nom de la bibliothèque derrière "import", puis il chargera la bibliothèque. La queue suit généralement une marque de "*", ainsi elle chargera toutes les classes liées à la bibliothèque dans le programme sans avoir à les ajouter une par une manuellement.

Dans la deuxième phrase, " SoundFile sound; " a déclaré un objet audio. SoundFile est similaire à PImage.

Dans la configuration de la fonction, " sound = new SoundFile(this, "1.mp3"); " est utilisé pour créer un objet et définir son chemin de lecture. Ici, nous avons déjà commencé à utiliser un nouveau concept de classe. En ce moment, nous n'en discutons pas en profondeur. Il suffit de savoir qu'il s'agit d'une méthode d'écriture fixe et que le dernier paramètre sert à renseigner l'adresse de la source musicale.

Parmi les événements keyPressed(), " sound.play() " et " sound.stop() " fonctionnent relativement comme l'effet de play et stop. "." au milieu indique une fonction membre dont la lecture et l'arrêt appartiennent à des objets audio. Nous pouvons considérer la fonction membre comme la fonction incluse dans l'objet. Il appartient à cet objet, qui est défini au préalable. Plus tard, lorsque nous devons lire plusieurs objets audio, nous n'avons qu'à ajouter ".play()" derrière le nom de la variable relative.

Les sources audio doivent être stockées dans un fichier de données sous le même catalogue de sketchfile (avec le suffixe pde). S'il n'y en a pas, vous pouvez en créer un manuellement.

N'oubliez pas d'écrire la fonction draw. Bien que vous n'ayez dessiné aucun graphique, il est nécessaire de jouer de la musique avec succès.

La procédure ci-dessus semble assez complexe, mais vous devez seulement ajouter plusieurs phrases de code pour pouvoir réaliser la fonction de lecture. C'est très pratique.

Le traitement prend en charge les formats audio courants tels que mp3, wav, ogg, etc.

Étape 4: Contrôle de la vitesse de la musique

Les exemples suivants vont commencer à devenir très intéressants. Le traitement a fourni certaines fonctions qui peuvent contrôler la vitesse de lecture de la musique. Dans le même temps, les tonalités changeront avec la vitesse de lecture de la musique. Lorsque nous utilisons la souris pour contrôler, cela générera un effet très psychédélique.

Site vidéo:

Exemple de code (10-2):

[cceN_cpp theme="dawn"] import processing.sound.*;

SoundFile son;

void setup() {

taille (640, 360);

arrière-plan (255);

sound = new SoundFile(this, "1.mp3");

}

tirage nul () {

vitesse flottante = mouseX/(float)width * 3;

taux.son (vitesse);

float vol = mouseY/(float)height * 4;

son.amp(vol);

}

void keyPressed() {

//Jouer son

if (clé == 'p') {

son.play();

}

//Arrêter le son

if (clé == 's') {

son.stop();

}

} [/cceN_cpp]

Expliquez le code:

La fonction.rate() contrôle la vitesse de lecture audio. La valeur entre parenthèses détermine la vitesse de lecture rapide et lente. Lorsque la valeur est 1, la vitesse de lecture est normale. Quand il est au-delà de 1, alors accélérez; alors qu'il est inférieur à 1, puis décélérez.

La fonction.amp() contrôle le volume audio. La valeur entre parenthèses détermine la valeur du volume. Lorsqu'il est égal à 1, la valeur du volume est normale. Lorsqu'il est au-delà de 1, augmentez le volume; tant qu'il est inférieur à 1, puis diminuez le volume.

Ici, nous avons construit deux variables locales speed et vol comme paramètres à charger. Par conséquent, la coordonnée horizontale de la souris changera le ton de la musique et la coordonnée verticale changera le volume de la musique.

Étape 5: Lecture et arrêt de la vidéo

Dans Processing, le chargement vidéo est similaire au chargement audio. Vous devez d'abord télécharger la vidéothèque. (https://processing.org/reference/libraries/video/index.html)

Exemple de code (10-3):

[cceN_cpp theme="dawn"] import processing.video.*;

Film mov;

void setup() {

taille (640, 360);

arrière-plan (0);

mov = new Movie(this, "1.mov");

}

void movieEvent(Film film) {

mov.read();

}

tirage nul () {

image(mouvement, 0, 0, 640, 360);

}

void keyPressed() {

if (clé == 'p') {

mov.play();

}

if (clé == 's') {

mov.stop();

}

if (clé == 'd') {

mov.pause();

}

} [/cceN_cpp]

Capture d'écran vidéo:

Expliquez le code:

La première phrase " import processing.video.*; " est utilisée pour charger la vidéothèque.

La deuxième phrase " Movie mov; " est utilisée pour déclarer l'objet vidéo. Parmi celles-ci, la fonction de " Movie " est similaire à PImage.

Dans la configuration de la fonction, l'effet de " mov = new Movie(this, "1.mov"); " est de créer un objet et de définir son chemin de lecture. Le dernier paramètre doit être renseigné avec l'adresse de la source vidéo.

Après la configuration, movieEvent représente l'événement vidéo. Il est utilisé pour mettre à jour et lire les informations vidéo. "mov.read()" dans l'événement signifie lire.

À l'exception de l'affichage des images, la fonction image peut également afficher la vidéo. Nous pouvons considérer l'objet vidéo comme une image dynamique. Le premier paramètre, nous remplissons le nom de la variable de l'objet vidéo. Les deuxième et troisième paramètres sont les coordonnées horizontales et verticales dessinées par vidéo. Les quatrième et cinquième paramètres déterminent la longueur et la largeur de l'affichage vidéo.

La fonction.play() signifie jouer. La fonction.stop() signifie arrêter et réinitialisera la vidéo. La fonction.pause() signifie une pause. Cela interrompra la lecture en cours, qui continuera jusqu'à ce que la fonction.play() soit invoquée.

Étape 6: Contrôle de la vitesse vidéo

Exemple de code (10-4):

[cceN_cpp theme="dawn"] import processing.video.*;

Film mov;

void setup() {

taille (640, 360);

arrière-plan(0);

mov = new Movie(this, "transit.mov");

}

void movieEvent(Film film) {

mov.read();

}

tirage nul () {

image(mov, 0, 0, largeur, hauteur);

float newSpeed = mouseX/(float)width * 4;

mov.speed(nouvelleVitesse);

}

void keyPressed() {

if (clé == 'p') {

mov.play();

}

if (clé == 's') {

mov.stop();

}

if (clé == 'd') {

mov.pause();

}

}

[/cceN_cpp]

Expliquez le code:

La fonction.speed() peut être utilisée pour contrôler la vitesse de lecture de la vidéo. Lorsque la valeur du paramètre est 1, la vitesse de lecture est normale. Lorsque la valeur au-delà de 1, puis accélérer; alors qu'il est inférieur à 1, puis décélérez.

Parce que nous avons construit la variable locale newSpeed et l'avons importée dans la fonction setSpeed(), la coordonnée de la souris influencera directement la vitesse de lecture de la vidéo.

Pour plus d'exemples sur la vidéo, vous pouvez vous référer à Bibliothèques - Vidéo dans la bibliothèque de cas.

Étape 7: traitement des événements courants

Auparavant, nous n'avions introduit que l'événement keyPressed(). Il sera déclenché après avoir appuyé sur le clavier. Dans ce qui suit, nous présenterons pour vous d'autres événements courants dans le traitement.

Les utilisations des événements ci-dessus sont similaires à keyPressed. Ils n'ont pas de séquence dans l'écriture de code. En d'autres termes, quel que soit l'événement que vous avez placé avant ou après la configuration de la fonction, vous obtenez le même résultat. L'ordre d'exécution n'est lié qu'à la condition de déclenchement de l'événement lui-même. Ce n'est que si la condition est remplie qu'il s'exécutera. Les événements ci-dessus sont tous très faciles à comprendre. Il suffit de faire une petite expérience, puis on peut rapidement saisir leurs usages.

Flux d'événements

On peut utiliser un exemple pour connaître l'ordre d'exécution des événements.

Exemple de code (10-5):

[cceN_cpp theme="dawn"] void setup() {

frameRate(2);

println(1);

}

tirage nul () {

println(2);

}

void mousePressed() {

println(3);

}

void mouseMoved() {

println(4);

}

void mouseReleased() {

println(5);

}

void keyPressed() {

println(6);

}

void keyReleased() {

println(7);

} [/cceN_cpp]

Expliquez le code:

Dans la configuration de la fonction, la fonction frameRate() a défini la vitesse de fonctionnement du programme à 2 images par seconde. Réduire la fréquence d'images peut nous aider à observer la sortie dans la console au cas où les événements déclenchés seraient immédiatement balayés par de nouvelles données.

Essayez de déplacer votre souris, cliquez sur la souris, relâchez la souris et observez le résultat de sortie. Apprenez à connaître l'ordre d'exécution de l'événement via println.

Ce qui vaut la peine de faire attention, c'est que les fonctions de dessin ne peuvent pas être écrites dans d'autres événements à l'exception de la fonction draw, ou qu'elles ne peuvent pas s'afficher. Si nous voulons contrôler le masquage et l'affichage des composants graphiques via des événements tels que keyPressed, nous pouvons envisager de créer une variable bool en tant que support.

Les événements s'exécuteront dans l'ordre. Ce n'est qu'après l'implémentation de tout le code de l'événement en cours qu'il exécutera le code de l'événement suivant.

Étape 8: Exemple complet - Clavier musical

En combinant les événements nouvellement saisis, nous pouvons ajouter de nouvelles interactions à notre programme. Ensuite, en quelques minutes seulement, nous pouvons facilement analogique un clavier musical.

Site vidéo:

Exemple de code (10-6):

[cceN_cpp theme="dawn"] import processing.sound.*;

SoundFile son1, son2, son3, son4, son5;

booléen key1, key2, key3, key4, key5;

void setup() {

taille (640, 360);

arrière-plan (255);

noStroke();

sound1 = new SoundFile(this, "do.wav");

sound2 = new SoundFile(this, "re.wav");

sound3 = new SoundFile(this, "mi.wav");

sound4 = new SoundFile(this, "fa.wav");

sound5 = new SoundFile(this, "so.wav");

}

tirage nul () {

arrière-plan (255, 214, 79);

rectMode(CENTRE);

flottant w = largeur * 0,1;

flotteur h = hauteur * 0,8;

si (clé1) {

remplir(255);

} autre {

remplir (238, 145, 117);

}

rect(largeur/6, hauteur/2, l, h);

si (clé2) {

remplir(255);

} autre {

remplir (246, 96, 100);

}

rect(largeur/6 * 2, hauteur/2, l, h);

si (clé3) {

remplir(255);

} autre {

remplir (214, 86, 113);

}

rect(largeur/6 * 3, hauteur/2, l, h);

si (clé4) {

remplir(255);

} autre {

remplir (124, 60, 131);

}

rect(largeur/6 * 4, hauteur/2, l, h);

si (clé5) {

remplir(255);

} autre {

remplir (107, 27, 157);

}

rect(largeur/6 * 5, hauteur/2, l, h);

}

void keyPressed() {

if (clé == 'a') {

son1.play();

clé1 = vrai;

}

if (clé == 's') {

son2.play();

clé2 = vrai;

}

if (clé == 'd') {

sound3.play();

clé3 = vrai;

}

if (clé == 'f') {

sound4.play();

clé4 = vrai;

}

if (clé == 'g') {

sound5.play();

clé5 = vrai;

}

}

void keyReleased() {

if (clé == 'a') {

clé1 = faux;

}

if (clé == 's') {

clé2 = faux;

}

if (clé == 'd') {

clé3 = faux;

}

if (clé == 'f') {

clé4 = faux;

}

if (clé == 'g') {

clé5 = faux;

}

} [/cceN_cpp]

Expliquez le code:

Nous devons créer plusieurs objets audio pour lire les informations sonores relatives afin de jouer différents sons lorsque différentes touches sont déclenchées.

Ici, nous utilisons un nouvel événement keyReleased(). La fonction de cet événement est de restaurer la couleur du clavier à sa couleur d'origine. Lorsque vous relâchez la touche, elle sera déclenchée.

Les 5 valeurs booléennes déclarées dans la tête sont utilisées pour détecter l'état de la clé.

Étape 9: Exemple complet - Palette musicale 1

Outre l'événement clavier, l'événement souris est une bonne chose que nous devons l'utiliser de manière flexible. L'exemple suivant est pour nous de créer une palette musicale, parmi laquelle nous avons utilisé deux événements liés à la souris.

Site vidéo:

Exemple de code (10-7):

[cceN_cpp theme="dawn"] import processing.sound.*;

SoundFile son1, son2, son3, son4, son5;

booléen fait glisser;

void setup() {

taille (640, 360);

arrière-plan (255, 214, 79);

noStroke();

sound1 = new SoundFile(this, "do.wav");

sound2 = new SoundFile(this, "re.wav");

sound3 = new SoundFile(this, "mi.wav");

sound4 = new SoundFile(this, "fa.wav");

sound5 = new SoundFile(this, "so.wav");

}

tirage nul () {

if (isDragging) {

remplir (107, 27, 157, 100);

ellipse(sourisX, sourisY, 16, 16);

}

}

void mouseDragged() {

isDragging = true;

if (mouseX > 100 && mouseX < 105) {

son1.play();

}

if (mouseX > 200 && mouseX < 205) {

son2.play();

}

if (mouseX > 300 && mouseX < 305) {

sound3.play();

}

if (mouseX > 400 && mouseX < 405) {

sound4.play();

}

if (mouseX > 500 && mouseX < 505) {

sound5.play();

}

}

void mouseReleased() {

isDragging = false;

} [/cceN_cpp]

Expliquez le code:

Nous espérons que ce n'est que lorsque nous avons appuyé sur la souris et l'avons traînée que nous pourrons dessiner des images. Nous devons donc construire une variable booléenne isDragging pour obtenir l'état actuel.

Lorsque vous faites glisser la souris, isDragging devient la vraie valeur afin que les fonctions de dessin dans Draw soient exécutées. Il laissera des traces sur l'écran. Lorsque nous relâchons la souris, isDragging devient une fausse valeur. Ainsi, les fonctions de dessin dans la fonction draw arrêteront l'exécution.

Nous avons conçu plusieurs conditions de déclenchement dans l'événement de glissement de souris. Par exemple, lorsque la coordonnée horizontale de la souris est comprise entre 100 et 105 pixels, la musique sera jouée automatiquement. Cela rend l'écran créé plusieurs chaînes invisibles. Ce n'est que si la souris passe à travers certaines zones, qu'elle déclenchera la musique relative.

Étape 10: Exemple complet - Music Palette 2 (version mise à jour)

L'effet de l'exemple ci-dessus est déjà assez bon. Mais si nous le surveillons attentivement, nous trouverons beaucoup de problèmes. Par exemple, lorsque la souris se déplace très rapidement, elle laisse un point rond sur l'écran à chaque fois qu'elle se déplace. Ce n'est pas une ligne droite cohérente. Pendant ce temps, cela provoque également une fuite de musique. Alors que lorsque la souris se déplace très lentement, en passant par la position où la coordonnée horizontale est comprise entre 100 et 105, elle diffusera de la musique plusieurs fois en très peu de temps, ce qui vous donne l'impression d'être coincé. Tous ces problèmes, nous pouvons les résoudre à travers l'exemple ci-dessous.

Vous pouvez regarder des vidéos dans le lien ci-dessous:

v.qq.com/x/page/w03226o4y4l.html

Exemple de code (10-8):

[cceN_cpp theme="dawn"] import processing.sound.*;

SoundFile son1, son2, son3, son4, son5;

booléen fait glisser;

void setup() {

taille (640, 360);

arrière-plan (255, 214, 79);

noStroke();

sound1 = new SoundFile(this, "do.wav");

sound2 = new SoundFile(this, "re.wav");

sound3 = new SoundFile(this, "mi.wav");

sound4 = new SoundFile(this, "fa.wav");

sound5 = new SoundFile(this, "so.wav");

}

tirage nul () {

if (isDragging) {

course (107, 27, 157, 100);

poids du trait(10);

line(sourisX, sourisY, pmouseX, pmouseY);

}

}

void mouseDragged() {

isDragging = true;

if ((mouseX - 100) * (pmouseX - 100) < 0) {

son1.play();

}

if ((mouseX - 200) * (pmouseX - 200) < 0) {

son2.play();

}

if ((mouseX - 300) * (pmouseX - 300) < 0) {

sound3.play();

}

if ((mouseX - 400) * (pmouseX - 400) < 0) {

sound4.play();

}

if ((mouseX - 500) * (pmouseX - 500) < 0) {

sound5.play();

}

}

void mouseReleased() {

isDragging = false;

} [/cceN_cpp]

Expliquez le code:

Ici, nous avons utilisé deux variables pmouseX et pmouseY transportées dans le système de traitement lui-même. Ils sont similaires à mouseX et mouseY mais ce qu'ils ont obtenu sont les coordonnées de la souris dans la dernière image.

Dans Function draw, nous avons utilisé la fonction line() pour remplacer la fonction d'origine ellipse(). Cela rend la coordonnée de la dernière image connectée directement avec la coordonnée de l'image actuelle. Ainsi, nous pouvons tracer des lignes droites ou des courbes cohérentes.

Dans l'événement mouseDragged, nous avons conçu une nouvelle condition de déclenchement. En jugeant si les coordonnées de la dernière image et de l'image actuelle sont du même côté pour savoir si une certaine coordonnée est croisée. Prenons cette condition comme exemple: " if ((mouseX - 100) * (pmouseX - 100) < 0) ". Parmi celles-ci, à partir de la valeur positive et négative résultant de " mouseX - 100 ", nous pouvons savoir si mouseX est à droite ou à gauche de la coordonnée horizontale 100. De la même manière que " pmouseX - 100 ". Par conséquent, lorsque les deux points à l'avant et à l'arrière ne sont pas du même côté, un positif multiplie un négatif, il obtiendra un nouveau nombre négatif. La condition d'exécution est donc satisfaite.

Ce qui précède est une expression simplifiée, qui a intelligemment utilisé un certain algorithme mathématique--Deux négatifs se multiplient pour créer un positif. Vous pouvez également le diviser en deux situations à discuter séparément. Cependant, il est beaucoup plus compliqué d'écrire des conditions de jugement. Les conditions de jugement "if ((mouseX = 100) || (mouseX > 100 && pmouseX <= 100))" sont équivalentes aux conditions déterminantes du code source.

Étape 11: Fonctions relatives à propos du contrôle audio et vidéo

Les fonctions mentionnées ci-dessus sont suffisantes pour les scénarios d'utilisation généraux. Si vous voulez creuser profondément, j'ai rassemblé ici pour vous quelques fonctions courantes relatives à l'audio et à la vidéo. Vous pouvez explorer ses usages selon vos propres besoins.

Pour plus d'introduction, vous pouvez vous référer aux documents du site officiel.

Audio (https://processing.org/reference/libraries/sound/index.html)

Vidéo (https://processing.org/reference/libraries/video/index.html)

Cet article vient du designer Wenzy.

Étape 12: Lectures relatives:

Guide de programmation intéressant pour le concepteur - Traitement de la touche initiale

Conseils de programmation intéressants pour Designer - Créez votre premier programme de traitement

Conseils de programmation intéressants pour Designer - Lancez votre image (première partie)

Conseils de programmation intéressants pour Designer - Lancez votre image (deuxième partie)

Conseils de programmation intéressants pour le concepteur - Contrôle du processus de programme - Déclaration de boucle

Guide de programmation intéressant pour le concepteur--Contrôle du processus de programme--Énoncé de condition (première partie)

Guide de programmation intéressant pour le concepteur--Contrôle du processus de programme--Énoncé de condition (deuxième partie)

Conseils de programmation intéressants pour Designer - Fonctions personnalisées et récursivité fractale

Conseils de programmation intéressants pour Designer - Fonctions personnalisées et récursivité fractale

Guide de programmation de traitement intéressant pour le concepteur - Contrôle des couleurs

Étape 13: Source

Cet article provient de:

Si vous avez des questions, vous pouvez contacter： [email protected].