Che cosa è p5.js e come usarlo?
Oggi voglio spiegare p5.js. Sono anche un p5.js principiante quindi cerchiamo di avere familiarità con p5.js insieme!
p5.js è scritto in JavaScript ma in origine sta elaborando (https://processing.org/). Processing è uno strumento di codifica visiva per le arti visive. L’interessante è che l’elaborazione non è solo per gli sviluppatori, ma anche artisti, designer, ricercatori e coloro che vogliono godere di fare arti. p5.js è usato in JavaScript in modo che possiamo usarlo con DOM.
Il seguente è il p5.js sito ufficiale.
https://p5js.org/
Come usare p5.js
Facciamo una cosa semplice oggi. Il nostro obiettivo è quello di conoscere piccoli suggerimenti e fare un’animazione.
Passo 1: Crea un file HTML e crea un collegamento a p5.js e il tuo file JavaScript.
Il modo più semplice per ottenere un link è quello di andare al sito ufficiale e trovare CDN. Copia qualcosa … / p5.min.js e incollalo nel tuo HTML.
Passo 2: Fare un cerchio
creativeCanvas(larghezza della tela, altezza della tela) funzione imposta la dimensione della tela.
background () funzione imposta un colore della tela che facciamo. * Io uso il parametro colore ma puoi usare altri parametri. Si prega di fare riferimento al sito ufficiale (https://p5js.org/ riferimento/ # / p5 / sfondo).
noStroke() funzione significa nessun contorno dell’ellisse.
ellisse (posizione x dell’ellisse, posizione y dell’ellisse, larghezza dell’ellisse, altezza dell’ellisse) .funzione disegna l’ellisse.
Non dimenticare di aprire il tuo HTML nel tuo browser!
Fase 3: Lasciate che i vostri ellisse spostare!
draw() funzione loop per sempre. Quindi, l’unica cosa che devi fare è rendere la posizione y imposta 0 e quindi aumentarla. Quindi, si ottiene un’animazione che l’ellisse si sposta dall’alto verso il basso della tela.
Step4: Crea molti punti e spostali all’infinito
Facciamo qui il passo finale.
la funzione random() crea un numero mobile casuale. Nel mio codice, ho impostato ” random (width)”. Ciò significa che restituirebbero 0 fino a 500 che è la larghezza massima della tela. Se è solo casuale (), imposta da 0 a 1. Quindi, potresti già notare…Se è casuale (6, 10), restituirebbe 6 fino a 10. È abbastanza facile da capire, non è vero?
Che è oggi! Spero che tu possa ottenere un suggerimento dal mio post. Cercherò di fare cose più complicate e condividere la mia esperienza qui di nuovo più tardi.