JavaScript est le langage d'Internet. Travailler dans le développement front-end sans cela est impossible. Pour les débutants, en particulier les enfants, il peut être difficile de s'habituer à la syntaxe du langage.
Pour compléter les novices, même l'installation et l'exécution d'un serveur local dans le navigateur peuvent être une pierre d'achoppement. Et s'il y avait un moyen de faire quelque chose de cool avec JavaScript, sans rien installer ? Entrez p5.js, une bibliothèque de codage conçue avec la créativité à l'esprit.
Voici comment créer une tête de robot animée réactive au son en utilisant quelques principes de codage simples.
La bibliothèque p5.js a été créée par l'artiste basée à Los Angeles Lauren MacCarthy. Il est conçu pour fournir une plate-forme similaire à Processing, pour l'expression créative et l'art. Des outils clairs s'accompagnent de didacticiels bien expliqués et de documents de référence pour le rendre parfait pour les débutants.
Que vous fassiez des animations, de la musique, des jeux simples ou même que vous vous connectiez à du matériel externe, p5.js peut vous aider.
Pour commencer, ouvrez la fenêtre de votre navigateur et accédez à l'éditeur Web p5.js. Avant de commencer, il y a deux étapes facultatives.
2. Cliquez sur la roue dentée des paramètres dans le coin supérieur droit. Ici, vous pouvez modifier le thème et la taille du texte pour tous les amateurs de thèmes sombres.
L'éditeur p5.js combine un éditeur de code, une console et une fenêtre de sortie dans le même espace. Jusqu'à présent, deux fonctions sont déjà configurées pour vous.
Chaque esquisse p5.js commence par deux éléments. La configuration() fonction, et la fonction draw() une fonction. Pour ceux d'entre vous qui ont déjà programmé un Arduino, cela vous sera familier !
configuration de la fonction() {
createCanvas(500, 500);
} La configuration() La fonction s'exécute au début de votre programme. Dans ce cas, la configuration crée un canevas carré de 400 pixels. Changez ceci en (500, 500) pour une zone légèrement plus grande à travailler.
Le programme d'installation ne s'exécute qu'une seule fois et est utilisé pour créer les parties nécessaires à votre programme, ainsi que les valeurs initiales de votre programme.
fonction draw() {
arrière-plan (220);
} Le dessin() La méthode est appelée chaque image. Cela fonctionne un peu comme la fonction de boucle sur Arduino ou la fonction de mise à jour dans Unity 3D. Tout ce qui doit changer dans votre croquis se produit ici. Pour l'instant, l'arrière-plan est redessiné à chaque image. En haut, vous verrez deux icônes, jouer et arrêter. Cliquez sur jouer.
C'est le programme jusqu'à présent --- une toile 500x500 avec un fond gris,
Travailler avec des formes dans p5.js est un peu différent des objets de forme prédéfinis utilisés dans le didacticiel d'animation Web mo.js. Pour créer une simple ellipse, ajoutez ceci au code dans le draw() méthode, juste en dessous de l'endroit où vous définissez la couleur d'arrière-plan.
fonction draw() {
arrière-plan (220);
ellipse(250,250,50)
} L'ellipse() La méthode prend plusieurs arguments. Les deux premiers sont sa position X et Y sur la toile. Le canevas ayant une largeur de 500 pixels, définir ces deux valeurs sur 250 place l'ellipse au centre. Le troisième argument est la largeur du cercle --- dans ce cas, 50 pixels.
Vous avez donc un arrière-plan et un cercle, mais ça n'a pas l'air très bien. Il est temps d'y remédier.
Commencez par changer la couleur de fond. Le nombre entre parenthèses représente une valeur en niveaux de gris. Ainsi, 0 est noir et 255 est blanc, avec différentes nuances de gris entre les deux. Pour rendre le fond noir, changez cette valeur à 0.
fonction draw() {
arrière-plan(0);
ellipse(250,250,50);
} Maintenant, lorsque vous cliquez sur jouer, l'arrière-plan sera noir. Pour donner de la couleur au cercle, nous voudrons affecter ses valeurs RVB (rouge vert et bleu) individuellement. Créez des variables en haut de votre script (juste au début, avant la fonction de configuration) pour stocker ces valeurs.
var r, g, b ; Dans la fonction de configuration, définissez la valeur de r à 255, et donner aux autres une valeur de 0 . Sa couleur RVB combinée sera rouge vif !
r=255 ;
g=0 ;
b=0; Pour appliquer la couleur au cercle, ajoutez un fill() appel à la méthode draw, juste avant de dessiner le cercle.
fill(r,g,b);
ellipse(250,250,50); Cliquez maintenant sur jouer, et vous devriez voir un cercle rouge sur fond noir.
Faire le cercle est un bon début, mais c'est en ajoutant de l'interactivité que ça devient vraiment intéressant !
L'ajout de code à exécuter sur un clic de souris est assez facile dans p5.js. Créez une nouvelle fonction sous draw() méthode.
fonction mousePressed() {
r =aléatoire(256);
g =aléatoire(256);
b =aléatoire(256);
}
Le mousePressed() écoute toutes les pressions de la souris et exécute le code à l'intérieur des parenthèses. Le aléatoire() La fonction renvoie une valeur aléatoire entre 0 et un nombre donné. Dans ce cas, vous définissez les valeurs r, g et b entre 0 et 255 à chaque pression de la souris.
Réexécutez le code et cliquez plusieurs fois sur la souris. Le cercle devrait changer de couleur lorsque vous le faites.
Maintenant, votre animation est réactive aux clics de souris, mais qu'en est-il de l'utilisation de la voix de l'utilisateur ?
L'utilisation du micro système est simplifiée grâce à la bibliothèque de sons p5.js. En haut de votre script, créez une nouvelle variable appelée mic .
var r, g, b ;
var micro; Ajoutez ces lignes à votre setup() fonction pour assigner micro à l'entrée audio.
mic =nouveau p5.AudioIn()
micro.start();
Lorsque vous cliquez sur jouer maintenant, vous obtenez une boîte de dialogue demandant l'autorisation d'accéder au micro intégré.
Cliquez sur Autoriser . Selon le navigateur que vous utilisez, il se peut qu'il se souvienne de votre choix ou que vous deviez cliquer sur une case de confirmation. Le micro est maintenant configuré et il est temps de l'utiliser.
Pour utiliser le volume du microphone comme valeur dans votre programme, vous devrez le stocker comme variable. Changez votre dessin() méthode pour ressembler à ceci :
fonction draw() {
var micLevel =mic.getLevel();
arrière-plan(0);
remplir(r,g,b);
ellipse(250,250,50 + niveaumic * 2000);
}
Au début de la fonction, une nouvelle variable appelée micLevel est créé et affecté à l'amplitude actuelle du microphone.
L'ellipse avait une largeur fixe de 50 pixels. Maintenant, 50 pixels est la largeur minimale, ajoutée à la valeur micLevel qui met à jour chaque image. Le nombre multiplié par micLevel varie en fonction de la sensibilité de votre microphone.
Expérimentez avec des valeurs plus élevées --- une valeur de 5000 créera un changement d'échelle plus spectaculaire !
Remarque :si cela ne fonctionne pas pour vous, votre microphone n'est peut-être pas configuré correctement. Le navigateur utilise le microphone par défaut du système, et vous devrez peut-être modifier vos paramètres de son et actualiser.
Vous avez maintenant tous les outils nécessaires pour créer le robot. Tout d'abord, déplacez l'ellipse que vous avez créée et ajoutez-en une autre pour faire les yeux.
ellipse(150,150,50 + micLevel * 2000);
ellipse(350,150,100 +micLevel * 2000);
Les "dents" sont une série de rectangles partant du bas de l'écran. Notez que le rect() nécessite un paramètre supplémentaire pour sa largeur fixe.
rect(0, 500,100, -100 -micLevel * 5000);
rect(400, 500,100, -100 -micLevel * 5000);
rect(100, 500,100, -100 -micLevel * 3000);
rect(300, 500,100, -100 -micLevel * 3000);
rect(200, 500,100, -100 -micLevel * 1000);
Cette fois, vous ne voulez que la hauteur des dents pour changer, et pour donner l'effet "souriant", elles doivent avoir des sensibilités différentes. La hauteur minimale est de -100 (car elle remonte du bas du canevas), donc le micLevel doit également être un nombre négatif.
Cliquez sur play, et vous devriez voir un visage de robot presque terminé !
Encore une fois, vous devrez peut-être modifier vos nombres multiplicateurs pour obtenir les meilleurs résultats.
Ajoutez des pupilles aux yeux avec encore plus d'ellipse() appels. Utilisez un autre fill() pour les rendre blancs. Ajoutez ceci à votre draw() méthode, sous les "dents" que vous venez de créer.
fill(255);
ellipse(150,150,20 + niveaumic * 1000);
ellipse(345,150,30 + niveaumic * 1000);
Enfin, pour donner une petite définition à l'ensemble, modifiez l'épaisseur du trait dans votre setup() fonction
strokeWeight(5);
C'est tout !
Si quelque chose ne fonctionne pas, vérifiez soigneusement votre code et vous pourrez voir le code complet de ce didacticiel dans l'éditeur p5 si nécessaire.
Ce tutoriel pour débutant couvre certains concepts de base avec p5.js, montrant à quel point il est facile d'être créatif. Comme toujours, ce projet effleure à peine la surface de tout ce dont p5.js est capable.
Passer du temps à créer de l'art avec p5.js est du temps bien dépensé, car vous vous familiarisez avec la pensée comme un programmeur et la syntaxe JavaScript. Ce sont toutes des compétences importantes à développer si vous décidez de plonger de tout votre cœur et d'apprendre vraiment JavaScript !