Dnes bych chtěl vysvětlit, p5.js. Jsem také p5.JS začátečník takže se pokusme seznámit s p5.js společně!

p5.JS je napsán v JavaScriptu, ale původně je zpracován (https://processing.org/). Zpracování je vizuální kódovací nástroj pro výtvarné umění. Zajímavé je, že zpracování není jen pro vývojáře, ale také pro umělce, designéry, výzkumníky a ty, kteří si chtějí užít umění. p5.js se používá v JavaScriptu, takže jej můžeme použít s DOM.

následuje P5.oficiální stránky js.
https://p5js.org/

jak používat p5.js

Udělejme dnes jednoduchou věc. Naším cílem je znát malé tipy a udělat animaci.

Krok 1: Vytvořte jeden soubor HTML a vytvořte odkaz na p5.js a váš vlastní soubor JavaScript.

snadný způsob, jak získat odkaz, je jít na oficiální stránky a najít CDN. Kopírovat něco … / p5.min.js a vložte jej do HTML.

2. Krok: vytvořte kruh

creativeCanvas(šířku plátna, výšku plátna) funkce nastaví velikost plátna.

funkce pozadí() nastavuje barvu plátna, které vytvoříme. * Používám barevný parametr, ale můžete použít i jiné parametry. Podívejte se prosím na oficiální stránky (https://p5js.org/ reference / # / p5 / background).

funkce noStroke() znamená žádný obrys elipsy.

elipsa(x umístění elipsy, y umístění elipsy, šířka elipsy, výška elipsy) .funkce nakreslí elipsu.

nezapomeňte otevřít HTML ve Vašem prohlížeči!

Krok 3: Pojďme, aby vaše elipsa pohybu!

nakreslete () funkční smyčky navždy. Jediné, co musíte udělat, je vytvořit sady y-umístění 0 a poté je zvýšit. Pak dostanete animaci, že vaše elipsa se pohybuje od horní do dolní části plátna.

Krok 4: Dělat mnoho bodů, a přesunout je nekonečně

Pojďme udělat poslední krok.

random () funkce je náhodné plovoucí číslo. V mém kódu jsem nastavil “ random (width)“. To znamená, že se vrátí 0 až 500, což je maximální šířka plátna. Pokud je to jen náhodné (), nastaví se od 0 do 1. Pak už si možná všimnete … pokud je to náhodné (6, 10), vrátí se 6 až 10. Je to docela snadné pochopit, že?

Že je to dnes! Doufám, že můžete získat tip z mého příspěvku. Pokusím se udělat složitější věci a podělit se o své zkušenosti zde později.