Share
L'elaborazione è una delle più potenti librerie disponibili oggi per la creazione di opere grafiche algoritmiche, sia 2D che 3D. È open source, basato su Java, ed è dotato di una grande varietà di funzioni orientate a rendere il disegno e la pittura con il codice sia divertente che facile.
Utilizzando la libreria principale di Processing nelle tue app Android, puoi creare grafica e animazioni ad alte prestazioni senza dover gestire le API OpenGL o Canvas di Android. Di solito, non dovrai nemmeno occuparti di attività di basso livello come la gestione dei thread, la creazione di loop di rendering o il mantenimento dei frame rate.
In questo tutorial, ti mostrerò come aggiungere Processing a un'app per Android e presentarti alcune delle sue funzioni più utili.
L'elaborazione viene fornita con un proprio ambiente di sviluppo integrato, che può essere utilizzato per creare app Android. Tuttavia, se sei già uno sviluppatore di app per Android, sono sicuro che preferiresti utilizzare Android Studio. Quindi vai avanti e scarica l'ultima versione della modalità Android di Processing.
All'interno del file ZIP scaricato, troverai un file chiamato processing-core.zip. Estrailo e rinominalo elaborazione-core.jar utilizzando la riga di comando o il file explorer del sistema operativo.
Infine, aggiungi il file JAR come una delle dipendenze del tuo progetto Android Studio posizionandolo all'interno del file App modulo di libs cartella.
Ora hai tutto il necessario per iniziare a utilizzare Elaborazione.
Quasi tutte le funzionalità principali di Processing sono disponibili tramite PApplet classe, che serve essenzialmente come una tela su cui puoi disegnare. Estendendolo, si ottiene un facile accesso a tutti i metodi che ha da offrire.
val myCanvas = object: PApplet () // Altro codice qui
Per configurare il canvas, devi sovrascriverlo impostazioni() metodo. All'interno del metodo, puoi specificare due importanti dettagli di configurazione: le dimensioni desiderate del canvas e se utilizzare il motore di rendering 2D o 3D. Per ora, facciamo una tela grande quanto lo schermo del dispositivo e usiamo il motore di rendering 2D predefinito. Per fare ciò, puoi chiamare il a schermo intero() metodo di scelta rapida.
override fun settings () fullScreen ()
Il impostazioni() metodo è un metodo speciale che è necessario solo quando non si utilizza l'IDE di Processing. Ti suggerisco di non aggiungere altro codice ad esso.
Se si desidera inizializzare qualsiasi variabile o modificare qualsiasi parametro relativo al disegno, ad esempio il colore di sfondo della tela o il numero di fotogrammi che deve essere visualizzato al secondo, è necessario utilizzare il impostare() metodo invece. Ad esempio, il codice seguente mostra come utilizzare il sfondo() metodo per cambiare il colore di sfondo della tela in rosso:
Accentsconagua
override fun setup () background (Color.parseColor ("# FF8A80")) // Materiale Rosso A100Poiché la tela non fa ancora parte di alcuna attività, non potrai vederla quando esegui la tua app. Per visualizzare la tela, devi prima crearne uno nel file XML di layout della tua attività. UN LinearLayout widget o a FrameLayout il widget può essere il contenitore.
UN PApplet l'istanza non può essere aggiunta direttamente al contenitore che hai creato. Devi posizionarlo dentro a PFragment prima istanza e poi chiama il ImpostaVisualizzazione () metodo del PFragment istanza per associarlo al contenitore. Il seguente codice mostra come farlo:
// Posiziona canvas all'interno del frammento val myFragment = PFragment (myCanvas) // Visualizza il frammento myFragment.setView (canvas_container, this)
A questo punto, se esegui l'app, dovresti riuscire a vedere una tela bianca che copre l'intero schermo del tuo dispositivo.
Ora che sei in grado di vedere la tela, iniziamo a disegnare. Per disegnare all'interno della tela, devi ignorare il disegnare() metodo del PApplet sottoclasse creata in precedenza.
override fun draw () // Altro codice qui
Potrebbe non sembrare ovvio immediatamente, ma l'elaborazione, per impostazione predefinita, tenta di chiamare il disegnare() metodo fino a 60 volte al secondo, purché venga visualizzata la tela. Ciò significa che puoi facilmente creare sia immagini statiche che animazioni.
L'elaborazione ha una varietà di metodi con nomi intuitivi che consentono di disegnare primitive geometriche come punti, linee, ellissi e rettangoli. Ad esempio, il rect () metodo disegna un rettangolo e il ellisse() metodo disegna un'ellisse. Sia il rect () e ellisse() i metodi si aspettano argomenti simili: le coordinate X e Y della forma, la sua larghezza e la sua altezza.
Il seguente codice mostra come disegnare un rettangolo e un'ellisse:
rect (100f, 100f, 500f, 300f) // L'angolo in alto a sinistra è a (100,100) ellisse (350f, 650f, 500f, 400f) // Il centro è a (350,650)
Molti dei metodi sono sovraccarichi, consentendo di modificare leggermente le forme di base. Ad esempio, passando un quinto parametro a rect () metodo, un raggio d'angolo, puoi disegnare un rettangolo arrotondato.
rect (100f, 900f, 500f, 300f, 100f) // Raggio dell'angolo di 100 pixel
Se esegui la tua app ora, dovresti vedere qualcosa di simile a questo:
Se si desidera modificare il colore del bordo delle forme, è possibile chiamare il ictus() metodo e passare il colore desiderato come argomento ad esso. Allo stesso modo, se vuoi riempire le forme con un colore specifico, puoi chiamare il riempire() metodo. Entrambi i metodi dovrebbero essere chiamati prima di disegnare effettivamente la forma.
Il seguente codice disegna un triangolo blu con un contorno verde:
triangolo tratto (Color.GREEN) fill (Color.BLUE) (100f, 1600f, 300f, 1300f, 500f, 1600f)
Se esegui la tua app ora, sarai in grado di vedere il triangolo blu, ma noterai anche che ogni altra forma è diventata blu.
Se il motivo non ti è già chiaro, ricorda che il disegnare() il metodo è chiamato ripetutamente. Ciò significa che qualsiasi parametro di configurazione modificato durante un ciclo di disegno avrà un effetto sui cicli di disegno successivi. Quindi, per assicurarti che tutte le tue forme siano disegnate con i colori giusti, è una buona idea specificare sempre il colore di ogni forma che disegni, appena prima di disegnarla.
Ad esempio, aggiungendo il seguente codice all'inizio del disegnare() metodo, è possibile rendere nuovamente bianche le altre forme.
// Imposta il riempimento e il tratto su bianco e nero // prima di disegnare il rettangolo e il tratto di ellissi (Color.BLACK) riempire (Colore.WHITE)
A questo punto, la tela sarà simile a questa:
Con Processing, la gestione degli eventi touch è estremamente semplice. Non hai bisogno di alcun gestore di eventi. Tutto ciò che devi fare è controllare se una variabile booleana ha nome mousePressed è vero sapere quando l'utente sta toccando lo schermo. Una volta verificato che l'utente sta toccando lo schermo, puoi utilizzare il pulsante mouseX e mouseY variabili per determinare le coordinate X e Y del tocco.
Ad esempio, il codice seguente disegna un nuovo rettangolo ovunque l'utente tocchi la tela.
// Controlla se l'utente sta toccando la tela se (mousePressato) // Specifica colore riempimento e tratto tratto (Colore.RED) riempimento (Colore.YELLOW) // Disegna rettangolo rect (mouseX.toFloat (), mouseY.toFloat () , 100f, 100f)
Se esegui l'app ora e trascini il dito sullo schermo, dovresti vedere molti rettangoli gialli disegnati.
Prima di andare avanti, ecco un suggerimento rapido: se in qualsiasi momento desideri cancellare la tela, puoi semplicemente chiamare il sfondo() metodo di nuovo.
background (Color.parseColor ("# FF8A80")) // Materiale Rosso A100C'è solo così lontano che puoi ottenere con semplici primitivi. Se sei interessato a creare opere d'arte complesse e complesse, probabilmente avrai bisogno di accedere ai singoli pixel della tela.
Chiamando il loadPixels () metodo, è possibile caricare i colori di tutti i pixel della tela in una matrice denominata pixel. Modificando il contenuto dell'array, puoi modificare molto efficacemente il contenuto della tela. Infine, una volta terminata la modifica della matrice, è necessario ricordare di chiamare il file updatePixels () metodo per rendere il nuovo set di pixel.
Si noti che il pixel array è un array intero unidimensionale la cui dimensione è uguale al prodotto della larghezza e dell'altezza del canvas. Poiché la tela è bidimensionale, la conversione delle coordinate X e Y di un pixel in un indice valido dell'array implica l'uso della seguente formula:
// index = xCoordinate + yCoordinate * widthOfCanvas
Il seguente codice di esempio, che imposta il colore di ciascun pixel del canvas in base alle sue coordinate X e Y, dovrebbe aiutarti a capire meglio come utilizzare il pixel array:
override fun draw () loadPixels () // Carica array // passa attraverso tutte le coordinate valide per (y in 0 ... height - 1) for (x in 0 ... width - 1) // Calcola indice val index = x + y * width // Aggiorna pixel all'indice con un nuovo pixel di colore [indice] = Color.rgb (x% 255, y% 255, (x * y)% 255) // Renderizza pixel con nuovi colori updatePixels ( )
Il Color.rgb () il metodo che vedi sopra converte i singoli valori rosso, verde e blu in un numero intero che rappresenta un singolo valore di colore compreso dal framework Processing. Sentiti libero di modificare gli argomenti che passi, ma assicurati che siano sempre compresi nell'intervallo tra 0 e 255.
Se scegli di eseguire il codice senza alcuna modifica, dovresti vedere un modello simile al seguente:
Ora sai come creare grafica 2D usando la lingua di elaborazione. Con le competenze che hai imparato oggi, non solo puoi rendere le tue app Android più accattivanti, ma anche creare giochi completi da zero. Sei limitato solo dalla tua creatività!
Per saperne di più sull'elaborazione, ti suggerisco di passare un po 'di tempo a sfogliare le pagine di riferimento ufficiali.
E mentre sei qui, dai uno sguardo ad alcuni dei nostri altri post sullo sviluppo di app per Android!
