Guida alla programmazione interessante per il designer: fai funzionare la tua immagine (parte prima): 16 passaggi

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

Correre! Correre! Correre!

La programmazione non è così difficile. Il punto chiave è trovare il tuo ritmo e farlo uno per uno.

Prima di leggere questo capitolo, spero che tu abbia già familiarità con il metodo di disegno delle funzioni di base, o ti vertigini e ti sentirai confuso da due grandi funzioni della testa: imposta e disegna.

Dal momento che vogliamo creare grafica animata, dobbiamo sapere come viene prodotta l'animazione.

L'immagine sopra sembra piuttosto attraente e rivela visivamente il principio di implementazione dell'animazione.

L'animazione è magica. È una magia sull'inganno visivo. Tuttavia, in questa informazione esplosa, nell'era del video flood, ci siamo già abituati. Poche persone saranno sorprese dal fatto che sia una cosa incredibile poter vedere l'animazione.

Lo stesso principio può essere applicato all'animazione del disegno con il programma. Dobbiamo considerare come disegnare una grafica diversa in ogni fotogramma e il programma girerà automaticamente le pagine mentre integriamo un'animazione completata nella nostra testa. Nel capitolo successivo parleremo di come realizzare il movimento grafico di base. Prima di ciò, dobbiamo conoscere alcune conoscenze di base sulle variabili.

Passaggio 1: variabile

Variabile è il contenitore per i dati. Può essere utilizzato ripetutamente all'interno di un programma.

Per esempio:

[cceN_cpp theme="alba"] dimensione (500, 500); ellisse(100, 250, 50, 50); ellisse(200, 250, 50, 50); ellisse(300, 250, 50, 50); ellisse(400, 250, 50, 50);

[/cceN_cpp]

Questa sezione di codice non ha utilizzato alcuna variabile. Disegna quattro cerchi sullo schermo. Possiamo scoprire che hanno la stessa larghezza e altezza. Ora che è lo stesso, per ridurre al minimo l'input di dati ripetuto, possiamo definire un segno per rappresentarlo. Questo segno è variabile.

Ecco il codice dopo aver aggiunto una variabile:

[cceN_cpp theme="alba"] dimensione (500, 500); int a = 50; ellisse(100, 250, a, a); ellisse(200, 250, a, a); ellisse(300, 250, a, a); ellisse(400, 250, a, a);

[/cceN_cpp]

Otteniamo lo stesso risultato!

Poiché abbiamo definito la variabile a, possiamo comodamente modificare i parametri. Se cambiamo a=50 in a=100, tutta la larghezza e l'altezza dei cerchi diventeranno 100 uniformemente. Quindi non dobbiamo modificare i parametri uno per uno. La variabile è davvero una buona invenzione.

Passaggio 2: la creazione della variabile

Prima di usare la variabile, dobbiamo fare una dichiarazione e designare il suo tipo di dati.

int io;

io 50;

La prima frase di codice ha fatto un'istruzione per una variabile i. int è un simbolo utilizzato principalmente per dichiarare una variabile. Al momento della dichiarazione, risparmierà una stanza nella memoria del computer, che equivale a generare una "scatola", utilizzata appositamente per ripristinare i dati interi. La seconda frase indica che l'assegnazione 50 deve essere implementata dalla variabile i. Dopo l'implementazione di questa frase, i dati verranno archiviati nella variabile i in modo stabile. Oppure puoi essere più pigro per combinare le due frasi precedenti in un'unica e completare l'assegnazione mentre fai una dichiarazione.

int i ＝ 50;

È relativamente libero nominare una variabile. Ma a volte dobbiamo prestare attenzione a qualcosa.

Passaggio 3: denominazione della regolazione della variabile

• Deve essere la combinazione di alfabeto e sottolineato. Può essere un simbolo o una parola.

• Che tiene conto del maiuscolo o minuscolo. Nome e nome possono rappresentare variabili diverse.

• Cerca di nominarlo nel modo più semplice possibile per consentirti di capire a prima vista. Il carattere iniziale deve essere un alfabeto anziché un numero o un carattere speciale.

• Nessuna parola chiave come int, float

Le seguenti sono alcune affermazioni errate.

int $a;

int 89b;

Ecco le affermazioni corrette:

int r;

int super_24;

int openTheDoor;

Passaggio 4: tipo variabile

Ad eccezione della dichiarazione di dati interi, possiamo dichiarare dati decimali (chiamati anche dati in virgola mobile) con la parola chiave float.

galleggiante b = 0,5

Dobbiamo tenere a mente che tipo di dati abbiamo usato per la nostra dichiarazione. Se abbiamo usato la parola chiave int, quest'ultima assegnazione non può scrivere i＝0.5 o qualcosa del genere, o il programma diventerà un errore. Ma se scriviamo al contrario, va bene. Ad esempio, float i=5 è la grammatica corretta ma il programma lo riconoscerà come numero decimale.

Alcune delle variabili sono già state definite dal sistema. Non dobbiamo dichiararli da soli. Proprio come la "larghezza, altezza" precedentemente indicata, acquisirà automaticamente la larghezza e l'altezza dello schermo del computer. Una frequenza d'uso così alta che il progettista la definisce direttamente come una variabile predefinita per renderla più comoda da usare.

Passaggio 5: Operatore

Sono operatori del trattamento:

+ più

- meno

* moltiplicare

dividere

％ Modulo del resto

Devi avere familiarità con tutti questi operatori tranne %. Sembra abbastanza strano perché il suo risultato è il resto. 9%3 è 0. Mentre 9%5 è 4.

Gli operatori possono essere utilizzati tra assegnazioni e variabili.

[cceN_cpp theme="alba"] int a = 1; //dichiara la variabile intera a, l'assegnazione è 1. int b = 2; //Dichiara la variabile intera b, l'assegnazione è 2. int c; //Dichiara variabile intera c. c = a + b; //Più due assegnazioni e assegna il suo risultato a c. stampa(c); //Variabile di uscita c.

[/cceN_cpp]

Passaggio 6: risultato dell'operazione:

Il risultato dell'output non verrà visualizzato nella finestra ma nella console in basso.

Il metodo di scrittura della quarta riga sembra piuttosto strano. Ma è un formato comune utilizzato frequentemente durante l'assegnazione del computer. Il lato sinistro del simbolo uguale dovrebbe essere l'ultima variabile assegnata, mentre il lato destro dovrebbe essere il processo operativo.

La funzione di stampa nella quinta riga può stampare le variabili nella console, che viene spesso utilizzata per testare le condizioni dell'output dei dati.

Passaggio 7: regolamento operativo

Un punto problematico in Processing è che dobbiamo chiarire il tipo di variabile. Dobbiamo prestare particolare attenzione al processo del numero in virgola mobile e del tipo intero.

stampa（6 / 5）; //risultato 1

L'operazione tra numeri interi avrà un nuovo numero intero. 6 diviso 5 fa 1.2. Ma il risultato dell'output del programma è 1. Ciò è contrario alla nostra intuizione. Il programma non si occuperà dell'arrotondamento ma eliminerà il numero dietro la virgola.

stampa (6.0 / 5.0); //risultato 1.2

L'operazione tra virgola mobile risulterà in un nuovo numero in virgola mobile. Se il risultato effettivo è 1.2, il risultato dell'output del programma sarà lo stesso.

stampa (6/5.0); //risultato 1.2

stampa (6.0 / 5); //risultato 1.2

Infine è la combinazione di numero intero e numero in virgola mobile. Il risultato finale dell'output sarà 1.2.

• In realtà, è necessario tenere presente che l'obiettivo di questo progetto di regolamento è di non perdere l'accuratezza dei dati. Quindi, se un elemento è un numero in virgola mobile, anche il risultato sarà un numero in virgola mobile.

Passaggio 8: funzione di impostazione e funzione di disegno

In precedenza abbiamo parlato di una pila di conoscenze di base. Ora, finalmente veniamo a suonare qualcosa di interessante. L'impostazione della funzione e il disegno sono equivalenti alle principali funzioni di elaborazione. Queste due funzioni sono molto speciali. Può controllare la procedura del programma. Un programma relativamente complicato includerà queste due funzioni perché sono la struttura di base per il programma. Formato:

void setup(){

}

disegno vuoto(){

}

L'uso speciale rende il loro formato di richiamo diverso dalle altre funzioni. Dobbiamo aggiungere "void" prima del nome della funzione, che sta per nessun "valore restituito". Dietro il nome della funzione, dobbiamo aggiungere parentesi e parentesi graffe.

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

Diamo un'occhiata a un esempio:

Quando si preme il pulsante di funzionamento, la console prima emetterà "1" e quindi emetterà costantemente "2" finché non si preme il pulsante di arresto o si chiude la finestra.

Il codice tra parentesi nella funzione di configurazione verrà implementato solo una volta. Mentre il codice all'interno della funzione di disegno verrà costantemente eseguito in circolazione (implementazione predefinita 60 volte al secondo).

A causa di questo carattere, l'impostazione viene solitamente utilizzata per le proprietà dell'ambiente inizializzate, come la larghezza e l'altezza dello schermo, il colore di sfondo e l'assegnazione di tutti i tipi di variabili. Mentre spesso inseriamo le funzioni di disegno nella funzione di disegno per generare grafica continuamente cambiata.

Passaggio 9: cerchio in movimento orizzontale

Con la funzione draw, possiamo iniziare a creare le nostre animazioni. Il metodo di scrittura dell'effetto di animazione di Processing è piuttosto "scomodo". Non ha alcun comando esistito. Ad esempio, designa una certa forma da fare curvilineo.

Dobbiamo definire questi dettagli da soli. Devi dire al programma che tipo di grafica ha sicuramente bisogno ogni fotogramma.

Scrivici il seguente codice (ora iniziamo a farlo a mano):

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

[/cceN_cpp]

Questa sezione di codice mostra un cerchio in movimento. La precedente variabile dichiarata x, y viene utilizzata per memorizzare la posizione della coordinata. Le sue assegnazioni vengono eseguite nell'impostazione della funzione. Il codice chiave è il seguente all'interno della funzione draw:

x = x + 1

Non vederlo come un'equazione matematica, o sarà molto strano. Qui, "＝" è un simbolo per l'assegnazione. Rappresenta inserire i numeri giusti nella variabile sinistra. Supponiamo che x sia 50, una volta eseguito il codice, il lato destro di "＝" è uguale a 50+1, ovvero 51. Il risultato finale verrà assegnato alla variabile x. Quindi il valore di x diventa 51.

Seguite la procedura del programma, ogni volta che la funzione draw si attiva per una volta, il valore di x aumenterà di 1. Quindi ogni volta che disegniamo, il cerchio si sposterà di una direzione di pixel orizzontalmente a destra, rispetto al frame precedente. Pertanto, la grafica diventa immobile.

• Per fare in modo che il codice ottenga una migliore leggibilità, dobbiamo risparmiare una certa stanza prima di ogni riga di codice tra parentesi graffe. E deve essere il più allineato possibile. Premi TAB o diversi spazi vuoti, può ritrarsi.

• Il simbolo dello spazio vuoto e dell'interruzione di riga nel programma non influenzerà il programma. Quindi va bene se ne digitiamo uno in più o in meno.

Ecco un altro modo più semplice per esprimerlo. Per fare in modo che il cerchio variabile aumenti automaticamente di 1, dobbiamo scriverlo nel seguente formato.

cerchio ＝ cerchio ＋1

Abbastanza scomodo! Se il nome della variabile è più lungo, dobbiamo digitare più parole. Quindi i nostri pigri predecessori hanno un'idea come questa.

cerchio

Non è molto semplice? Significa aumentare 1 automaticamente. Simile ad esso, c'è --, che significa diminuire 1 automaticamente.

Ma se speriamo che la quantità di aumento automatico sia un altro numero come 2, dobbiamo provare un'altra espressione.

cerchio += 2

Questo equivale a

cerchio = cerchio + 2

Allo stesso modo, c'è －＝, /=, *=.

Passaggio 10: direzione del movimento

La direzione in cui si sposta la grafica dipende da come cambi le coordinate. Se viene modificato in y＝y＋1, il cerchio si sposterà verso il basso. Se sia x che y aumentano di 1, il cerchio si sposterà verso il basso in basso a destra. Se lo scriviamo come segno meno, si muoverà nella direzione opposta.

[cceN_cpp theme="alba"] int x, y; //Può dichiarare più variabili contemporaneamente, usa la virgola per separare. void setup(){ size(300, 300); x = 0; y = 0; } void draw(){ background(234, 113, 107); noStroke(); ellisse(x, y, 50, 50); x++; y++; }

[/cceN_cpp]

Tasso di movimento

Ricordi i 60 fotogrammi al secondo predefiniti all'interno della funzione di disegno? In base a questa velocità, il cerchio in alto si sposterà di 60 pixel al secondo verso destra.

Se vogliamo cambiare la velocità di movimento grafico, ci sono due metodi: uno è aumentare il valore x ogni volta poiché verrà modificato.

x＝x＋10

Ha migliorato la velocità di 10 volte rispetto all'originale!

L'altro metodo consiste nel modificare la frequenza di aggiornamento della tela. frequenza dei fotogrammi()

Questa funzione può modificare la frequenza di trasmissione della tela. Scrivi frameRate (10) nella configurazione della funzione, cambierà i 60 fotogrammi al secondo originali in 10 fotogrammi al secondo. La velocità viene rallentata per 6 volte rispetto a prima.

Passaggio 11: sfondo trascurato

Tutti gli esempi precedenti scrivono lo sfondo nella funzione draw. Hai mai pensato di scriverlo nel setup della funzione? Avrà delle differenze? Ora aggiorniamo l'esempio del movimento orizzontale.

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

Che è successo? Forse non riesce a capire correttamente il motivo della produzione del problema. Elimina la funzione noStroke, aggiungi di nuovo il tratto e guarda il percorso di movimento del cerchio.

Oh, è perché il cerchio creato in precedenza non è stato eliminato! Poiché l'impostazione della funzione funziona solo una volta, se scriviamo lo sfondo sopra di essa, riempirà lo sfondo solo una volta e quest'ultima non avrà più effetto. Lo sfondo della funzione è come lo strumento del secchio di vernice. Una volta utilizzato, coprirà tutti i contenuti nella tela invece di impostare solo un colore di sfondo. Lo scriviamo prima della funzione draw in modo che il frame precedente venga coperto ogni volta che creiamo un nuovo pattern. Pertanto, il cerchio può funzionare come ci aspettavamo. Oltre a ricordare gli usi di ogni funzione, dobbiamo pensare alla posizione del codice. Molto tempo, il verso l'alto o verso il basso di una riga per il codea e scriverlo all'interno o all'esterno di una parentesi graffa, creerà effetti molto diversi. La direzione del codice è bidimensionale. Se appare un bug, dobbiamo calibrare in questa due dimensione.

• Questo metodo di disegno non ripetuto può creare effetti molto speciali se utilizzato correttamente. Puoi copiare il seguente codice e provare.

[cceN_cpp theme="dawn"] void setup(){ size(400, 400); } void draw(){ ellisse(larghezza/2-mouseX, altezza/2-mouseX, mouseY, mouseY); ellisse(larghezza/2-mouseX, altezza/2+mouseX, mouseY, mouseY); ellisse(larghezza/2+mouseX, altezza/2-mouseX, mouseY, mouseY); ellisse(larghezza/2+mouseX, altezza/2+mouseX, mouseY, mouseY); } [/cceN_cpp]

Qui abbiamo usato la variabile magica mouseX e mouseY. In seguito ne parleremo in dettaglio.

Passaggio 12: agitazione del cerchio

E se volessi rendere irregolare la direzione del movimento del cerchio? Con la funzione casuale intelligente, puoi realizzare anche questo effetto. Casuale è una funzione usata di frequente. Può essere utilizzato per generare una funzione casuale. È come uno spirito senza tracce. Una volta legati alle variabili, non puoi immaginare cosa ne sarà dopo.

Richiama formato:

casuale (alto)

High rappresenta il limite superiore casuale e il limite inferiore predefinito è 0. Ad esempio, random(10). Produrrà un numero da 0 a 10 in modo casuale (0 è incluso ma 10 non è incluso).

casuale (basso, alto)

Se impostiamo due parametri, tornerà al valore casuale tra di loro. Ad esempio, random(5, 10). Produrrà un numero da 5 a 10 in modo casuale (5 è incluso ma 10 non è incluso).

Esempio:

[cceN_cpp theme="alba"] float x;

x = casuale(50, 100);

stampa(x); [/cceN_cpp]

Ogni volta che eseguiamo il programma, la console restituirà valori diversi.

• Nota: i valori creati dalla funzione random appartengono al tipo a virgola mobile (tipo di numero decimale). Se vogliamo assegnare un valore alla variabile intera, dobbiamo trasformarla tramite la funzione int(). La trasformazione non rispetta l'arrotondamento ma cancella direttamente la parte decimale. Quindi l'output di int (random (5)), ha solo 5 possibilità: 0, 1, 2, 3, 4.

Dopo aver acquisito familiarità con l'uso della funzione random, possiamo entrare direttamente nel caso seguente.

[cceN_cpp theme="alba"] int x, y; void setup(){ size(300, 300); x = larghezza/2; y = altezza/2; } void draw(){ background(234, 113, 107); noStroke(); x += int(casuale(-5, 5)); y += int(casuale(-5, 5)); ellisse(x, y, 50, 50); }

[/cceN_cpp]

I precedenti valori delle coordinate aggiunti sono fissi. Solo se aumentiamo un valore casuale, il cerchio si sposterà in una direzione indefinita. Con l'intervallo casuale più grande, trema più frequentemente. Poiché la variazione di valore tra i fotogrammi viene rimbalzata, il movimento non sarà più uniforme. Mentre il primo frame è a (150, 150), il secondo frame si sposterà alla posizione di (170, 170) all'interno di uno sguardo.

Passaggio 13: Migrazione del circolo

Circolo migratorio

Creerà un movimento fluido? Il rumore della funzione può aiutarci. Ha un ritmo migliore del casuale standard. E i numeri casuali generati casualmente sono continuamente.

Richiama formato:

rumoret）

Il rumore della funzione non può definire il suo intervallo di uscita. Il programma lo definisce può generare solo numeri in virgola mobile da 0 a 1 e l'ingresso fisso può avere solo un'uscita fissa.

[cceN_cpp theme="dawn"] float x = noise(5); float y = rumore(5); stampa(x, y); [/cceN_cpp]

Poiché i parametri di input di cui sopra sono 5, quindi i risultati di output sono gli stessi. Quindi come modificare il risultato? La risposta è modificare dinamicamente i parametri di input. In realtà possiamo considerare il rumore come una traccia vocale illimitata, i parametri di input sono proprio come "il tempo presente". Se l'ingresso del parametro è continuo, anche l'uscita sarà continua.

[cceN_cpp theme="alba"] float x, y; void setup(){ size(700, 100); x = 0; sfondo(0); } disegno vuoto(){ x += 1; y = noise(frameCount/100.0)*100; noStroke(); ellisse(x, y, 2, 2); }

[/cceN_cpp]

In questo caso, tracciamo il percorso di variazione di Y in modo da poter comprendere meglio il rumore della funzione.

• Tra questi, la variabile frameCount otterrà il frame attuale. A differenza della larghezza, altezza della precedente, è stabile senza alcuna variazione. Inoltre, inizia ad aumentare da 0. Se lo intendiamo dal nostro grafico animato di visualizzazione iniziale, mostra la pagina a cui siamo passati (piuttosto che la concezione del tempo nel programma).

• frameCount è una variabile intera. Diviso per un'altra variabile intera, il programma elaborerà per impostazione predefinita il risultato come un numero intero. Per migliorare l'accuratezza del risultato, dobbiamo cambiare da 100 a 100.0. Diviso per un numero in virgola mobile, otterremo anche un numero in virgola mobile.

• Per cambiare l'asse Y da 0 a 100, dobbiamo moltiplicare il risultato del rumore per 100. In questo modo possiamo controllare l'intervallo di valori casuali.

Alcuni di voi bravi a pensare potrebbero chiedersi "perché dobbiamo dividere frameCountper 100? Non va bene scrivere frameCount direttamente?" Certo che puoi! Ma qui, per visualizzare meglio le caratteristiche del rumore della funzione, rallentiamo la "velocità di trasmissione". L'esempio seguente mostra le variazioni del valore di uscita con un diverso tasso di variazione.

[cceN_cpp tema="alba"] float x, y1, y2, y3, y4, y5; void setup(){ size(700, 500); x = 0; sfondo(0); } disegno vuoto(){ 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(); ellisse(x, y1, 2, 2); ellisse(x, y2+100, 2, 2); ellisse(x, y3+200, 2, 2); ellisse(x, y4+300, 2, 2); ellisse(x, y5+400, 2, 2); corsa(80); riga(0, 100, larghezza, 100); riga(0, 200, larghezza, 200); riga(0, 300, larghezza, 300); riga(0, 400, larghezza, 400); }

[/cceN_cpp]

È possibile considerare i parametri che cambiano all'interno della funzione rumore come una barra di avanzamento. Modificare il parametro è come spostare la barra di avanzamento. Quindi, quando l'ambito del cambiamento di questa "traccia vocale" è più grande, le caratteristiche continue davanti e dietro del valore di uscita saranno più deboli. (Possiamo immaginare cosa accadrà se trasmettiamo un brano musicale o un video con 2 volte la velocità, 5 volte la velocità, 20 volte la velocità). Quando l'ambito è maggiore di un certo valore, non c'è una grande differenza nel funzionare in modo casuale alla generazione del valore.

Se riesci a capire tutti gli esempi sopra, sentirai che niente può essere più facile per disegnare un cerchio in migrazione. Puoi capire anche i principi interni.

[cceN_cpp theme="alba"] float x, y; void setup(){ size(300, 300); x = 0; } void draw(){ background(234, 113, 107); x = rumore (frameCount/100.0 + 100)*300; y = noise(frameCount/100.0)*300; noStroke(); ellisse(x, y, 50, 50); }

[/cceN_cpp]

Ora, il movimento è più interessante proprio come un giroscopio rotante.

• Il motivo per cui la variabile x all'interno della funzione rumore deve essere più 100 è perché per separarli per una distanza. Se i parametri di xy all'interno del rumore della funzione sono gli stessi o abbastanza vicini, il cambiamento delle coordinate x, y sarà vicino allo stesso. Questo per rendere il movimento molto più casuale.

Passaggio 14: cerchio spostato dal mouse

Successivamente, arriviamo finalmente alle due variabili che mi piacciono di più: mouseX e mouseY. Alla prima vista delle due concezioni, i miei occhi brillano di luce. Perché è il modo più diretto per interagire con la grafica. Possiamo creare molti programmi interessanti con esso.

Il caso è abbastanza semplice:

[cceN_cpp theme="alba"] int x, y; void setup(){ size(300, 300); x = 0; y = 0; } void draw(){ background(234, 113, 107); noStroke(); x = mouseX; y = mouseY; ellisse(x, y, 50, 50); }

[/cceN_cpp]

mouseX può acquisire la coordinata x del mouse, mentre mouseY può ottenere la coordinata y.

• Proviamo a cambiare simbolo positivo e negativo, oppure scambiamo mouseX e mouseY.

Passaggio 15: Fine

Da questi comandi familiari, potresti essere in grado di condurre il movimento della grafica. Con il contenuto dell'ultimo capitolo, usa correttamente la tua immaginazione, puoi creare molti effetti animati interessanti.

Nel nostro prossimo capitolo, possiamo vedere esempi più abbondanti. Allo stesso tempo, utilizzeremo le funzioni matematiche e le combineremo con il movimento grafico.

Questo articolo viene dal designer Wenzy.

Passaggio 16: letture relative:

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

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

Questo articolo è tratto da:

Se hai bisogno di aiuto, puoi contattare: [email protected].