vandaag wil ik P5 uitleggen.js. Ik ben ook een p5.js beginner dus laten we proberen vertrouwd te zijn met p5.js samen!

p5.js is geschreven in JavaScript, maar oorspronkelijk wordt het verwerkt (https://processing.org/). Processing is een visuele codering tool voor beeldende kunst. Het interessante is dat verwerking is niet alleen voor ontwikkelaars, maar ook kunstenaars, ontwerpers, onderzoekers en degenen die willen genieten van het maken van kunst. p5.js wordt gebruikt in JavaScript, zodat we het kunnen gebruiken met DOM.

het volgende is de p5.js officiële site.
https://p5js.org/

Hoe wordt p5 gebruikt.js

laten we vandaag een eenvoudig materiaal maken. Ons doel is om kleine tips te kennen en een animatie te maken.

Stap 1: Maak een HTML-bestand en maak een link naar p5.js en uw eigen JavaScript-bestand.

De eenvoudige manier om een link te krijgen is om naar de officiële site te gaan en CDN te vinden. Kopieer iets … / p5.min.JS en plak het in uw HTML.

Stap 2: Maak een cirkel

creativeCanvas(breedte van het canvas, hoogte van het canvas) functie stelt de canvasgrootte in.

background() functie stelt een kleur in van het doek dat we maken. * Ik gebruik kleurparameter, maar u kunt andere parameters gebruiken. Zie de officiële site (https://p5js.org/reference / # / P5 / background).

nostroke() functie betekent geen omtrek van de ellips.

ellips (x locatie van de ellips, y locatie van de ellips, de breedte van de ellips, de hoogte van de ellips) .functie tekent de ellips.

vergeet niet uw HTML in uw browser te openen!

Stap 3: maak uw ellips verplaatsen!

draw () functielussen voor altijd. Dus, het enige wat je hoeft te doen is om y-locatie sets 0 en dan verhogen. Dan krijg je een animatie dat je ellips van de bovenkant naar de onderkant van je canvas beweegt.

Step4: maak veel punten en verplaats ze oneindig

laten we de laatste stap hier doen.

random () functie maakt een willekeurig zwevend getal. In mijn code stel ik “random(width)”in. Dit betekent dat ze 0 tot 500 zouden teruggeven, dat is de maximale breedte van het doek. Als het gewoon random () is, wordt het ingesteld van 0 tot 1. Dan, je zou al merken … als het willekeurig is (6, 10), zou het terug 6 tot 10. Het is vrij gemakkelijk te begrijpen, is het niet?

Dat is het vandaag! Ik hoop dat je een tip van mijn post kunt krijgen. Ik zal proberen om meer ingewikkelde dingen te doen en deel mijn ervaring hier later weer.