Art en code : apprendre le codage créatif pour générer des visuels avec JavaScript

1. Introduction: Bienvenue dans le cours sur les produits, le codage créatif, l'art généré, ou quel que soit le nom que vous donnez, que sont-ils ? Eh bien, c'est probablement le territoire le plus inexploré de cette époque. Pourquoi ? Parce qu'une fois que vous avez appris à créer de l'art en codant, il n'y a plus de limite. Tu peux le faire. Ceci, et même cela. Vous n'avez pas les limites des programmes d'effets visuels. C'est la combinaison du côté technique et du design. Mieux encore, tout ce que nous avons besoin de connaître, ce sont les bases du JavaScript et du HTML, langage et les méthodes de création. Nous utiliserons des algorithmes JavaScript dans ce cours. Parce que de nos jours, JavaScript est partout. Vous aurez la possibilité de rendre votre projet interactif avec d'autres technologies en utilisant JavaScript, par exemple ? Comme ça. C'était un clip de l'université. Nous allons créer des particules qui vous écouter de la musique et de vous comporter différemment. Après avoir appris ce type, vous pouvez utiliser l'entrée audio dans n'importe quel effet de votre choix. Vous serez surpris de voir à quel point il est facile de créer ces animations. Si vous connaissez déjà un langage de programmation, c'est un gros plus. Ça va ? Très bien, ce sont vraiment de bonnes animations. Que puis-je réellement les utiliser ? C'est à vous de décider. Vous pouvez créer votre propre collection NFT, télécharger sur votre site Web, les mettre dans votre portfolio ou simplement les créer pour le plaisir. grandes agences utilisent déjà le pouvoir du froid et de l' obscurité, et très peu de personnes savent comment s'en servir. Rejoignez-nous et apprenez à dessiner avec du code avant qu'il ne soit trop tard. 2. Avant de commencer: Hé les gars, tout d'abord, je voulais parler des outils que nous allons utiliser dans ce cours. Vous pouvez les télécharger pour suivre ces instructions. Ne soyez pas conscient qu'ils ne sont pas nécessaires. Parce que de nos jours, il existe de nombreuses façons de faire la même chose, n'est-ce pas ? Par exemple, j' utiliserai VS Code comme ID, mais vous pouvez bien sûr utiliser d'autres IDE, comme Atom ou Sublime Text ou n'importe quelle idée que vous voulez. Mais pour ceux qui veulent progresser exactement de la même manière que moi, vous pouvez télécharger le code VS ici. Donc, assurez-vous d'installer la bonne version. Par exemple, j'utilise la version initiée de VS Code parce que j' utilise une seule puce, vous pouvez télécharger la version correcte depuis leur site officiel. Mais j'utilise aussi le système d'exploitation macOS que je vais utiliser total maintenant pour créer des dossiers, des fichiers. Vous pouvez donc faire les mêmes étapes manuellement. Parce qu'en fin de compte, nous ne faisons que créer des dossiers et des fichiers, en laissant spécial depuis le terminal. Vous pouvez donc le faire manuellement. Mais je pense qu'ils peuvent utiliser la ligne de commande sera un meilleur choix pour moi. Je vous suggère donc de les utiliser pendant le cours. Très bien, pour les utilisateurs de macOS, il suffit de cliquer sur Command Space pour ouvrir la recherche Spotlight. Et tapez terminal. Ici. Cliquez sur Entrée. Donc, votre terminal est tout pompé et vous êtes prêt à partir. D'accord ? Pour les utilisateurs Windows, vous pouvez utiliser la ligne de commande, il suffit de facturer CMD. Ouvrez votre ligne de commande. Vous pouvez l'utiliser pour les deux systèmes d'exploitation. Je peux suggérer une hypertonique. Vous avez fait un hybride qui IS, et téléchargé pour votre système. C'est la même chose en fin de compte, mais l' hypertension a à elle seule plus de personnalisations et d'interface utilisateur des lettres. Je veux ajouter une autre chose pour les utilisateurs de Windows. d'autres termes, certaines commandes ne sont pas identiques entre ces systèmes d'exploitation. Nous utiliserons principalement pour créer des dossiers et toucher pour créer des fichiers. D'accord. Je crois que le nectar est destiné aux systèmes d'exploitation de robots, il est donc également utilisable à la mi-mars. Touch peut ne pas l'être, ce qui n'est pas reconnu dans Windows. Donc, chaque fois que je tape la commande tactile, vous pouvez utiliser echo. Par exemple, je dis, disons que je vais sur le bureau. Vous pouvez également utiliser la commande cd. Se déplacer dans les dossiers. Quand je dis cd dot, dot revient en arrière et je dis CD parce qu'ils le sont, alors créons un nouveau fichier dans le bureau appelé js. Nous pouvons le faire à l' envers en utilisant le commentaire de gage, point, ce fichier. Mais si vous ne pouvez pas le faire sous Windows, vous pouvez simplement dire tests Eco Lab. Il s'agit du format de correctif équivalent. Puisque j'utilise macOS dans ce cours. Si une commande ne fonctionne pas sous Windows, vous pouvez vérifier auprès de Google la version équivalente. S'il n'arrive pas à trouver. N'hésitez pas à me demander si vous êtes prêt. Commençons par la vidéo suivante. 3. Pour commencer (particles): Aucune ligne de commentaire. Allez sur le bureau. Ou où vous souhaitez créer votre dossier. Je vais créer un nouveau dossier de projets, et j'irai dans le dossier projets. Et ici, je veux créer deux nouveaux fichiers. Un pour HTML, et je l' appellerai index.html. Pendant que je suis pour JavaScript, index.js. Bon, maintenant, laissez-moi apporter mon dossier ici. Nous avons créé deux fichiers. Ouvrons-le avec nous aussi froid dans une seconde. D'accord ? Voici donc les nouveaux fichiers que nous avons créés. Alors ouvrez index.HTML et indexez également. Dans index.HTML, je veux taper du HTML, et je veux choisir celui-ci, HTML5, car nous voulons qu'il complète automatiquement les modèles HTML5. Ainsi, lorsque je clique sur Entrée, vous pouvez voir qu'il crée le corps de la tête. Nous voulons donc créer une nouvelle colonne Aztèque dans le corps. Parce que nous utiliserons cela pour nos visuels. Je veux donner une pièce d'identité pour ça, Carlos. Carlos. Et créons également un script tapé car nous utiliserons JavaScript. Et donnons force index js pour qu'il comprenne que nous appelons des fonctions JavaScript à partir de ce fichier. Alors, sauvegardez-le. Dans l'index js. Nous voulons obtenir cet objet Canvas. Ensuite, nous obtiendrons son contexte et écrirons tout à l'aide de cet objet contextuel. Pour ce faire, nous utiliserons l'ID des couleurs. Je vais donc créer une nouvelle variable appelée comas. Et nous pouvons utiliser document cet élément par fonction ID. Et si vous transmettez l' ID de ma toile ici, cela le contrôlera. C'est la même chose. Cela peut nous apporter les Cola de HTML5. Et ensuite, nous pourrons obtenir des contextes. Et je veux l'appeler CTX. Pour plus de simplicité, nous écrirons plusieurs fois CTX. C'est pourquoi je vais utiliser un raccourci ici. Nous pouvons donc obtenir des colas, pas encore des contextes. Les contextes fonctionnent comme ceci. Nous voulons obtenir le contexte 2D afin pouvoir l'affecter à CTX pour utiliser l'objet contextuel. Permettez-moi donc de verrouiller TTX dans la console pour que nous puissions mieux comprendre. Ok, maintenant, je vais l'enregistrer et nous devrions également ouvrir l'index HTML dans un navigateur. Fais ça. Pour ce faire, ouvrez cet index HTML avec Google Chrome. D'accord ? Maintenant, j'ai ouvert ça. Il s'agit d'un onglet Chrome et je vais le faire pour voir à la fois le code et le résultat en même temps. Et dans Chrome, cliquez avec le bouton droit de la souris et dites Inspecter pour ouvrir les outils de développement. Ici, je veux ouvrir la console. Nous venons donc d'enregistrer le CTX et de vérifier de quoi il s'agit. C'est donc un objet de Carlos. Nous pouvons donc voir certaines propriétés de ctx. Par exemple, le style de remplissage, qui est maintenant défini sur noir. Ou police, qui est de dix pixels, sans empattement ou largeur de ligne, qui est une. Par défaut. Nous ne pouvons pas voir de fonctions ici car elles proviennent de la fonction d'héritage de JavaScript. Donc, si j'ouvre un prototype, vous pouvez voir certaines fonctions que nous pouvons utiliser. Par exemple, arc, nous utiliserons pour dessiner des circuits. Laissez-moi juste faire naufrage. Nous utiliserons ou agirons pour dessiner des rectangles. D'accord ? Bristol, nous l'utiliserons pour restaurer notre commerce ou faire pivoter la toile. Très bien, il s'agit donc d'un objet CTX, et à partir de maintenant, nous utiliserons principalement ctx pour chaque action en JavaScript. Bon, allons donc dessiner un rectangle de base. Tout d'abord, nous voulons commencer par les textes C, la manette de jeu. C'est juste dire au navigateur que je commence à dessiner quelque chose. Vous pouvez voir cette fonction ici. Ensuite, je veux dessiner un rectangle. Et ce rectangle, vous pouvez voir les propriétés exponentielles, bonnes choses. Nous avons besoin de x, y, largeur et hauteur. Eh bien, je vais donner 100 pour chacun d'eux pour cet exemple. Enfin, nous devons préciser si nous voulons remplir ce rectangle. Nous voulons tracer ce rectangle juste pour mettre en évidence les bordures. Permettez-moi de commenter cette ligne pour l'instant. Nous sommes en train de remplir. Donc, quand je dis cela juste pour un fichier, rien ne se passe parce que ce n'est pas un serveur live. Nous devons nous rafraîchir. Et je fais cela en appuyant sur la commande R. Vous devez rafraîchir le navigateur. Rafraîchir Nous pouvons voir notre rectangle. Et si nous choisissons de me rafraîchir, encore une fois, ça ressemblera à ça. Vous devriez demander ici, où est le résultat final ? C'est vrai ? Nous n'avons pas le bas du rectangle. Permettez-moi donc d'expliquer pourquoi cela s'est produit. Tout d'abord, nous venons de créer une toile, mais nous ne connaissions pas la taille de la toile. En fait. Laissez-moi juste trier le contexte de la menace des vaches. Nous pouvons voir notre Canvas, actualiser la page. Nous nous attendons donc à ce que la vache soit en plein écran. Mais l'inverse est juste là. Par défaut, il n'est pas en plein écran. Nous devrions donc spécifier ici que la colonne était avec et la hauteur du commerce. Donc je dirai le poids de Carlos, et je vais simplement attribuer l'itinéraire intérieur de Windows. Donc de toute façon, c'est à l'intérieur du navigateur, donc la zone blanche. D'accord ? C'est donc juste de ce côté-ci à ce côté-ci. D'accord ? Et pour la hauteur, nous pouvons également utiliser lorsqu'il n'y a pas de hauteur intérieure. Et vous pouvez penser dans votre tête comme ça aussi. Par conséquent, vous pouvez parfois avoir ici l'URL et la barre de navigation supérieure. La hauteur intérieure ne contient donc pas cette pièce. C'est juste la zone blanche. Lorsque je l'enregistre et que je rafraîchis la page, vous pouvez voir que le Commonwealth maintenant la même taille que la largeur et la hauteur intérieures. Mais il y a un petit problème. Une fois encore. Il s'agit de régions d'octets en haut, à gauche et en bas. Nous allons donc les enlever également. Nous devrions donc utiliser CSS uniquement pour redimensionner le converse. Je ne veux pas tout écrire en ligne, donc je vais créer un nouveau fichier CSS pour cela uniquement. Laissez-moi simplement supprimer cela. Et nous pouvons également ajouter un lien dans l'étiquette de tête. Faisons donc un index CSS et enregistrons ce fichier. Nous devrions donc créer ici un nouveau fichier qui est index CSS. On devrait les appeler ma colonne comme ça. Donc, en ce moment, si j' actualise la page, vous verrez qu'il n'y a pas de CSS. D'accord. Parce que nous venons de supprimer la couleur d'arrière-plan. Permettez-moi de le rendre bleu à nouveau pour que nous puissions comprendre si notre code fonctionne. D'accord ? Oui, ça marche. Donc, ce que je veux faire ici, c'est d'abord que je veux définir une position absolue. D'accord. Donc, parce que nous n' avons rien ici, aucun parent, enfant ou aucun composant pour le rendre. C'est pourquoi il n'y a que du commerce. Nous pouvons donc définir sa position sur absolue et nous pouvons simplement forcer les valeurs supérieure et gauche à 0. D'accord ? Aussi, nous allons simplement définir la largeur et la hauteur. Donc, nous sommes sûrs à 100 % que notre toile est entièrement liée à notre navigateur. D'accord. C'est génial. Encore une chose que je veux parler de son changement rapide. Supprimons simplement la couleur d'arrière-plan ici. Vous voulez juste tester. Encore une chose, j' aimerais en parler quand je fais des différences. Lorsque je change quelque chose à chaque fois, je devrais aller dans le navigateur et actualiser la page. Je le fais donc en appuyant sur la commande R. Si vous êtes un utilisateur de Windows, vous pouvez utiliser Control R. Mais ce n'est pas un moyen efficace. À chaque changement, vous ne devez pas appuyer sur les boutons Actualiser. C'est pourquoi je veux parler d'une extension en code VS. Donc, si vous utilisez Sublime Text ou chez vous, il existe des extensions similaires comme celle-ci. Il vous suffit donc de rechercher Live Server. C'est très courant. Dans la première ligne, vous pouvez voir une émission en direct ou une extension qui a été téléchargée pendant environ 20 millions de fois. Alors allez-y et installez ceci. OK, j'ai déjà installé. Ensuite, dans votre fichier HTML, cliquez quelque part, cliquez avec le bouton droit de la souris. Et disons simplement ouvrir avec Live Server. Bon, Ryan, tu fais ça. C'est juste une douche commencée au port 55 zéros, zéros. Il s'agit donc d'un serveur en direct maintenant, ce qui signifie que nous faisons des changements. Il est juste rafraîchissant automatiquement. Ok, quand j'ai enregistré le fichier, c'est déjà changé. Nous n'avons plus besoin de nous rafraîchir à chaque fois. 4. 2EventListeners: Très bien, les gars, faisons quelque chose. Je veux donc parler des auditeurs d'événements, qui est un outil très pratique ou art interactif en JavaScript. Nous allons donc suivre l'événement de clic et dessiner un rectangle sur le charbon , pourquoi sommes-nous cliqués ? Bon, donc nous allons d'abord faire de la neige pour le commerce. Il y a une fonction intégrée pendant l'été. Et ici, vous pouvez taper, vous pouvez taper le type de l'événement. Nous sommes à la recherche d'un événement de clic. Je dirai donc cliquer. Et pour le deuxième paramètre, il s' agit d'une fonction de rappel. Vous devriez utiliser une fonction que ce que vous voulez faire est collectée par le Commonwealth. Très bien ? Nous allons donc écrire quelques déclarations dans ces lignes. Et ces lignes seront exécutées au clic. Donc, tout d'abord, bloquons l'événement lui-même. Nous pouvons donc le faire comme paramètre ici, et vous pouvez simplement utiliser cette fonction. Donc, d'abord, il suffit de verrouiller le E pour voir de quoi il s'agit. Je vais juste sauver ça. Et supprimons également cette ligne. Ok, donc notre console est claire. Et quand je clique quelque part, il y a un verrou et c'est un type d'événement pointeur. Alors ouvrons-le. Il y a beaucoup de propriétés ici. Mais si vous descendez, vous pouvez voir la propriété x et y. Donc, si je dis console, connectez-le x point y et enregistrez-le. Ainsi, lorsque je clique sur solveur, vous pouvez voir que nous pouvons obtenir la position x et y de cet emplacement. OK ? Ce qui est un excellent outil car nous pouvons utiliser ce point pour dessiner un rectangle. Au lieu de consigner cela, je vais simplement utiliser. Nous pouvons donc simplement déplacer ces lignes, en maintenant l' option Alt et en utilisant les touches fléchées, vous pouvez déplacer des lignes comme celle-ci. Et si ici, au lieu de 100, on peut dire e point x point y donc réduisons ça, peut-être dix. Et il suffit de le faire sentir. OK. Donc, quand je dis ou lorsque je clique sur Carlos, on peut voir que nous dessinons simplement un rectangle. Où que l'on clique. OK, c'est génial. Allons plus loin et changeons votre loyer de centre. Au lieu de cliquer, je veux utiliser la lune de Mar. OK ? Et sauvegardez ça. Cette fois-ci, lorsque vous cliquez quelque part, il suivra également l'événement de la souris afin que nous puissions le faire avec notre souris. Cette fonction est donc appelée plusieurs fois. Laissez-moi juste enregistrer les valeurs x et y. Alors, sauvegardez ça. Vous pouvez donc voir qu'elle est enregistrée de nombreuses fois parce que nous bougeons la souris et que l' auditeur d'événement suit la guimauve. Donc, chaque fois que je bouge ma souris, il suffit de créer un nouveau rectangle. Et il verrouille juste les x et y. vrai, c'est quelque chose comme ça, c'est quelque chose comme un pinceau, non ? Nous pouvons donc dessiner ce que nous voulons. 5. 3Arc: Très bien, les gars, on peut dessiner des rectangles maintenant. Voyons comment dessiner des cercles. Pour dessiner des cercles, nous utiliserons les méthodes de l'arc CTX. Et je veux parler de la façon dont cela fonctionne en détail. Tenez compte de ces paramètres. Dans la section des paramètres, vous pouvez voir x, y, qui est le rayon habituel, qui sera le rayon du cercle, l'angle de départ, l'angle. Je vais vous expliquer ce qu'ils sont tout à l'heure et un paramètre optionnel boleon à la fin Il n'est pas nécessaire de donner des paramètres facultatifs. Il s'agit simplement de décider si vous voulez commencer à dessiner le cercle dans le sens des aiguilles d'une montre ou dans le sens inverse. OK. Tu vas mieux comprendre maintenant. Prenons un plan de coordonnées, et nous avons un point zéro ici. Vous pouvez penser à la trigonométrie. Lorsque nous appelons la fonction arc, elle part de zéro et commence à dessiner un cercle comme celui-ci. Si vous donnez un angle d'extrémité de 90, vous tracez simplement un arc, pas un cercle complet. Vous pouvez également définir l' angle de départ et l'angle de fin. Parce que cette fonction ne sert pas toujours à dessiner des cercles. Vous pouvez également dessiner un arc. Donc, dans le code, essayons de dessiner un cercle. Je vais donc simplement commenter ces lignes et les enregistrer afin que nous ayons des virgules claires Maintenant, si nous donnons 100 et cent pour les valeurs x et y, 50 pour le rayon, zéro pour l'angle de départ, et disons un angle de 360 pour dessiner un cercle complet. Je vais enregistrer cette actualisation. Nous devrions donc également dire begin pat CTX field. Enregistrez ceci et vous verrez le cercle. Remplaçons-le en un 80. Vous pouvez à nouveau voir un cercle complet. Changeons l'angle à 90. Pourquoi cela se produit parce que ces paramètres ne s'attendent pas à des degrés. Au lieu de cela, il s' attend à de l'éclat. C'est pourquoi nous devrions utiliser ici Pi multiplié par deux pour un cercle complet ou Pi pour un demi-cercle. Vous pouvez également utiliser des convertisseurs de degrés en radiance. Ou vous pouvez écrire votre propre convertisseur. Écrivons le degré de la fonction par rapport à la radiance. Il peut s'agir d'une fonction de flèche. Je suis désolée, comme ça. La formule pour cela est degré I divisé par un 80 fois Pi. Sauvegardons ceci et déplaçons également notre fonction ci-dessus. Ensuite, nous pouvons maintenant utiliser les degrés. Appelez la fonction que nous venons d'écrire disons une fonction 80 et enregistrez-la. C'est encore une fois pareil. Essayons 270. Vous pouvez voir ou 90. Sachez que cela ne remplit pas la zone de cette pièce. Ceci est destiné à dessiner un arc. Disons un accident vasculaire cérébral, et maintenant c'est plus significatif, je crois. Quand je dis un 80, c'est un demi-cercle ou quelque chose comme ça. C'est bon. On pourrait aussi dire 360 pour un cercle complet. OK. 6. 4Atoms: Maintenant que nous savons également comment dessiner un cercle, rendez-vous sur cette vidéo où nous allons commencer à dessiner des choses passionnantes. Commençons donc. Tout d'abord, dans cette vidéo, nous allons créer plusieurs objets. Nous allons donc créer des cercles, et je veux utiliser une classe à ce stade, car nous utiliserons cette classe pour générer de nombreux atomes. Je veux commencer à déclarer avec la classe atom. Il a besoin d'un constructeur, cela générera des atomes et ce sont essentiellement de petits cercles C'est pourquoi nous avons besoin de valeurs x et y dans le constructeur. Donc x est égal à x et y égal à y. Pour le rayon, je veux que le rayon soit aléatoire 10-0, mais je ne veux pas qu'il soit nul car il ne sera pas visible Ajoutons-en deux ou nous pourrions également en faire huit. C'est 2 à 10. Nous déclarerons également la vitesse dans la direction x. Cela peut aussi être aléatoire, mais c'est trop. Faisons en quatre. Si nous déclarons une vitesse comme celle-ci, 0-4, ils iront toujours à droite Pour qu'un cercle aille à gauche, il a besoin d'une vitesse négative car il s'agit valeur x, donc diminuez lorsque vous allez à gauche. C'est pourquoi je vais juste dire moins deux. Le résultat sera compris entre moins deux et plus deux et fera la même chose pour y. Nous en avons fini avec le constructeur. Créons également une méthode de mise à jour. Cette méthode de mise à jour sera donc appelée dans chaque image, et elle devrait mettre à jour la valeur x des atomes, et elle devrait mettre à jour la valeur x en utilisant la variable speed x, et également faire la même chose pour y. Mais nous ne faisons que définir certaines variables, la vitesse du cercle, les rayons x et y, mais nous n'avons encore rien dessiné. Pour ce faire, nous devons dessiner une fonction. L'atome peut donc se dessiner tout seul. N'oubliez pas comment nous dessinons. Nous disons d'abord CTX begin PT, puis nous pouvons dire CT x r ici nous pouvons donner une valeur x. Nous pouvons donner la valeur y, et nous pouvons également donner le rayon à partir du constructeur L'angle de départ doit être nul, comme toujours. Je peux donner Pi multiplié par deux pour l'angle d'extrémité parce que nous voulons toujours un cercle complet. J'utilise également la fonction ici. Sauvegardons ça. Il n'y a toujours rien sur le charbon parce que nous n'avons créé aucun atome Nous le déclarons simplement, sorte que l'ordinateur conserve la classe atom en mémoire, mais elle n'est pas utilisée pour le moment. Allons-y et utilisons la classe atom. En plus de tout, je veux créer un tableau d'atomes, qui sera un tableau vide pour commencer. Ajoutons ensuite un écouteur d' événements, sorte que lorsque nous cliquons quelque part, les atomes puissent être générés sur ce point Je vais donc appeler en tant qu'auditeur d'événements. L'écouteur d'événements écoutera l'événement Click. Et pour la fonction de rappel, je vais transmettre l'événement Ainsi, nous pouvons accéder aux valeurs x et y du point cliqué Dans l'écouteur d'événements, je souhaite utiliser une boucle for ici Je vais utiliser le raccourci. En quatre boucles. Changeons l'index avec, pour qu'il soit plus lisible, je crois. Je veux créer 20 atomes. Spécifiez la limite, puis supprimons ces lignes. Ce que nous voulons faire ici, c'est introduire un nouvel atome dans les atomes, n'est-ce pas ? Déclarons donc également ses valeurs x et y avec l' événement que nous venons d'utiliser. OK. Je vais enregistrer ça. Quand je clique quelque part, il ne se passe toujours rien. Mais juste pour vérifier. Si ces lignes fonctionnent, nous pouvons ajouter un journal ici. Disons bonjour. Quand je clique sur quelque part, vous voyez qu'il enregistre 20 fois le bonjour. Quand je clique à nouveau, 20 de plus, et ainsi de suite. Ces lignes fonctionnent. Nous ne voyons encore rien car nous n'avons pas utilisé la fonction. Si nous utilisons la fonction de dessin ici, elle pourrait également dessiner. Mais ce que je veux faire ici, c'est vous montrer une fonction d'animation. Nous pouvons donc créer une nouvelle fonction d'animation comme celle-ci. Ici, nous utiliserons un cadre d'animation de demande. Cette fonction est très facile à comprendre. Cette fonction appellera simplement une fonction transmise. Si nous passons ici animate, pour qu'il s' appelle à nouveau, nous créerons une boucle, et celle-ci est une boucle infinie, et c'est exactement ce que nous voulons Parce que quoi que nous écrivions entre les deux, ils seront appelés infiniment Parce que dans cette ligne, il appellera animate et recommencera depuis le début exécutera les codes, puis reviendra en arrière et ainsi de suite Ce que nous voulons ajouter ici, c'est dessiner les atomes. Je vais donc utiliser des atomes et je vais utiliser pour chacun, ce qui fera une itération sur chaque élément du tableau d'atomes Nous pouvons donc passer un paramètre, qui sera l'objet d' itération. Atome. Ici, l'atome va itérer sur le tableau d'atomes afin que nous puissions utiliser la fonction de dessin ici Avec ces lignes, nous dessinons simplement chaque atome des atomes. Après le tirage, je souhaite également appeler fonction de mise à jour car nous augmenterons la vitesse. Nous augmenterons le x avec la vitesse ou diminuerons les valeurs x et y. La fonction d'animation sera appelée plusieurs fois et nous mettrons toujours à jour le x et le y, et nous dessinerons à nouveau pour pouvoir voir l'animation dès maintenant. Je le dis quand je clique, toujours rien dans les virgules Nous devrions ajouter une dernière chose. Nous venons de créer une fonction d'animation, mais nous ne l'appelons jamais Appelons-le simplement. Maintenant, lorsque nous cliquons, vous pouvez enfin voir le résultat. Où que vous cliquiez, 20 atomes sont générés et ils se répartissent de manière aléatoire. La vitesse, le rayon sont aléatoires. Et nous pouvons voir une animation parce que nous avons utilisé un cadre d'animation de demande. Permettez-moi donc de rafraîchir la page et de voir à nouveau. C'est déjà un excellent projet pour commencer et nous allons créer de meilleurs visuels à l'avenir. 7. 5DestroyAndBlur: Actuellement, les atomes ne sont pas détruits à un moment ou à un autre. Ce n'est pas une bonne approche pour les problèmes de performance. Ils se déplacent à l'infini, mais ils ne seront pas détruits à un moment donné De plus, je crois que si vous réduisez la taille des atomes dans chaque image, et c'est possible s'ils peuvent être détruits à un moment donné, ils peuvent devenir de plus en plus petits dans chaque image. Ce sera un meilleur effet visuel. Essayons de mettre en œuvre cette logique. Je vais d'abord essayer de modifier la fonction de mise à jour de la classe atom. Cette mise à jour ne fera que modifier la vitesse afin que nous puissions également mettre à jour la taille de l'atome. Nous pourrions utiliser la même méthode. Ici, je pourrais également mettre à jour le rayon, mais je veux simplement créer une nouvelle méthode de mise à jour et j'appellerai cette vitesse de mise à jour en termes de flexibilité Vous savez, à l'avenir, peut-être que nous pourrons simplement vouloir mettre à jour la vitesse deux fois et nous ne voulons pas mettre à jour la taille. C'est donc juste pour la flexibilité. Je vais créer une nouvelle méthode de mise à jour de la taille. Dans cette méthode, je vais diminuer le rayon. Essayons la version 0.1. Dans chaque image, nous diminuerons le rayon lorsque nous appellerons la méthode de mise à jour de la taille. Allons-y, essayons cette taille de mise à jour, et modifions-la également en fonction de la vitesse de mise à jour. Sauvegardez ceci. Voyons ce que nous avons. Maintenant, il suffit de me laisser ouvrir la console. Nous avons un problème. Impossible d'exécuter l'arc, le rayon fourni est négatif. Nous ne faisons que diminuer le rayon, et à un moment donné, il sera négatif il sera négatif. Comme nous ne pouvons pas avoir de rayon négatif, la console émet simplement un avertissement. Ce que nous pouvons faire ici, c'est supprimer les atomes dont le rayon est négatif. Si nous le faisons, nous réglerons également le problème de performance, car une fois que nous avons supprimé un atome, nous n'avons plus à y penser. Ainsi, dans ces quatre où nous itérons sur les atomes, nous pouvons vérifier le rayon des atomes, et s'il est inférieur à 0,3, nous devons supprimer l'atome Les atomes sont simplement stockés dans un tableau d'atomes Si nous pouvons les supprimer du tableau d' atomes, tout va bien. Nous n'avons pas créé de nouvelles variables ni aucun type de stockage de données. Nous les maintenons simplement dans des atomes. Il y a un moyen de le faire. Il existe de nombreuses manières de supprimer des atomes pour supprimer un élément du tableau. Nous utiliserons ici la méthode d'épissage. Je dirais que les atomes qui s' épissent ont besoin d'un nombre ici, qui sera l'indice de l'élément que nous voulons supprimer Pour y parvenir, en fait, nous devons d'abord modifier les quatre fonctions de chaque fonction ici. Je vais ajouter un nouvel index de paramètres ici, et quatre sont déjà prêts pour nous donner la valeur d' indice de la boucle. Vous pouvez le voir ici, vous pouvez donner un paramètre de valeur et également un index et nous pourrions également donner au premier ce dont nous n'avons pas besoin pour le moment. Si nous tapons ici index, nous pouvons également utiliser index ici. Et nous devrions fournir un nombre de suppressions. Nous voulons donc simplement supprimer un élément. Donc c'est bon. Je crois qu'à l'heure actuelle, nous supprimons simplement atomes dont le rayon est inférieur à 0,3. Disons et essayons. Maintenant, nous n'avons aucune erreur. Cela devient une jolie animation de star. Vous pouvez donc voir l'effet que les cercles ne font que diminuer, se rétrécir et à un moment donné, lorsqu'ils ont un rayon inférieur à 0,3, ils se détruisent d' eux-mêmes, donc tout va bien pour nous. Nous n'avons rien sur la mémoire après l'animation. OK. C'est donc très efficace. C'est bon. Mais rendons cet effet plus cool. Je vais donc simplement changer ce clic en Mamu et voir ce qui se passe C'est peut-être trop. Nous ne faisons que créer des objets, et notre coma est juste plein parce que nous ne les supprimons pas de la scène. Que pouvons-nous faire à ce sujet ? Je voudrais parler d' un concept en ce moment. Sauvegarde du contexte et restauration du contexte. Donc, ces blocs sont juste, vous savez, cela s'explique d'eux-mêmes. Ils enregistrent simplement le contexte, tous les paramètres du contexte, par exemple le style de remplissage, ou, vous savez, alignent avec tout le reste, c'est juste un point de sauvegarde ici. Et lorsque nous changeons quelque chose entre eux, nous pouvons changer le style de remplissage, nous pouvons changer le style de remplissage en rouge. Ainsi, lorsque nous le changeons entre ces deux lignes, par exemple, dans cette ligne, le style de remplissage était noir. Lorsque nous parlons de restauration, cela revient simplement en arrière. Il est donc de nouveau noir à la 27e ligne. C'est bon. Nous pouvons donc apporter n'importe quelle modification, ce que nous voulons faire, puis nous pouvons simplement la restaurer pour que l'ensemble du paramètre revienne à cette ligne jusqu'à ce point. Je veux donc ajouter les blocs ici et changer le style de remplissage. Essayons le rouge, d'accord. Et je veux dessiner un rectangle. J'utiliserai le remplissage pour l'ensemble du cas. Dans chaque boucle d'animation, nous dessinerons un rectangle dans l'ensemble des coas. Pour ce faire, nous devons donner les valeurs conva et Cas Disons ceci. Nous dessinons simplement le rectangle rouge dans chaque cadre pour ne rien voir. OK. Cela ne sert donc à rien de le faire, évidemment. Mais si nous changeons ce rouge en une valeur RGB. Notre arrière-plan était donc blanc. Disons 2505, 2505, 2505, et c'est pour définir une Cela revient donc à écrire simplement en blanc. Mais cette fois, je veux également ajouter Alpha, qui est l'opacité Ce A représente Alpha. Ici, je veux ajouter un Alpha à 0,2. L'angle direct aura une opacité de 0,2, ce qui nous donnera un bel effet Quand je dis cela, lorsque je déplace le, vous pouvez voir, laissez-moi également fermer la console. Vous pouvez donc voir ce bel effet bleu, n'est-ce pas ? Et nos particules se déplacent simplement avec un bel effet de remorque, et elles sont détruites à un moment donné lorsqu'elles deviennent vraiment petites. 8. 6SkyAndStars: Nous avons créé un bel effet visuel qui écoute les mouvements de masse. Et si nous le voulons, le code génère les atomes par défaut. Et si nous ne voulons pas écouter l'événement de la souris ? Mais au lieu de cela, nous voulions créer automatiquement des atomes connus. Je vais donc commenter ces lignes ici. Et sur le bouton, je veux créer une nouvelle fonction. D'accord ? Appelons donc cette fonction générer des atomes. Et j'utiliserai à nouveau la fonction flèche. D'accord ? Ainsi, pour vous, par exemple, pour créer des atomes, nous pouvons simplement utiliser la même logique ici. Il suffit de pousser les atomes dans la matrice, non ? Donc, parce que nous avons une fonction d'animation, elle va dessiner, mettre à jour la vitesse, à jour la taille et faire tout. Nous devrions donc d' abord pousser dans les atomes. Je dirai donc des atomes de ce buisson. Nous voulons des valeurs aléatoires. Donc cette expression ici, comme vous le savez, crée une valeur aléatoire entre, si je tape votre dixième, entre 010, n'est-ce pas ? Mais je ne veux pas de valeur statique ici. Au lieu de cela, nous pouvons utiliser le como sweet. Les atomes peuvent donc être générés n'importe où sur le commerce. Et faites la même chose pour Y aussi. Cette fois, c'est la hauteur. D'accord ? Et puis nous pouvons simplement dire demander une image d'animation et appeler la même fonction ici parce que nous voulions être une boucle. D'accord ? Maintenant, si j'appelle, générez des atomes et enregistrez ce fichier. Je suis désolée, nous ne l'avons pas fait. Nous venons de donner des valeurs x et y. Nous appelons ensuite la classe. J'ajouterai donc l'atome de Mu au début et la parenthèse à la fin. Je l'ai encore sauvegardé. Vous pouvez donc voir maintenant que nous avons généré des atomes aléatoires n'importe où sur le canevas. Ok, donc ça a l'air bien, mais allons-y mieux. Je crois que si nous rendons le fond noir et que nous faisons des atomes plus petits et blancs, cela ressemblera au ciel. D'accord, alors que diriez-vous d'essayer ça ? Nous devrions changer cette ligne. Je vais simplement commenter parce que je ne veux pas perdre ça. Mais cette fois, nous voulons qu'il soit noir. Je vais donc donner 0 pour les valeurs RVB. Laissez-moi le sauver. Notre toile est noire en ce moment. Nous ne pouvons pas voir correctement les atomes car nous devrions changer leur FillStyle en blanc. Où nous dessinons réellement des atomes. Juste avant de dessiner. On peut dire TTX, style TTX au blanc. Donc, pour l'instant, c'est beaucoup mieux. Et ils sont aussi trop gros. Je veux qu'ils soient plus petits. On peut peut-être changer de rayon ici. Essayons aussi quelque chose. Au lieu de huit. Maintenant, ils sont plus petits et ils ressemblent à des étoiles dans le ciel. C'est ainsi que vous pouvez créer un effet de ciel ou d'espace avec JavaScript. 9. 7Mouvement parabolique: Il est très facile de créer des atomes aléatoires. Mais que se passe-t-il si nous voulons créer des atomes à des endroits précis ? Et nous voulons également les déplacer d'une manière que nous voulons préciser. OK ? Pour ce faire, je vais simplement créer un nouveau point d'objet JavaScript. Il devrait avoir deux valeurs de base, x et y. Donc, ici, au lieu de valeurs aléatoires, je veux simplement utiliser le point X, le point Y. Alors permettez-moi de sauvegarder cela. Donc, si j'en ai donné 500 ici, vous pouvez le voir au moment précis, d'accord. Ou si vous voulez quelque chose spécifique au milieu, bien sûr, nous pourrions dire la largeur de Carlos divisée par deux. Hauteur divisée par deux. C'est donc exactement au centre. OK ? Allons de l'avant et déplacons cela sur les colonnes. Ce que nous voulons faire ici, c'est changer le point x. Si je change le point x, si je l'augmente avec un dans chaque image d'animation, cela ira bien. Laissez-moi le sauver. Donc, vous pouvez voir que ça va bien. Si nous changeons également le y, recadrez maintenant, il passera en dessous et écrira. À un moment donné, il va sortir de la toile. Ok, alors comment faire rebondir entre certains points que nous pouvons utiliser pour les faire entrer ici. Parce que la fonction cos x se situe entre un et moins un, alors que les degrés augmentent. OK ? Donc, si vous utilisez du cosinus pour augmenter le point x, cela ira bien. Et puis, à un moment donné, il va revenir en arrière et commencer à partir et à gauche. Bon, utilisons-le dans notre code. Commençons en fait x et y à partir de 0. On peut peut-être utiliser du cosinus ici. Nous devrions faire des radians, encore une fois, pas des degrés, mais je veux simplement passer de degrés en radians. Et je vais également attribuer une nouvelle variable. Il commencera à 0 et il augmentera dans chaque image de sorte que notre cosinus va et se retourne. Nous allons donc utiliser cette variable ici, degré. Et rappelez-vous la formule de conversion en radians. Divisez-le par 180 fois Pi. OK ? Je veux donc générer des atomes à partir du centre des colonnes. C'est pourquoi je vais simplement ajouter la largeur de Carlos. Diviser par deux plus, et ici aussi cos hauteur divisée par deux plus. Encore une fois, si je le dis, vous pouvez le voir tout d'un coup, c'est l'été. Maintenant, je vois que c'est parce que nous venons de faire une faute de frappe ici. Ça devrait être comme ça. Quand nous le sauvegardons. Vous pouvez voir qu'ils sont générés au centre du canevas, mais nous augmentons point x ou diminuons dans chaque image. Mais rien n'a changé. Cela se produit parce que plage du point x est comprise entre 011, donc cela n'affecte pas beaucoup. C'est pourquoi je veux multiplier cette valeur ici. Disons des centaines. Et pourquoi aussi ? Disons encore 200. Vous pouvez maintenant voir qu' il tourne simplement entre ces routeurs. Donc, 1 x est un. Il sera sur la droite. Si c'est moins un, c'est de la gaze sur la gauche ici. Ce que nous pouvons faire aussi, nous pouvons également rendre ce mouvement parabolique. Donc, pour l'instant, nous ne faisons pas grand-chose pour y si nous en disons toujours un. Donc, on ne fait que changer ça. Cela ne change donc pas. Mais rappelez-vous la formule parabole. Laisse-moi juste ouvrir. Ce n'est que la parabole de base, y est égal à x carré. Nous allons donc simplement implémenter cela dans notre code, qui est y est égal à 2 x fois x. Que pensez-vous qu'il se passera ? Notre forme, nous commencerons tout juste à dessiner une parabole. Laissez-moi juste le sauver. Vous pouvez voir le résultat et utiliser cette logique. Et pour grand-mère, tu peux tout dessiner. Vous voulez. Un cercle huit, un symbole de l'infini, une erreur. 10. Pour commencer (effet Pixel): Dans cette section, nous allons créer un bel effet pixel en utilisant Vanilla JavaScript. Ainsi, à la fin de cette section, vous pourrez utiliser cet effet de pixel sur les images PNG d'erreur. Donc, si vous êtes prêt, ouvrez votre ligne de commande et nous pouvons commencer. Dans les sections précédentes. N'oubliez pas que nous avons créé un nouveau dossier de projets sur le bureau. J'irai donc dans le dossier des projets. Je vais créer un nouveau dossier ici concernant ce projet. Et je l'appellerai effet pixel et j'irai dans ce dossier. Donc ici, ce dont nous avons besoin, c'est en fait trois téléphones. Comme toujours, indexez le HTML. Je dirai donc toucher index.HTML pour le créer. Et touchez également index.js et aussi pour CSS, style.css. Bon, maintenant nous avons créé nos fichiers. Ouvrons. 11. Créer le projet: Nous pouvons également ouvrir le projet avec du code VS en utilisant le terminal. Donc, dans votre ligne de commande, si vous dites simplement des points espacés capturés, si votre shell de commandes est déjà installé, les commandes, cela ouvrira le code VS à l'aide de votre répertoire ici. Donc, si cela dit quelque chose comme une commande introuvable, laissez-moi sur l'écran, vous pouvez simplement entrer dans VS Code et appuyer sur Commande V ou Control V sous Windows. Et ici, tapez la commande shell. Donc, puisque j'utilise la version initiée de VS Code, parce que j'utilise une version bras six à quatre pour Apple silicium. Il est dit appelé initiés, mais, normalement, vous pouvez voir ici qu'il est dit installé appelé commande dans pet. Donc, si vous utilisez des initiés, vous devez installer celui-ci. Si vous utilisez une version normale, il suffit de VS Code. Vous pouvez donc le vérifier ici. Vous devriez voir ici installer, installer à froid. Et une fois que vous aurez fait cela, une fois que vous aurez cliqué dessus, il installera cette commande. Et puis vous pouvez entendre, utilisez cette commande. Puisque j'utilise cette version à l'intérieur de cette version pour moi, elle s'appelle initiés. D'accord ? Et cela va ouvrir le projet dans VS Code pour moi. Très bien, commençons par index HTML. Comme toujours, nous utiliserons le modèle HTML5. Ici. On peut dire effet pixel pour le titre. Et puis, comme toujours, nous devrions créer nos colonnes. Je vais donner mon code comme un identifiant sans-abri nous devrions également créer une balise de script compte tenu de la source de l'index js. Enfin, associons également notre fichier CSS à un lien. D'accord ? Donc, tout est prêt en HTML. Allons-y, dans CSS. Je veux donc tout choisir ici. C'est pourquoi je vais utiliser astérix et définir la marge 0, rembourrage, 0, la taille de la boîte, la border-box. Cela permettra quelques ajustements. Vous pouvez faire des recherches pour cela. C'est un sujet CSS dont je ne discuterai pas en ce moment. Faisons en sorte que le fond soit noir. Ensuite, nous pouvons appeler notre Cosmos en utilisant Ivy Tech. Et fixons une bordure. Un px blanc solide. Et définissez également sa position sur absolue parce que nous n' avons rien d'autre. Nous n'avons pas quelque chose de relatif pour pouvoir le réparer au centre de l'écran en effectuant des valeurs supérieures et gauches. Il existe de nombreuses alternatives. Faire celui-ci dans tous les sens fonctionnera. Enfin, nous voulons traduire les couleurs, mon moins 50 %. Ces lignes ne feront que faire les couleurs qui amèneront le Congrès au Centre sur chaque résolution. Ok, je vais juste enregistrer CSS et nous en avons fini avec HTML et CSS. Nous pouvons maintenant ouvrir le fichier JavaScript. C'est comme toujours, nous devrions d'abord créer les voitures en utilisant élément par ID. Passez la carte d'identité de ma voiture. Et nous allons également créer notre CTX dans ce contexte. Goody. Très bien. Maintenant, ce que je veux faire, c'est déplacer certaines images PNG dans ce dossier et utiliser cette image également. Je vais vous fournir cette image provient de la section Ressources. Vous pouvez donc les télécharger et utiliser exactement les mêmes images que moi. Vous pouvez également choisir vos propres images PNG dans votre propre projet. Laissez-moi apporter mes photos. Ok, donc nous avons trois photos et PNG. En ce moment. Maintenant que nous l'avons fait dans un système de fichiers local, nous pouvons maintenant y accéder. Je vais créer une nouvelle variable, qui sera laquelle, et elle sera un objet de classe d'images afin que nous puissions maintenant changer sa source pour laisser dire. Commençons par Kerry. C'est donc le nom du fichier dans le même dossier. C'est pourquoi nous n'avons pas besoin de barres obliques et de points, rien d'autre. Nous pouvons simplement passer son nom parce qu'ils sont dans la même hiérarchie, n'est-ce pas ? Également. Maintenant que nous avons la source de l'image, nous pouvons l'appeler. On peut donc dire « Image lot ». Cela sera donc appelé lorsque l'image est déjà enregistrée. Nous pouvons donc dire que nous pouvons dire « fonction » ici. Et tout ce que nous allons écrire. Ces lignes seront appelées une fois l'image chargée. D'accord ? Si vous ne l'avez pas dit, si vous n'avez pas utilisé, ce n' est pas la propriété de l'image. Nous pourrions commencer le codage avant le processus de chargement. Cela va donc provoquer des erreurs. C'est donc le moyen le plus sûr d'utiliser l'image avec JavaScript. Très bien ? Donc, lorsqu'il est chargé, ce que nous voulons faire est de définir la largeur de Carlos cette largeur d'image et également la hauteur de Carlos sur cette image. Maintenant, nous pouvons dessiner l'image à l'aide de la fonction d'image CTX. Donc, pour le premier paramètre, vous devez donner l'image elle-même. Donc je dirai Image et je commence x et je commence y devrait être 0. Enfin, nous pouvons faire du commerce avec Carlos height ou les terminaux. Donc, quand je l'enregistre, allons également dans le fichier HTML. Cliquez dessus avec le bouton droit de la souris et ouvrez-le avec Live Server. Et si vous n'avez pas regardé la section où nous avons installé le serveur live, c'est vraiment facile. Vous devriez simplement entrer dans les extensions ici. Nous pouvons taper Live Server et vous pouvez simplement installer celui-ci. Il s'agit d'une vingtaine de Melian. Il a environ 20 minutes de téléchargement. Il est donc sûr à utiliser. Une fois que vous l'avez installé, vous pouvez cliquer avec le bouton droit sur le fichier HTML et dire Ouvrir avec Live Server. 12. 3getImageData: L'entrée sera ouverte dans votre navigateur par défaut. Je vais le faire, j'utiliserai Chrome. Laissez-moi donc empiler de cette façon comme code pour que nous puissions les voir tous les deux simultanément. Très bien, nous sommes prêts à partir. Nous pouvons donc maintenant dessiner l' image dans la voiture, ce qui signifie que nous pouvons également utiliser la fonction ImageData pour notre image. Alors, laissez-moi juste voir DX. Laissez-moi juste expliquer la fonction Get ImageData. Nous devrions donc donner x, y, largeur et hauteur. Savourez. Comme dessiner un rectangle. Et ce que cette fonction permet d' obtenir réellement les données de l'image. L'objet renvoyé est une erreur. Alors, laissez-moi juste ImageData. Ok, nous allons juste enregistrer pour le dire et comprendre facilement. Je vais donc ouvrir l' image de la console que vous pouvez voir. Nous avons un objet de données. Bon, donc nous allons en fait enregistrer, enregistrer les données elles-mêmes. C'est donc un tableau. Il y a autant d'objets. 2 milliards, peut-être 2 millions. Je m'habille. Et si vous ouvrez à l'intérieur, vous pouvez voir que c'est juste un type de tableau serré. Il s'agit donc d'un tableau unique. Ce n'est pas un matelas. Il n'y en a pas. Il semble donc qu' il y ait trois éléments à l'intérieur d'un tableau, mais c'est juste, vous savez, que ce ne sont que des outils de développement, très désactivés. Mais normalement, c'est un tableau 1D, donc ils sont juste à côté l'un de l' autre pour chaque numéro. Et vous pouvez vérifier cela. Il commence à 0. Et si vous ouvrez la deuxième section cachée 400, l'indice augmente continuellement. Très bien ? Alors, quels sont ces zéros ? Signification ? Cela fonctionne comme ça. Vous savez, les valeurs RVB, non ? R signifie rouge. G signifie vert, B signifie bleu et a signifie alpha. Nous pouvons donc identifier chaque pixel de la vache utilisant cette couleur. Eh bien. Nous aurons donc un nombre compris entre 0 et deux, 55 pour chacun d'eux. Et cela montrera à quel point cette couleur est puissante dans cette image. Comme dans cet exemple, permettez-moi d'élargir cet onglet. Dans cet exemple, supposons que notre premier pixel soit juste ici. Et la valeur rouge de ce pixel est 0, car il n'y a pas de loyer ici. C'est tout noir, non ? Le bleu est également 0. Le vert est également 0. Je suis désolé, Green. Le bleu est également 0 et alpha vaut également 0 parce qu'il n'est pas transparent, n'est-ce pas ? n'y a pas de pâteux. n'y a pas d'éclat dans ce pixel. Mais laissez-moi juste trouver quelque chose au milieu. Je choisis juste au hasard. Tellement rare et j'espère pouvoir trouver quelqu'un qui n'est pas noir. Ça ne devrait pas être si dur. Nous devrions donc chercher. On l'a trouvé à ce pixel. Je ne sais pas où il est en ce moment. Mais nous savons que la valeur rouge est 217, la valeur verte est 10928, la valeur bleue est 166 et l'alpha est 25. D'accord ? Donc maintenant, vous pouvez comprendre que nous l'avons fait. Valeurs Rgba pour tous les pixels des colonnes. Ce qui est génial parce que nous pouvons utiliser ces valeurs pour faire tout ce que nous voulons. Nous pouvons donc dessiner l'image du côté opposé. Nous pouvons obtenir ses couleurs et les utiliser de différentes manières. Ou nous pouvons créer un effet de pluie de pixels, ce que nous allons faire. D'accord ? Donc, si c'est assez clair, j'espère que je n'ai pas expliqué les choses. Nous pouvons continuer maintenant. Maintenant que nous avons ImageData, nous pouvons réellement séparer les valeurs rouge, verte et bleue, n'est-ce pas ? Nous pouvons les conserver dans différentes structures de données. D'accord ? Nous pouvons calculer une certaine luminosité en utilisant ces revenus. Vous pouvez donc mieux comprendre quand je tape. Commençons donc par une boucle for. Je vais changer d'index en i donc nous devrions faire une boucle vers les données d'image, les données qui manquaient, n'est-ce pas ? Laissez-moi ouvrir la console à nouveau. Je suppose que je ne devrais pas le fermer. Ok, donc nous avons deux millions. Deux millions. Oui, nous avons environ 2 millions d'éléments et nous devrions les parcourir en boucle. Donc, dans cette boucle pour, je veux identifier les valeurs rouges, vertes et bleues. Le rouge sera ImageData. Les données. Et nous nous souviendrons des rouges, le premier est rouge, puis vert, bleu, Alpha. Et le quatrième, en fait, le cinquième est de nouveau rouge. Et puis celui-ci est de nouveau rouge. Celui-ci est de nouveau rouge. On peut donc dire que j'ai quatre fois, on peut obtenir toute la valeur rouge. D'abord. Dans la première itération, elle sera égale à 0. La deuxième itération sera quatre. Nous pouvons donc obtenir toutes les valeurs rouges. Je ferai donc la même chose pour le vert, mais cette fois, vous pouvez juste une autre parenthèse ici. Et nous pouvons dire plus un, car cette fois, nous obtiendrons 159 et ainsi de suite. Allons de l'avant et faisons cela aussi pour le bleu. Il devrait y en avoir plus deux. Et avec les valeurs rouge, verte et bleue, nous pouvons simplement créer une nouvelle variable de luminosité. Donc, c'est juste qu'il sera utile à cet effet. D'accord ? Nous voulons donc simplement utiliser une moyenne de variables rouges, vertes et bleues. Je vais donc obtenir la somme des trois valeurs et diviser par trois pour obtenir la moyenne. Nous pouvons donc l' attribuer à des éclaircissements. C'est vrai ? Ensuite, créons simplement un nouveau tableau. Au sommet de tout. Je l'appellerai le tableau de luminosités, un tableau vide. Et mettons simplement la valeur de luminosité dans ce tableau. Très bien, alors quelle sera la longueur du tableau de luminosité ? Ce sera la même chose avec les pixels de nos colonnes, n'est-ce pas ? Nous obtenons donc simplement les valeurs rouges, vertes et bleues de chacun des pixels. Et nous obtenons la moyenne d'entre eux. Et nous appelons cette valeur à la luminosité, et nous allons la pousser dans la luminosité, Eric. D'accord ? Donc, si vous vous en souvenez, notre résultat ne sera pas coloré. Plus tard. Nous pouvons également le faire avec des couleurs, mais dans un premier temps, nous voulons simplement une valeur de luminosité et nous l'utiliserons. Très bien, continuons. Générons des particules Tarzan ou cet effet. Je vais utiliser un nouveau for-loop pour cela. Encore une fois, je vais m'en servir à nouveau. Et disons que cette fois, je donnerai 10 mille points statiques pour la limite de la boucle for. Maintenant, cette boucle va répéter 10 000 fois et nous devrions simplement pousser. En fait, nous devrions d'abord créer un réseau de particules. Alors maintenant, que voulons-nous faire, c'est pousser particules ou une nouvelle particule 10 000 fois, n'est-ce pas ? Donc, mais nous n'avons aucune particule pour le moment. Nous n'avons créé aucune classe. Nous allons donc d'abord le faire. Nous allons simplement laisser un commentaire ici. Nous devrions donc pouvoir dire ici de nouvelles particules. D'accord ? Et puis nous ne commenterons pas cela une fois que nous aurons cette classe de particules, de particules, je suis désolé. 13. 4CreateParticleClass: Très bien, il est temps de créer une classe de particules pour notre effet de particules. Au sommet. On peut peut-être dire ici une particule de classe. Et nous sommes habitués à cette syntaxe, n'est-ce pas ? Nous l'avons déjà utilisé. Je vais donc appeler son constructeur. Et nous n'avons pas besoin de donner de paramètres , car nous pouvons le définir par défaut. Comme toujours, nous avons une valeur X, qui peut être aléatoire. Et la plage sera comprise entre 0 et Carl Mosfet, n'est-ce pas ? Donc, hum, certains d'entre vous manquent peut-être la section Math.Random au début du cours. Cette valeur retournera donc une valeur aléatoire comprise entre 0 et les colonnes avec, accord, donc si nous disons juste ici, cela retournera une valeur aléatoire comprise entre 010. On peut donc dire commerce avec ici. Il renverra une valeur x entre. Fermons simplement la console maintenant. Une valeur X aléatoire entre le campus à l'intérieur du cosmos. Et faisons la même chose pour Y. Mais nous voulons que nos particules commencent en haut des colonnes. Cette fois, nous ne voulons pas de hasard. C'est pourquoi je dirai 0 pour chaque particule. Il commencera donc aléatoirement sur la direction X, mais il commencera en haut à chaque fois. Je m'appelle aussi la luminosité, car nous utiliserons la luminosité. Rappelez-vous ici, il suffit de le calculer. Je vais juste le faire 0 par défaut, mais nous le changerons plus tard. D'accord ? Ils devraient également avoir une vitesse car ils tomberont avec une vitesse aléatoire. Donc, quelque chose comme trois œuvres. Et ils seront aussi des cercles. C'est pourquoi ils ont besoin d'un rayon. Et je veux que chaque particule soit de tailles différentes. C'est pourquoi Faisons ses valeurs de rayon entre. Je ne veux donc pas que ça commence à 0. Je vais donc en ajouter un ici. Cette valeur sera donc comprise entre 1,52. D'accord ? Nous avons donc maintenu la partie constructeur. Il est temps de tampons liés à la fonction de mise à jour. Dans la fonction de mise à jour, vous savez déjà quelle est la fonction de mise à jour de quatre. Il sera appelé dans chaque image, droite, avec notre fonction d'animation. Et nous écrirons la fonction d'animation plus tard. Mais la fonction de mise à jour sera appelée dans chaque image. Donc, quelle que soit la réécriture entre la fonction de mise à jour, ces lignes seront appelées continuellement dans chaque image. Donc, ce que nous voulons faire continuellement consiste à augmenter les valeurs y des particules afin qu'elles puissent tomber. Nous voulons donc les augmenter en utilisant la vitesse des particules, qui sera également aléatoire. Donc, en fait, ajoutons ici. Je ne veux pas que ce soit 0 car il sera 0. Ils ne tomberont pas, ils resteront coincés à ce pixel. Je vais donc ajouter 0,1 juste pour être sûr qu'ils tombent. Très bien, nous pouvons aller de l'avant. Ainsi, les particules tomberont continuellement. Et à un moment donné, ils arriveront au bas des colonnes, n'est-ce pas ? Donc, quand c'est le cas, nous devrions simplement, en fait, il y a deux façons de les détruire ou changer leur valeur y à 0, de sorte qu'ils recommencent dès le début. Je vais utiliser la deuxième voie dans ce projet. Je dirai donc si ce point y est plus gros. Que ou égal à moi, c'était la hauteur, ce qui signifie qu'ils sont sur le point de sortir de la toile. Faisons à nouveau y 0 pour qu'il commence dès le début. Et je veux aussi changer leur x qu'ils soient positionnés au hasard, à nouveau. Boue, aléatoire. Et notre limite est conversée avec n'importe quoi. C'est donc logique, n'est-ce pas ? C'est juste une logique pure. D'accord ? Je vais juste dire ceci. Continuons avec notre fonction de tirage. En fait, avant de dessiner la fonction, je veux parler de la luminosité car c'est là que nous utilisons la luminosité. Dans la fonction de mise à jour. Nous modifierons la luminosité de la particule dans chaque image avec la valeur que nous obtenons de l'image réelle. Rappelez-vous donc ce tableau de luminosité, juste un énorme tableau, mais c'est 1D. C'est juste qu'il contient peut-être plus de 2 millions d'éléments. Et nous pouvons obtenir le point exact de notre pratique. Alors, comment faites-vous cela ? Je dirai cette luminosité de point. Et nous pouvons appeler la luminosité. Ici. Nous devrions utiliser les valeurs x et y de la particule. Nous devrions utiliser très intelligemment pour qu' ils correspondent à sa position dans l'erreur de luminosité. D'accord, alors réfléchissez à ça. Comment pouvons-nous utiliser les valeurs x et y de notre particule ? Qu'il correspondra à l' illumination du centre. Et cela proviendra également des données de l'image. Mais il y a une petite différence entre eux. Ici, nous avons les valeurs x et y des colonnes. C'est donc un matelas, ce qui est mardi, n'est-ce pas ? Mais ici, nous n'en avons qu'un, le tableau. Nous devons donc mapper ces valeurs x et y à cette luminosité. Je vais expliquer cette partie à l'aide d'un diaporama. 14. 5Mapping2d1d: Voici nos colonnes. Nous avons les valeurs x à l'horizontale, nous avons les valeurs Y à la verticale. Et c'est le tableau de luminosité que nous avons utilisé. Ils ont donc acheté vos cadeaux de la même chose. Les pixels du cosmos. Mais il y a une petite différence. L'un d'eux est en 2D, tandis que l'autre est 1D. Ainsi, en utilisant les valeurs x et y, nous pouvons représenter un pixel en deux dimensions. Parce que nous utilisons les valeurs x et y. Mais dans le tableau de luminosité, c'est linéaire. Nous n'avons qu'une seule dimension. Vous pouvez donc voir ici le reflet du tableau de luminosités en coordonnées x et y. Ces valeurs représentent donc que l'index est hors de l' enquête éclaircie dans le Canvas. Nous pouvons utiliser la formule pour accéder à l'index de l'enquête lumineuse en utilisant les valeurs x et y des pixels. Disons donc que nous voulons accéder au dixième élément et au pixel. Donc, mais nous ne savons pas quel pixel il se trouve dans le tableau de luminosité. Nous savons seulement que x est deux et y est deux. Nous allons donc utiliser la formule. Il nous en donnera dix. Et cela fonctionne parce que nous ne faisons que multiplier la valeur y par le nombre de lignes. C'est logique, non ? Ensuite, nous ajoutons X. Voyons donc un autre exemple. Si nous voulons accéder au virus X4 six pixels, la formule nous donnera 44. Nous utiliserons donc cette formule dans notre code. Cela ressemblera à ça. En passant, nous utilisons simplement Math.Floor dans le code car les valeurs x et y ne sont que des valeurs flottantes générées aléatoirement. Comme ils sont fluides, ils ne sont pas des entiers. Mais nous le ferons, nous avons besoin d'entiers. C'est pourquoi nous utiliserons Math.Floor dans la cour. 15. 6UseTheFormula: Utilisons cette formule dans notre code. Je dirai donc Math.Floor, ce point y moins une fois des virgules. Mais pour l'instant, je peux agrandir cette fenêtre plus mod floor à nouveau, ce x. Nous ne voyons toujours pas d'animations car nous n'avons pas créé notre fonction d'animation. Mais soyez patient. Nous sommes sur le point de le faire. 16. 7DrawFunction: Créons également la méthode de dessin, ce qui est vraiment facile, et nous l'avons déjà fait. Donc, ici, je dis dessiner. Je devrais vraiment commencer à dessiner, va commencer les pads. Et on peut dire FillStyle, blanc. Au fait, vous pouvez modifier cette ligne avec la couleur que vous voulez. Ou à l'avenir, nous pourrions modifier cette ligne avec la couleur de l'image afin que les pixels soient également colorés. Nous voulons donc dessiner un cercle en utilisant x, y, rayon 0 et le cercle complet. C'est pourquoi j'utiliserai math.pi deux fois. Nous avons donc déjà expliqué quels sont ces paramètres et comment dessiner un cercle dans les sections précédentes. Et enfin, nous devrions dire CTX, peur. D'accord, laissez-moi juste sauver ça, mais nous n'appelons pas que Drive le fonctionne. C'est pourquoi nous ne voyons aucune animation. 17. 8CompleteTheEffet: Allons jusqu'au bout. Ici, nous pouvons créer une fonction animée. Je veux donc en faire une fonction flèche. Et d'abord, dans la fonction d'animation, nous voulons changer l' opacité des plus courantes. Nous pouvons le faire en utilisant la propriété alpha globale du CTX. Et fixons-le à 0,05. Changez également FillStyle en noir. D'accord ? Et nous voulons dessiner un rectangle, recadrer avec cette opacité et cette couleur noire. C'est pourquoi je vais donner hauteur au commerce et au commerce. Ce rectangle couvre donc toute la zone. D'accord ? Vous pouvez donc voir ce que nous faisons ici, n'est-ce pas ? Nous dessinons simplement un bleuâtre et une sortie sous forme de rectangle alpha 005, ce qui nous donnera un bel effet de flou des particules. Et nous dessinons un rectangle qui couvre toutes les caméras afin que nous n'ayons pas à nous soucier de toutes les particules individuellement, mais nous ne faisons que dessiner un grand rectangle. Très bien ? Et bien sûr, nous voulons dessiner une mise à jour des particules dans la fonction Animate. Pour cela, je vais utiliser pour chaque entité. Appelons donc un tableau de particules. Pour chacun d'entre eux. Nous allons parcourir les particules. Pour chaque particule que je souhaite mettre à jour. Et je le veux. Et entre eux. Changeons également l'alpha global à nouveau. Nous allons donc perdre la luminosité des particules ici. Ainsi, en partie tableau de luminosité, nous l'affectons simplement aux particules de sorte que chaque particule ait une luminosité différente en fonction du pixel de cet emplacement. C'est vrai ? Utilisons donc cette luminosité entre mise à jour et dessin. Changeons les particules alpha globales, n'est-ce pas ? À la fin de l'animation. J'appellerai également le cadre d'animation de demande comme d'habitude. Très bien, appelons simplement la fonction animate et enregistrez ce fichier. Nous ne voyons aucune particule. C'est parce que nous n'avons pas poussé les particules dans un réseau de particules. Dans cette boucle for-loop. Nous n'avons pas généré car il ne s'agit que de commentaires. Donc, les particules sont regroupées que nous devrions dire pousser une nouvelle particule et cela devrait être parfait. Quand je dis « Attendez », nous ne voyons plus rien. Ok, c'est bizarre. Oh, il y a une, je ne vois qu'une particule. Alors peut-être que notre petit déjeuner est trop à dessiner. Multiplions cette valeur par un petit nombre. Bon, maintenant, nous avons nos particules. Ils réagissent à l' image, ce qui est génial. Mais je veux juste augmenter un peu cela. Ce n'est pas mal. Peut-être devrions-nous encore diminuer. Oui, c'est bien mieux. Maintenant, ce que nous avons fait ici, c'est de changer l'alpha global avec la luminosité que nous venons de calculer. En prenant la moyenne des valeurs rouges, vertes et bleues de ce pixel dans l'image d'origine. Et ces valeurs données étaient la luminosité ou ce pixel. Et nous utilisons cette luminosité dans notre effet pixel. J'espère que cet effet vous a plu. Et ce qui est excitant ici, c'est que nous pouvons désormais utiliser cet effet dans n'importe quelle image que nous voulons. D'accord ? Je vous fournit donc également le mur ou le fichier PNG dans Udemy. Il suffit donc de changer ici aussi pour appliquer cet effet sur cette image. 18. 9addRGBCouleurs: Je pense que c'est déjà un grand effet. Mais si vous souhaitez utiliser les couleurs d'origine au lieu du noir et du blanc, nous pouvons le faire facilement. Nous allons donc ouvrir notre code. Un arc. Je souhaite créer un nouveau tableau RVB. Très bien ? Nous utiliserons donc un tableau RVB comme un tableau de luminosité. chaque itération de cette boucle for, nous voulons également pousser les valeurs rouge, verte et bleue dans un tableau. Et nous utiliserons cela plus tard. Donc ici, je vais aussi pousser dans le tableau RGB. J'utiliserai donc des littéraux de chaîne JavaScript. Je crois que c'est le nom de la technique ici. Il suffit donc de mettre un dos à dos ici. Et nous pouvons désormais combiner des textes, du texte avec des objets JavaScript comme celui-ci. Et il reviendra en ***** à la fin. Donc, comme ça, je dirai le signe du dollar avec le parent. C'est la paranthèse de Carla. Vous pouvez maintenant taper rouge ici, puis vous pouvez simplement continuer à taper la puanteur. Nous voulons donc dire que le RVB, rouge et le rouge viennent d'ici. La valeur rouge, quelle qu'elle soit. Ensuite, nous voulons également importer du vert. Je suis enfin bleu et je ferme la parenthèse. Donc, ça a l'air bien. Nous pourrions aussi le faire comme ça. C'est la même chose. Parenthèses RVB plus rouge, virgule, espace , vert, etc. Je pense donc que c' est très lisible. C'est pourquoi je l'ai utilisé de cette façon. OK ? En ce moment, nous avons un tableau RVB de chaque pixel. Et à l'intérieur de ce tableau, il y aura des chaînes, ce qui correspond aux valeurs RVB. Et si vous allez plus bas, nous disons CTX FillStyle noir et pas celui-ci. Ttx FillStyle blanc. Au lieu de faire pousser des particules blanches. Nous pouvons faire avec les valeurs RVB que nous venons d'arrêter. Ici. Nous devrions utiliser la même logique avec le tableau de luminosité, car il s'agit là encore d'un tableau 1D qui contient toutes les valeurs RVB des caméras. Disons donc un tableau RVB. Je vais donc utiliser la même chose. En fait, il suffit de le copier. Fermez cette section. Il suffit de copier ceci et de le coller ici. Disons ça. Voyons le résultat ici. En fait, ça marche. Laissez-moi donc ouvrir l'image originale. C'est vrai. C'est pourquoi nos particules sont générées. C'est vrai ? Essayons le curry. Le curry a plus de couleurs, non ? Essayons le curry. Très bien, super. Maintenant, nos particules sont dans la couleur exacte de ce pixel. C'est également génial. Changeons donc un Morton, et c'est fini. Au début. Lorsque j'enregistre cette actualisation, vous voyez l'image du code, n'est-ce pas ? Donc, supprimons simplement parce que nos particules vont dessiner. Nous l'avons donc vu car ici nous dessinons simplement l'image. Donc, pour obtenir ImageData, nous devrions dessiner l'image. Nous ne pouvons pas supprimer le laitier, mais ce que nous pouvons faire à la place, après avoir obtenu les données de l'image, nous n'avons pas besoin de conserver l'image. En revanche. On peut juste dire un rect clair, à partir de 00 h jusqu'au bout pour nous calmer quoi ? Nos panneaux. Donc, quand je sauve cela, nous ne voyons rien au début et les particules commenceront à le dessiner. Ok, rafraîchissez-vous à nouveau. Nous ne voyons rien ici, mais les particules sont dessinées, d' accord, donc c' est génial. Je pense que c'est l' état final de cet effet. J'espère que vous avez apprécié. Je crois que cela sera un effet utile pour votre rhume. Notre voyage. 19. 1NodeAndNPM: Si vous n'avez pas encore installé Node JS, téléchargez-le depuis. Vous pouvez donc télécharger des chaises non pas à partir de cette URL. Et vous devez choisir la version qui correspond à votre système d'exploitation. Pour les utilisateurs de CPU L1, assurez-vous que vous téléchargez la version de bras six à quatre. Ou si vous utilisez Windows, vous pouvez simplement l'installer ici. Vous devez ensuite terminer le processus de configuration. Après l'installation, vous pouvez vérifier si le nœud est complètement installé à l' aide de la commande. Pour ce faire, je vais ouvrir un terminal de ligne de commande sur Mac. Vous pouvez utiliser les fenêtres PowerShell. Très bien ? Voyez si noeud est installé, nous pouvons utiliser la commande naught dash V. Ou c'est similaire à la version nulle dash dash. Il nous montre donc la version de node.js. Vous pouvez également vérifier si npm est installé car nous utiliserons npm, qui est un gestionnaire de paquets pour NodeJS, et nous allons télécharger des bibliothèques à l'aide de MPM. Très bien ? Soyez assuré que Node et NPM installés et que vous pouvez voir leurs versions pour que nous soyons bons à partir. 20. 2InstallCanvasSketch: Maintenant que nous avons installé et PM, nous pouvons maintenant installer la bibliothèque Karma Sketch que nous utiliserons dans Google. Commençons par des points communs avec Sketch et allons dans cette page détaillée. C'est donc le créateur du sketch commercial. Vous pouvez voir la bibliothèque ici. Nous utiliserons cette bibliothèque pour que vous puissiez consulter la documentation et les exemples ici. Si vous allez ci-dessous, vous pouvez voir un guide d'installation pour le dessin commercial. Nous avons donc déjà téléchargé le MPN. Nous pouvons utiliser cette commande. Copiez ce commentaire ici, et revenez à Terminal ou PowerShell, que nous utilisions macOS ou Windows, liste dash g à la fin le rend global. Nous ne le téléchargeons donc pas localement dans un dossier, mais nous le téléchargeons globalement. Appuyez donc sur Entrée et attendez le processus de téléchargement. Donc, si vous avez des problèmes comme moi, des erreurs sur le terminal, c'est juste la chaussure d'autorisation. Très bien ? Vous pouvez donc simplement dire sudo au début, puis coller la commande si c'est le cas, cela résoudra ce problème. OK, il suffit de taper sudo au début , puis d'appuyer sur Entrée. Très bien, maintenant nous téléchargeons également la bibliothèque Sketch. instant, je veux parler un peu des commentaires du terminal. Je veux juste que vous connaissiez les commandes que vous devriez savoir suivre. Très bien, donc tout d'abord, vous pouvez aller dans un répertoire à l'aide du commentaire cd. Disons CD Desktop. Et maintenant, nous sommes sur le bureau. Vous pouvez créer un nouveau dossier à l'aide de vecteurs. Je vais donc appeler ça un croquis. Nous venons de créer un dossier d' esquisse bureau, puis nous allons dans ce dossier d'esquisse. Au fait, vous pouvez voir que si je tape SK et que j' appuie sur Tab, il suffit de compléter automatiquement, n'est-ce pas ? Parce qu'il n'y a qu' un seul dossier qui commence par s k, mon bureau. Et c'est comme ça que j' irais dans ce répertoire. Si vous voulez revenir en arrière, vous pouvez simplement dire cd dot dot. Nous sommes donc sur le bureau. Une fois encore. Nous allons esquisser dans Scouts, nous pouvons obtenir une liste de dossiers et de fichiers en tapant simplement ls. Donc, actuellement, nous n'avons rien dans le dossier Sketch. C'est pourquoi nous n' obtenons rien. Créons donc une nouvelle pile de test. commande tactile crée donc un fichier. Très bien. Maintenant, si vous tapez ls, vous pouvez voir le JS de test que nous venons de créer. Si vous aviez créé pour le jazz et tapez ls, vous pouvez le voir aussi. Alice devrait donc voir la liste des fichiers. Il affiche tous les fichiers d'un dossier. Ok, ce sont les commandes de base, ligne de commande que nous utiliserons. Nous avons donc créé notre dossier. Créons notre premier projet de croquis. Soit dit en passant, pour le visualiser facilement, je veux placer mon dossier dans cet écran pour que vous puissiez le voir simultanément. Les fichiers de ce dossier. Nous n'avons pas vraiment besoin d'eux. Je vais simplement les supprimer. Nous pouvons maintenant créer notre projet de croquis karma. Alors, nous allons vérifier. Retournez à nouveau, au sommet. Nous avons le commandement de créer votre projet. L'ouvrir également dans le navigateur. Rafraîchir le tiret ouvert. Alors, il suffit de le coller. Copions-le et collons ici. Et appuyez sur Entrée. Vous verrez que le fichier que je viens de créer. Et nous avons également ouvert le projet dans le navigateur. Il s'agit donc d'un serveur en direct, ce qui signifie que vous pouvez voir dans le terminal le serveur exécuté à cette URL. Si vous copiez cette URL dans un navigateur, vous pouvez voir l'esquisse. 21. 3Esquisser: Nous sommes maintenant en mesure de voir nos visuels dans le navigateur. Mais avant cela, revenons dans le dossier. Vous pouvez voir qu'il crée trois fichiers. Sous dossier. Nous allons écrire le code sur sketch js. Alors ouvrons-le. Je vais simplement déplacer le fichier à l'écran. Permettez-moi donc d'expliquer ces lignes. En premier lieu, il ne s'agit pas simplement d'un terme important. Donc, cette ligne est juste nécessaire, nécessitant la bibliothèque Sketch de virgule que nous venons de télécharger. Et il conserve le résultat de la bibliothèque dans la variable d' esquisse du canevas. Très bien, pour que nous puissions utiliser l' esquisse couleur de la bibliothèque. Et en dessous, il y a des paramètres. Settings est juste un objet JavaScript qui sera transmis en tant que paramètre de la fonction Commerce get ici. que cette bibliothèque sache comment se comporter avec les paramètres que nous venons de régler. Disons donc que je veux changer la dimension. Je peux le faire ici. Disons donc que pour l'instant, nous voulons que le Commonwealth se présente sous une forme A4. Vous voyez que c'est une forme de quatre. Ou nous pourrions également modifier l' orientation des couleurs. En tant que paysage. Par exemple. Vous le faites, vous voyez, il suffit de faire pivoter les couleurs. OK ? L'objet settings est donc destiné aux paramètres généraux que vous pouvez ajuster. Pour plus de détails. Vous pouvez toujours consulter la page GitHub. Très bien, ici à la documentation, vous verrez également d'autres exemples. Allons de l'avant et parlons de cette fonction. Il s'agit donc d'une fonction flèche qui renvoie une autre fonction. Ce contexte, nous utiliserons chaque fois que nous voulons dessiner quelque chose. Et nous pouvons obtenir le poids, ainsi que la hauteur de la toile en utilisant ces paramètres. Nous pourrions également ajouter quelques paramètres ici, mais c'est suffisant pour l'instant. Très bien. Donc, d'accord, assez pour la partie théorique. Mettons en action et dessinons un rectangle de base. Nous allons donc écrire la plupart de notre code ici. Tout d'abord, nous devrions changer FillStyle pour fondre parce qu'il était blanc avant. Vous voulez dessiner quelque chose. Nous devrions d'abord dire commencer le chemin. Pour que JavaScript sache que nous commençons à dessiner. OK ? Ensuite, nous pouvons appeler des contextes qui reposent pour dessiner un rectangle. Vous devriez donc faire des relish x, y, largeur et hauteur. Et je vais donner qu'ils sont tous des centaines. Je suis enfin là. Si je dis des contextes qui se remplissent, nous sentons simplement la zone du rectangle. Ou nous pourrions simplement dire un trait pour simplement mettre en évidence les bordures du rectangle. Voyons donc la différence. Maintenant. Laissez-moi d'abord taper le champ. Je vais donc le sauver. Et quand une seconde, oui, vous pouvez voir qu'il met automatiquement à jour le navigateur, car il s'agit d'un serveur en direct. Nous n'avons donc plus besoin de nous rafraîchir. Très bien, c'est une belle caractéristique du karma sketch. Je vais utiliser l'écran comme ça trié. Nous pouvons écrire simultanément le code et voir le résultat. Nous avons donc tapé une pilule ici. Vous voyez que cette zone est remplie. Et si vous faites simplement un trait, vous pouvez voir qu'il s'agit maintenant d'un rectangle vide. Très bien. Ainsi, l'un des avantages de l'esquisse commerciale est que vous pouvez prendre une capture d'écran des visuels. Vous le créez. Nous pouvons le faire en appuyant simplement sur Command S sur macOS et en contrôlant comme sur Windows. C'est donc amusant. Disons que nous voulons simplement dire notre pratique. Et je vais juste appuyer sur Commande S. Et encore une fois, si vous utilisez Windows, veuillez appuyer sur Contrôle S. Et une fois que vous avez fait cela, il suffit de faire une capture d'écran des colonnes. Et le résultat va simplement dans le dossier de téléchargements de votre ordinateur. C'est donc le résultat. C'est juste un PNG de, mais nous l'appelons simplement. Nous pourrions également prendre une capture d'écran comme celle-ci de l' image que vous savez, c'est juste que ce n'est pas la meilleure pratique, c'est plus rapide et plus facile. C'est pourquoi j'aime cette caractéristique du sketch communiste. 22. 4PratiqueRectangles: Dans cette vidéo, nous sommes confrontés à un nouveau défi. Nous allons essayer de dessiner cette image à l'aide d'un croquis de Côme. Il y a donc 12 rectangles un à côté de l'autre avec 100 pixels. Oui. Essayons de dessiner ce point de vue avec un croquis de coma. Donc, tout d'abord, il faut créer un rectangle, n'est-ce pas ? Nous utiliserons une fonction de remplissage. D'accord ? De plus, nous voulons modifier les dimensions du rectangle pour qu'il soit plus long. Essayons de changer la hauteur. Nous ne voulons pas de rectangle horizontal, donc nous devrions peut-être en diminuer la largeur. D'accord ? Mais ce n'est pas une bonne approche. Nous venons de donner des rouleaux statiques à la largeur et à la hauteur. Ce n'est pas un bon type de pinceau car si vous modifiez la taille de l'écran, rectangle n'est pas réactif. Très bien ? Et si nous changions les dimensions ? Changeons donc la dimension des comas. La quantité de pixels dans les caméras est beaucoup plus importante. Mon rectangle devient donc beaucoup plus petit. Les objets ne peuvent donc pas être dynamiques de cette façon. Très bien ? Mais ce que nous pouvons faire, c'est déclarer une nouvelle variable. d'autres termes, il peut s' agir du pourcentage de temps des plus courants. D'accord. Copions cette ligne. Et aussi pour la hauteur, je l'appellerai hauteur épave, rencontrer le temps pour cent des cardiomyocytes. Mais c'est peut-être le cas, je ne sais pas. Essayons 0 aussi. Utilisons les vecteurs et la fonction de hauteur vectorielle. D'accord ? Maintenant, il est réactif. Très bien. Il s'agit d'une meilleure approche. Mais notre rectangle est toujours pris, allons-y et rendons le rectangle plus mince. Peut-être 01. C'est trop. Essayons 05. Pas mal. Que diriez-vous de 0 ? Ok, c'est génial. Nous avons créé un rectangle, mais ce dont nous avons besoin, c'est 12. Souvent. Au lieu de créer 12 rectangles manuellement, nous pouvons utiliser for loop. Ici. Nous nous lançons pour créer des objets Ralph. Indiquons donc la limite de la boucle for 12e et l'augmentation écrite avec une dans chaque itération. Alors, nous devrions déplacer ces lignes sous cette forme, n'est-ce pas ? Nous devrions donc commencer le pad à chaque itération et vous devriez dessiner un rectangle dans chaque itération. Et nous devrions aussi les remplir. Laissez-moi juste enregistrer ce fichier. heure actuelle, nous avons deux rectangles, mais ils sont tous au-dessus de l'autre. Très bien, c'est pourquoi nous ne voyons qu'un seul rectangle. Laissez-moi juste les séparer. Nous devrions donc changer la valeur x, n'est-ce pas ? À chaque itération. Essayons donc de modifier la valeur x. Nous devrions donc faire de la multiplication avec l'IA. L'IA augmente donc à chaque itération, ce qui donnera un écart de 100. Maintenant, nous pouvons voir beaucoup de rectangles, mais nous avons besoin d'un carnivores plus gros. C'est donc génial. Si vous ne pouvez pas mourir, il devrait y avoir 12 rectangles. 12345678910. Robuste. Très bien ? Et il y a aussi un espace de 100 pixels entre chacun des rectangles, non ? Parce que nous avons augmenté la valeur I à chaque itération. Et nous multiplions cela par la main. Il y a un écart de 100. 23. 5CanvasTranslate: Avant la forme suivante, je veux parler de certaines fonctions. Parlons d'abord de Carlos Translate. Voici donc notre Toile. Au début. Nous avons un point d'origine, soit 00. Dans cet état, si nous écrivons le code à gauche, les manettes de jeu et le rectangle de base, qui commence à 0054, hauteur écrite. Il va dessiner une forme comme celle-ci. Ensuite, nous verrons Charles tard. Les vaches en utilisant la fonction de traduction des couleurs. Les paramètres sont gérés pour x et pour y. Cela fonctionnera comme ça. Donc mon peigne était le point d'origine 100100. Très bien, nous ne faisons que traduire sur le cours. Notre nouvelle origine devient donc les points de traduction. Vous ne le voyez donc pas sur le navigateur. Mais sous le capot, ça fonctionne comme ça. Donc cet état après d'innombrables traductions votre champ, disons million pad et dessinez un nouveau rectangle à 0. Il dessinera ce rectangle sur la nouvelle origine. Très bien ? Mais encore une fois, nous ne le voyons pas sur le navigateur. Nous ne voyons que ces deux rectangles. Si le code est similaire à gauche. Très bien. Donc, en fin de compte, nous ne faisons que traduire la vache et commencer l'origine dans un nouveau point de traduction. Très bien, voyons ça dans le code. Essayons. Tout d'abord, je veux simplement changer le style de remplissage. Il devrait être noir. Disons que c'est devenu un tampon. Tracons le premier rectangle à partir du 0,0054 avec 54 octets. Les contextes se remplissent. Vous verrez que nous avons un rectangle, l'origine. Ensuite, nous voulons traduire à Hollywood. Donc, à ce stade, si nous disons laisser le changement, accord, parce que nous les traduisons simplement 12 étain de plomb. Encore une fois, copiez et collez ces lignes et enregistrez-les. Maintenant, vous pouvez voir, même si nous disons puiser de l'origine, cela commence ici. C'est vrai ? C'est le résultat. 24. 6CanvasRotate: Dernière vidéo, nous voyons comment traduire les couleurs. Voyons donc comment faire pivoter la perte de charbon sur cet exemple. Nous sommes donc dans cet état et nous sommes partis pour traduire. Que se passe-t-il si nous le tournons également vers Colomb ? Ainsi, dans la fonction rotation, nous utilisons math.pi divisé par un AD car il développe les radians, et non les degrés. Pour passer de degrés en radians, nous utilisons cette formule. Je dois donc traduire. Si nous tournons, la voiture a tourné comme ça. Notre nouveau rectangle devrait donc ressembler à ça. Parce que nous faisons pivoter le canevas et dessinons le rectangle après cette rotation. Très bien, essayons cela dans notre exemple. Retournez à l'éditeur. Donc ici, après la traduction, je veux simplement faire pivoter le contexte. Je veux donc le faire pivoter jusqu'à des degrés. Mais rappelez-vous cela, je m'attends à des radians et non des degrés. Nous devrions donc le convertir. Et la fonction est que nous utiliserons Pi divisé par 180. Certaines fonctions de bibliothèques telles que coma sketch font ce terme, cette conversion automatiquement. Nous utiliserons cela plus tard. Mais pour l'instant, soyez assurés que vous passez de degrés en radians. Très bien ? Ainsi, lorsque je l' enregistrerai, vous verrez que le deuxième rectangle a tourné. 25. 7EnregistrerRestaurer: Mais tout ce qui a été créé après cette rotation a affecté. Il y a donc un problème. Parce que nous faisons simplement pivoter les couleurs. Je ne veux peut-être pas faire tourner tout reste après cette ligne, n'est-ce pas ? Il devrait y avoir un moyen de restaurer les couleurs, n'est-ce pas ? Et il y en a. Vous pouvez donc utiliser le bloc de sauvegarde et de restauration. Donc, chaque fois que vous voulez simplement avoir un point de contrôle, un point de sauvegarde, vous pouvez dire contexte, je dirais. Donc. Nous venons d'ajouter ici avant de traduire et avant de faire pivoter. Nous voulons le dire, parce que nous voulons simplement passer à la phase initiale, disons. Donc, après avoir dit contextes, Dr. Restore, nous pouvons simplement créer un nouveau rectangle. Cette fois-ci. Allons y arriver. Nous en prendrons 70. Et vous verrez qu'il est écrit qu'il est créé à l' origine initiale des couleurs. Nous revenons donc au premier état. D'accord ? Essayons donc, essayons de dire le point après la traduction. Cette fois-ci, nous reviendrons à la phase qui suit la traduction, mais avant la rotation. Nous n' aurons donc aucune rotation. Mais nous partons de centaines et de centaines. Laissez-moi le sauver. Donc, vous voyez que maintenant, il suffit de me laisser changer le style de remplissage. Tourette triée que nous pouvons voir facilement. Donc, cela ne tourne pas, mais commence à partir d'un 100100 parce que nous disons simplement un point ici. Et pendant que nous le restaurons, il remonte à zéro. À ce stade. 26. 8Randomness: Je veux parler des aléatoires pendant un moment. Codage créatif. Les nombres aléatoires sont très pratiques. Nous les utilisons pour générer des motifs aléatoires, des objets et également des animations. En JavaScript, il existe donc une méthode intégrée pour générer des nombres aléatoires. Pour l'instant. Ce n'est pas ce nombre aléatoire. Pour l'instant. Consignons ça au colossal. Gardez-le. Et dans le navigateur, si vous cliquez avec le bouton droit de la souris et dites qu'il a été emballé. Ici, allez dans la console. Vous pouvez voir le résultat. Il donne donc juste un nombre aléatoire compris entre 01. Ainsi, chaque fois que je dis ce fichier JavaScript, le nombre aléatoire changera. Et nous pouvons voir qu'il sera là, il sera entre 01, n'est-ce pas ? Donc, si vous voulez quelque chose entre 010, nous pouvons simplement multiplier cette valeur par dix, alors la sortie sera étendue à dix, n'est-ce pas ? C'est ainsi que nous pouvons générer des nombres aléatoires. Utilisons un nombre aléatoire dans un exemple. Créons donc des rectangles aléatoires. Je vais donc, comme toujours, commencer par le chemin commencé et descendre. En fait, commençons par changer le style de remplissage pour me faire chanter. Et je veux également modifier la largeur de ligne de 20 pixels. Nous pouvons donc maintenant créer des rectangles comme celui-ci. Laissez-moi juste, oui, instant, je veux juste que les valeurs x et y soient aléatoires. Je dirai donc de ne pas les menacer ici. Et nous pouvons le multiplier par des nerfs de fichiers tar. Il peut donc se situer entre 0500 et aussi pour y. Voyons donc, chaque fois que je dis que la position des rectangles change et qu'elle est aléatoire absolue, nous n'avons aucune idée de l'endroit où il va se régénérer. Très bien ? Nous pourrions également les utiliser en chiffres pour largeur et la hauteur du rectangle. Donc, c'est rectangle complètement aléatoire en utilisant un fan de mathématiques. Nous allons donc créer un seul rectangle, mais ce n'est pas le cas. Pour ce faire, je vais créer une nouvelle boucle for-loop, les rectangles de Townsend. Je vais simplement déplacer celui-ci ici. Alors, ne sentons peut-être pas un accident vasculaire cérébral. Et je le ferai simplement, je vais juste faire taille Carlos pour les valeurs x et y, mais diminuer les valeurs de largeur et de hauteur. Il suffit donc d'économiser et de voir le résultat. À ce stade, chaque fois que vous enregistrez le fichier, l'image change. Parce que nous utilisons des nombres aléatoires. Si vous souhaitez obtenir un résultat plus rapide, pouvez simplement commenter la ligne avec le résultat. Ou vous pouvez également rendre la largeur de la ligne aléatoire. C'est peut-être entre 05 ans. 27. 9AnimationBounce: Moins de 0 ou égal à 0, a également choisi la vélocité. Cela signifie que c'est le 0,4 y, y commence ici, commence ici. Donc pour y, s'il est égal à 0, à ce moment-là, ils devraient simplement faire la vitesse dans la direction opposée. Je vais juste sauver ça. Et faisons la vitesse cinq pour la voir rapidement. D'accord ? Oui, ça marche. Cela le fera, c'est une boucle infinie car notre fonction de retour est appelée à l'infini. Et la balle va simplement rebondir entre ces deux côtés. 28. 10CircleClass: Dans cette vidéo, nous allons créer un projet réel à l'aide d'une esquisse couleur. Donc, à la fin, le projet final ressemblera à ceci. Vous verrez donc une vidéo dont nous discuterons de l' animation à l'aide d'un croquis couleur. Très bien, si tout était prêt, ouvrez votre ligne de commande. Et nous allons commencer à créer un nouveau projet d'esquisse. Je l'appellerai Project chaud. Js, tiret, tiret, tiret, tiret ouvert. Il s'ouvre donc simplement dans un navigateur. Et laissez-moi juste faire apparaître le dossier. Donc, dans les croquis, nous avons projet un point js. Ici. Nous avons une nouvelle colonne ou un croquis. Et ce plan est déjà expliqué dans les vidéos précédentes, afin que nous puissions commencer à écrire du code pour réaliser notre projet. Tout d'abord, que voulons-nous faire, c'est créer des cercles, n' est-ce pas ? Je veux donc créer une classe de cercle car nous allons créer plusieurs raccourcis. Peut-être des centaines de cercles. C'est pourquoi nous allons d'abord créer une classe comme les classes Eric. Parce qu'il a besoin d'un constructeur. Cercle a besoin de valeurs x, y et rayon pour être créées. Et puis je dirai que ce point x est égal à x, ce point y est égal à y, ce .radius est égal à deux rayons. Et ces lignes ne font que les actes des colonnes du cercle à partir du paramètre quand c'est le décalage temporel. D'accord ? Maintenant, on peut juste causer mon sarco. Sarco. Et je vais vous donner 100100 pour les valeurs x et y, comme ici, 50 pour le rayon du cercle. D'accord ? Donc, à ce stade, si je dis, vous ne pouvez rien voir sur le navigateur car nous avons créé le cercle. Mais il n'y a rien qui a conduit le cercle sur la colonne où ils n'ont pas utilisé Honorlock. Nous n'avons pas utilisé l' entité de contour. Donc, pour le faire. Nous avons également besoin d'une méthode de la classe cercle, et j'appellerai cette méthode conduite. D'accord ? Drone doit prendre un paramètre de contexte. Il utilisera le contexte pour commencer le chemin. La nuit, nous l'avons fait dans les vidéos précédentes en retour. Et puis il dessinera le cercle à l'aide d'un arc. Nous pouvons donc maintenant utiliser la valeur x du cercle, valeur y hors du cercle. Rayon du cercle. Maintenant, je veux que l' angle de départ soit 0 par défaut. D'accord ? Parce que nous ne voulons jamais un demi-cercle. Nous voulons toujours un cercle complet. C'est pourquoi je noterai également que pi fois 2 par défaut. Très bien ? Et enfin, disons un coup de contexte. Alors, sauvegardez ça. Et je pense toujours que c'est sur le navigateur parce que nous n'avons pas encore appelé Draw. Donc mon cercle qui a conduit Pendant que nous appelons la fonction drop et la sauvegardons, reste le travail des points forts. C'est parce que nous donnons le contexte militaire antérieur à la fonction de tirage. D'accord ? À l'heure actuelle, vous pouvez voir que le cercle est là. Peut-être pourrions-nous faire ce remplissage juste pour le voir facilement. Nous devrions également changer les contextes Dot FillStyle en noir. Maintenant, notre cercle est là. D'accord, mais le premier coup, et je veux juste changer Lima. Allons en faire huit. C'est raisonnable en ce moment. Très bien, nous avons donc créé notre premier cercle en utilisant la classe de cercle. Dans la vidéo suivante, nous allons créer plusieurs cercles et les garder en réseau. Ensuite, nous pouvons commencer à itérer sur des cercles. 29. 11GenerateCircles: Les gars, il est temps de créer des cercles. Nous voulions juste créer les cercles IRA pour une fois toutes. C'est pourquoi je ne le mettrai pas en œuvre en retour. Parce que cela sera appelé de nombreuses fois. C modifie les paramètres de l'animation. C'est là que j' appellerai des cercles. Tableau de cercles. Je vais créer des cercles ici. Ensuite, nous avons besoin d'une boucle, juste trop apparente. Un couple de 100 cercles en delta. Donc, à chaque itération, je vais pousser un nouveau cercle dans la NRA. Et permettez-moi d'élargir cet onglet. Je veux donc des valeurs aléatoires pour x, y et rayon. Bon, d'accord, je vais juste dire fois aléatoires r, qui est 2048. Je vais utiliser cette valeur pour le rayon x et alpha y. Je vais juste, je ne sais pas, peut-être que 20 est une excellente limite pour cela. Très bien. Nous poussons 100 cercles dans l'enquête circulaire et leurs propriétés sont complètes, courues. Très bien, alors gardons ça. Nous ne pouvons pas encore les voir parce que nous n'avons pas appelé Joël fonction des cercles. Donc ici, au lieu de créer un cercle, utilisons simplement des cercles pour chaque fonction. Chacune d'elles itère dans chaque tableau d' éléments de cercles. On peut donc simplement dire « cercle ». On peut dire un cercle qui a conduit le contexte. Lorsque je l'enregistre, vous pouvez voir à droite que les cercles générés au hasard se trouvent sur notre toile. Ainsi, chaque fois que je dis, chaque fois que je rafraîchis la page, les cercles sont générés. 30. 12AnimateCirlces: Maintenant que nous avons créé nos cercles, il est temps de bouger aujourd'hui. Nous allons le faire en utilisant l'animation d'esquisse de Côme. Nous donnerons à chaque cercle une vélocité, directions x et y. Allons de l'avant et recommençons. Fonction constructeur. Nous n'avons pas besoin de paramètres car nous allons générer la vitesse par défaut. Je vais donc dire ceci, notez la vélocité x sur cette pensée, bien pourquoi elles ont été perdues contre Alice, soyez aussi aléatoire. C'est pourquoi j'appellerai match sur la fonction multipliée auparavant. Cette valeur sera donc 04. Mais ces cercles devraient également aller à gauche. Parfois. Nous voulons une valeur comprise entre moins 22. Pour ce faire, nous allons simplement dire moins deux avec le résultat. Nous venons donc de décaler l'Altcoin. L'expression ici renvoie un nombre compris entre moins 22. Je dirai également pour la valeur Y. Très bien ? Ainsi, chaque cercle a une vitesse sur x et y, où il s'agit de nombres complètement aléatoires. Nous sommes les bienvenus. Vous voulez simplement que la prochaine étape consiste à créer une nouvelle fonction de déplacement. Dans la classe circulaire, j'appellerai une nouvelle fonction. Et ces troubles de la mauvaise humeur. Lorsqu'un rabais sur la façon de faire cela consiste simplement modifier la valeur x du cercle avec la vélocité x. Nous ajoutons donc dx rechuté à la position dans chaque image car nous appellerons le petit fonction en retour et lancez-moi activer la propriété animation. Le retour sera appelé cadre ovale. Ainsi, la fonction de déplacement sera appelée cellule, et x sera modifié dans une reframe. Faites-le aussi pour vous. Parfait. Donc maintenant notre cercle de classe est déjà juste, nous devrions simplement déplacer la fonction et l' instruction retour ici, après avoir dessiné le cercle, nous voulons aussi bouger. Cette boucle serait en cours d'itération sur tous les cercles. Donc, en écrivant cette ligne se déplacera dans chaque image. Mais n'oubliez pas d' innover sur l'émotion. Il suffit de modifier les paramètres. Comme ça. Je ne veux pas juste le dire, super. Les cercles se déplacent au hasard. 31. 13BounceCircles: Les cercles bougent, ce qui est génial. Mais je veux remarquer ici qu'ils sortent de la toile. Donc, à un moment donné, nous finirons par des cercles. Ce que vous voulez plutôt, c'est les garder à l'intérieur des caméras. Alors écrivons un code pour que les cercles rebondissent sur les balles. Nous avons besoin d'une fonction équilibrée. Dans la fonction équilibrée, nous allons vérifier la valeur x des cercles et la comparer à la largeur. Nous avons donc besoin d'une déclaration si ici. Si ce x est inférieur ou égal à 0, cela signifie que nous allons aller à gauche du canevas, ou que ce point x est supérieur à la racine. N'oubliez pas que nous ne pouvons pas accéder à la largeur du commerce depuis l'intérieur de la classe. Je vais simplement créer un paramètre pour cela. Donc, si le X est inférieur à 0 ou plus grand qu'un blanc, le cercle va rebondir, n'est-ce pas ? Et comment pouvons-nous équilibrer ? C'est tellement facile. C'est juste que nous devrions changer la direction du x. Et nous pouvons le faire en multipliant par moins un. Si vous allez très bien avec un différend de deux, disons que si vous voulez rebondir, la vitesse devrait être moins deux. Faisons ça aussi pour le Y. S'il est inférieur à 0, ou si le y est plus grand que la hauteur, nous devrions également utiliser le paramètre hauteur. Donc, si c'est le cas, nous sommes en dehors des frontières. Nous devrions donc multiplier par moins un. OK ? Ensuite, nous pouvons simplement appeler la fonction Bounds. Pour chacun. Je vais passer les paramètres de largeur et de hauteur. OK ? Cela n'a pas fonctionné. Très bien, donc j'étais juste, au lieu d'écrire des liens, je viens d'écrire. Ok, vous pouvez voir le cirque rebondir maintenant sur les rôles qu'ils ne peuvent pas sortir dehors. 32. 14EuclideanDistance: Nous avons déjà une belle animation. Rendons-le plus joli et ajoutons les lignes entre les cercles. ce faire, nous devons calculer la distance entre deux cercles et tracer une ligne à cette distance. Il existe une formule bien connue pour le calcul de la distance entre deux points. La distance de départ fonctionne comme ça. Supposons que nous ayons deux points et que nous savons qu'il s'agit de valeurs x et y. Pour calculer la distance entre eux, vous devez d'abord examiner la différence entre les points x et y. Nous devrions donc d'abord découvrir X1 moins X2, Y1 moins Y2. Ensuite, nous pouvons utiliser la formule d'occlusion pour trouver la distance entre deux points. Examinons donc cet exemple. Nous avons deux points sur le plan de coordonnées. Et notre toile fonctionne avec des pixels. Nous pouvons donc penser qu' il y a des choses similaires, ce qui signifie que vous pouvez considérer ces points comme étant les cercles de mon projet. Ainsi, entre deux cercles, distance sur l'axe des x est de trois. Et la distance sur l' axe Y correspond à la formule, on peut facilement trouver la distance entre deux points est de cinq. Nous allons donc utiliser cette formule pour calculer la distance de nos cercles. 33. 15Lignes de dessin: Continuons notre projet et tracons des lignes entre les cercles. En retour, nous utiliserons la boucle for-loop ou l'itération de chaque cercle. D'accord ? Je vais donc utiliser une nouvelle boucle for-loop. Mais cette fois, j'utiliserai le raccourci et je changerai l'index en i et nous allons filmer cette limite finale avec les fusons. Merci. D'accord, en plus, je suis content de ça. Je vais donc aussi faire cette ligne ici, cercle un devrait aussi changer celle-ci. D'accord ? Nous avons donc maintenant une boucle for qui va courir 400 fois en ce moment. Et nous ne faisons que conserver l'objet cercle dans une nouvelle variable. À l'intérieur de ça pour la boucle. Je veux aussi créer une autre boucle for. Ce sera une boucle à l'intérieur d'une boucle, et appelons-le, appelons-le j cette fois. Nous devrions également boucler quatre cercles ici et changer celui-ci également. Et j'appellerai cette constante l'outil de cercle. En ce moment. Nous sommes à la recherche cercles et nous gardons les cercles en permanence. Ensuite, nous sommes à la recherche de circuits. Une fois encore. Nous gardons le cercle à une constante également. Nous allons donc répéter deux fois dans un tableau de charbon de bois. Ici. On pourrait tracer une ligne entre ces deux cercles, non ? Mais si vous le faites comme ça, cercle du bateau sera parfois le même cercle. Ainsi, dans la première itération, disons que le premier cercle est le premier charbon de bois du tableau. Le cercle deux est également le premier article. Ce n'est donc pas un meilleur moyen d' ordre en termes d'efficacité. Et aussi, si vous tracez une ligne là-dedans, de cette façon, nous tracerons une ligne des deux côtés. Donc, du cercle 0 au premier cercle, et aussi du premier cercle à montrer appelé 0. Il n'est donc pas aussi efficace. C'est pourquoi, pour ces raisons, je veux commencer la valeur j à partir de I plus un. Et ainsi, les cercles ne seront plus les mêmes. Parce que quand j'aurai 0 ans, j en sera un. Et quand j'en serai un, j'aurai deux ans, et ainsi de suite. Nous ne dessinons donc pas deux fois et nous ne dessinerons pas, n' essaierons pas de tracer une ligne entre le même cirque. D'accord ? De cette façon, nous faisons des options. Très bien, essayons maintenant de tracer une ligne entre ces deux cercles uniques. Comme toujours, je commencerai par commencer le chemin. Ensuite, nous avons ici une nouvelle fonction, qui est le contexte qui est passé à ce point assez explicite. Nous allons faire des valeurs x et y ici. Comme traduire ce contexte. Nous allons passer à ce point afin que nous puissions commencer à dessiner à ce moment-là. Je vais donc en cercler un, encercler un point y trié. Nous sommes maintenant à la position du cercle. Et que voulons-nous faire c'est dessiner un cercle de ligne, une position dentaire, n'est-ce pas ? Donc égal à cela, x est égal à y. Et enfin, nous voulons le trait. Débarrassez-vous des lignes vides. Sauvegardons cela et voyons le résultat. D'accord ? En fait, c'était génial. Cela signifie que ce que nous venons d'écrire fonctionne, mais la largeur de la ligne est trop grande. Changeons donc également la largeur de la ligne. Peut-être ici. Mais je veux rester, donc je veux garder les cercles, n'est-ce pas ? Je vais donc ajouter le poumon ici. Mais pour les lignes, une seule suffit. Ça a l'air mieux. L'étape suivante consiste à tracer des lignes entre tous les cercles. Il y a trop de monde. Et l'étape suivante consistera à calculer la distance entre les cercles et à dessiner les lignes en fonction de cette distance. Ainsi, lorsque deux cercles sont assez éloignés, il n'y aura pas de frontière entre eux. 34. 16GetDistance: Nous trouverons la distance entre deux cercles en utilisant la formule euclidienne dont nous venons de parler. Lu que je vais créer une nouvelle fonction. Et j'utiliserai la fonction flèche. Appelez-le oui, prenez la distance. Cette fonction nécessite quatre routeurs pi, X1, X2, Y1 et Y2. Souvenez-vous donc de la formule. Nous connaissions donc la distance entre les valeurs x. Nous devons distancer les valeurs y. Nous pouvons renvoyer la fonction sqrt. Il s'agit de la racine de la valeur à l'intérieur des paramètres. Nous devrions donc multiplier un avec une puissance de deux et plus plusieurs fois p. Cette valeur renvoie donc la distance entre deux points si vous transmettez les valeurs x et y des points. Allons donc utiliser cette fonction. Ici. Je vais déclarer une nouvelle variable dist et perdre cette fonction de distance. Les valeurs x et y sont donc des cercles. Donc je dirai cercle un point x, deux points x. Si longtemps que pourquoi faire un cercle à y ? Maintenant, nous avons la distance. Et ce dont nous avons besoin ici, c'est une déclaration si. Nous devrions donc vérifier la distance. Disons que si c'est moins de 250, d'accord ? Donc, si deux cercles sont plus proches de 250, nous voulons tracer une ligne. Je vais donc déplacer ces lignes cette déclaration IF. Donc, quand j'économise, nous pouvons voir maintenant que nous ne tracons pas de lignes entre tous les cercles, mais nous n'avons couru que deux cercles sont vraiment proches. 35. 17RéactifLineWidth: Je souhaite également modifier la largeur de la ligne en fonction de la distance entre les cercles. J'ai vu ce groupe deux cercles se rapprocher. La largeur sera prélevée, puis s'écartera. La ligne sera une tumeur. Ok, donc pour ce faire, plus dans cette déclaration si, nous allons changer la largeur de la ligne ici. Je veux donc une valeur maximale de dix. Commençons par dix. Et nous allons diminuer la largeur de ligne par rapport à la distance. Mais la distance commence à 250. Divisons-le par 25. Cette valeur sera donc maximale de dix. D'accord ? Et il peut être 0 pour la valeur minimale 0 ligne qui sera tau. Et gardons ça. Et maintenant, vous pouvez voir que nos lignes sont de plus plus épaisses et minces par rapport à la distance. Donc, une chose que je veux corriger aussi, les lignes sont visibles à l'intérieur des cercles. On peut voir qu'il commence par le centre du cercle, mais je veux qu'il commence de l'extérieur du cercle. Ok, donc les lignes ne devraient pas être visibles dans le cirque. Pour ce faire, nous pouvons sentir l'intérieur des cercles de couleur blanche. D'accord ? Nous pouvons donc le faire en fonction de conduite. Voyons simplement le style de remplissage, changeons ici le style de remplissage en blanc. Et on peut juste dire « carburant ». Ainsi, chaque fois que vous tracez une ligne, nous dessinons également le cercle. Et en remplissant le cercle à l'intérieur du cercle de blanc, on laborera toujours les lignes. Donc, quand je l'enregistre, nous pouvons voir qu' il n'y a pas de ligne à l'intérieur du cercle. D'accord ? Mais cela fait que nos lignes, vous savez, une dizaine d'entre elles. Je vais également modifier la largeur de la ligne. Peut-être 12 ans. Ok, c'est génial. C'est donc à vous de choisir. À partir de maintenant. Nous pouvons modifier le poids de la ligne. Nous pouvons modifier la valeur de nos lignes, vous pouvez modifier les bordures des cercles, ou modifier la vitesse des cercles, etc. C'est donc à vous de choisir. Essayez-le. J'espère que ce projet vous a plu. 36. Pour commencer (Visualisateur audio 1): Bienvenue dans cette section. Nous allons créer un visualiseur audio étonnant qui répond à n'importe quelle entrée audio. Comme vous pouvez le voir, les balles sautent lorsque je parle, lorsque je clipse ou lorsque je joue de la musique. Et puis, tu es toujours bon. Lorsque vous êtes prêt à le faire. Passez à la vidéo suivante pour commencer. 37. 2Configuration: Comme toujours, nous commencerons par la ligne de commande. Laissez-moi apporter le mien. Je suis actuellement en bureau. Allons dans le dossier Projets où je vais enregistrer et stocker mes projets. Donc, si je tape est ici, vous pouvez voir nos vieux projets. Créons donc un nouveau dossier ici. Et appelons ça un visualiseur audio. Allez dans ce dossier. Nous allons juste de bons dossiers. Comme d'habitude, nous avons besoin d'un fichier HTML. Cette fois. Puisque nous obtenons les données du microphone, je veux créer un nouveau fichier appelé microphone JS. Enfin, nous avons besoin d'un nouveau fichier pour la visualisation. Appelons ça Visualizer dot js. Bon, nous sommes prêts à y aller. Si vous vous souvenez de la commande ou ouverture de ce dossier en code largeur. Si vous utilisez cette version comme moi dans cette version, vous pouvez taper une commande comme celle-ci. Ou si vous utilisez une version normale du code de risque, vous pouvez simplement commander spacetime. Lorsque nous saisissons cette commande, elle ouvre le dossier en code West pour que nous soyons prêts à partir. 38. 3HTMLTemplate: Commençons le projet en important modèle HTML5. Comme toujours. Donc ici, cette fois-ci, nous utiliserons des fichiers JavaScript. Tout d'abord, changeons le titre. Nous voulons donc importer ces deux fichiers JavaScript, le boilerplate HTML. Je vais donc créer un nouveau script et faire un microphone Swash JS, ainsi que visualizer JS. N'oubliez pas que nous utiliserons la classe de microphone dans le visualiseur. La commande est donc importante ici. Le script du microphone doit être un arc de script de visualisation. Bon, donc pour commencer, s'il vous plaît. Allons dans le fichier JS du microphone et nous allons l'enregistrer. 39. 4CompleteHTML: Ces balises de scripts ne devraient pas être sur le chapeau, mais elles doivent être dans le corps. Juste après avoir eu d' innombrables, non ? J'appellerai que Michael était innombrable. Bien qu'une autre chose que nous devrions ajouter ici est le fichier CSS. Nous l'avons presque oublié, mais il existe une autre façon d'ajouter des fichiers. Vous pouvez donc le faire à l'intérieur avec Dieu. Nous pouvons donc cliquer sur cette nouvelle icône de fichier et vous pouvez simplement taper le nom. Ok, et lions également ce fichier CSS comme celui-ci. D'accord, nous n'avons donc pas besoin de créer de nouveaux fichiers à partir de la ligne de commande. C'est peut-être un moyen plus facile. Nous avons maintenant des fichiers CSS ou JavaScript, et notre code a été créé en HTML. Nous pouvons donc commencer à écrire du code. Microphone, Jess. 40. 5MicrophoneJS: Au lieu d'écrire tout le fichier JS du microphone, je vais simplement copier et coller le code ici. J'ai donc trouvé ça sur le Web pour obtenir des données de microphone. Il s'agit d'une plaque chauffante que vous pouvez utiliser tous vos visualiseurs audio. Nous n'avons donc pas besoin de connaître exactement les détails ici. Il obtiendra simplement les données du microphone, l'entrée audio. Vous n'avez pas vraiment besoin de changer quoi que ce soit ici. Ou peut-être voulez-vous changer. Vous pouvez modifier la taille FFT si vous souhaitez une certaine variété dans la sortie. Permettez-moi donc d'expliquer rapidement ce que nous avons ici. C'est juste un cours occasionnel appelé microphone. Ici, nous avons le constructeur. Donc, la première propriété identifie si le microphone est initialisé ou non parce que nous voulons attendre s'il n'est pas encore initialisé, d'accord ? Et à la fin de tout, cela deviendra vrai. Et puis nous obtenons simplement la fonction multimédia utilisateur. Et gardez à l'esprit que c'est toujours là, quand ils sont religieux. Nous n'avons donc pas de bibliothèques tierces ici. Et apparemment, cette méthode renvoie une promesse car elle utilise ensuite la fonction multimédia de l'utilisateur, qui va essentiellement attendre cette ligne. Et nous courrons après qu'il retourne quelque chose. Par conséquent, si elle est renvoyée avec succès, ces lignes seront appelées. Ou s'il y a une erreur, il suffit d'alerter l' erreur sur le navigateur. D'accord ? Et quand il sera prêt, ces lignes seront appelées. Nous avons donc un analyseur ici. Et ces lignes décideront de la taille FFT, la longueur du tampon, etc. Enfin, modifiez la propriété initialisée sur true après la connexion au microphone. Sinon, il va simplement alerter l'erreur sur le navigateur. Très bien, nous avons donc deux méthodes ici. Le premier récupère les échantillons. C'est donc le résultat que nous allons utiliser. L'objet renvoyé sera un tableau et sa longueur sera la moitié de la taille FFT. Nous avons donc déclaré une taille 50 512. Voici des échantillons. La longueur de la baie sera de 256, d'accord ? C'est donc toujours la moitié de la taille FFT. Et nous utiliserons cette enquête par sondage lors de la visualisation de l'audio. D'accord, alors pensez à ça. Nous pouvons avoir 256 balles que chaque balle répondra à un élément de ce tableau. D'accord ? Vous comprendrez mieux quand nous le ferons réellement, le ferons et le mettrons en pratique. Et enfin, nous avons la fonction volume qui permettra d'obtenir des méthodes utérines. Et je pense que c'est assez explicite. Cette méthode renvoie le volume des entrées audio. 41. 6MicData: Maintenant que notre microphone est prêt, nous pouvons commencer à écrire le code dans la visualisation. Ouvrez ce fichier. La première chose que je veux faire ici est vous montrer les données que nous obtenons à partir du microphone. Pour ce faire, je vais créer une nouvelle variable, le microphone. De la classe de microphone. Nous n'avions aucun paramètre dans le constructeur. Nous pouvons créer un nouveau microphone ou un nouvel objet comme celui-ci. Créons également cette fonction animée. Parce que nous voulons obtenir les données du microphone en temps réel en continu. Et comme vous le savez, nous devons demander une image d'animation pour animer cette fonction. Et nous devons aussi l'appeler quelque part dans le code. Ainsi, entre ces deux lignes, tout ce que nous écrivons sera appelé dans chaque image en continu. Je veux donc simplement enregistrer les données du microphone dans la console pour que nous puissions voir de quoi il s'agit exactement. Mais tout d'abord, je veux vérifier si microphone est déjà initialisé. Alors rappelez-vous que nous avons une propriété et c'est vrai quand Eris a fait les choses au micro. Donc, si le microphone est initialisé, prenons simplement des échantillons à l'aide de la fonction d'échantillons. Et ça ici. Pour l'instant, nous venons de vous connecter à la console. Donc je l'enregistre et je vais juste entrer dans index.HTML. Cliquez avec le bouton droit sur Ouvrir avec le serveur Live. Si vous ne disposez pas de cette option, vous pouvez toujours télécharger extension Live Server à partir d' extensions dans VSCode. Nous l'avons déjà fait dans ce cours. Je n'expliquerai donc pas les étapes pour le moment. Mais si vous avez installé l'extension Live Server, vous pouvez simplement l'ouvrir comme ceci. Et laissez-moi juste l' amener sur cet écran. Et je vais aussi le blanc de mon écran comme ça. Très bien, donc notre code est en cours d'exécution sur ce port. Regardons simplement la console. Nous obtenons des données de microphone en continu. Et il y a beaucoup d'échantillons. Et ça se passe continuellement parce que je parle, non ? Et cela utilise également mon navigateur de microphone. Dans la première étape. Lorsque vous ouvrez Live Server, il peut vous demander d' autoriser l'utilisation du microphone, d'accord ? Et une fois que vous l'avez accepté, pouvez utiliser l'entrée audio. Bon, alors regardons la seule bûche ici. Il s'agit donc d'un tableau. Comme nous l'avons discuté. Sa longueur est de 256, et les valeurs ne sont que de petites valeurs. Ces valeurs sont, chacune représente quelque chose. Je ne suis pas vraiment un expert du son. Et je ne le sais pas, je ne sais pas vraiment quelles sont ces valeurs. Mais vous pouvez l'imaginer comme s'il s'agissait de fréquences ou de signaux qui expliquent le son à ce moment précis. Nous pouvons utiliser ces valeurs pour visualiser le son. Et ces valeurs sont vraiment de petites valeurs. Il y en a entre moins quatre et plus quatre. Et ils sont généralement moins d'un. Il peut donc s'agir de valeurs négatives ou de valeurs positives. Et je crois que les valeurs augmentent. Maintenant, nous recevons des sons intéressants. Très bien ? Donc, si je ne parle pas, les valeurs seront 0. Par exemple, à ce stade, il n'y a pas d'entrée audio. Très bien ? Maintenant que nous savons à quoi ressemblent les données de nos échantillons, nous utiliserons ces données. Nous pouvons le prétraiter, bien sûr. Mais finalement, nous utiliserons ces données pour créer des visuels. Bon, commençons donc à utiliser notre commerce pour créer des visuels. 42. 7BallClass: Commençons par dessiner nos visuels en créant Karl Marx. Comme d'habitude, nous obtiendrons élément par ID à partir du modèle HTML. Permettez-moi de vérifier l' identification de mes couleurs. Copions-le et collons ici juste pour être sûr que les noms sont mats. Créons également CTX, ces méthodes contextuelles. Et nous voulons la 2D. Enfin, nous pouvons ajuster le poids à la largeur de la fenêtre et à la hauteur de la fenêtre. Très bien. Pourquoi les ajustements sont-ils prêts ? Nous pouvons commencer à créer la première classe. Alors, à la fin, ce que nous voulons dans un nombre incalculable de boulons, n'est-ce pas ? Ou des raccourcis. Je vais juste les appeler boules parce qu'elles vont sauter. Dans ce projet. C'est pourquoi je suis en train de créer une classe nommée Ball. Et comme d'habitude, nous aurons un constructeur de cette classe. Il obtiendra deux paramètres, x et y. Et ces valeurs seront les positions x et y initiales de la balle qu'il y aura apparition. Assignons donc simplement ce point x point y alors pourquoi voulons-nous ici, donc nous allons créer un bol et qui est un cercle complet. Et si vous vous en souvenez, nous le faisons en utilisant CTX Augmented. Ici, ce que nous devons faire, c'est la valeur du rayon. C'est pourquoi nous avons également besoin d'un rayon. Mais je ne veux pas l' obtenir à partir des paramètres parce que nous voulions juste faire dire tous les rayons des balles. Je vais donc utiliser une valeur par défaut de huit. Alors décidons également de sa couleur. Vous pouvez changer ce que vous voulez. Vous pouvez utiliser le bleu, le rouge, le gris. Et je pense aussi que je vais expliquer cela plus tard, mais je veux juste laisser tomber cette partie. Ajoutons cette propriété. Et donc ce dont j'ai besoin ici, c'est sauter pour SSH et aussi faux. Ok, parce que les balles vont tomber et elles sauteront selon l' audio de Detroit. Mais dans la phase initiale, au tout premier début du projet, les balles vont tomber. Ils vont donc commencer par haut et ils tomberont avant tout. C'est pourquoi je ne veux pas faire la force de chute 0, mais au lieu de cela, je vais simplement faire 0,1. Très bien ? Là où j'ai fait avec le constructeur, nous ajouterons simplement une propriété de plus, mais je l'ajouterai quand l'heure sera correcte. Comme d'habitude, nous devons également dessiner des méthodes. C'est qu'elle prend FillStyle. Je vais attribuer cela à cette couleur car lorsque nous voulons changer la couleur, la balle sera également dans cette couleur. Donc nous devrions dire commencer Pat devrait aussi dire barre CTX pour dessiner un cercle. Donc ce point x barre, la valeur x, je suis désolé, ce point y pour la valeur y. Ils vont essayer de l'utiliser pour Radius. L'angle de départ sera 0 et l'angle sera pi fois deux car nous dessinerons toujours un cercle complet qui ressemblera à un bol. Enfin, on peut dire pilule CTX. Bon, vous devriez déjà connaître ces lignes. Nous avons déjà fait de nombreuses pratiques là-dessus. Donc, ce dont nous avons besoin, ce dont nous avons besoin, c'est deux autres méthodes. Donc, nous voulons juste un formatage et un saut. C'est tout pour la classe de balle. Et nous écrirons plus tard le contexte des méthodes de chute et de saut. 43. 8GenerateBalls: Très bien, nous avons la classe de balle. Allons de l'avant et générons la balle pour que nous puissions les voir sur les colonnes. Pour ce faire, nous avons besoin d'un tableau. Il sera vide au début. Et nous aurons besoin d'une fonction qui générera les balles. Je vais utiliser la fonction flèche ici. D'accord ? Donc, dans cette fonction, permettez-moi tout d' abord de supprimer ce journal pour que nous ne voyions pas. Alors, nettoyons. Fermez la console. D'accord. Donc en janvier faux, cette fois, nous allons faire quelque chose de différent. Je ne veux pas définir statiquement la longueur du tableau de balles. Je ne veux donc pas simplement créer un boss de 100. Disons. Ce que je veux plutôt, c'est créer les balles, qui seront réactives pour Carlos foot. Donc ce que je veux dire, c'est si le charbon était, pourquoi savez-vous que je devrais être moins de boules à fourrer, par exemple, non ? Maintenant, si nous avons une communauté commune plus importante, nous pouvons avoir 100 obligations. D'accord ? Donc, finalement, le pays de la matrice de balles sera dynamique. Pour ce faire, nous allons simplement assigner. Créons simplement une nouvelle variable, la distance. Cela permettra de clarifier la distance entre chaque grille à billes. Je veux juste faire une fête ou le début. Et nous allons simplement calculer le nombre de balles que je devrais utiliser. Largeur de Carlos divisée par la distance. D'accord ? Ce qui est logique, n'est-ce pas ? Parce que B a une largeur de 1 000, nous voulons que je sois fatigué à distance. Nous devrions donc avoir quelque chose autour. Je suis fatigué des bols à thé, non ? Parce qu'il y aura des instances et le poids de la balle aussi. Mais je vais juste dire moins deux ici parce que nous voulons être éloignés du début et de la fin. La quantité de balles sera calculée comme ceci. Bon, donc maintenant, il est réactif à la Kawasaki. Lorsque nous changeons la largeur du navigateur, la quantité de balles va changer. Et ce dont nous avons besoin, c'est une boucle for. Et disons simplement moi pour itérateur. Et nous voulons faire une boucle. Nous voulons identifier la quantité de scie Bosch que ce sera une quantité de taupes de temps. Et dans la boucle d'automne, je dirai simplement que les balles poussent r1 pour créer une nouvelle balle et la pousser dans les bols, n'est-ce pas ? Appelons juste une nouvelle balle. Et nous avons juste besoin de donner des valeurs x et y ici. Pour les valeurs x et y. Pour moi rarement, c' est vraiment simple. Nous pouvons simplement donner une valeur statique. Par exemple, 500. D'accord ? Mais quelle valeur x ? Nous devons utiliser à nouveau la distance. Donc, la première balle doit être la distance, non ? Donc, quand je dis un tardif, c'est X qui devrait être tardif. La deuxième balle devrait être plus une distance de plus, non ? Donc 2R2 plus la Turquie, la deuxième exposition de la balle devrait être de 60. Donc, si je dis distance plus je fois la distance, je crois qu'il y aura un patron juste à côté de l'autre parmi le cosmos. Il y aura donc les deux tout au long de la guerre froide, il y aura des lacunes au début et entre chacune des balles. C'est ce que nous voulons. Et quand je sauvegarde cela, rien ne se passe parce que nous n'avons pas encore appelé la fonction boules génériques. Quand je l'appelle comme disons, les balles sont générées mais nous ne pouvons pas encore les voir parce que notre couleur est quoi ? En fait, je veux juste changer l'arrière-plan en noir, mais nous allons d'abord le vérifier. En changeant la couleur des boules. Est-ce qu'on a la chanson du bal, Carlos ? Je ne le suis pas exactement. C'est parce que nous n'avons pas encore dessiné les balles. Nous ne faisons que générer le boss, mais nous n'avons pas appelé la fonction Draw. Donc, ce que nous devons faire, c'est dire balle pour chaque balle, je suis simplement en train d'itérer sur chaque balle de ce tableau. Et j'appellerai gras une fonction de tirage. Maintenant, nous avons les balles sur la toile. Très bien ? Notre fonction fonctionne donc. Nous n'avons pas besoin de dessiner les murs ici. Je vais simplement le supprimer. Et je vais aussi rendre la couleur blanche à nouveau. Et passons dans style.css, très réel lead, juste la couleur de fond. Donc, ici, je veux tout sélectionner en utilisant astérix. Il suffit de faire correspondre la marge et le rembourrage 0, la taille de la boîte, la border-box. Ce ne sont donc que par défaut. Nous réalisons presque ce tableau dans tous les projets. Et aussi. Donc, si vous le remarquez, nous avons des barres sur la droite. Donc c'est juste, cela rend ces lignes qui rendent Buddy défilable. Nous ne voulons pas cela. C'est pourquoi je vais juste dire « débordement ». Voyons voir. Donc, les bars s'en vont. Enfin, nous allons simplement changer. La colonne était nue au sol, au sol, en noir ou à l'extérieur. 44. 9Balles de chute: Très bien les gars, dessinons les boules et faisons tomber. Donc tout d'abord, animer la fonction. Si le microphone est initialisé, je veux dessiner les balles. Donc, pour ce que l' on appelle le tableau de balles. Et utiliser pour chaque méthode. Ici, passons juste une balle qui réitère les balles. Et je voulais juste dire que la balle était tirée. Lorsque nous le faisons, vous pouvez voir les balles en comas. Et remarquez si nous changeons la taille de la colonne, la quantité de balles, de chaînes, de sorte que nous ayons tous les deux des essais pour les vaches. Et comme nous allons faire une animation ici, je veux juste effacer les cônes dans un recadre. Je vais le faire en utilisant la fonction rect claire. Passe x et y à partir de 0 jusqu'à Carl Woese, largeur et hauteur. Vous pouvez voir que nous avons de bons liens. Si nous les faisons tomber aussi. Juste avant le tirage. On peut voir les balles tomber. Mais il faut d'abord chercher la fonction. ce faire, je perdrai les formes d'automne et je changerai les balles. Pourquoi ? En fait, je dirai que ce point y plus est égal à ce point pleine force, qui mettra à jour la valeur y de la balle dans chaque image et ajoute toute la force. Donc, quand je sauve ça, on voit que les balles tirent lentement. Faisons en sorte que cela paraisse plus naturel. Dans la vraie vie, quand quelque chose tombe, sa pleine force augmente, n'est-ce pas ? À cause de la gravité. C'est pourquoi j'augmenterai également toute la force dans chaque image, 0,05. Vous pouvez maintenant voir un effet plus naturel. Mais à un moment donné, le ballon devrait s'arrêter. Je vais donc ajouter la contrainte ici. Nous voulons juste que les murs tombent si c'est le cas. Y est inférieur à la hauteur de Coleman divisée par deux. Donc, si seulement le patron ou un bol, la moitié des couleurs, ils tomberont. Sinon, ils s'arrêteront. Juste comme ça. Laissez-moi le rafraîchir encore une fois. Ils ont donc commencé à partir de la position des bifans. Et ils ont commencé à tomber parce que nous appelons la fonction chute dans chaque image. Et nous n'avons qu'une seule contrainte, qui est la position y doit être supérieure à la hauteur de Carlos divisée par deux. C'est pourquoi il y en a, il y a le top. Quand ils arrivent à ce point. 45. 10 Balles de saut: Lorsque les balles pour chacun à ce stade, sorte qu'il y ait frappant, frappant au sol. Nous voulons les faire sauter, non ? Pour ce faire, nous avons besoin d'une autre déclaration si ici. Nous devons vérifier si la balle tombe. Parce que s'ils ne tombent pas, nous voulons les faire sauter. Et pour vérifier cette valeur, vous suffit d'une autre propriété. Allons ajouter. Une propriété est en train de tomber. Et ce sera vrai au début car le boss tombera à l'état initial. Donc, si les balles ne tombent pas, ce qui signifie que les balles tombent, la propriété est fausse. Dans ce cas, nous voulons qu'il saute. Très bien, montons et nous avons déclaré ici une méthode de saut. Je vais donc, tout d'abord, ce que nous voulons faire, c'est de faire toute la force à 0, parce que nous avions une force complète auparavant. Et cela affectera votre position Y dans chaque image. Donc, lorsque la chute et que la propriété est fausse, première chose que nous voulons faire est de faire à quatre pattes 0. Ensuite, nous pouvons maintenant affecter notre y. Nous sautons de force. Donc cette fois, j'utiliserai moins égal parce que dans le système de coordonnées du commerce, lorsque la balle monte, c'est pourquoi ReLu diminue. Ainsi, dans les gens du commun, 0 est au sommet et il augmente lorsque les balles tombent. Donc, si vous voulez qu'une balle saute, nous devrions diminuer sa valeur y. Je veux donc diminuer la raison pour laquelle ReLu sauterait de force. Et pour le rendre plus naturel, je ferai encore une fois la même logique. Je vais également diminuer la force de saut. D'accord ? Nous avons donc également sauté les méthodes maintenant. Mais une chose que nous ne devrions pas oublier quand le saut se termine. Quand il retourne à l'état tombant. Nous devrions également réinitialiser. Sautez la force à 0, tout comme nous l'avons fait ici. Bon, maintenant ils ont l' air identiques. Ils sont simplement symétriques par rapport à l'autre. Très bien, essayons ça. Ça n'a pas fonctionné. Et c'est parce que notre force de saut est égale à 0. Allons changer cela. Nous avons donc une force de saut. Ballon. Ok, donc peut-être devrions-nous aussi changer la balle qui tombe propriété parce qu'on ne la rend jamais fausse, non ? C'est toujours vrai. Je vais donc ajouter ici une autre déclaration. Et faire boule tombe à faux. Et essayons. C'est. Il saute juste un moment. Vous voyez ça ? Laissez-moi le relancer. Et puis en chute continue. D'accord ? C'est donc parce que cette instruction if en exécute une, bien que sa propriété tombe est fausse. Nous devrions donc également donner une contrainte ici. Le contrôle s'il tombe et tombe, n'est-ce pas ? Donc si la balle, donc nous demandions la fonction, si seule la balle est en état de chute et que sa position y est inférieure au site du coma. Alors, gardons ça. Et aussi, peut-être devrions-nous. Peut-être devrions-nous simplement changer le nôtre en un autre. Et ajoutons simplement une contrainte. Si la position y des boules est plus grande que la hauteur de cause divisée par deux. Ça a l'air mieux, non ? Parce que nous voulons simplement sauter si seulement, si seulement sa valeur y est supérieure à la hauteur de Carlos divisée par deux. Autrement dit, au milieu des colonnes. Très bien, donc nous changerons la force de saut ici plus tard et ici quand le ballon aura lieu. Donc, au fond, nous diminuons la force de saut, non ? Quand le ballon, commentons cette ligne. Alors, je ne descends pas. Quand je n'ai pas commenté, ça tombe. Nous diminuons donc également la force de saut, et elle commence à 0,1, ce qui sera une valeur négative. Donc, au lieu de faire un saut, on se contente les faire tomber à nouveau. Donc, faisons en sorte que cette valeur soit dix, disons 400. Rien ne change. Nous allons simplement commenter cette ligne. C'est juste, est-ce que j'ai fait une faute de frappe ici ? Nous devrions donc changer sa position Y dans chaque image. Allons donc dans la console. Il me manque quelque chose. Donc, si la balle tombe, nous devrions donc, cette bûche devrait se noyer dans notre cadre dès maintenant. Et c'est en effet que nous pouvons voir dans la console, n'est-ce pas ? Donc, la méthode de saut est appelée maintenant reframe et pourquoi elle est appelée. Nous allons également nous connecter ici. La force de saut. Supprimons cela. La force de saut est donc de 0. Pourquoi cela se produit-il ? C'est parce que quand on tombe, on fait juste la force de saut 0, non ? Donc, au début, nous en avons fait dix. Mais à chaque fois qu'il tombe, baisse, la force devient 0, donc ils ne sautent pas. Donc, en fait, nous ne devrions pas l' attribuer ici. Nous devrions lui attribuer la fin de l'état du scrutin, qui est ici, n'est-ce pas ? Quand la balle tire est restée fausse. Nous devrions également déclarer une force de saut. Je vais juste faire Tanh ici. Maintenant, vous pouvez voir que nos balles ne font que sauter. Mais dix, c'est peut-être trop. Allons-y aussi. Ok, super. Mais nous avons un autre problème en ce moment. Ils ne reviennent jamais. Très bien ? Donc, pour éviter cela, je vais simplement ajouter une autre contrainte ici et si énoncé. Donc, quand la balle saute, à un moment donné, nous devrions activer l'état épouvantable, droite, pour qu'ils reviennent. Et je veux juste le faire. Lorsque la force sautée devient 0. Ok, donc c'est dans la vraie vie. Cependant. Quand on saute. Dans la vraie vie, nous entendons une force de saut dans la phase initiale. Et la gravité diminue la force de saut à chaque seconde caractéristique. Et à un moment donné, ou la force de saut devient 0 et nous commençons à tomber. C'est vrai ? Faisons donc la même logique. Ici, la logique. Lorsque la force de saut devient 0 ou inférieure à 0, faites tomber les balles à nouveau. Mais pour ce faire, nous devrions activer le décommentaire, cette ligne qui va diminuer, sauter la force, recadrer. Et quand il est inférieur à 0 ou égal à 0, nous devrions à nouveau activer l'état tombant sur vrai. Essayons donc ça. D'accord. Maintenant, nous pouvons voir que nos balles sautent à n'importe quel saut, à chaque saut, ou que la force de saut et la force de chute augmentent et diminuent comme naturel. Et à un moment donné, au point culminant, la force de saut devient 0. Lorsque cela se produit, ils recommencent à tomber. D'accord ? C'est ainsi que vous pouvez faire une logique de gravité sans utiliser de moteur de jeu ni autre chose. Avec du Pure Vanilla JS. Une autre équipe que nous voulons ajouter ici, c'est la vraie connexion entre l'audio et nos balles pour changer la force de saut avec les entrées audio. Et nous le ferons dans la prochaine vidéo. 46. 11AudioInput: Les gars, les boulons sont en train de sauter. Et il est temps pour la partie la plus excitante, savoir Jim, de les faire sauter réactifs à l'entrée audio. Nous devrions donc changer cette ligne évidemment, car nous voulons simplement sauter le poids des données du microphone. Ok, on a déjà reçu des données de microphone. Et rappelez-vous que le tableau d'échantillons La zone des échantillons comprend 256 éléments. Et nous avons aussi quelques balles, mais notre quantité de balles n'est pas spécifique. Cela dépend de Canvas. Nous pourrions donc en avoir plus de 256 ou moins. Je ne vais donc pas les égaler exactement. Mais nous pourrions, si nous pouvions être indexés d'une manière ou d'une autre, impliquer un tableau, n'est-ce pas ? Nous pourrions attribuer chaque échantillon à une balle. Comme le premier échantillon. Le premier élément de l'enquête par sondage peut donc être la force de saut de la première balle. Et le deuxième élément de l'enquête par sondage peut être la force de saut pour la deuxième balle et ainsi de suite. Je pense que ce sera génial. Et pour ce faire, nous devrions suivre l'indice des balles pour chacune d'elles. Et si vous n'avez que Google for ETL script, vous pouvez voir les paramètres de cette fonction. Et le deuxième paramètre est l'index. Le premier que nous venons d' utiliser est donc la valeur de l'élément actuel. Nous l'appelons simplement « balle ». Si vous passez la seconde, cette option est facultative. Mais vous pouvez passer. Et c'est le cas, il renvoie l'indice de l'élément actuel, mais nous ne faisons que regarder. Allons-y et utilisons-le. Donc, pour utiliser cela, je vais juste ajouter une parenthèse à côté de la balle. Je dirai indexé. Maintenant, dans ce fourrage, je peux verrouiller. Prochaine. Permettez-moi de supprimer les autres lignes de journaux. n'avons donc que celui-là. Sauvegardons cela et vérifions la console. Vous voyez donc qu'il commence à 0 et augmente à chaque itération. Très bien, nous pouvons donc utiliser cette valeur d'indice. Et ici, je veux appeler l'échantillon, désolé. Essayons simplement l'indice des échantillons. Essayons simplement d'utiliser des échantillons pour la force de saut. Mais encore une fois, rappelez-vous que les échantillons ne sont que de très petites valeurs. Donc, consignons également la console, connectons-nous aux exemples de console pour voir. On dirait donc qu'ils ne sautent pas. Mais si vous regardez de près, vous pouvez voir quelques petits mouvements. Et c'est parce que nos échantillons sont en très petits nombres. Nous devrions donc, et il y a également des valeurs négatives. Nous ne voulons donc pas de force de saut négative. Nous pouvons donc utiliser fonction mat abs pour obtenir l'abstrait de la valeur. D'accord ? Lorsque nous faisons cela, nous n'avons plus de valeurs négatives. Et ce que nous voulons également faire, c'est multiplier cette valeur par dix, peut-être parce qu'elles sont trop petites. Faisons en sorte qu'ils soient positifs et multiplions par dix et voyons ce qui se passe. Lorsque je ferme la console. Nous n'avons plus besoin de serrures. Disons ceci. En ce moment. Vous pouvez vous voir et moi parler, les balles ne font que sauter et on dirait que se multiplier par dix suffit. Vous pourriez bien sûr augmenter cette valeur si vous en voulez plus, sauter Fox. Ou si vous voulez devenir fou, vous pouvez aussi devenir fou. Mais rappelez-vous que s'ils sautaient trop, ils vont sortir de la toile. Je vais donc le garder dix. Et je crois que c'est fait. Essayons donc une solution différente. Ils se déplacent encore une fois. Et à ce stade, vous pourriez en fait, c'est vraiment à vous de choisir maintenant. Vous pouvez donc changer les couleurs. Vous pouvez également ajouter une méthode ici. Non, changez de couleur. Et vous pouvez peut-être faire un paramètre ici, comme une valeur. Et vous pouvez changer les couleurs en fonction de l'indice des échantillons. Ainsi, les balles peuvent changer de couleur avec l'audio. Et ici, vous pouvez utiliser les valeurs RVB, RGBA et passer les paramètres. Vous pouvez tout faire. Vous pouvez changer, sauter de force si vous voulez des balles plus rapides. Ou ce que vous pouvez faire. Sinon. Si vous voulez des balles plus hautes ou plus grosses, vous pouvez simplement changer de rayon comme ça. Mais n'oubliez pas de changer la distance aussi. Juste pour être sûr qu'ils ne sont pas en collision. Ils sont de nouveau plus petits. Ou vous pourriez les rendre vraiment plus petits comme ça. C'est à vous de choisir. Allez-y et jouez avec les valeurs et ajoutez de nouvelles fonctionnalités pour tous. 47. 1GettingDémarrage: Dans cette section, nous allons créer un autre visualiseur audio que vous pouvez voir à l'écran. Laissez-moi jouer de la musique pour que vous puissiez mieux voir l'effet. Job. Si vous aimez l'effet. Je ne travaille pas à la prochaine vidéo où nous commencerons à réaliser ce projet. 48. Configuration pour Setup audio 2: J'ai créé le projet et tout est identique avec le visualiseur audio précédent. Cette fois, il suffit de changer le titre avec le visualiseur audio sur. Nous avons donc également lié le style CSS. Encore une fois, nous avons un commerce avec l'ID Mike SDF. Nous avons un microphone JS et un visualiseur, ingénieux et apo. Ce fichier HTML avec live show over cliquant avec le bouton droit de la souris et en sélectionnant cette option. Et ensuite, vous pouvez simplement utiliser le même modèle pour le microphone JS. Encore une fois, nous n'avons pas besoin de différences et c'est ce dont nous avons besoin dans ce projet. Le style CSS est également le même que le précédent. Il suffit d'utiliser astérix pour tout sélectionner afin de régler la marge et le rembourrage. Il suffit de créer la propriété de débordement cachée du corps et de rendre l'arrière-plan noir. Nous n'avons donc pas encore défini la largeur et la hauteur du commerce. C'est pourquoi nos Cola viennent de cette hauteur Bhoutan par défaut. Nous allons donc le changer dans visualizer JS. Si vous êtes prêt avec ces deux fichiers, nous pouvons commencer à visualiser un JS. 49. 3CreateFigures: Comme toujours, commençons à créer des couleurs. Utilisons notre identifiant commercial ici. Créons également CTX. Ajustons ce qu'il faut pour Fenêtre. Et aussi la hauteur, que nous connaissons dans nos hauteurs. Notre commerce est donc désormais entièrement ajusté et couvre tous les navigateurs de leur écran. Et ce que nous voulons faire ensuite, c'est attribuer le microphone à un nouveau microphone. Et rappelez-vous que nous appelons ce cours à partir du microphone js. Et nous pouvons le faire comme ça. Nous n'importons rien car microphone JS n'est qu'un bol de visualiseur JS. Et en fin de compte, tout le JavaScript sera transformé en ce fichier HTML. Nous avons donc réellement un cluster de microphones dans visualizer JS. Et vérifions si tout fonctionne simplement en créant une fonction animée. Demander l'animation d'une image d'animation. Et n'oubliez pas que ces blogs nous fournissent une animation en appelant cette fonction animée dans chaque image. Nous voulons donc vérifier si le microphone est déjà initialisé. Cette propriété. Donc, si le microphone est initialisé, je veux obtenir les échantillons. Des échantillons. Microphone qui échantillonne. Il suffit de le consigner pour voir si tout fonctionne. Je vais ouvrir la console en utilisant f 12th. Nous n'avons pas d'échantillons. Laisse-moi juste ouvrir. C'est encore fini. Il y a peut-être une boîte. Nous n'en avons pas encore. C'est parce que nous n'avons pas appelé la fonction Animate My bad. OK. Maintenant, nous pouvons voir les échantillons quand je parle. Il obtiendra l'entrée audio correcte. Maintenant, nous pouvons nous débarrasser de ce journal de console. Nous pouvons maintenant commencer à créer notre classe. Cette fois. Je veux appeler figure pas de parenthèses ici parce qu'il aura des méthodes différentes. Il sera donc réglable. Il va router, il se téléportera et les méthodes de dimensionnement de la chaîne, certaines choses comme ça. Ce n'est donc pas si simple que ça. C'est pourquoi j'ai décidé d'appeler ça un chiffre. Mais comme toujours, nous avons besoin d'un constructeur. Donc, cette fois, commençons à nouveau par X et Y, mais nous augmenterons le nombre de paramètres ultérieurement. Ce delta x est donc égal à x, ce point y est égal à la taille y. J'utiliserai huit , puis quatre tailles initiales. Mais n'oubliez pas que nous allons modifier cette valeur avec l'entrée microphone. D'accord ? C'est donc suffisant pour l'instant. Dessinons simplement cette figurine. Et c'est tout. Il n' y a rien de nouveau pour nous. Donc, ce point FillStyle est cette couleur foncée. Dx commence également l' arc Pat dx car encore une fois, nous voulons dessiner des raccourcis. Je vais donc passer X4 charbons x. Pourquoi ? Et la taille. Je n'ai pas appelé Radius cette fois. On pourrait aussi dire la taille, la même chose. Donc 0 pour l'angle de départ. Et math.pi fois 24 et angle, ce qui est exactement la même chose avec 260 degrés, mais nous devrions donner quelques radians ici. Nous utilisons donc cette expression. Et enfin, nous devrions sentir ce que nous venons de dessiner. Très bien, laissez-moi sauver ça. Et en bas, nous devrions créditer l'erreur des doigts. Pour ce faire, j'ai besoin d'une boucle for-loop. Changeons son indice par i. Je veux créer dix chiffres. Je dirai donc que les chiffres se rapprochent de la figure. Vous devriez donc tous connaître cette syntaxe, n'est-ce pas ? Nous avons fait tout cela de nombreuses fois. Donc, nouveau chiffre, mais cette fois, au lieu de faire un x et un y précis, je veux créer ces chiffres au hasard. C'est pourquoi j' appellerai la fonction Math.Random. Et je vais le multiplier par la suite de couleurs pour que la valeur x soit comprise entre 0 et la colonne douce. Il peut être n'importe où au Congrès et faire le même char pour la valeur Y. Et cette fois, nous dirons la hauteur des comas. Très bien ? Essayons donc de dessiner les chiffres à ce stade. Donc, tout d'abord, je veux définir des objectifs. Nous ferons quelques animations à l'avenir. Alors, dissipons le calme, les virgules entières de la cellule. Et maintenant, nous pouvons essayer de dessiner des chiffres. Pour ça. Je veux parcourir le tableau de figures, n'est-ce pas ? Et je vais utiliser pour chacun, je dirai figure. Et pour tous les chiffres, vous voulez appeler la méthode de dessin. D'accord ? Nous n'avons donc pas fait de couleur. Faisons simplement une couleur claire pour que nous ayons les chiffres sur les colonnes. Et chaque fois que je rafraîchis ce navigateur, il nous fera une figure positionnée de façon aléatoire car nos valeurs x et y sont aléatoires. Mais ils devraient être dans d'innombrables. Nous devrions donc, dans chaque cadre, avoir des chiffres bronzés , exactement 12345678910. 50. 4Mouvement 4CircularMovement: La prochaine chose que je veux faire avec ces figures est de leur donner un mouvement circulaire. Comme les mouvements circulaires parce qu'ils donnent des objets à ressembler à un vivant. Très bien, nous allons donc mettre en œuvre des mouvements circulaires pour notre enceinte. Dans la classe Figure, je vais créer une nouvelle méthode appelée mouvement circulaire. Donc, je suis en fait, nous pouvons utiliser les fonctions cosinus et sinusoïdales. Nous devrions donc modifier la valeur X et la valeur Y des chiffres avec certaines valeurs afin qu' dessinent un chemin circulaire. C'est vrai ? Donc, si nous ne modifions que la valeur x, disons que non le cosinus. Nous avons donc besoin d'un compteur ici qui fera une boucle pour faire une boucle entre 0360. Donc, tout le degré commence à partir de 0 et va jusqu'à 360. ce faire, je vais mettre en place un compteur dans cette figure. Il va donc commencer à partir de 0. Et puis je le ferai, je l'augmenterai. Tous les mouvements circulaires à la fin. En fait. Commençons contour plus, plus et exécutons le plus ou égal à 260. Je vais encore faire 0. C'est vrai ? Ainsi, le contour augmentera le rappel des mouvements circulaires. Et quand il atteint ces 260 degrés, il reviendra à 0 et recommencera à partir de là. Une fois encore. C'est ce dont nous avons réellement besoin. Maintenant, je vais appeler ce comptoir ici. Mais rappelez-vous que la fonction cosinus ne cherche pas de degrés. Au lieu de cela, il cherche à lire. Si vous vous en souvenez, radians à degrés formule x divisée par 180 fois la tarte de boue. D'accord ? Faisons donc cela pour notre compteur divisé par 180 fois pi afin que nous nous assurons qu'il dessine un cercle complet. Permettez-moi de le sauvegarder comme ça et appeler un moment circulaire dans un recadre. Voyons ce qui se passe. Donc, nos balles bougent, n'est-ce pas ? Ce qui est génial. Donc, coût MC, cette fonction de coût renvoie une valeur comprise entre moins un et plus un. Et il ne s'agit que de basculer entre ces valeurs. Et nous mettons à jour x avec ces valeurs afin que nos balles passent continuellement à droite et à gauche. Faisons la même chose pour Y. Mais cette fois, utilisons-nous, je suis en fait amené à utiliser à nouveau du cosinus pour voir ce qui se passe. Je peux simplement le copier et le coller ici et l'enregistrer. Vous pouvez donc voir quand nous attribuons la même fonction à la raison pour laquelle elle va tracer un chemin comme celui-ci, comme en diagonale, car nous augmentons à x et y en même temps, à la même valeur, avec le même valeur. Mais si vous changez cela pour signer et l'enregistrer, vous pouvez voir qu'ils dessinent un cercle un instant. C'est la clé pour réaliser des mouvements circulaires comme celui-ci. 51. 5ChangeSizeWithMicInput: Très bien, les gars, continuons à appeler. étape suivante consiste à ajouter l'entrée microphone au mouvement des cercles. En fait, pas le moment, mais la taille des circuits que nous voulons. Rendez-les plus grands. Quand il y a un apport de grandes guerres. Et leur taille dépendra de l'entrée vocale. Ils deviendront de plus en plus petits en fonction de l'entrée du microphone. Pour ce faire, j'ajouterai une nouvelle méthode dans la classe figure. Juste ici. Ajoutons une nouvelle méthode et vous êtes un nom de changement de taille. Cela a donc besoin d'un paramètre. Je vais appeler ça de la valeur. Et ce paramètre proviendra du tableau d'échantillons, qui est connecté au microphone en portrait. Nous allons donc utiliser un paramètre des barres d'entrée et modifier la taille de chaque arc. Pour ce faire, vérifions d'abord si la valeur est supérieure à la taille. Nous allons donc ajuster la valeur juste un bol. Mais vérifions d'abord si la valeur est supérieure à la taille. Si c'est le cas, nous ferons en sorte que la taille soit égale à la valeur S. Dans d'autres cas, nous voulons modifier la taille. Cela signifie donc que nous n' avons pas d'entrée vocale ou que nous en avons une, mais elle est vraiment très faible, donc nous ne pouvons pas l'entendre, sorte que l'ordinateur ne peut pas l'entendre. Dans ce cas, nous voulons modifier la taille et diminuer sa taille. Disons que je ne sais pas 0,1. Cela sera donc appelé dans chaque image. Donc, c'est une diminution de la taille. Je suis Tom pour cent dans la cellule. C'est vrai ? Appelons donc simplement cette méthode dans la fonction animée. Juste ici. La saleté, cette taille de chaîne. Mais pour lui donner un paramètre qui viendra de l'échantillon séparément, nous devons obtenir le taux d'indice des échantillons. Nous n'avons donc pas d' index pour le moment. Mais si vous vous en souvenez, nous pouvons obtenir l'index en passant simplement un deuxième paramètre pour chaque fonction. Donc, si nous le faisons comme ça, le premier sera le chiffre lui-même sur lequel nous sommes en train de parcourir. Et le deuxième paramètre sera l'indice de cela. Ainsi, nous pouvons obtenir cet indice dans le tableau des échantillons et nous pouvons modifier sa taille. J'utilise l'entrée vocale. Très bien ? Permettez-moi donc de sauvegarder cela et de voir le résultat. Très bien, donc nous ne pouvons rien voir. En fait, nous avons vu quelque chose au début, mais ils disparaissent instantanément. Alors pourquoi cela se produit-il ? Parce que notre valeur de déclin est peut-être trop importante. Passons cela à 1% et sauvegardons à nouveau. C'est donc mieux en ce moment. Ils disparaissent lentement. Mais à la fin, on ne peut plus rien voir. On dirait donc que la valeur est trop petite, n'est-ce pas ? Donc apparemment sont rarement suffisants pour agrandir la taille. Nous pouvons également le vérifier. Je me connecte. Voyons voir. Notre valeur est donc 0. n'est pas ce à quoi je m'attendais. Bon, essayons donc de multiplier cette valeur. Supposons que je souhaite créer une nouvelle variable appelée silencieuse. Et ce sera le résultat d'une valeur multipliée par 200. Et nous allons utiliser le son ici et ici, Ezra. Permettez-moi de sauver ça encore une fois. Nous n'avons plus aucune sortie. Je vais donc ouvrir cela dans un nouvel onglet. C'était un bug pour Google Chrome. Ainsi, lorsque nous l'ouvrons dans un nouvel onglet, il n'y a aucun problème. Vous pouvez donc voir qu'ils s'agrandissent quand je parle plus haut ou plus petit lorsque je parle plus fort. Mais voyons aussi la valeur et le son dans la console. Nous allons d'abord vérifier la valeur. Vous pouvez donc voir que c'est quelque chose de vraiment petit. C'est pourquoi nous voulons simplement le multiplier par 200. Très bien ? Est-ce quelque chose que je trouve en essayant ? D'accord, il n'y a pas de formule pour cela. Mais j'ai essayé certaines valeurs. Et 200 semble bien parce que je veux que les chiffres les agrandissent, les agrandissent. Et 200, c'est très bien pour moi. Vous pouvez essayer différentes valeurs et choisir une autre valeur aléatoire. Mais le point principal ici, c'est que nous avons actuellement des cercles et la taille change en fonction de l'entrée vocale. 52. 6PlayMusic: À ce stade, la taille des chiffres devrait changer en fonction de l'apport de la femme. Permettez-moi donc de jouer une chanson pour le dire. De toute évidence. 53. 7Teleport: Enfin, je veux vous montrer quelques exemples de personnalisation. Parce que je veux que vous personnalisiez votre propre effet comme vous le souhaitez. D'accord ? Par exemple, ajoutons une nouvelle méthode dans la classe Figure. Je veux donc ajouter une méthode de téléportation parce que lorsque les chiffres s'approchent, c'est que le fait semble beaucoup mieux. Ajoutons un effet de téléportation et vous pouvez voir le résultat. Je vais donc dire téléporter là-bas. Nous devrions modifier sa valeur x et y des défaillances. Et je veux qu'ils se téléportent au hasard. Disons donc que beaucoup de temps aléatoire perdent la largeur de la colonne, ce qui signifie qu'elle sera téléportée quelque part à l'intérieur du Carlos. D'accord ? Et faites la même chose pour y, mais cette fois, tapez ici Hunt. Nous avons donc notre méthode de téléportation. Appelons ça l'animation de la lune. Donc, pour chaque chiffre, si nous appelons la fonction de téléportation, ils sont changés dans chaque image. On dirait un cos. D'accord, nous ne voulons pas de vaches. Nous ne devrions donc pas appeler téléportation dans toutes les images. Ou c'est une véritable approche de soins. Encore une fois, nous pourrions ajouter une contrainte ici. Donc, quand quelque chose arrive que de se téléporter, pas dans toutes les images. Vous pouvez donc ajouter n'importe quelle contrainte. C'est à vous de décider. Pour plus de simplicité. Je vais simplement ajouter une contrainte aléatoire. Cela peut donc être aléatoire. J'ai tout gâché, c'est parfait si vous randomisez une routine. Donc, quand j'ajoute ici une contrainte comme celle-ci, le math.Random renvoie un certain nombre compris entre 01 et s'il est supérieur à 0,99, ce qui est approximatif être une seule personne, non ? Ensuite, téléportez pour figure. Permettez-moi de dire cela. Vous pouvez voir, c'est plus rare en ce moment. Nous voyons certains téléportages, mais ce n'est pas continuellement. Nous pourrions diminuer sa fréquence en augmentant simplement cette valeur ici. Ils le sont donc presque, ne soutiennent plus. Vous pouvez également augmenter sa fréquence en diminuant la valeur de la contrainte. 50 %, c'est encore trop. Peut-être que 90 % seront 95. D'accord ? Mais à mon avis, 99 est vraiment sympa. Ok, donc la raison pour laquelle je voulais montrer cela est vous montrer que cette figure, cet effet est personnalisable. Vous pouvez ajouter n'importe quelle méthode que vous voulez, jouer avec elle. Vous pouvez voir différents résultats. Enfin, à la fin, je veux vous montrer une autre chose, qui augmente la vitesse de l'animation. D'accord ? En ce moment, notre mouvement circulaire est trop lent. À mon avis. Je veux l'augmenter. Vous pouvez donc aussi le faire en appelant. Mais que se passe-t-il si vous souhaitez modifier la fréquence d'images ? Si vous souhaitez modifier le FPS, vous pouvez également ajouter différentes bibliothèques , etc. Mais il y a une autre approche délicate pour cela. Je veux vous montrer. Nous appelons donc la fonction animate ici et elle s'appelle encore et encore, non ? Et si nous appelons la fonction d'énumération maintenant pour moi ? Passons donc à dix ou cinq, peut-être. Il suffit d'appeler animer une chute. Cela augmentera donc la vitesse d'animation cinq fois car nous appelons fonction animate cinq fois. Laissez-moi sauver ça. Vous pouvez donc voir que les cercles se déplacent plus vite. Très bien ? Il s'agit donc essentiellement d'augmenter la fréquence d'images en une seconde. 54. 1WhatIsThreeJS: Dans cette section, nous allons utiliser EJS pour créer des effets visuels 3D. Permettez-moi donc d'expliquer ce que c'est vraiment rapide. Fondamentalement, il est facile d'utiliser un objet 3D animé sur la bibliothèque elle-même comme caméra, scène, géométrie. Et c'est la meilleure bibliothèque de pelouse pour le rendu 3D sur la carte. Vous pouvez donc penser que c'est comme l'unité. Comme si vous développiez des jeux. Si vous développez des jeux, vous connaissez peut-être l'unité. C'est donc un moteur de jeu, non ? Donc pour JS, c'est tout un moteur physique, donc il facilite la création d'effets 3D. Très bien ? Donc, et ce n'est pas un programme ou un framework, c'est juste une bibliothèque. Donc, pour aller de l'avant, c' est le site officiel de deux js. Et il y a beaucoup, de nombreux exemples et cas d'utilisation de celui-ci. 55. 2Cas d'utilisation: Nous allons vérifier certains cas d'utilisation. Au fait, deux EJS sont également utilisés par les grandes entreprises. Vous pouvez donc voir la NASA ici. Et ça s'est levé, je crois. Oui. Ici, l'itinéraire dissipé est un modèle 3D. Et pour rendre ce monde sous forme de modèle 3D, vous invitez une animation. Nous pouvons utiliser trois js. C'est donc ça. La guitare utilise donc tree js. Voyons ce que nous avons d'autre ? Il y a aussi des jeux comme celui-ci. On dirait un site web sympa. Attendons ça. Le seul avantage de la modélisation 3D est peut-être que le rendu prend trop de temps. peut que les sites Web comme celui-ci ne se chargent pas rapidement, mais vous pouvez voir que c'est vraiment cool. Il existe donc des sites Web sympas comme celui-ci , principalement pour les agences. Et le modèle est également destiné à l'agent. ne s'agit pas d'une vidéo. Il s'agit d'un modèle 3D, vous pouvez donc interagir avec lui. C'est la différence. Voyons d'autres exemples. Qu'avons-nous ? Apple utilise donc aussi TJ, comme vous le savez peut-être, les intégrations iPhone, comme lorsque vous descendez, bas, c'est juste que vous pouvez interagir avec lui. Très bien. Il y a donc des jeux, des sites Web, etc. Ne perdons pas trop de temps. Mais vous pouvez, bien sûr, entrer dans plus de détails. Vous pouvez consulter les exemples ici. Encore une fois, il ne s'agit pas d'un cours JS. C'est pourquoi je n' expliquerai pas toutes les caractéristiques de t j's. Mais ici, j'ai trouvé un site de cours sympa. Regardez ça. Je ne sais pas, Burner Cyber, mais j' apprécie vraiment son travail. C'est donc un magasin, votre site Web, mais c'est peut-être le meilleur site de cours que j'ai jamais vu. Vous pouvez donc voir qu'il s'agit d'un modèle 2D et ils ne font que s'animer. Et je peux faire glisser et modifier la rotation de la scène, n'est-ce pas ? Je peux monter. Maintenant. Je peux vraiment interagir avec l'objet avec ma souris. Je n'ai donc pas suivi ce cours. Je ne connais pas le contenu, mais c'est vraiment joli. Je voulais juste vous montrer. Donc, ce genre de choses que vous pouvez faire en utilisant trahison. Très bien, revenons ici. Nous pouvons voir des exemples de documentation. Sur la gauche. Vous pouvez rejoindre Discord ou les forums et rooter et rejoindre la communauté des enseignants. Quoi d'autre ? En fait, le site est plus ou moins comme ça. Ne perdons pas de temps ici. Commençons par réaliser nos deux premiers projets JS, ce qui est vraiment excité car nous allons créer un cube 3D et le déplacer dans un espace 3D dans un navigateur. Allons le faire dans la vidéo suivante. 56. 3InstallThreeJS: Précédemment dans ce cours, nous sommes ici que nous avons installé Node JS. Si vous ignorez cette partie, vous pouvez vérifier que la vidéo nommée Node installée et npm est la première vidéo de la section d'esquisse coma. Très bien ? Si vous regardez cette vidéo depuis un autre endroit, vous pouvez vérifier le téléchargement et l'installation de NPM. Et une fois que vous avez installé npm, nous sommes prêts à partir. Vous pouvez donc toujours vérifier. Vous pouvez toujours vérifier si MPM est installé en utilisant la note que nous sommes npm dash we. Il s'agit donc de ma version Node.js et c'est ma version NPM. Très bien ? Si vous avez rien ou MPN, vous pouvez voir la version du pouce. Si c'est le cas, s'il est dit que cela ressemble à cette commande introuvable, qui signifie que vous n'avez pas NPM ou de Node dans votre ordinateur. Très bien ? Et n'oubliez pas que la meilleure pratique est de télécharger le temps dans le monde entier afin que vous puissiez y accéder dans tous les répertoires. Très bien, tout d'abord, vidons notre terminal et créons un nouveau dossier pour trois JS. Je veux le faire sur mon bureau. Je dirai donc qu' ils font leurs trois géants. Je ne suis pas sûr que cette commande soit valide sur Windows aussi, mais nous ne faisons que créer un nouveau dossier, bureau, ok ? Si cela ne fonctionne pas sous Windows, vous pouvez simplement cliquer avec le bouton droit de la souris et créer un nouveau dossier, d'accord ? Vous pouvez également trouver votre propre commande pour la ligne actuelle ou PowerShell dans Windows. Très bien, donc quand je tape cette commande, nous avons un nouveau dossier et nous voulons installer trois bibliothèques JS dans ce dossier, d' accord, pour l'utiliser dans notre projet. Allons donc dans ce dossier que nous venons de créer. Et je veux installer trois js, non ? Allons dans Google et voyons comment installer des déclencheurs. J'irai donc sur le site officiel. Je suis sur la gauche. Nous allons vérifier la documentation. Nous avons donc ici la section Getting Started, et ici nous avons l'installation. Nous sommes chanceux qu'ils fournissent un guide d'installation NPM. Nous avons donc également MPM. Nous pouvons utiliser cette commande aussi simple que cela. Donc, dans le dossier, je veux coller cette commande et nous allons installer trois minutes très rapidement. Laissez-moi apporter mon dossier ici. Deux J. Ouvrons ça. D'accord. Je vais le dire comme ça. Nous avons donc ici un package de modules bruyants comme Jason, package.json, ce qui signifie que nous avons installé sur Pages. Et nous allons également vérifier les modules Node en trois. Allons chercher la source. Nous avons donc des rendus, des lumières, caméras ou du matériel audio, etc. Mais ici, nous avons un fichier JS à trois points. Nous voulons donc utiliser des commandes, des méthodes, des fonctions et des variables de ce fichier. Et il suffit d'importer ce fichier dans notre fichier pour les utiliser car nous l'avons installé. Ainsi, lorsque nous créons un nouveau fichier ici et que nous écrivons notre code, nous pouvons utiliser la fonction et la méthode d'erreur. Ce nœud module, n'est-ce pas ? C'est pourquoi nous l'avons installé dans le même répertoire. 57. 4OpenTheProject: Créons nos fichiers dans ce répertoire. Il y a donc de nombreuses façons de le faire, mais j'aime aussi utiliser des étrangers terminaux. Je vais dire toucher. Disons d'index HTML. Nous pouvons voir que nous avons créé un nouveau fichier. Et aussi pour JavaScript, appelons ça index js. Vous pouvez donc créer un fichier uniquement comme vous le souhaitez. Et également en ce qui concerne ce problème, si ces commandes ne fonctionnent pas sur votre système d'exploitation, je crois que faire contrairement à la limite est la même, mais Windows pourrait être différent. Il y a donc quelque chose appelé hyper terminal. Vous pouvez le télécharger sous Mac ou Windows. C'est donc quelque chose comme ça. Et je me suis souvenu que vous pouvez utiliser des commandes Linux. Donc, la même commande dans un système d'exploitation utilisant hypertonic et son interface est vraiment bonne. Il s'agit donc d'une plate-forme agréable à utiliser comme terminal. Bon, continuons donc. Nous avons créé nos fichiers et nous sommes prêts à coder, n'est-ce pas ? Et enfin, ouvrons le projet. Si vous perdez la version d'initiés du code VS, comme moi, vous pouvez écrire cette commande pour ouvrir le projet. Si vous utilisez une version normale de ce code, la version standard, vous pouvez simplement dire espace. Et si cela ne fonctionne pas pour vous, vous pouvez passer la commande VS Code P ou Command Shift P, ou Command Shift P pour ouvrir une commande shell et installer froid. Ou encore, vous n'avez pas nécessairement besoin d'utiliser le raccourci. Vous pouvez simplement ouvrir manuellement le projet dans VS Code, ce qui est très bien également. 58. 5ImportThreeJS: Dans le fichier HTML d'index, il suffit d'appuyer sur le point d'exclamation et de cliquer Entrée pour créer des modèles HTML5. Très bien, tout d'abord, changeons le titre du projet. D'abord. Trois applications Julius. Ensuite, nous pouvons simplement supprimer les écarts entre le Commonwealth et les frontières. Nous allons donc créer deux objets EJS, n'est-ce pas ? Nous avons donc dû supprimer les lacunes autour de trop pote. Faisons donc ça dans la ligne. Pour l'instant. Je dirai par la marge 0. Nous pourrions ajouter un fichier CSS et le faire également. Mais tout ce dont nous avons besoin, c'est cette ligne. On peut donc le faire en ligne, d'accord ? Très bien. Maintenant, nous pouvons appeler le fichier trois js que nous venons de télécharger dans le corps. Pour ce faire, ouvrez une nouvelle balise de script. Et en tant que source, disons beaucoup de modules trois. Nous allons donc vérifier s'il s' agit de trois fichiers JS. Dans les modules Node. Dans trois régions, ce dont nous avons besoin n' est pas d'origine mais de deux régions. Nous utiliserons ce code. Donc dans l'index HTML, je dirai trois construits et sélectionnez trois js. Et juste en dessous, ouvrez une nouvelle balise de script. Et tout ce que nous allons écrire ira à l'intérieur de cette étiquette. 59. 6CreatingSceneCamera: Pour pouvoir afficher n'importe quoi avec deux geôliers, nous avons besoin de trois choses. appareil photo semble aléatoire. D'accord ? Créons-les donc. La création d'une scène est vraiment facile. Nous pouvons simplement créer une nouvelle variable provoquée par l'affichage. Nous pouvons utiliser un nouveau mot-clé. Et nous pouvons entendre trois bibliothèques parce que nous venons de l' importer juste au-dessus. Et appelons la matrice de majuscule C. D'accord ? L'étape suivante consiste donc à créer un terminal. Encore une fois, nous aimons peut-être vouloir créer un nouvel appareil photo portable. Appelons à nouveau un nouveau mot-clé. Nous en utiliserons trois. Donc ici, en fait, il y a quelques caméras différentes, nutritionnistes, nous allons commencer à utiliser caméra de perspective car elle est recommandée par la documentation. Et ouvrons le tapis. Cette méthode prend donc quatre arguments. Le premier attribut est le champ de vision. C'est l'étendue de la scène qui est visible sur l'écran à un moment donné. Nous devrions donc faire quelques diplômes. Donnons 7254 de plus et ne vous inquiétez pas. Il est plus facile à comprendre avec des exemples. Très bien ? Le second est le rapport hauteur/largeur. Et nous pouvons presque toujours la même chose dans cette période, qui est le poids intérieur de la fenêtre divisé par la fenêtre dans sa hauteur. Cela permettra donc de s'assurer que la résolution est correcte. Ok, le rapport hauteur/largeur de votre navigateur. Très bien, donc le troisième paramètre est en fait, permettez-moi de taper les deux derniers attributs et de l'expliquer. Donc, si l'objet est plus proche de cette valeur que la calorie, il ne sera pas aléatoire. D'accord ? L'objet, s'il est plus éloigné de la caméra que cette valeur, il ne sera pas rendu. Très bien ? Ce sont donc là les contraintes de près et de loin. Très bien ? Donc, s'il est plus éloigné d'un plus grand, ce ne sera pas le cas. Très bien. 60. 7CreateRenderer: Ensuite, créons une nouvelle variable appelée genre. Et nous en utiliserons trois. Cette fois. Nous utiliserons le Web aléatoire. Trois JS utilisent donc le rendu WebGL par défaut, mais il dispose également de différentes options pour les anciens navigateurs. OK ? Une fois que vous avez créé le rendu, nous pouvons définir la taille en appelant la méthode set size. Vous pouvez donc donner n'importe quelle valeur largeur et hauteur. Pour cet exemple, nous allons utiliser tout l'écran. C'est pourquoi je dirai la largeur de la fenêtre et la fenêtre dans sa voiture. Très bien. Et enfin, ajoutons à l' élément de rendu à la poupée. Et nous allons simplement utiliser les scripts jaloux, ajouter enfant avec. OK. Je vais appeler décrémenté par l'enfant apparent. Appelons donc ça Render Dom. Très bien, c'est donc le plan de Trajan dans chaque projet que vous allez créer, vous devez suivre les étapes. Vous devez créer l'erreur aléatoire de la caméra de scène. Vous devez définir la taille du rendu et ajouter cet élément à la porte. 61. 8CreateACube: À ce stade, je souhaite ouvrir le projet dans un navigateur et voir ce que nous obtenons. Donc, dans le fichier HTML, je clique avec le bouton droit de la souris et je l' ouvre avec live show. Et nous savons tous qu'ils expliquent cela. Si vous n'avez pas de serveur en direct, vous pouvez le télécharger à partir des extensions. Très bien, laissez-moi enlever mon pinceau. C'est donc une reine. Je suis ici. Nous allons donc simplement utiliser l'écran. Mettons-les ensemble. Ou nous n'avons pas encore quelque chose ici parce que nous n'avons créé aucun objet. Mais ce que nous avons fait plus tôt n'était qu'une configuration. Créons donc le premier objet, un cube. Peut-être. Je suis dans le but de créer un objet, il faut teindre la géométrie et le matériau. Très bien ? Pour la géométrie, créons une nouvelle ligne. Nous utiliserons à nouveau l'arbre, et cette fois nous appellerons la géométrie des bucks. géométrie de boîte est un objet qui contient tous les sommets et faces du cube. C'est vrai ? Le prochain est le matériel. Une fois encore. Et j'appellerai le matériau de base en maille. Pour l'instant. Et ouvrons ça. Nous allons simplement utiliser un point-virgule et nous pourrons donner la couleur ici. Et la couleur ici a les mêmes attributs que la couleur CSS. Bon, donc il cherche du code hexadécimal. Je vais simplement copier le code hexadécimal de la documentation pour en entendre parler dix. Nous avons donc créé de la géométrie et des matériaux. Et une fois que vous avez acheté, vous pouvez appliquer du matériel aux coupables. D'accord ? Nous pouvons donc le faire en utilisant beaucoup de choses. Créons un tube. Nous appellerions la fonction maillage. Nous utiliserons la géométrie et le matériau comme attributs. Cette fonction de maillage nécessite donc deux paramètres, géométrie et le matériau, et nous pouvons utiliser les éléments que nous venons de créer. Enfin, nous pouvons ajouter le cube à la scène. Et disons ceci. Je ne vois toujours rien qui n'a pas. Par défaut, la raison pour laquelle nous appelons vu au char que nous ajoutons sera ajoutée aux coordonnées zéros, zéros. C'est un problème pour nous car la caméra est également à cette position. Donc tant la caméra que le cube, il y aura l'un à l'intérieur de l'autre. Pour éviter cela. La documentation nous indique de changer la position Z des caméras. Le cube est donc à la position 000, mais la caméra est à 005. 62. 9RenderTheScene: Nous sommes presque finis. Nous avons créé le cube et ajouté à C. Rendons la scène afin que nous puissions le voir dans le navigateur. En fait. Je vais créer une fonction animée. Et vous devriez connaître cette fonction animée des chaînes latérales précédentes. Juste un appel rapide. Fonction inanimée. Nous devons demander un cadre d'animation et nous allons simplement passer et pondérer à nouveau ici. Cette image d'animation de requête génère la boucle. Vous avez vu que la fonction animée s'appellera chaque image, n'est-ce pas ? Vous devez déjà savoir si cela, une fois que nous avons la fonction d'énumération, nous pouvons appeler plus rond. Scène plus ronde que nous venons de créer ici pour le premier paramètre et la caméra. Nous venons de créer ici pour le deuxième panel. Et c'est tout. Appelons et attendons la fonction dans l'application. Et quand je dis cela, on y va. Enfin, nous avons quelque chose dans le navigateur. Il n'est donc pas animé sur de nouveaux incorrects maintenant parce que nous n'avons pas essayé le code pour cela. Mais nous pouvons voir le cube que nous venons de créer, n'est-ce pas ? C'est donc vert parce que nous, encore une fois, la couleur verte et tout le reste vient de deux bibliothèques js. Par exemple, nous n'avons pas spécifié la couleur d'arrière-plan, mais ses colonnes de la bibliothèque elle-même, n'est-ce pas ? Nous avons donc précisé la marge permanente 0. Nous n'avons donc aucune marge aux frontières. Enfin, vous aurez la boîte à la fin. L'étape suivante consiste à l'animer. 63. 10AnimateCube: Si vous vous en souvenez, nous changions la position des objets en fonction animée afin de les déplacer. Nous appliquerons la même logique ici. Nous allons commencer à bouger. Il suffit de le faire pivoter. D'accord ? Donc, en fonction animée, juste un arc là, Angela. Nous devrions modifier la rotation du cube. Appelons donc ça une rotation. Vous pouvez dire x ou y. Essayons d'abord la rotation x. Je veux dire, chaque image que je veux augmenter sa valeur de rotation x d'une. Essayons de voir le résultat. Vous pouvez voir qu'il tourne simplement, mais c'est trop rapide. Essayons 0,1. Mieux, mais quand même jusqu'à 1.01st 0. Et ça a l'air mieux. D'accord ? Et nous pourrions également faire la même chose pour la valeur Y. Et maintenant, nous avons un Q. Nous avons utilisé des méthodes de rotation. Et bien sûr, nous pourrions également utiliser l'attribut de méthode de position pour, disons que si vous voulez savoir, ok, pour x , par exemple, les mères vont sortir du charbon était comme ça. Permettez-moi de le répéter. Nous pouvons donc nous y déplacer et le faire pivoter. Nous pouvons faire ce que nous voulons réellement. Donc maintenant, je veux que tu joues avec ça. Vous pouvez créer beaucoup plus de cubes, les faire pivoter, changer de position, les faire entrer en collision, tout ce que vous voulez. Maintenant, nous pouvons jouer en 3D. Parfait. Bon, jouez dans l'état de Gettier, et je vous verrai dans la prochaine vidéo. 64. 1Introduction: Dans cette section, nous allons créer un effet d'espace 3D. Le résultat ressemblera à ceci. Cela ressemble au projet que nous avons fait plus tôt, mais cette fois, il s'agira d'une 3D. Principalement les développeurs, les utilisateurs, ce type de défauts dans la page de destination de leurs portefeuilles. Très bien, si vous êtes prêt, commençons par la vidéo suivante. 65. Configuration: Nous n'avons pas besoin d' ouvrir un nouveau projet. Nous pouvons continuer à partir d'ici. Créons un nouveau fichier ici. Je vais appeler ça de l'espace, pas du HTML. Appuyez ensuite sur le point d'exclamation, appuyez sur Entrée pour créer un modèle HTML et modifier le titre en espace 3D. étape suivante consiste à importer les actifs. Dans ce projet, nous n' engageons qu'un seul actif PNG encerclé. Et je vais vous fournir ce fichier en ressources pour que vous puissiez le télécharger et l'importer dans votre propre projet. Très bien, alors allons-y et ajoutons une balise de style ici et modifions le corps CSS. Nous n'avons donc pas besoin de faire grand-chose ici. C'est pourquoi je vais le faire en ligne. Assurez-vous donc de ne pas avoir de marge. Nous ajustons la largeur et la hauteur. Définissons l'arrière-plan sur noir et débordant. Caché. Morphine à propos de la configuration consiste à importer la bibliothèque Free Jazz incarnée. Faisons référence au fichier JS de l'arborescence. Ce n'est donc pas gratuit de modules. J'ai également construit ici trois principaux JS. suffit donc de couper le SIG pour ce projet. Je vais ouvrir une nouvelle balise de script. Et chaque char que nous écrirons à partir de maintenant, nous allons entrer dans cette étiquette. 66. 3InitFunction: Comme nous l'avons déjà mentionné dans ce cours, nous devons définir la caméra cinématographique. Et cette fois, je vais créer une fonction d'initialisation qui va tout démarrer. Par exemple, la création de la scène. Comme mes trois péchés ou la création de la caméra. À partir de la bibliothèque 3D. J'utiliserai de nouveau la caméra de perspective ici. Et donnons 64 chutes, ce qui signifie champ de vision. Pour le rapport hauteur/largeur. Nous allons à nouveau le régler pour qu'il s'intègre divisé par un seuil de hauteur intérieure, notre valeur par défaut comme 11 mille. Réglons donc les caméras qui positionnent un et tournent des degrés sur 90. Et comme vous vous en souvenez des cours précédents, nous pouvons le régler pour qu'il corresponde à pi divisé par deux, soit 90 degrés. Je vais donc continuer avec la création, créant le rendu à partir de l'arborescence, pas d'effacer l'erreur aléatoire GEL, et de définir la taille du moteur de rendu à l'aide de mesures de taille définie. Enfin, ajoutons-le au corps du document. Nous pouvons utiliser des méthodes d'ajout enfant et tel élément DOM granulaire. Quatre paramètres. 67. 4CreateStars: Dans cette vidéo, nous allons créer les étoiles à l'aide d'une boucle for-loop. Utilisez le raccourci pour for-loop et changer d' itérateur à l'aide de l'IA. Et je fixerai la limite à 5 000 parce que nous voulons que de nombreuses actions créent. Supprimons également la ligne et créons l'étoile ici. J'utiliserai le vecteur T de trois bibliothèques. Nous devrions donc faire des valeurs X, Y et Z. Et je veux qu'ils soient aléatoires. Un nombre aléatoire compris entre moins trois cent et trois cents. Nous avons donc également copié cette ligne pour y et ces valeurs. Très bien. Ainsi, une fois que nous avons créé l'étoile, nous pouvons définir sa vitesse car elle se déplacera. Et aussi l'accélération. Nous allons ensuite mettre à niveau la vitesse avec cette accélération, nous pourrons modifier les valeurs ultérieurement. Et ce dont nous avons besoin, c'est ici un tableau pour pousser l'étoile que nous venons de créer. C'est pourquoi je vais créer un nouveau tableau ici et le pousser, pousser l'étoile dans ce tableau. Nous avons donc besoin de cette zone car nous voulons définir la géométrie et nous l'utiliserons ici. Et voyons ce que c'est exactement. Je vais ouvrir ce fichier avec Live Server et je vais apporter mon onglet juste à côté de Xcode. Développons-le et disons inspecter pour voir la console. Maintenant, vous pouvez voir qu'il manque de tableau. Et voilà, l'accélération et la vitesse que nous venons de nous asseoir. Ok, donc nous avons un tableau et chacun inclut les étoiles. Nous devrions donc aussi créer une géométrie et nous utiliserons ce GO, Eric, j'appellerai ce bijou d'étoile variable, mais commençons par le définir. Et nous pouvons maintenant lui définir une nouvelle géométrie de tampon d' arbre. Il s'agit donc d'une nouvelle fonctionnalité de trois js. Nous ne pouvons plus utiliser de géométrie, mais nous devrions utiliser la géométrie tampon. Je dirai à partir de pintes. Nous pouvons maintenant passer le tableau que nous venons de créer. Regardons l'étoile Geo et voyons ce que c'est exactement. Il s'agit donc d'une géométrie et d'un objet sur EJS et il a des attributs comme count, et c'est 5 000 car nous créons 5 000 étoiles. Laissons la déclaration de journal ici. Nous n'en avons pas besoin. Nous commencerons à créer la texture dans la prochaine vidéo. 68. 5UseGeoAndMaterial: Nous allons créer le sprite à l'aide d'une texture chargée. Ok, disons trois nouveaux, chargeur de textures. Et j'appellerai les méthodes du Seigneur. Nous pouvons transmettre le nom du fichier PNG entre cette parenthèse. Imaginons le cercle PNG que nous venons d'importer. Et créons également le matériau étoile. Nous allons dire de nouveaux éléments sur trois points. Nous devons donc ajuster certaines propriétés. Par exemple, la couleur. Je veux créer des étoiles grises, dont la taille est de 0,6. Et nous utiliserons le sprite que nous venons créer pour les champs cartographiques. Très bien ? Nous avons donc maintenant le matériau de départ et la géométrie. Nous pouvons créer en utilisant trois points et nous pouvons passer l'étoile Geo et matériau de départ pour les paramètres. Enfin, nous devrions ajouter les étoiles que nous venons de créer la scène. Ok, ce bloc de code devrait également être à l'intérieur de la fonction d'initialisation car nous ne voulons pas exécuter cet appel avant l' initialisation, n'est-ce pas ? Laissez-moi simplement bouger, déplacer tout ce code dans la fonction d'initialisation. Et j'ai fait une faute de frappe ici. Nous utilisons du charbon de bois PNG. Résolvons également cela. Renommez le cercle. Ensuite, nous allons également le réparer dans un fichier HTML. Certains codes ne ciblent pas. 69. 6AnimateFunction: Dans cette vidéo, nous allons ajouter la fonction Animate. Vous connaissez déjà cela. Nous utilisons cette fonction avant de nombreuses fois. Appelons donc également cadre d'animation de demande et appelons à nouveau la fonction animate pour créer une boucle. Très bien ? Je veux donc vous montrer quelque chose sur géométrie tampon car il s'agit nouveaux entiers et voyons comment l'utiliser. Donc, dans sa documentation officielle, il suffit de descendre. Et ici, vous pouvez voir que nous allons au hasard à des points et qu'ils utilisent le tableau de position des attributs. Nous avons donc besoin de la même chose car nous devons également ajouter des points aléatoires. Créons donc une nouvelle position variable. Et nous utiliserons Star Geo. Et de même pour la documentation, on peut dire que l'erreur de position des hommages. Et pour mieux le comprendre, il suffit de verrouiller la position flanquée ici et aussi la longueur de la géo Eric. Nous ne voyons encore rien parce que nous n'avons pas appelé ma fonction. Mais laissez-moi simplement déplacer ces trois lignes vers le haut. Nous pouvons laisser tout voir à nouveau parce que nous ne l'avons pas appelé aussi fonction. Ok, donc, appelons ça fonction. Nous pouvons maintenant voir la longueur des tableaux. Comme vous pouvez le voir, 20 000 lumières. C'est donc trois fois exactement deux fois la différence entre eux. Et c'est parce que l' un d'eux est en 1D et l'autre en 3D. C'est comme si c' est comme la version élargie l'une de l'autre. OK ? Ainsi, dans un tableau double, le premier élément arrête les valeurs X, Y et Z des étoiles. Mais dans les positions, le premier élément ne contient que la valeur x. Le deuxième élément arrête la valeur Y. Et la troisième hôtesse de la valeur exacte. Les quatre à ALU seront donc la valeur x de la deuxième action. C'est pourquoi c'est en un seul. Très bien, continuons. Nous avons également besoin d'une boucle dans la fonction Animate. Je vais créer à nouveau une boucle for et définir l'itérateur. Appelons Joanne liée ici. Utilisons ça parce que c'est le plus court. Je vais régler la vitesse de glace de votre réseau. Nous effectuons une itération sur le tableau et nous avons créé un champ de vélocité d'éléments. Définissons donc la vélocité plus égale à l'accélération. Ici, c'est vraiment facile. Ce que nous faisons, c'est simplement ajouter de l'accélération à la vitesse dans un recadre. De plus, nous devrions définir des positions avec la vitesse, non ? Nous pouvons donc mettre à jour la position avec la vélocité. Mais permettez-moi d'abord de verrouiller les positions juste pour la voir facilement. Je devrais adorer le poste ici. OK ? Maintenant, vous pouvez voir que c'est juste un tableau détient toutes les positions. Et comme je l'ai dit, les valeurs X, Y et Z, et c'est en 1D, donc juste, vous savez, Ford est la valeur x du second style. Nous devrions également les mettre à jour avec vélocité. Donc, dans chaque image, on peut juste dire deux fois trois plus un. Et ce sera le bon indice. C'est donc la transformation de 3D 1D. Vous pouvez faire le calcul. Donc parce que nous itérations sur la compagnie aérienne G0, très bien, donc la valeur maximale sera de 5 000 dans cette boucle, mais nous devons atteindre 15 000 en tableau de positions. Très bien ? Permettez-moi également d'appeler une fonction amide dans la fonction d'initialisation. Mais nous ne voyons rien. Et c'est parce que nous n'avons pas essayé la section de rendu. Bon, continuons. Nous sommes juste en dessous de la boucle for. Nous pouvons simplement écrire une ligne pour la mise à jour. Et en fait, permettez-moi de vérifier le maximum de mise à jour car elle a également changé avec la géométrie proposée. Revenons à cette page. En bas, vous pouvez voir cette ligne ici. Donc, si vous avez besoin d'un rendu, vous avez besoin d'une mise à jour. La syntaxe est la suivante. Nous disons que la position des attributs d'étoiles qui doit être mise à jour est égale à true. Et ensuite, rendons cette scène et cette caméra. Et enfin, demandez et nous avons déjà fait cette diapositive. Permettez-moi de le supprimer, enregistrer ce fichier et de voir le résultat. Parfait. Nous avons donc l'animation. Il fonctionne tout ce que nous avons écrit. Mais nous avons également besoin de plus en plus. 70. 7FinishTheProject: Notre effet est vraiment beau. Je vais l'essayer maintenant. Nous avons un problème. Quand les étoiles font partie du calcul. Nous ne répondons pas à eux. Juste là, juste sortir de nous et nous ne pouvons rien voir sur la vache, c'était au bout d'un moment. Alors choisissons ceci, corrigeons ça pour la boucle. Je souhaite ouvrir une nouvelle déclaration IF. Cette instruction vérifie si les positions ne sont pas dans les colonnes. Il suffit donc de vérifier la valeur y uniquement si la position est inférieure à moins 200, ce qui signifie que l'étoile est hors des communs. Et ce que nous pouvons faire ici, c'est de fixer la position à 200, encore une fois, comme ceci. Nous répondons donc simplement à l'étoile à 200 ans. Nous pouvons donc également changer sa vitesse à 0 afin de réinitialiser sa vitesse, sinon elle sera vraiment rapide. Ainsi, à droite de l'écran, vous pouvez voir l'effet fonctionner et les étoiles réagissent après être sortis de la voiture. Et cela est également efficace pour le système. Il n'y a pas d'étoiles en dehors du Commonwealth, donc nous ne nuisons pas au processeur. Donc, tournons également les étoiles. Pourquoi ? Nous aussi, voyons .com. OK, c'est trop rapide. Laissez-moi juste faire 0,2. Toujours rapide. 0.020.002, c'est génial. Il s'agit donc d'un effet cinématographique en tournant un peu les étoiles. Je pense que c'est mieux. Maintenant. Nous avons terminé un autre projet. Tu te débrouilles vraiment très bien. Comme toujours. Vous pouvez simplement jouer avec l'effet. Vous pouvez modifier n'importe quoi, la vitesse des couleurs. Vous pouvez également ajouter une nouvelle classe d'entités. J'espère que ce projet vous a plu et que vous en prendrez soin. 71. 8SomeThreeJSExemples: Avant d'arriver à la fin, je veux vous montrer quelques exemples JS gratuits que vous pouvez inspirer. J'ai vraiment aimé ces œuvres. Je voulais donc simplement partager avec vous aussi pour que vous puissiez imaginer d'autres cas d'utilisation. Très bien ? Donc le premier est l'appel d'Atradius, sorte que vous puissiez voir à l'écran, en fait, laissez-moi recharger la page afin que vous puissiez voir également l' animation initiale. Je crois donc que c'est vraiment un beau travail de Louis Hub Rugs. Vous pouvez donc voir si vous regardez simplement le panier, il est écrit avec JavaScript et c'est la bibliothèque JS de l'arbre utilisée. Je crois qu'il existe un algorithme pratique et des congélateurs et un post-traitement pour les couleurs complètes. Bon, donc le deuxième exemple d'une seconde provient de trois bibliothèques JS. C'est donc sur leur site officiel. Et c'est un exemple d'effet de particules de modèles 3D. Ils ne fournissent pas le code ici, mais si nous disons Inspecter, nous pouvons voir l'appel dans la section Sources. Il suffit de vérifier les points, le HTML dynamique. Nous pouvons voir le code ici et vous pouvez voir qu'il n'y a qu'un modèle HTML, comme nous l'avons fait auparavant. Et voici l'importante bibliothèque arborescente. Et ils utilisent un SIG gratuit pour cette belle animation. Et c'est quelque chose de différent ici. C'est tout ce que le format J est utilisé pour les modèles 3D de ces modèles humains. Encore une fois, je crois que certains effets de particules sont utilisés sur ces modèles OBJ. D'accord. C'est donc le, c'est presque la même chose que nous avons fait plus tôt dans l'effet de particules dans ce cours. Et en fait, je crois également en Skoll ici. Je crois qu'il est également utilisé dans le projet Scout. Permettez-moi de vérifier l'atout ici pour que je puisse mieux vous montrer. Ici, nous pouvons voir l'atout utilisé pour le crâne. Il suffit d'y aller. C'est pour une texture sombre que PNG. Mais ce que nous recherchons, c'est le format OBJ pour objet 3D. Laissez-moi juste le coller. Il devrait télécharger le modèle pour que je puisse l'ouvrir. Laissez-moi apporter mon Xcode sur cette scène. Vous pouvez donc voir cette option, ce modèle 3D est utilisé dans ce projet. Et puis certains effets, un effet de particules est appliqué. C'est donc ce qu'on appelle le modèle. Cela signifie que vous pouvez utiliser n'importe quel modèle de votre choix et que vous pouvez utiliser l'effet de particules pour créer le vôtre. Très bien, l'idée principale ici est d'importer un modèle 3D. Je pense que ce sera vraiment cool si les particules Skoll se déplacent avec une musique comme nous l'avions fait auparavant dans la section des visualiseurs audio. Qui sait ? Peut-être pourrons-nous faire quelque chose comme ça à l'avenir. Faites-moi savoir si vous voulez. C'est totalement différent de cela. Dans la section commentaires. Puis-je développer un programme de cours en fonction de la demande ? Mais pour l'instant, c'est tout pour moi. Je suis vraiment reconnaissant à vous tous qui pouvez regarder jusqu'ici. J'espère que ça vous a plu si vous aimez ce cours. N'oubliez pas de faire une critique. voit la prochaine fois. Au revoir.