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

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

Les mathématiques, pour la plupart d'entre vous, semblent inutiles. Le plus couramment utilisé dans notre vie quotidienne est simplement d'ajouter, de soustraire, de multiplier et de diviser. Cependant, c'est assez différent si vous pouvez créer avec un programme. Plus vous en saurez, plus vous obtiendrez un résultat merveilleux.

Étape 1: Mouvement et fonction

Laissez-moi vous montrer plusieurs images inconnues pour stimuler votre goût.

Qu'est-ce que c'est ça? Maintenant, gardez cette question en premier et vous la saurez et l'utiliserez.

Dans le dernier chapitre, nous avons appris la configuration des fonctions et le dessin des fonctions, ce qui peut rendre les graphiques statiques dynamiques. Cependant, ce format de mouvement est tout simplement trop simple. Nous allons utiliser les connaissances fonctionnelles que nous maîtrisons auparavant pour exécuter nos graphiques avec leur propre personnage.

Combien de fonctions reconnaissez-vous dans les images ci-dessus ? Quelle relation entretiennent-ils avec le mouvement ? Maintenant, prenons une fonction quadratique, ajoutons quelques paramètres au hasard et voyons ce qui se passera. Par exemple, y = x² / 100.

Voici à quoi ressemble l'image de la fonction. Copiez le code ci-dessous.

[cceN_cpp theme="dawn"] float x, y; void setup(){ size(300, 300); arrière-plan (0); x = 0; } void draw(){ stroke(255); poids du trait(2); y = pow(x, 2) / 100,0; //La fonction pow reviendra à la puissance n du numéro de désignation. (x, 2) représente le carré de x. Le premier paramètre est le numéro de base et le second est l'indice. point(x, y); x++; } [/cceN_cpp]

Effet de course

Ensuite, choisissez la fonction sin. Formule: y = 150 + sin(x).

Copiez le code suivant.

[cceN_cpp theme="dawn"] float x, y; void setup(){ size(300, 300); arrière-plan(0); x = 0; } void draw(){ y = height/2 + sin(radians(x)) * 150; //Fonction radian transforme x en angle. x++; course(255); poids du trait(2); point(x, y); } [/cceN_cpp]

Effet de course

C'est le graphique que nous obtenons après avoir utilisé le code. Et ce sont leurs pistes de mouvement. Par rapport au précédent, le résultat est évident. L'image de fonction correspond en fait à la piste de mouvement ! C'est assez simple. Il suffit de remplacer la valeur de x, y en coordonnée. La première piste que nous avons dessinée est équivalente au graphique de la fonction y = x² / 100. Alors que la dernière piste est égale au graphique de la fonction y = 150 + sin(x). Mais au programme, le sens de l'axe y est opposé. Ainsi, par rapport au graphisme original, la piste sera à l'envers. Maintenant, je suppose que vous devez avoir le sentiment que certaines questions difficiles hantées dans votre tête depuis longtemps sont résolues immédiatement. Il est étonnant que ces fonctions fantastiques que nous avons apprises auparavant puissent être utilisées pour contrôler le mouvement graphique !

Étape 2: pour écrire la fonction

J'ai énuméré plusieurs fonctions fréquemment utilisées ci-dessous. J'espère que ceux-ci peuvent nous aider à traduire les fonctions en code pouvant être reconnu par l'ordinateur.

Par conséquent, la formule ci-dessous dans le programme doit être écrite comme ceci:

y = x² → y = pow(x, 2) ou y = sq(x)

y = x³ → y = pow(x, 3)

y = xⁿ → y = pow(x, n)

y = 4ⁿ → y = pow(4, n)

y ＝logₑ² → y = log(2)

y = e² → y = exp(2)

y = √5 → y = sqrt(5)

Vous pouvez également écrire au hasard une fonction dans le programme et voir à quoi ressemblera sa piste de mouvement. N'oubliez pas de tenir compte de la plage de valeurs du champ et du domaine de définition, ou votre graphique s'exécutera hors de votre écran.

Fonction trigonométrique

Allons maintenant plus loin pour connaître quelques écritures de fonctions trigonométriques.

Nous devons faire attention que dans le programme l'entrée du paramètre de fonction relatif à l'angle adopte le radian. Ainsi sin90° doit être écrit dans sin(PI／2). Si vous n'êtes pas familier avec cette méthode, vous pouvez utiliser la fonction randians pour transformer l'angle en radian au préalable, puis écrire sin（radians(90)).

L'utilisation des degrés de fonction est comparativement opposée. Il peut transformer le radian en angle. Entrez print (degrés (PI/2)) directement dans la zone d'édition et voyez ce que vous obtiendrez.

Étape 3: contrôlez le mouvement graphique avec la fonction trigonométrique

Voici un cas pour vous de voir l'effet réel du mouvement graphique.

[cceN_cpp theme="dawn"] float x, y; void setup(){ size(700, 300); } void draw(){ background(234, 113, 107); y = sin(radians(x)) * 150 + 150; x++; noStroke(); ellipse(x, y, 50, 50); } [/cceN_cpp]

La fonction sin est une fonction périodique. Sa valeur minimale est －1 et sa valeur maximale est 1. La hauteur de l'écran est de 300. Fait référence à y = sin(radians(x)) * 150 + 150, donc la plage de changement de la valeur y sera bien contrôlée à moins de 0 à 300.

Cercle tournant

Eh bien, nous sommes enfin arrivés à la partie la plus importante de ce chapitre. Comment tracer un chemin circulaire dans un programme ? Comment utiliser les fonctions pour l'afficher ? Laissez-moi vous montrer à nouveau les deux images que nous avons vues au début de cet article.

En fait, ils ont exposé visuellement la relation entre les coordonnées de circonférence et la fonction trigonométrique. Le mouvement dans les images ci-dessus est entraîné par la variable indépendante en constante augmentation. La gauche est l'image de la fonction sin et cos, et la droite représente un point faisant un mouvement circulaire après avoir été cartographié. N'est-ce pas très intelligent ? Ce n'est plus mystérieux. Vous pouvez utiliser du code pour le réaliser.

Un exemple simple:

[cceN_cpp theme="dawn"] float x, y, r, R, angle; void setup(){ size(300, 300); r = 20; //Diamètre du cercle R = 100; //Rayon de la trajectoire de déplacement x = 0; angle = 0; y = hauteur/2; } void draw(){ background(234, 113, 107); translate(largeur/2, hauteur/2); // Déplace le point d'origine au centre de l'écran. noStroke(); x = R * cos(angle); y = R * sin(angle); ellipse(x, y, r, r); angle += 0,05; } [/cceN_cpp]

Voir! Un cercle tournant apparaît ! Ici, la variable indépendante n'est plus en augmentation constante du bit devenu angle (égal à dans l'image). C'est le support pour l'angle. Parmi eux, xy ont un coefficient R relativement multiplié, ce qui conduit à l'extension du rayon de mouvement du cercle (R est pour le rayon). S'il ne doit pas multiplier R, sa trajectoire de déplacement sera limitée dans la plage de -1 à 1.

Pourquoi ne pas utiliser le x croissant ? Selon la propriété de la fonction elle-même, tout x dans le domaine de définition a le seul y qui lui correspond. Ainsi, dans le système de coordonnées de dimension rectangulaire plane, vous ne pouvez pas trouver une "fonction simple" pour dessiner un cercle directement. C'est-à-dire que nous ne pouvons plus utiliser ce format.

y = (L'expression inconnue de x ?);

x＋＋;

Nous devons donc changer d'idée. Choisissez un autre angle comme variable indépendante, puis utilisez les fonctions sin et cos pour le transformer en coordonnées horizontales et verticales.

x = R * cos(angle);

y = R * sin(angle);

angle += 0,05;

Certains d'entre vous pourraient se demander pourquoi il peut afficher la trajectoire du mouvement du cercle. Selon la définition de la fonction trigonométrique, nous pouvons facilement raisonner cette fonction sin le rapport du côté opposé à l'hypoténuse; la fonction cos est le rapport de l'adjacent à l'hypoténuse. Peu importe où se trouve le point du cercle, r (rayon) restera inchangé. Par conséquent, nous pouvons conclure l'expression de la coordonnée x et de la coordonnée y.

Parce qu'il ne s'agit pas d'une orientation mathématique, je vais arrêter ici de vous montrer plus de connaissances sur la fonction trigonométrique. Si vous voulez le savoir ou si vous l'oubliez, vous pouvez essayer de le revoir vous-mêmes.

Bien sûr, tout va bien si vous ne pouvez pas le comprendre pleinement. Il suffit de savoir s'en servir pour tracer un cercle. C'est aussi une sorte d'"idée de programmation". Plus tard, nous invoquerons souvent certains des modules existants créés par d'autres pour réaliser un certain type de fonction. Ne vous forcez pas à le connaître en détail.

Cependant, la fonction sin et cos est courante. Si vous voulez faire de la création de niveau supérieur, vous feriez mieux d'essayer de le connaître à fond. Si cette question elle-même peut nous conduire à apprendre plus de connaissances mathématiques, il y a des choses plus intéressantes qui vous attendent.

Ce sont des images étroitement liées à la fonction trigonométrique.

Étape 4: Système de coordonnées de mouvement

Les effets précédents concernent tous les changements de coordonnées graphiques. Le système de coordonnées lui-même est statique. En fait, nous pouvons faire bouger les coordonnées pour réaliser un effet de mouvement. C'est comme si les gens sur la plage regardaient les autres personnes dans le bateau. Pour les personnes sur le bateau, le bateau est statique. Mais que se passe-t-il si le bateau lui-même bouge, alors les gens dans le bateau bougent avec lui. Les premiers cas concernent tous des « personnes qui courent sur le bateau ». En fait, le bateau ne bouge pas. Voici quelques fonctions courantes pour changer le système de coordonnées.

Fonction traduire

La fonction translate, dont nous avons parlé précédemment, est utilisée pour déplacer le système de coordonnées du graphique horizontalement.

Format d'appel:

traduire (a, b)

Le premier paramètre correspond au déplacement vers la direction positive de l'axe x pour un pixel. Le deuxième paramètre correspond au déplacement vers la direction positive de l'axe y pour b pixels.

Comparez les deux codes et essayez de trouver une différence. (Afin de simplifier le code, nous pouvons supprimer la taille de la fonction, la largeur et la hauteur de l'écran sont par défaut 100.)

Avant d'utiliser:

ellipse (0, 0, 20, 20);

Après avoir utilisé:

traduire (50, 50);

ellipse (0, 0, 20, 20);

Fonction rotation

Format d'appel:

tourner(a)

Il est utilisé pour la rotation du système de coordonnées. Lorsque le paramètre est positif, il choisira le point d'origine comme point central et tournera dans le sens des aiguilles d'une montre. L'entrée de paramètre est la même avec la fonction trigonométrique pour utiliser le radian.

Avant utilisation:

ellipse (50, 50, 20, 20);

Après utilisation:

rotation(radians(30));

ellipse (50, 50, 20, 20);

L'effet dans le programme est de faire tourner le cercle autour du point central des coordonnées dans le sens des aiguilles d'une montre sur 30 degrés.

Échelle de fonction

Format d'appel:

échelle (a)

Cette fonction permet de dézoomer le système de coordonnées. La valeur est pour la mise à l'échelle. Lorsque le paramètre est au-delà de 1, effectuez un zoom avant; s'il est inférieur à 1, effectuez un zoom arrière.

Avant utilisation:

ellipse (0, 0, 20, 20);

Après utilisation:

échelle(4);

ellipse (0, 0, 20, 20);

Le cercle dans l'image ci-dessus est amplifié au quadruple de la taille d'origine. En outre, vous pouvez utiliser deux paramètres pour effectuer un zoom arrière séparément dans les directions des axes x et y.

échelle (4, 2);

ellipse (0, 0, 20, 20);

Superposition de la fonction de transformation

Ici, la superposition concerne les changements par rapport au système de coordonnées actuel. En d'autres termes, les effets peuvent être superposés.

traduire (40, 10);

traduire (10, 40);

ellipse (0, 0, 20, 20);

Son effet final sera égal à

traduire (50, 50);

ellipse (0, 0, 20, 20);

Idem pour la fonction rotation

rotation(radians(10));

rotation(radians(20));

ellipse (50, 50, 20, 20);

Égal à

rotation(radians(30));

ellipse (50, 50, 20, 20);

Les deux fonctionnent à l'échelle et au centre de rotation sur le point d'origine pour mettre à l'échelle et faire pivoter. Si nous voulons obtenir l'effet de rotation avec une position centrale à (50, 50), nous devons penser à l'inverse. Déplacez d'abord le point d'origine à la position (50, 50), puis ajoutez la fonction de transformation rotative. Faites enfin votre graphique peint sur le point d'origine.

Avant utilisation:

ellipse (50, 50, 50, 20);

Après utilisation:

traduire (50, 50);

rotation(radians(45));

ellipse (0, 0, 50, 20); // Afin de voir le changement d'angle de rotation, nous avons créé un ovale.

Cela peut sembler tordu. Vous avez juste à pratiquer plus alors vous le comprendrez. (Vous pouvez également essayer de modifier la séquence de translation et de rotation de la fonction pour voir la différence.)

Mouvement horizontal et mouvement circulaire

Dans les cas suivants, nous allons réaliser un effet de mouvement en changeant le système de coordonnées. En même temps, je voudrais vous demander de vous référer à l'exemple du chapitre précédent. La plupart du temps, vous constaterez que pour réaliser un certain type d'effet, vous pouvez utiliser une méthode totalement différente.

Étape 5: Mouvement horizontal

[cceN_cpp theme="aube"]

entier x, y; void setup(){ size(300, 300); x = 0; y = hauteur/2; } void draw(){ background(234, 113, 107); noStroke(); traduire(x, y); ellipse (0, 0, 50, 50); x++; } [/cceN_cpp]

La coordonnée du cercle n'est pas modifiée mais son système de coordonnées est modifié.

Mouvement de rotation

[cceN_cpp theme="dawn"] float r, R, angle; void setup(){ size(300, 300); r = 20; //Dimension du cercle R = 100; //Rayon de la piste de mouvement } void draw(){ background(234, 113, 107); translate(largeur/2, hauteur/2); // Déplace le point d'origine au centre de l'écran. tourner (angle); noStroke(); ellipse(0, R, r, r); angle += 0,05; } [/cceN_cpp]

N'est-ce pas beaucoup plus clair et simple que la fonction trigonométrique ? Vous avez peut-être une question ici. Prenons l'exemple du code tournant. De toute évidence, la fonction de transformation mentionnée ci-dessus est relative et permet la superposition. Si nous écrivons translate(width/2, height/2) dans la fonction draw, cela ne signifie-t-il pas que chaque fois que la fonction draw fonctionnera pour une fois, le système de coordonnées se déplacera d'une distance dans la direction inférieure droite de la base d'origine? Raisonnablement, il ne restera pas éternellement au centre de l'écran.

Vous pouvez comprendre de cette façon. Une fois que le code dans le dessin de fonction a terminé une opération de haut en bas, le système de coordonnées reviendra à l'état initial lors de la deuxième opération. Le point d'origine du système de coordonnées sera défini par défaut pour revenir au coin supérieur gauche. Donc, si nous voulons que le système de coordonnées change continuellement, les paramètres d'angle dans la fonction rotate augmenteront constamment sa valeur.

Accéder à l'état des coordonnées

Parfois, nous ne voulons pas que le changement d'état du système de coordonnées soit basé sur l'ancien. À ce stade, nous devons utiliser les fonctions pushMatrix et popMatrix. Les deux fonctions apparaissent généralement en couple. La fonction pushMatrix est avant popMatrix. Ils ne peuvent pas être utilisés seuls, ou cela ira mal.

Exemple:

[cceN_cpp theme="dawn"] pushMatrix(); //Stocker l'état du système de coordonnées translate(50, 50); ellipse (0, 0, 20, 20); popMatrix(); //Lire l'état du système de coordonnées rect(0, 0, 20, 20); [/cceN_cpp]

Dans cet exemple, avant d'utiliser translate(50, 50), nous utilisons la fonction pushMatrix.pour stocker l'état actuel du système de coordonnées. C'est en même temps le statut initial. Après avoir tracé un cercle, puis mis en œuvre popMatrix, il reviendra à ce statut. À ce stade, implémentez la fonction rect, vous constaterez qu'elle n'a pas subi l'influence de la fonction translate, au lieu de cela, elle dessine un carré dans le coin supérieur gauche du point d'origine.

De plus, les fonctions pushMatrix et popMatrix permettent l'imbrication.

Par exemple

pushMatrix();

pushMatrix();

popMatrice();

popMatrice();

Afin de montrer intuitivement sa relation, nous choisissons le format condensé.

Mouvement combiné ou mouvement en mouvement ?

Maintenant, la deuxième vague de partie importante commence. Essayez juste d'avancer. Auparavant, nous avons utilisé une métaphore du bateau et des gens. Avez-vous déjà pensé à ce que si nous faisions bouger à la fois les gens et le bateau, quel genre de sentiment les gens sur la plage auront-ils ?

Comme combiner le mouvement horizontal avec le mouvement rotatif du système de coordonnées. Le but ici est en fait de se déplacer dans une direction seulement.

[cceN_cpp theme="dawn"] int x, y; angle de flottement; void setup(){ size(300, 300); arrière-plan (234, 113, 107); noStroke(); x = 0; //Lorsque la valeur initiale de x est 0, nous pouvons négliger cette phrase de code. Lors de la déclaration de variable, la valeur par défaut est 0. y = 0; // Idem ci-dessus. angle = 0; // Idem ci-dessus. } void draw(){ angle += 0.25; y--; translate(largeur/2, hauteur/2); pushMatrix(); tourner (angle); ellipse(x, y, 5, 5); popMatrice(); } [/cceN_cpp]

Et il y a le mouvement circulaire et la mise à l'échelle du système de coordonnées.

[cceN_cpp theme="dawn"] float x, y, angle; void setup(){ size(300, 300); arrière-plan (234, 113, 107); noStroke(); } void draw(){ angle += 0.01; x = sin(angle) * 100; y = cos(angle) * 100; translate(largeur/2, hauteur/2); pushMatrix(); échelle(1 + 0,1 * sin(angle*10)); ellipse(x, y, 5, 5); popMatrice(); } [/cceN_cpp]

Ne vous laissez pas tromper par ça ! Le point du cercle fait en fait un mouvement circulaire. Ce n'est pas difficile à comprendre si on le compare à une mise à l'échelle avec une caméra vidéo. Une caméra vidéo qui se déplace constamment d'avant en arrière filme un point en mouvement circulaire.

Surpris? Ce sont des fonctions de base simples. Mais avec une combinaison différente, nous pouvons créer tellement d'effets différents. Jusqu'à présent, mon exposition s'arrête pour laisser de la place à votre exploration.

Étape 6: Utilisation complète

Il touche bientôt à sa fin pour ce chapitre. Les deux derniers chapitres, j'ai introduit la méthode de base du mouvement graphique. Je pense que vous pourriez avoir une compréhension plus profonde de cela, par rapport à vos idées initiales. Enfin, voici un exemple complet pour votre référence.

[cceN_cpp theme="dawn"] float x1, y1, x2, y2, r, R; flotteur angle1, angle2; void setup(){ size(300, 300); r = 12; R = 120; angle1 = 0; angle2 = PI/4; } void draw(){ background(234, 113, 107); noStroke(); translate(largeur/2, hauteur/2); angle1 += 0,02; angle2 += 0,06; x1 = R *sin(angle1); y1 = R* cos(angle1); x2 = R/2 *sin(angle2); y2 = R/2 *cos(angle2); ellipse(x1, y1, r/2, r/2); ellipse(x2, y2, r, r); ellipse(-x1, -y1, r/2, r/2); ellipse(-x2, -y2, r, r); ellipse(x1, -y1, r/2, r/2); ellipse(x2, -y2, r, r); ellipse(-x1, y1, r/2, r/2); ellipse(-x2, y2, r, r); course(255); poids du trait(3); ligne(x1, y1, x2, y2); ligne(-x1, -y1, -x2, -y2); ligne(x1, -y1, x2, -y2); ligne(-x1, y1, -x2, y2); } [/cceN_cpp]

Cet exemple ne contient aucune connaissance au-delà de notre chapitre précédent introduit.

Pour quels points correspond ? Quelles lignes correspondent ? Je ne peux pas le comprendre aussi. Mais je me souviens qu'il dérive d'une petite section de code.

C'est la nature de son mouvement. Les lignes de repos ne sont qu'un effet miroir. Si vous continuez à suivre ces instructions, vous pouvez créer une version mise à jour et ajouter un contrôleur à votre graphique afin de modifier l'état de votre mouvement graphique en temps réel.

L'intérêt de la programmation réside dans le fait que l'on peut concevoir ou combiner des réglementations. Cependant, le programme final dépendra de vos capacités. Habituellement, les concepteurs ont une imagination graphique puissante. Vous pouvez esquisser une image dans votre tête, puis essayer de la traduire en code. En outre, vous pouvez commencer à partir du code et des règlements eux-mêmes, concevoir des fonctions et des variables à volonté. N'oubliez pas que le traitement est votre croquis et le code est votre pinceau ! Vaporisez vos idées en toute liberté !

Étape 7: FIN

Dernier de notre chapitre, revenons à une question que nous avons longtemps conservée depuis le début. Quelle est l'utilité de dépenser autant d'efforts pour faire une photo avec le programme ? Après avoir appris ce chapitre, vous découvrirez qu'il y a tellement de méthodes de jeu qui attendent que vous les exploriez.

[cceN_cpp theme="dawn"] float browX, earD, eyeD, faceD; void setup(){ size(500, 500); } void draw(){ background(200, 0, 0); browX = 150 + sin(frameCount / 30.0) *20; earD = 180 + sin(frameCount / 10,0) *20; eyeD = 60 + sin(frameCount/30.0) *50; faceD = 300; poids de la course(8); ellipse (175, 220, oreilleD, oreilleD); ellipse(largeur - 175, 220, earD, earD); rect(100, 100, faceD, faceD); ligne (browX, 160, 220, 240); ligne (largeur-browX, 160, largeur-220, 240); fill(aléatoire(255), aléatoire(255), aléatoire(255)); ellipse (175, 220, œilD, œilD); ellipse(largeur-175, 220, eyeD, eyeD); remplir(255); point(largeur/2, hauteur/2); triangle(170 - cos(frameCount / 10.0)* 20, 300 - sin(frameCount / 10.0) *20, largeur - (170 + cos(frameCount / 10.0) *20), 300 + sin(frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

N'est-ce pas magique pour le graphisme dynamique ? Ici, je ne vous montre pas trop de cas. Vous pourriez être en mesure de concevoir un bien meilleur effet que moi. L'avantage de dessiner avec un programme existe, vous pouvez jouer avec chaque pixel. Étant donné que votre graphique n'est pas bitmap, chaque point clé de votre graphique est contrôlable. Il peut réaliser certains effets que d'autres logiciels ne peuvent pas réaliser.

Si vous avez un cœur qui veut tout briser et le combiner à nouveau, le programme d'études vous aidera grandement à réaliser cette idée.

Cet article vient du designer Wenzy.

Étape 8: Lectures relatives:

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

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

Conseils de programmation intéressants pour le concepteur: lancez votre image (première partie)

Si vous avez des questions, vous pouvez envoyer un email à [email protected].

Cet article provient de: