Interessante guida alla programmazione per i designer: fai funzionare la tua immagine (seconda parte): 8 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 09:59

La matematica, per la maggior parte di voi, sembra inutile. Il più comunemente usato nella nostra vita quotidiana è semplicemente aggiungere, sottrarre, moltiplicare e dividere. Tuttavia, è molto diverso se puoi creare con il programma. Più sai, più risultati meravigliosi otterrai.

Passaggio 1: movimento e funzione

Lascia che ti mostri diverse immagini sconosciute per stimolare il tuo gusto.

Che cos'è questo? Ora tieni questa domanda prima e poi la conoscerai e la userai.

Nell'ultimo capitolo, abbiamo imparato l'impostazione delle funzioni e il disegno delle funzioni, che possono rendere dinamica la grafica statica. Tuttavia, questo formato di movimento è troppo semplice. Useremo la conoscenza delle funzioni che abbiamo imparato prima per eseguire la nostra grafica con il proprio carattere.

Quante funzioni riesci a riconoscere dalle immagini sopra? Che tipo di rapporto hanno con il movimento? Ora prendiamo una funzione quadratica da essa, aggiungiamo alcuni parametri a caso e vediamo cosa succederà. Ad esempio, y = x²/100.

Ecco come appare l'immagine della funzione. Copia il codice qui sotto.

[cceN_cpp theme="alba"] float x, y; void setup(){ size(300, 300); sfondo(0); x = 0; } void draw(){ stroke(255); corsaPeso(2); y = pow(x, 2) / 100.0; //La funzione pow tornerà all'ennesima potenza del numero di designazione. (x, 2) rappresenta il quadrato di x. Il primo parametro è il numero di base e il secondo è l'indice. punto(x, y); x++; } [/cceN_cpp]

Effetto corsa

Quindi, scegli la funzione sin. Formula: y = 150 + sin(x).

Copia il seguente codice.

[cceN_cpp theme="alba"] float x, y; void setup(){ size(300, 300); sfondo(0); x = 0; } void draw(){ y = height/2 + sin(radianti(x)) * 150; //Funzione radiante trasforma x in angolo. x++; corsa(255); corsaPeso(2); punto(x, y); } [/cceN_cpp]

Effetto corsa

Questo è il grafico che otteniamo dopo aver operato il codice. E queste sono le loro tracce di movimento. Rispetto al primo, il risultato è evidente. L'immagine della funzione corrisponde effettivamente alla traccia del movimento! È abbastanza semplice. Devi solo sostituire il valore di x, y in coordinate. La prima traccia che abbiamo disegnato è equivalente al grafico della funzione y = x² / 100. Mentre la seconda traccia è uguale al grafico della funzione y = 150 + sin(x). Ma nel programma, la direzione dell'asse y è opposta. Quindi, rispetto alla grafica originale, la traccia sarà capovolta. Ora, immagino che tu debba avere la sensazione che alcune domande difficili che ti assillano nella testa da molto tempo vengano risolte immediatamente. È incredibile che queste fantastiche funzioni che abbiamo imparato prima possano essere utilizzate per controllare il movimento grafico!

Passaggio 2: per scrivere la funzione

Di seguito ho elencato diverse funzioni utilizzate di frequente. Spero che questi possano aiutarci a tradurre le funzioni in codice che può essere riconosciuto dal computer.

Pertanto, la formula seguente nel programma deve essere scritta in questo modo:

y = x² → y = pow(x, 2) o 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 = esp(2)

y = √5 → y = sqrt(5)

Puoi anche scrivere casualmente una funzione nel programma e vedere come sarà la sua traccia di movimento. Ricorda di considerare l'intervallo del campo di valori e il dominio di definizione, o la tua grafica uscirà dallo schermo.

Funzione Trigonometrica

Ora, andiamo oltre a conoscere alcuni scritti di funzioni trigonometriche.

Bisogna fare attenzione che in programma l'input del parametro della funzione relativo all'angolo adotta il radiante. Quindi sin90° sarà scritto in sin(PI／2). Se non si ha familiarità con questo metodo, è possibile utilizzare la funzione randianti per trasformare in anticipo l'angolo in radianti, quindi scrivere sin（radianti(90)).

L'uso dei gradi di funzione è relativamente opposto. Può trasformare il radiante in angolo. Inserisci print(degrees(PI/2)) direttamente nell'area di modifica e guarda cosa otterrai.

Passaggio 3: controlla il movimento grafico con la funzione trigonometrica

Ecco un caso per vedere l'effetto reale del movimento grafico.

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

La funzione sin è una funzione periodica. Il suo valore minimo è －1 e il valore massimo è 1. L'altezza dello schermo è 300. Riferito a y = sin(radianti(x)) * 150 + 150, quindi l'intervallo di variazione del valore y sarà ben controllato entro 0 a 300.

Cerchio rotante

Bene, siamo finalmente entrati nella parte più importante di questo capitolo. Come disegnare un percorso circolare in un programma? Come utilizzare le funzioni per visualizzarlo? Lascia che ti mostri di nuovo le due immagini che abbiamo visto all'inizio di questo articolo.

In realtà hanno esposto visivamente la relazione tra le coordinate della circonferenza e la funzione trigonometrica. Il movimento nelle immagini sopra è guidato dalla variabile indipendente in costante aumento θ. A sinistra è l'immagine della funzione sin e cos, e la destra rappresenta un punto che fa un movimento circolare dopo essere stato mappato. Non è molto intelligente? Non è più misterioso. Puoi usare il codice per realizzarlo.

Un semplice esempio:

[cceN_cpp theme="alba"] float x, y, r, R, angolo; void setup(){ size(300, 300); r = 20; //Diametro del cerchio R = 100; //Raggio del percorso di movimento x = 0; angolo = 0; y = altezza/2; } void draw(){ background(234, 113, 107); translate(larghezza/2, altezza/2); //Sposta il punto originale al centro dello schermo. noStroke(); x = R * cos(angolo); y = R * sin(angolo); ellisse(x, y, r, r); angolo += 0,05; } [/cceN_cpp]

Guarda! Appare un cerchio rotante! Qui, la variabile indipendente non è più in costante aumento bit diventa angolo (uguale a nell'immagine). È sinonimo di angolo. Tra questi, xy hanno coefficiente R relativamente moltiplicato, che porta all'estensione del raggio di movimento del cerchio (R sta per raggio). Se non deve moltiplicare R, il suo percorso di movimento sarà limitato nell'intervallo da -1 a 1.

Perché non usare la x crescente? Secondo la proprietà della funzione stessa, qualsiasi x all'interno del dominio di definizione ha l'unica y che lo corrisponde. Quindi, nel sistema di coordinate delle dimensioni rettangolari del piano, non è possibile trovare una "semplice funzione" per disegnare direttamente il cerchio. Vale a dire che non possiamo più utilizzare questo formato.

y = (L'espressione sconosciuta di x?);

x＋＋;

Quindi dobbiamo cambiare idea. Scegli un altro angolo come variabile indipendente, quindi usa la funzione sin e cos per trasformarlo in coordinate orizzontali e verticali.

x = R * cos(angolo);

y = R * sin(angolo);

angolo += 0,05;

Alcuni di voi potrebbero chiedersi perché può visualizzare il percorso del movimento circolare. Secondo la definizione di funzione trigonometrica, si può facilmente ragionare su tale funzione sin dal rapporto tra il cateto opposto e l'ipotenusa; la funzione cos è il rapporto tra adiacente all'ipotenusa. Non importa dove si trova il punto del cerchio, r (raggio) rimarrà invariato. Quindi possiamo concludere l'espressione della coordinata x e della coordinata y.

Poiché questa non è una guida matematica, qui smetterò di mostrarti maggiori conoscenze sulla funzione trigonometrica. Se vuoi conoscerlo o semplicemente lo dimentichi, puoi provare a rivederlo di nuovo voi stessi.

Certo, va tutto bene se non riesci a comprenderlo appieno. Devi solo sapere come usarlo per disegnare un cerchio. Anche questa è una sorta di "idea di programmazione". In seguito, invocheremo spesso alcuni dei moduli esistenti realizzati da altri per realizzare un certo tipo di funzione. Basta non sforzarti di conoscerlo in dettaglio.

Tuttavia, la funzione sin e cos è comune. Se vuoi fare una creazione di livello superiore, faresti meglio a cercare di conoscerla a fondo. Se questa stessa domanda può spingerci ad apprendere più conoscenze matematiche, ci sono cose più interessanti che ti aspettano da scoprire.

Queste sono immagini strettamente relative alla funzione trigonometrica.

Passaggio 4: sistema di coordinate del movimento

Gli effetti precedenti riguardano tutti i cambiamenti delle coordinate grafiche. Il sistema di coordinate stesso è statico. In realtà possiamo far muovere le coordinate per realizzare l'effetto movimento. È proprio come le persone sulla spiaggia guardano le altre persone sulla barca. Per le persone sulla barca, la barca è statica. Ma cosa succede se la barca stessa si muove, allora le persone nella barca si muovono con essa. I primi casi riguardano tutti "persone che corrono sulla barca". In realtà, la barca non si muove. Di seguito sono riportate alcune funzioni comuni per la modifica del sistema di coordinate.

Funzione traduci

La funzione translate, di cui abbiamo parlato in precedenza, viene utilizzata per spostare orizzontalmente il sistema di coordinate del grafico.

Richiama formato:

tradurre (a, b)

Il primo parametro sta per spostamento verso la direzione positiva dell'asse x per un pixel. Il secondo parametro indica lo spostamento nella direzione positiva dell'asse y per b pixel.

Confronta i due codici e prova a trovare eventuali differenze. (Per semplificare il codice, possiamo eliminare la dimensione della funzione, la larghezza e l'altezza dello schermo sono predefinite a 100.)

Prima di usare:

ellisse(0, 0, 20, 20);

Dopo che usiamo:

tradurre(50, 50);

ellisse(0, 0, 20, 20);

Funzione ruotare

Richiama formato:

ruotare (a)

È usato per ruotare il sistema di coordinate. Quando il parametro è positivo, sceglierà il punto originale come punto centrale e ruoterà in senso orario. L'input del parametro è lo stesso con la funzione trigonometrica per usare il radiante.

Prima dell'uso:

ellisse(50, 50, 20, 20);

Dopo l'uso:

ruotare(radianti(30));

ellisse(50, 50, 20, 20);

L'effetto nel programma consiste nel far ruotare il cerchio attorno al punto centrale della coordinata in senso orario per 30 gradi.

Scala delle funzioni

Richiama formato:

scala(a)

Questa funzione può ridurre il sistema di coordinate. Il valore è per il ridimensionamento. Quando il parametro è oltre 1, ingrandire; se è inferiore a 1, rimpicciolisci.

Prima dell'uso:

ellisse(0, 0, 20, 20);

Dopo l'uso:

scala(4);

ellisse(0, 0, 20, 20);

Il cerchio nell'immagine sopra è amplificato fino a quattro volte la dimensione originale. Inoltre, è possibile utilizzare due parametri per ridurre separatamente le direzioni dell'asse x e dell'asse y.

scala(4, 2);

ellisse(0, 0, 20, 20);

Sovrapposizione della funzione di trasformazione

Qui, la sovrapposizione riguarda i cambiamenti relativi all'attuale sistema di coordinate. In altre parole, gli effetti possono essere sovrapposti.

tradurre(40, 10);

tradurre(10, 40);

ellisse(0, 0, 20, 20);

Il suo effetto finale sarà pari a

tradurre(50, 50);

ellisse(0, 0, 20, 20);

Lo stesso per la funzione di rotazione

ruotare(radianti(10));

ruotare(radianti(20));

ellisse(50, 50, 20, 20);

uguale a

ruotare(radianti(30));

ellisse(50, 50, 20, 20);

Sia la funzione ridimensiona che ruota si centrano sul punto originale per ridimensionare e ruotare. Se vogliamo ottenere l'effetto di rotazione con una posizione centrale a (50, 50), dobbiamo pensare in modo opposto. Spostare prima il punto originale nella posizione di (50, 50), quindi aggiungere la funzione di trasformazione rotante. Infine, fai dipingere la tua grafica sul punto originale.

Prima dell'uso:

ellisse(50, 50, 50, 20);

Dopo l'uso:

tradurre(50, 50);

ruotare(radianti(45));

ellisse(0, 0, 50, 20); //Per vedere il cambiamento dell'angolo di rotazione, abbiamo creato un ovale.

Potrebbe sembrare una svolta. Devi solo esercitarti di più, quindi lo capirai. (Puoi anche provare a cambiare la sequenza della funzione traduci e ruota per vedere la differenza.)

Movimento orizzontale e movimento circolare

Nei seguenti casi, realizzeremo l'effetto movimento cambiando il sistema di coordinate. Allo stesso tempo, vorrei chiedervi di fare riferimento all'esempio del capitolo precedente. La maggior parte delle volte, per realizzare un certo tipo di effetto, scoprirai che puoi usare un metodo completamente diverso.

Passaggio 5: movimento orizzontale

[cceN_cpp theme="alba"]

int x, y; void setup(){ size(300, 300); x = 0; y = altezza/2; } void draw(){ background(234, 113, 107); noStroke(); traduci(x, y); ellisse(0, 0, 50, 50); x++; } [/cceN_cpp]

La coordinata del cerchio non viene modificata ma il suo sistema di coordinate viene modificato.

Movimento di rotazione

[cceN_cpp theme="alba"] float r, R, angolo; void setup(){ size(300, 300); r = 20; //Dimensione del cerchio R = 100; // Raggio della traccia di movimento } void draw(){ background(234, 113, 107); translate(larghezza/2, altezza/2); //Sposta il punto originale al centro dello schermo. ruotare (angolo); noStroke(); ellisse(0, R, r, r); angolo += 0,05; } [/cceN_cpp]

Non è molto più chiaro e semplice della funzione trigonometrica? Potresti avere una domanda qui. Prendiamo come esempio il codice a rotazione. Ovviamente, la funzione di trasformazione di cui sopra è relativa e consente la sovrapposizione. Se scriviamo translate(width/2, height/2) in function draw, non significa che ogni volta che la funzione di disegno funziona per una volta, il sistema di coordinate si sposterà di una distanza nella direzione in basso a destra dalla base originale? Ragionevolmente non rimarrà per sempre al centro dello schermo.

Puoi capire in questo modo. Una volta che il codice in function draw ha completato un'operazione dall'alto verso il basso, il sistema di coordinate tornerà allo stato iniziale alla seconda operazione. Il punto originale del sistema di coordinate verrà predefinito per tornare all'angolo in alto a sinistra. Quindi, se vogliamo che il sistema di coordinate cambi continuamente, i parametri dell'angolo all'interno della funzione di rotazione aumenteranno costantemente il suo valore.

Stato delle coordinate di accesso

A volte, non vogliamo che il cambiamento dello stato del sistema di coordinate sia basato su quello precedente. A questo punto, dobbiamo usare la funzione pushMatrix e popMatrix. Le due funzioni di solito appaiono in coppia. La funzione pushMatrix è prima di popMatrix. Non possono essere utilizzati esclusivamente, o andrà storto.

Esempio:

[cceN_cpp theme="alba"] pushMatrix(); //Salva lo stato del sistema di coordinate translate(50, 50); ellisse(0, 0, 20, 20); popMatrix(); //Leggi lo stato del sistema di coordinate rect(0, 0, 20, 20); [/cceN_cpp]

In questo esempio, prima di utilizzare translate(50, 50), utilizziamo la funzione pushMatrix.per memorizzare lo stato corrente del sistema di coordinate. Questo, allo stesso tempo, è lo stato iniziale. Dopo aver disegnato un cerchio, quindi implementato popMatrix, tornerà a questo stato. A questo punto, implementa la funzione rect, scoprirai che non ha subito l'influenza della funzione translate invece disegna un quadrato nell'angolo in alto a sinistra del punto originale.

Inoltre, le funzioni pushMatrix e popMatrix consentono l'annidamento.

Per esempio

pushMatrix();

pushMatrix();

popMatrix();

popMatrix();

Per mostrare la sua relazione in modo intuitivo, scegliamo il formato condensato.

Movimento combinato o movimento in movimento?

Ora inizia la seconda ondata di parte importante. Prova solo ad andare avanti. In precedenza, abbiamo usato una metafora di barca e persone. Hai mai pensato a cosa succede se facciamo muovere sia le persone che la barca, che tipo di sensazione avranno le persone sulla spiaggia?

Come combinare il movimento orizzontale con il movimento rotatorio del sistema di coordinate. Il punto qui è in realtà muoversi solo in una direzione.

[cceN_cpp theme="alba"] int x, y; angolo di flottazione; void setup(){ size(300, 300); sfondo (234, 113, 107); noStroke(); x = 0; //Quando il valore iniziale di x è 0, possiamo trascurare questa frase di codice. Quando si dichiara una variabile, il valore predefinito è 0. y = 0; //Idem come sopra. angolo = 0; //Idem come sopra. } void draw(){ angolo += 0.25; y--; translate(larghezza/2, altezza/2); pushMatrix(); ruotare (angolo); ellisse(x, y, 5, 5); popMatrix(); } [/cceN_cpp]

E ci sono il movimento circolare e il ridimensionamento del sistema di coordinate.

[cceN_cpp theme="alba"] float x, y, angolo; void setup(){ size(300, 300); sfondo (234, 113, 107); noStroke(); } void draw(){ angolo += 0.01; x = sin(angolo) * 100; y = cos(angolo) * 100; translate(larghezza / 2, altezza / 2); pushMatrix(); scala(1 + 0,1 * sin(angolo*10)); ellisse(x, y, 5, 5); popMatrix(); } [/cceN_cpp]

Non lasciarti ingannare! Il punto del cerchio sta effettivamente facendo un movimento circolare. Non è difficile capire se lo paragoniamo al ridimensionamento con una videocamera. Una videocamera in costante movimento davanti o dietro sta riprendendo un punto in movimento circolare.

Sorpreso? Queste sono semplici funzioni di base. Ma con una combinazione diversa, possiamo creare tanti effetti diversi. Fino ad ora, la mia esposizione si ferma in modo da risparmiare un po' di spazio per la tua esplorazione.

Passaggio 6: utilizzo completo

Sta per finire per questo capitolo. Negli ultimi due capitoli ho introdotto il metodo di base del movimento grafico. Credo che potresti avere una comprensione più profonda per questo, rispetto alle tue idee iniziali. Ultimo in meno, ecco alcuni esempi completi per riferimento.

[cceN_cpp tema="alba"] float x1, y1, x2, y2, r, R; float angolo1, angolo2; void setup(){ size(300, 300); r = 12; R = 120; angolo1 = 0; angolo2 = PI/4; } void draw(){ background(234, 113, 107); noStroke(); translate(larghezza / 2, altezza / 2); angolo1 += 0,02; angolo2 += 0,06; x1 = R *sin(angolo1); y1 = R* cos(angolo1); x2 = R/2 *sen(angolo2); y2 = R/2 *cos(angolo2); ellisse(x1, y1, r/2, r/2); ellisse(x2, y2, r, r); ellisse(-x1, -y1, r/2, r/2); ellisse(-x2, -y2, r, r); ellisse(x1, -y1, r/2, r/2); ellisse(x2, -y2, r, r); ellisse(-x1, y1, r/2, r/2); ellisse(-x2, y2, r, r); corsa(255); corsaPeso(3); riga(x1, y1, x2, y2); riga(-x1, -y1, -x2, -y2); riga(x1, -y1, x2, -y2); riga(-x1, y1, -x2, y2); } [/cceN_cpp]

Questo esempio non contiene alcuna conoscenza oltre al nostro precedente capitolo introdotto.

Per quali punti corrisponde? Quali linee corrispondono? Non riesco a capirlo anch'io. Ma ricordo che deriva da una piccola sezione di codice.

Questa è la natura del suo movimento. Le linee di riposo sono solo effetto specchio. Se continui a seguire questa guida, puoi fare una versione aggiornata e aggiungere un controller alla tua grafica in modo da cambiare lo stato del tuo movimento grafico in tempo reale.

Il punto interessante della programmazione risiede nel fatto che è possibile progettare o combinare regolamenti. Tuttavia, quale sarà il programma finale dipende tutto dalle tue capacità. Di solito i designer hanno una potente immaginazione grafica. Puoi disegnare un'immagine nella tua testa e poi provare a tradurla in codice. Inoltre, puoi partire dal codice e dai regolamenti stessi, progettare funzioni e variabili a piacimento. Ricorda che l'elaborazione è il tuo schizzo e il codice sono i tuoi pennelli! Basta spruzzare le tue idee liberamente!

Passaggio 7: FINE

Ultimo nel nostro capitolo, torniamo a una domanda che abbiamo conservato per molto tempo dall'inizio. Qual è l'utilità di spendere così tanto sforzo per fare una foto con il programma? Dopo aver appreso questo capitolo, scoprirai che ci sono così tanti metodi di gioco che aspettano di essere esplorati.

[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; facciaD = 300; corsaPeso(8); ellisse (175, 220, orecchio, orecchio); ellisse(larghezza - 175, 220, orecchio, orecchio); rect(100, 100, facciaD, facciaD); riga(browX, 160, 220, 240); linea (larghezza-browX, 160, larghezza-220, 240); fill(casuale(255), casuale(255), casuale(255)); ellisse(175, 220, occhioD, occhioD); ellisse (larghezza-175, 220, occhioD, occhioD); riempimento(255); punto(larghezza/2, altezza/2); triangolo(170 - cos(frameCount / 10.0)* 20, 300 - sin(frameCount / 10.0) *20, larghezza - (170 + cos(frameCount / 10.0) *20), 300 + sin(frameCount / 10.0) * 20, 250, 350); } [/cceN_cpp]

Non è magico per la grafica dinamica? Qui non ti mostro troppi casi. Potresti essere in grado di creare un effetto molto migliore del mio. Il vantaggio di disegnare con il programma esiste, puoi giocare con ogni pixel. Poiché la tua grafica non è bitmap, ogni punto chiave della tua grafica è controllabile. Può realizzare alcuni effetti che altri software non possono realizzare.

Se hai un cuore che vuole rompere tutto e unirlo di nuovo, il programma di studio ti aiuterà molto a realizzare questa idea.

Questo articolo viene dal designer Wenzy.

Passaggio 8: letture relative:

Interessante guida alla programmazione per il progettista: elaborazione del tocco iniziale

Interessante guida alla programmazione per il designer: crea il tuo primo programma di elaborazione

Interessante guida alla programmazione per i designer: fai funzionare la tua immagine (parte prima)

In caso di domande, è possibile inviare un'e-mail a [email protected].

Questo articolo proviene da: