idag vill jag förklara p5.js. Jag är också en p5.JS nybörjare så låt oss försöka vara bekant med p5.js tillsammans!

p5.js är skrivet i JavaScript men ursprungligen bearbetas det (https://processing.org/). Bearbetning är ett visuellt kodningsverktyg för bildkonst. Det intressanta är att bearbetning inte bara är för utvecklare utan också konstnärer, designers, forskare och de som vill njuta av att göra konst. p5.js används i JavaScript så att vi kan använda den med DOM.

Följande är p5.js officiella webbplats.
https://p5js.org/

hur man använder p5.js

Låt oss göra en enkel sak idag. Vårt mål är att känna till små tips och göra en animering.

Steg 1: Skapa en HTML-fil och skapa en länk till p5.js och din egen JavaScript-fil.

det enkla sättet att få en länk är att gå till officiell webbplats och hitta CDN. Kopiera något … / p5.minuts.js och klistra in den i din HTML.

steg 2: Gör en cirkel

creativeCanvas(bredd på duken, höjd på duken) funktionen ställer in dukstorleken.

background () – funktionen ställer in en färg på duken vi gör. * Jag använder färgparameter men du kan använda andra parametrar. Se den officiella webbplatsen (https://p5js.org/referens/#/p5/bakgrund).

noStroke () funktion betyder ingen kontur av ellipsen.

ellips (X plats för ellipsen, y plats för ellipsen, ellipsens bredd, ellipsens höjd) .funktionen drar ellipsen.

glöm inte att öppna din HTML i din webbläsare!

Step3: låt oss göra din ellips flytta!

rita () funktionsslingor för alltid. Således är det enda du behöver göra att göra y-platssatser 0 och sedan öka den. Sedan får du en animering som din ellips rör sig från toppen till botten av din duk.

Step4: gör många punkter och flytta dem oändligt

Låt oss göra det sista steget här.

random () Funktion gör ett slumpmässigt flytande tal. I min kod ställer jag in ”slumpmässig(bredd)”. Detta innebär att de skulle returnera 0 upp till 500 som är den maximala bredden på duken. Om det är bara slumpmässigt (), det skulle uppsättningar från 0 upp till 1. Då kanske du redan märker…om det är slumpmässigt (6, 10), skulle det returnera 6 upp till 10. Det är ganska lätt att förstå, eller hur?

det är det idag! Jag hoppas att du kan få ett tips från mitt inlägg. Jag kommer att försöka göra mer komplicerade saker och dela min erfarenhet här igen senare.