co to jest p5.js i jak z niego korzystać?
dzisiaj chcę wyjaśnić p5.js. Jestem również p5.js beginner więc spróbujmy być zaznajomieni z p5.js razem!
p5.js jest napisany w JavaScript, ale początkowo jest przetwarzany (https://processing.org/). Processing to narzędzie do kodowania wizualnego Dla sztuk wizualnych. Interesujące jest to, że przetwarzanie jest nie tylko dla programistów, ale także artystów, projektantów, badaczy i tych, którzy chcą cieszyć się tworzeniem sztuki. p5.js jest używany w JavaScript, więc możemy go używać z DOM.
Poniżej znajduje się P5.Oficjalna strona js.
https://p5js.org/
Jak korzystać z p5.js
zróbmy dziś coś prostego. Naszym celem jest poznanie drobnych wskazówek i stworzenie animacji.
Krok 1: Utwórz jeden plik HTML i Utwórz link do p5.js i własny plik JavaScript.
łatwym sposobem na uzyskanie linku jest przejście na oficjalną stronę i znalezienie CDN. Skopiuj coś … / p5./ min.js i wklej go do swojego HTML.
Krok 2: Utwórz okrąg
funkcja creativeCanvas(szerokość płótna, wysokość płótna) ustawia rozmiar płótna.
funkcja background() ustawia kolor płótna, które tworzymy. * Używam parametru kolor, ale możesz użyć innych parametrów. Proszę zapoznać się z oficjalną stroną (https://p5js.org/reference/#/p5/background).
funkcja noStroke() oznacza brak zarysu elipsy.
elipsa(x położenie elipsy, y położenie elipsy, szerokość elipsy, wysokość elipsy) .funkcja rysuje elipsę.
nie zapomnij otworzyć swojego HTML w przeglądarce!
Krok 3: przesuń swoją elipsę!
pętle funkcji draw() na zawsze. Tak więc, jedyną rzeczą, którą musisz zrobić, to ustawić y-położenie 0, a następnie zwiększyć je. Następnie otrzymujesz animację, w której elipsa przesuwa się od góry do dołu obszaru roboczego.
Krok 4: Zrób wiele kropek i poruszaj je w nieskończoność
zróbmy ostatni krok tutaj.
funkcja random() tworzy losową liczbę zmiennoprzecinkową. W moim kodzie ustawiłem ” random (width)”. Oznacza to, że zwracają od 0 do 500, czyli maksymalną szerokość płótna. Jeśli jest po prostu random(), ustawia od 0 do 1. Następnie możesz już zauważyć … jeśli jest losowy(6, 10), zwróci 6 do 10. Łatwo to zrozumieć, prawda?
to już dziś! Mam nadzieję, że dostaniesz cynk z mojego posta. Postaram się robić bardziej skomplikowane rzeczy i podzielić się moim doświadczeniem tutaj ponownie później.