Interessant guia de programació per al dissenyador: feu que la vostra imatge funcioni (primera part): 16 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:18

Correr! Correr! Correr!

La programació no és tan difícil. El punt clau és trobar el ritme i fer-ho d’un en un.

Abans de llegir aquest capítol, espero que ja hàgiu conegut el mètode bàsic de dibuix de funcions, o us sentireu marejat i confós per dues funcions principals del cap: configurar i dibuixar.

Com que volem fer gràfics de moviment, hem de saber com es produeix l'animació.

La imatge anterior sembla força atractiva i revela visualment el principi d'implementació de l'animació.

L’animació és màgia. És una màgia sobre l’engany visual. No obstant això, en aquesta informació explotada, l'era de les inundacions de vídeo, ja ens hi hem acostumat. Poques persones es sorprendran que sigui increïble poder veure l'animació.

El mateix principi es pot aplicar a l'animació de dibuix amb el programa. Hem de plantejar-nos com dibuixar diferents gràfics en cada fotograma i el programa canviarà de pàgina automàticament mentre completem una animació completa al nostre cap. En el capítol següent, parlarem de com realitzar el moviment gràfic bàsic. Abans d’això, hem de conèixer alguns coneixements bàsics sobre variables.

Pas 1: variable

La variable és el contenidor de dades. Es pot utilitzar repetidament dins d'un programa.

Per exemple:

[cceN_cpp theme = "dawn"] mida (500, 500); el·lipse (100, 250, 50, 50); el·lipse (200, 250, 50, 50); el·lipse (300, 250, 50, 50); el·lipse (400, 250, 50, 50);

[/cceN_cpp]

Aquesta secció de codi no ha utilitzat cap variable. Dibuixa quatre cercles a la pantalla. Podem trobar que tenen la mateixa amplada i alçada. Ara que és el mateix, per tal de minimitzar l’entrada repetida de dades, podem definir un signe per representar-la. Aquest signe és variable.

Aquí teniu el codi després d'afegir una variable:

[cceN_cpp theme = "dawn"] mida (500, 500); int a = 50; el·lipse (100, 250, a, a); el·lipse (200, 250, a, a); el·lipse (300, 250, a, a); el·lipse (400, 250, a, a);

[/cceN_cpp]

Tenim un resultat totalment igual!

Com que hem definit la variable a, podem canviar els paràmetres convenientment. Si canviem a = 50 per a = 100, tot l’amplada i l’alçada dels cercles es convertiran en 100 uniformement. Per tant, no hem de canviar els paràmetres un per un. La variable és realment un bon invent.

Pas 2: la creació de variables

Abans d’utilitzar la variable, hem de fer declaracions i designar-ne el tipus de dades.

int i;

i ＝ 50;

La primera frase del codi ha fet una afirmació per a una variable i. int és un símbol utilitzat principalment per declarar variable. En declarar, estalviarà una habitació a la memòria de l'ordinador, que equival a generar una "caixa", especialment utilitzada per restaurar dades enteres. La segona frase significa que l’assignació 50 s’implementarà mitjançant la variable i. Després de la implementació d’aquesta frase, les dades s’emmagatzemaran de manera estable a la variable i. O pot ser més mandrós combinar les dues frases anteriors en una sola i completar la tasca mentre es fa una declaració.

int i ＝ 50;

És relativament lliure anomenar una variable. Però de vegades hem de parar atenció a alguna cosa.

Pas 3: regulació del nom de la variable

• Ha de ser la combinació d’alfabet i subratllat. Pot ser un símbol o una paraula.

• Cas delicat. Nom i nom poden representar diferents variables.

• Intenteu anomenar-lo tan fàcilment com sigui possible per fer-vos entendre a una sola vista. El caràcter inicial ha de ser un alfabet en lloc d’un número o d’un caràcter especial.

• No hi ha paraules clau com int, float

Els següents són algunes afirmacions equivocades.

int $ a;

int 89b;

Aquí teniu les afirmacions correctes:

int r;

int super_24;

int openTheDoor;

Pas 4: tipus de variable

Excepte per declarar dades enteres, podem declarar per a dades decimals (també anomenades dades de coma flotant) amb la paraula clau float.

flotador b = 0,5

Hem de tenir en compte quin tipus de dades hem utilitzat per a la nostra declaració. Si hem utilitzat la paraula clau int, aquesta darrera tasca no pot escriure i ＝ 0,5 o alguna cosa semblant, o el programa es convertirà en error. Però si escrivim de manera oposada, està bé. Per exemple, float i = 5 és la gramàtica adequada, però el programa el reconeixerà com a nombre decimal.

Algunes de les variables ja s'han definit per sistema. No els hem de declarar nosaltres mateixos. Igual que el referit anteriorment "amplada, alçada", adquirirà automàticament l'amplada i l'alçada de la pantalla de l'ordinador. L’alta freqüència d’ús que el dissenyador defineix directament com una variable per defecte per fer-nos-el més convenient.

Pas 5: operador

Els següents són operadors de processament:

+ plus

- menys

* multiplicar

divideix

％ Mòdul de la resta

Heu de conèixer tots aquests operadors excepte el%. Sembla força estrany perquè el seu resultat és restant. El 9% 3 és 0. Mentre que el 9% 5 és 4.

Els operadors es poden utilitzar entre assignacions i variables.

[cceN_cpp theme = "dawn"] int a = 1; // declarar la variable enter a, l'assignació és 1. int b = 2; // Declareu la variable sencera b, l'assignació és 2. int c; // Declarar la variable sencera c. c = a + b; // A més de dues assignacions i assigneu el resultat a c. imprimir (c); // Variable de sortida c.

[/cceN_cpp]

Pas 6: Resultat de l'operació:

El resultat de la sortida no es mostrarà a la finestra, sinó a la consola de la part inferior.

El mètode d’escriptura de la quarta línia sembla força estrany. Però és un format habitual que s’utilitza freqüentment durant la tasca de l’ordinador. El costat esquerre del símbol igual ha de ser la variable final assignada, mentre que el costat dret ha de ser el procés d’operació.

La funció d'impressió de la cinquena línia pot imprimir variables a la consola, que s'utilitza sovint per provar l'estat de la sortida de dades.

Pas 7: regulació de l'operació

Un punt problemàtic de Processament és que hem d’aclarir el tipus de variable. Hem de prestar especial atenció al procés del nombre de coma flotant i del tipus enter.

imprimir （6/5）; // resultat 1

L'operació entre enters tindrà un nou enter. 6 dividit per 5 és 1,2. Però el resultat de sortida del programa és 1. Això és contrari a la nostra intuïció. El programa no tractarà la ronda, sinó que suprimirà el número que hi ha darrere del punt decimal.

imprimir (6,0 / 5,0); // resultat 1.2

L'operació entre punts flotants donarà lloc a un nou número de punt flotant. Si el resultat real és 1.2, el resultat de sortida del programa serà el mateix.

imprimir (6 / 5.0); // resultat 1.2

imprimir (6,0 / 5); // resultat 1.2

Finalment és la barreja de nombre enter i de coma flotant. El resultat final serà 1.2.

• En realitat, heu de tenir en compte que l'objectiu d'aquest disseny de regulació és no perdre la precisió de les dades. Per tant, si un element és un número de coma flotant, el resultat també serà un número de coma flotant.

Pas 8: funció de configuració i funció de dibuix

Anteriorment hem parlat d'una pila de coneixements fonamentals. Ara, finalment, arribem a jugar a alguna cosa interessant. La configuració de funcions i el dibuix equivalen a les funcions principals del processament. Aquestes dues funcions són molt especials. Pot controlar el procediment del programa. Un programa relativament complicat inclourà aquestes dues funcions perquè són el marc bàsic del programa. Format:

configuració nul·la () {

}

sorteig buit () {

}

L’ús especial fa que el seu format d’invocació sigui diferent de les altres funcions. Hem d'afegir "void" abans del nom de la funció, que no significa "valor retornat". Darrere del nom de la funció, hem d'afegir parèntesis i claus.

[cceN_cpp theme = "dawn"] void setup () {print (1); } void draw () {print (2); } [/cceN_cpp]

Vegem un exemple:

En prémer el botó d'operació, la consola en primer lloc emetrà "1" i, a continuació, emetrà constantment "2" fins que premeu el botó d'aturada o tanqueu la finestra.

El codi entre parèntesis a la funció de configuració s’implementarà només una vegada. Mentre que el codi dins de la funció de dibuix s’executarà constantment en circulació (implementació per defecte 60 vegades / segon).

A causa d'aquest caràcter, la configuració s'utilitza generalment per inicialitzar la propietat de l'entorn, com ara l'amplada i l'alçada de la pantalla, el color de fons i l'assignació de tot tipus de variables. Tot i que sovint situem les funcions de dibuix en el dibuix de funcions per tal de generar gràfics canviats contínuament.

Pas 9: Cercle en moviment horitzontal

Amb la funció Draw, podem començar a crear les nostres animacions. El mètode d'escriptura de l'efecte d'animació mitjançant Processing és força "incòmode". No té cap ordre existent. Per exemple, designeu una forma determinada per fer-la curvilínia.

Hem de definir aquests detalls per nosaltres mateixos. Heu d’indicar al programa quin tipus de gràfics necessita definitivament cada fotograma.

Escriviu-hi el codi següent (ara comencem a fer-ho amb les mans):

[cceN_cpp theme = "dawn"] int x; int y; void setup () {mida (300, 300); x = 0; y = alçada / 2; } void draw () {fons (234, 113, 107); noStroke (); el·lipse (x, y, 50, 50); x = x + 1; }

[/cceN_cpp]

Aquesta secció de codi mostra un cercle de moviment. Les primeres variables declarades x, y s’utilitzen per emmagatzemar la posició de coordenades. Les seves tasques s'executen en la configuració de la funció. El codi de la clau és el següent dins de la funció de dibuix:

x = x + 1

No el vegeu com a equació matemàtica, o serà molt estrany. Aquí, "＝" és un símbol per a l'assignació. Representa col·locar els números adequats a la variable esquerra. Suposem que x és 50, un cop el codi es posi en marxa, el costat dret de "＝" és igual a 50 + 1, és a dir, 51. El resultat final s'assignarà a la variable x. Per tant, el valor de x esdevé 51.

Seguiu el procediment del programa; cada cop que el dibuix de funcions funcioni per una vegada, el valor de x augmentarà 1. Així, cada vegada que dibuixem, el cercle mourà una direcció de píxels horitzontalment cap a la dreta, en comparació amb el marc anterior. Per tant, el gràfic esdevé motiu.

• Per tal que el codi obtingui una millor llegibilitat, hem d’estalviar una determinada habitació abans de cada línia de codi dins de claus. I estarà el més alineat possible. Premeu TAB o diversos espais en blanc, es pot retirar.

• El símbol de l'espai en blanc i el salt de línia del programa no influirà en el programa. Per tant, està bé si n'escrivim un més o menys.

Aquí hi ha una altra manera més senzilla d’expressar-ho. Per fer que el cercle variable augmenti 1 automàticament, l’hem d’escriure perquè tingui el format següent.

cercle ＝ cercle ＋1

Molt incòmode! Si el nom de la variable és més llarg, hem d’escriure més paraules. Per tant, els nostres mandrosos predecessors pensen una idea com aquesta.

cercle ＋＋

No és molt senzill? Significa augmentar 1 automàticament. De manera similar, hi ha - -, que significa disminuir 1 automàticament.

Però si esperem que la quantitat d'increment automàtic sigui diferent a 2, hem de provar una altra expressió.

cercle + = 2

Això equival a

cercle = cercle + 2

De la mateixa manera, hi ha - ＝, / =, * =.

Pas 10: direcció del moviment

Quina direcció es mou el gràfic depèn de com canvieu la coordenada. Si es canvia a y ＝ y ＋ 1, el cercle es mourà cap avall. Si ambdues x i y augmenten 1, el cercle es mourà cap avall per la part inferior dreta. Si l’escrivim perquè sigui un símbol menys, es mourà en la direcció oposada.

[cceN_cpp theme = "dawn"] int x, y; // Es poden declarar diverses variables alhora, utilitzeu la coma per separar-les. void setup () {mida (300, 300); x = 0; y = 0; } void draw () {fons (234, 113, 107); noStroke (); el·lipse (x, y, 50, 50); x ++; y ++; }

[/cceN_cpp]

Taxa de moviment

Recordeu els 60 fotogrames per segon per defecte dins del sorteig de funcions? Segons aquesta taxa, el cercle superior es mourà 60 píxels per segon cap a la dreta.

Si volem canviar la velocitat de moviment gràfic, hi ha dos mètodes: un consisteix a augmentar el valor x cada vegada que es canviarà.

x ＝ x ＋ 10

Ha millorat la velocitat 10 vegades en comparació amb l’original.

L’altre mètode és canviar la freqüència d’actualització del llenç. frameRate ()

Aquesta funció pot canviar la freqüència d'emissió del llenç. Escriviu frameRate (10) a la configuració de la funció, canviarà els 60 fotogrames per segon originals en 10 fotogrames per segon. La velocitat s’alenteix 6 vegades respecte a l’anterior.

Pas 11: Fons amb vista

Tots els exemples anteriors escriuen el fons al dibuix de funcions. Alguna vegada heu pensat a escriure-ho a la configuració de funcions? Tindrà alguna diferència? Ara, actualitzem l’exemple del moviment horitzontal.

[cceN_cpp theme = "dawn"] int x, y; void setup () {mida (300, 300); fons (234, 113, 107); x = 0; y = alçada / 2; } void draw () {noStroke (); el·lipse (x, y, 50, 50); x + = 1; } [/cceN_cpp]

Què ha passat? Potser no pot entendre correctament la raó de la producció del problema. Esborreu la funció noStroke, torneu a afegir un traç i vegeu el camí de moviment del cercle.

Ah, és perquè el cercle creat anteriorment no s'ha suprimit. Com que la configuració de la funció funciona només una vegada, si escrivim el fons a sobre, només omplirà el fons una vegada i no tindrà més efecte. El fons de la funció és com una eina de dipòsit de pintura. Un cop utilitzat, cobrirà tot el contingut del llenç en lloc d’establir només un color de fons. L’escrivim abans de dibuixar la funció de manera que es cobrirà el marc anterior cada vegada que creem un patró nou. Per tant, el cercle pot funcionar com esperàvem. Llevat de recordar els usos de cada funció, hem de pensar en la posició del codi. Molt temps, com una línia cap amunt o cap avall per a la codea i per escriure-la dins o fora d’un claudàtor, es crearan efectes força diferents. La direcció del codi és bidimensional. Si apareix un error, hem de calibrar en aquestes dues dimensions.

• Aquest mètode de dibuix no repetit pot crear un efecte molt especial si s’utilitza correctament. Podeu copiar el codi següent i provar-ho.

[cceN_cpp theme = "dawn"] void setup () {mida (400, 400); } void draw () {el·lipse (ample / 2-mouseX, altura / 2-mouseX, mouseY, mouseY); el·lipse (ample / 2-mouseX, altura / 2 + mouseX, mouseY, mouseY); el·lipse (ample / 2 + mouseX, altura / 2-mouseX, mouseY, mouseY); el·lipse (ample / 2 + mouseX, altura / 2 + mouseX, mouseY, mouseY); } [/cceN_cpp]

Aquí hem utilitzat la variable màgica mouseX i mouseY. Darrerament en parlarem detalladament.

Pas 12: sacsejar el cercle

Què passa si vull que la direcció del moviment del cercle es faci irregular? Amb la funció aleatòria intel·ligentment, també es pot adonar d’aquest efecte. L’atzar és una funció d’ús freqüent. Es pot utilitzar per generar funcions aleatòries. És com un esperit sense rastre. Un cop relacionat amb les variables, no us podeu imaginar què serà el següent.

Format de convocatòria:

aleatori (alt)

Alt representa el límit superior aleatori i el límit inferior per defecte és 0. Per exemple, aleatori (10). Produirà un número de 0 a 10 a l’atzar (s’inclou 0 però no s’inclou 10).

aleatori (baix, alt)

Si establim dos paràmetres, tornarà al valor aleatori entre ells. Per exemple, random (5, 10). Produirà un número de 5 a 10 a l’atzar (s’inclouen 5 però no 10).

Exemple:

[cceN_cpp theme = "dawn"] float x;

x = aleatori (50, 100);

imprimir (x); [/cceN_cpp]

Cada vegada que executem el programa, la consola emetrà diferents valors.

• Nota: els valors creats per la funció aleatòria pertanyen al tipus de coma flotant (tipus de nombre decimal). Si volem assignar un valor a la variable enter, l’hem de transformar mitjançant la funció int (). La transformació no compleix la ronda, sinó que elimina directament la part decimal. Així, la sortida de int (aleatori (5)), només té 5 possibilitats: 0, 1, 2, 3, 4.

Després de familiaritzar-nos amb l'ús de la funció aleatòria, podem entrar directament en el cas següent.

[cceN_cpp theme = "dawn"] int x, y; void setup () {mida (300, 300); x = amplada / 2; y = alçada / 2; } void draw () {fons (234, 113, 107); noStroke (); x + = int (aleatori (-5, 5)); y + = int (aleatori (-5, 5)); el·lipse (x, y, 50, 50); }

[/cceN_cpp]

Els primers valors de coordenades afegits són fixos. Només si augmentem un valor aleatori, el cercle es mourà en una direcció indefinida. Amb el rang aleatori més gran, es sacseja amb més freqüència. Com que el canvi de valor entre fotogrames es rebota, el moviment ja no serà suau. Mentre que el marc anterior és a (150, 150), el segon marc es mourà a la posició de (170, 170) en un cop d’ull.

Pas 13: migració del cercle

Cercle migratori

Crearà un moviment suau? El soroll de la funció ens pot ajudar. Té un millor ritme que l’atzar estàndard. I els números aleatoris generats aleatòriament són contínuament.

Format de convocatòria:

soroll （t）

El soroll de la funció no pot definir el seu rang de sortida. El programa que el defineix només pot generar números de coma flotant de 0 a 1 i l'entrada fixa només pot tenir sortida fixa.

[cceN_cpp theme = "dawn"] float x = noise (5); flotador y = soroll (5); imprimir (x, y); [/cceN_cpp]

Com que els paràmetres d’entrada anteriors són 5, els resultats de sortida són els mateixos. Llavors, com canviar el resultat? La resposta és canviar dinàmicament els paràmetres d’entrada. De fet, podem considerar el soroll com una pista de veu il·limitada, els paràmetres d'entrada són com "l'actualitat". Si l’entrada del paràmetre és contínua, la sortida també serà contínua.

[cceN_cpp theme = "dawn"] flota x, y; void setup () {mida (700, 100); x = 0; fons (0); } void draw () {x + = 1; y = noise (FrameCount / 100.0) * 100; noStroke (); el·lipse (x, y, 2, 2); }

[/cceN_cpp]

En aquest cas, dibuixem el camí de canvi de Y perquè puguem entendre millor el soroll de la funció.

• Entre ells, frameCount variable obtindrà el frame actual. Diferent de l'amplada i l'alçada de l'anterior, és estable sense cap canvi. A més, comença a augmentar de 0. Si ho entenem pel nostre gràfic animat de visualització inicial, mostra la pàgina a la qual ens hem dirigit (més aviat a la concepció del temps al programa).

• frameCount és una variable sencera. Dividit per una altra variable sencera, el programa per defecte processarà el resultat com a enter. Per millorar la precisió del resultat, hem de canviar de 100 a 100,0. Dividit per un número de coma flotant, també obtindrem un número de coma flotant.

• Per canviar l’eix Y de 0 a 100, hem de multiplicar el resultat del soroll per 100. Així podem controlar l’interval de valors aleatoris.

Alguns de vosaltres que pensen bé es poden preguntar "per què hem de dividir frameCountby 100? No està bé escriure frameCount directament?" Per descomptat que pot! Però aquí, per tal de mostrar millor les característiques del soroll de la funció, alentim la "velocitat d'emissió". A l'exemple següent es mostren els canvis en el valor de sortida amb una taxa de canvi diferent.

[cceN_cpp theme = "dawn"] float x, y1, y2, y3, y4, y5; void setup () {mida (700, 500); x = 0; fons (0); } void draw () {x + = 1; y1 = noise (frameCount) * 100; y2 = noise (FrameCount / 10.0) * 100; y3 = noise (FrameCount / 100.0) * 100; y4 = noise (FrameCount / 1000.0) * 100; y5 = noise (frameCount / 10000.0) * 100; noStroke (); el·lipse (x, y1, 2, 2); el·lipse (x, y2 + 100, 2, 2); el·lipse (x, y3 + 200, 2, 2); el·lipse (x, y4 + 300, 2, 2); el·lipse (x, y5 + 400, 2, 2); ictus (80); línia (0, 100, amplada, 100); línia (0, 200, amplada, 200); línia (0, 300, amplada, 300); línia (0, 400, amplada, 400); }

[/cceN_cpp]

Podeu considerar els paràmetres canviants dins del soroll de la funció com una barra de progrés. Canviar el paràmetre és com si movéssim la barra de progrés. Per tant, quan l’abast canviant d’aquesta "pista de veu" sigui més gran, les característiques contínues i posteriors del valor de sortida seran més febles. (Ens podem imaginar què passarà si emetem una peça musical o un vídeo amb dues vegades la velocitat, 5 velocitat, 20 vegades velocitat). Quan l'abast és més gran que un valor determinat, no té cap gran diferència per funcionar aleatòriament a la generació de valor.

Si podeu entendre tots els exemples anteriors, no tindreu res més fàcil de dibuixar un cercle migratori. També podeu entendre els principis interns.

[cceN_cpp theme = "dawn"] flota x, y; void setup () {mida (300, 300); x = 0; } void draw () {fons (234, 113, 107); x = noise (FrameCount / 100,0 + 100) * 300; y = noise (FrameCount / 100.0) * 300; noStroke (); el·lipse (x, y, 50, 50); }

[/cceN_cpp]

Ara, el moviment és més interessant com un giroscopi giratori.

• La raó per la qual la variable x dins del soroll de la funció ha de ser més de 100 és perquè per separar-les per una distància. Si els paràmetres de xy dins del soroll de la funció són els mateixos o són força propers, el canvi de coordenades x, y s’acostarà a la mateixa. Això fa que el moviment esdevingui molt més aleatori.

Pas 14: cercle mogut pel ratolí

A continuació, arribem a dues variables que més m'agraden: mouseX i mouseY. A la primera vista de les dues concepcions, els meus ulls brillen de llum. Perquè és la forma més directa d’interactuar amb el gràfic. Amb ell podem crear un munt de programes interessants.

El cas és molt senzill:

[cceN_cpp theme = "dawn"] int x, y; void setup () {mida (300, 300); x = 0; y = 0; } void draw () {fons (234, 113, 107); noStroke (); x = mouseX; y = mouseY; el·lipse (x, y, 50, 50); }

[/cceN_cpp]

mouseX pot adquirir la coordenada x del ratolí, mentre que mouseY pot obtenir la coordenada y.

• Intentem canviar el símbol positiu i negatiu, o intercanviar mouseX i mouseY.

Pas 15: finalitzar

A partir d’aquestes ordres familiars, és possible que pugueu conduir el moviment dels gràfics. Amb el contingut de l’últim capítol, utilitzeu correctament la vostra imaginació, podreu crear molts efectes animats interessants.

Al nostre capítol següent, podem veure exemples més abundants. Al mateix temps, utilitzarem funcions matemàtiques i la combinarem amb el moviment gràfic.

Aquest article prové del dissenyador Wenzy.

Pas 16: lectures relatives:

Interessant guia de programació per al dissenyador: processament del toc inicial

Interessants pautes de programació per a dissenyadors: creeu el vostre primer programa de processament

Aquest article prové de:

Si necessiteu ajuda, podeu contactar amb: [email protected].