Przeglądaj kreatywny kod z p5.js

Sep 15, 2025

Jak

Spędzać dzień Brendan Dawes. w Generować Londyn i odkryj, jak. Dane są Dawesome. . W tym tygodniu warsztat wyjaśni, jak podjąć dane, które otaczają nas każdego dnia i przekształcić ją w coś pięknego przy użyciu przetwarzania i p5.js. Rezerwuj teraz !

p5.js. jest biblioteką zaprojektowaną, aby przynieść moc Przetwarzanie do sieci. Ma na celu wprowadzenie artystów, projektantów i nauczycieli do świata programowania, a także oferuje wszechstronne narzędzia do przynoszenia devs i inżynierów w sztuce wizualnej.

Zanurzmy się i stwórzmy nasz pierwszy "szkic". Naszym celem jest zbudowanie narzędzia do rysowania, które przekształca prosty obraz w dziedzinę animowanych gwiazd. Po pierwsze, zdefiniujemy kilka zmiennych globalnych i napiszemy nasze Ustawiać() funkcjonować. P5 Ustawiać() Jest uruchomiony raz, gdy szkic jest załadowany, więc idealne miejsce do obsługi inicjalizacji.

Pobierz pliki potrzebne tutaj .

 Var Hintimage, SkyImage, Stars = [];
Konfiguracja funkcji () {...}

Wewnątrz naszego Ustawiać Funkcja, stworzymy płótno i ukryjemy kursor myszy, abyśmy mogli czerpać własne. Domyślnie P5 dodaje kontur wokół kształtów - chcemy wyłączyć uderzenia w tym przypadku.

 CreateCanvas (800.500);
NOCURSOR ();
Nostrok ();

The background image – this night sky scene provides the setting for our animation — Obraz tła - tej nocy scena nieba zapewnia ustawienie naszej animacji

Następnie załadujemy parę obrazów. Jeden będzie służyć jako tło - w tym przypadku, nocna scena nieba. Drugi będzie obraz "podpowiedzi" - czarno-biały projekt nasz końcowy projekt będzie oparty na. Pomysł jest umieszczenie większości gwiazd na czarnych pikselach w naszym obrazie podpowiedzi, aby odtworzyć projekt na naszej scenie tło. Łatwo byłoby stworzyć te obrazy z narzędziami tekstowymi i rysunkami P5, ale ze względu na zwięzłość użyjemy aktywa statycznych.

 Hintimage = Loadimage ("// bit.ly/hintimage");
SkyImage = LoadImage ("// bit.ly/skyImage") ;

The hint image, which dictates the positioning of our stars — Obraz podpowiedzi, który dyktuje pozycjonowanie naszych gwiazd

Funkcja Rysowania

To dla Ustawiać() ! Kolejna funkcja jest remis() . Nazywa się w ciągłej pętli, która jest pomocna dla animacji i dodawania elementów w czasie.

 Wyciąg funkcji () {...}

W funkcji Rysunek naszym pierwszym zadaniem jest wypełnienie płótna naszego obrazu tła. P5 nie usuwa automatycznie płótna między remis() Połączenia, więc musimy zrobić to każdą ramkę lub skończyć z kilkoma dziwnymi efektami akumulacji. Aby umieścić załadowany obraz na płótnie, użyj wizerunek() Funkcja i daj współrzędne X i Y do pozycjonowania.

 Obraz (SkyImage, 0, 0);

Następnie weźmiemy bieżącą lokalizację myszy i przechowujemy go jako P5.Vector za pomocą CreateVector () . Ten obiekt zawiera poręczne funkcje, aby poradzić sobie z punktami w przestrzeni, ale jesteśmy głównie używając go jako kontenera.

 Var Position = Cerrevector (Mousex, Muey);

Korzystając z naszej nowo zapisanej pozycji myszy, możemy narysować nasz kursor. Ustawimy kolor rysunku napełnić() Przekazując wartości RGB i użyć elipsa() Aby narysować koło w miejscu myszy.

 Wypełnij (255, 192, 0);
Elipsa (pozycja.x, pozycja.y, 8, 8);

Chcemy tylko narysować nowe gwiazdy, gdy mysz jest naciśnięty, więc sprawdzimy p5 myszki przed kontynuowaniem. Jeśli mysz jest w dół, musimy obliczyć dobre miejsce na naszą kolejną gwiazdę, aby skończyć. Zrobimy to za pomocą niestandardowej funkcji fatpixel () , które zdefiniujemy później.

Discover the creative side of code with Brendan Dawes at Generate London — Odkryj kreatywną stronę kodu z Brendan Dawes w Generuate London

Po uzyskaniu celu, stworzymy nową instancję niestandardowego obiektu gwiazdkowego (więcej poniżej) i naciśnij go na końcu naszej tablicy. Jeśli skończymy z ponad 2000 gwiazdek, zaczniemy odrzucić najstarsze.

 Jeśli (myszki) {
var cel = fatpixel ();
var star = Nowa gwiazda (pozycja, cel);
Stars.Push (Star);
Jeśli (Stars.Length & GT; 2000) Stars.Shift ();
}

Wreszcie, pętlimy przez naszą szereg gwiazd i zadzwonić aktualizacja() i remis() na każdym z nich. Nurkujemy do tych metod później.

 Dla (Var I = 0; I & LT; Stars.Length; I ++) {
gwiazdy [i] .update ();
Gwiazdy [I] .Draw ();
}

Funkcje pomocnicze.

Teraz Ustawiać() i remis() są na miejscu pracujemy na funkcjach i obiektach pomocniczych. Po pierwsze, zdefiniujemy funkcję, która znajduje pozycję spoczynkową dla każdej nowej gwiazdy. Wszystko, co musimy zrobić, to sprawdzić losowe piksele w naszym obrazie podpowiedzi, używając otrzymać() aby sprawdzić, czy są czarne lub białe.

Właściwie musimy tylko spojrzeć na ich wartość czerwoną, ponieważ w obu przypadkach pasuje do wartości RGB. Jeśli znajdziemy nie-biały piksel, wrócimy, bo uderzyliśmy nasz projekt. Jeśli nie, po prostu wrócimy ostatnie sprawdzane piksel i będzie służył jako losowa gwiazda.

 Funkcja Findpixel () {
var x, y;
dla (Var I = 0; I & LT; 15; I ++) {
x = podłoga (losowa (hintimage.width));
y = podłoga (losowa (hintimage.height));

Jeśli (czerwony (hintimage.get (x, y)) i lt; 255);
}
Powrót CreatEvector (X, Y);
}

W końcu jest naszym niestandardowym obiektem gwiazd. Połóż proste, chcemy kontenera wielokrotnego użytku, który przechowuje informacje o każdej gwiazdce, a także zapewnia środki do aktualizacji i rysowania. JavaScript nie zapewnia sposobu tworzenia klas w tradycyjnym znaczeniu, ale możemy uzyskać ten sam wynik, definiując funkcję i rozszerzenie go dla naszych własnych potrzeb.

Każda gwiazda ma kilka właściwości (pozycja wyjściowa, ostatnia lokalizacja i losowo generowana średnica), którą zdefiniujemy w "funkcji konstruktora", który jest wywoływany dla każdej nowej gwiazdy utworzonej w naszej pętli remisowej.

 Star funkcji (pozycja, cel) {
ta.pozycja = pozycja;
to.target = cel;
to.diameter = losowo (1, 5);
}

Następnie dodamy aktualizacja() Metoda gwiazdy, która będzie używać P5.Vector lerp () Aby obliczyć nową lokalizację między aktualnymi i docelowymi pozycjami gwiazdami. W tym przypadku przenosimy cztery procent pozostałej odległości dla każdego remisu, co skutecznie daje nam efekt łatwościowy.

Gdybyśmy chcielibyśmy zdobyć fantazję, możemy również symulować trochę fizyki, ale na razie będziemy to proste.

 Star.Prototype.update = Funkcja () {
this.pozycja = p5.vector.lerp (
ta pozycja,
to.target,
0,04.
);
};

Rysowanie gwiazd

Wreszcie gwiazda remis() Metoda faktycznie rysuje gwiazdę na płótnie. Po raz kolejny używamy napełnić() i elipsa() , Chociaż tym razem dzwonisz napełnić() z wartością skali szarości i wartością alfa dla przezroczystości.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Każda ramka, interpolacja liniowa daje nam nowy punkt wzdłuż ścieżki między bieżącą pozycją gwiazdową a jego celem

Dać gwiazdy błyskawiczne, wartość alfa jest określana za pomocą P5 hałas() funkcjonować. Zwraca to wartość hałasu perlin dla określonych współrzędnych, co oznacza, że otrzymujesz płynną, płynną sekwencję liczb losowych. W trzecim parametrze przechodzimy wartość opartą na czas, a nie wartość przestrzenną, dzięki czemu hałas będzie ożywiony z czasem.

 Star.Prototype.draw = Funkcja () {
var alfa = hałas (
to.target.x,
to.target.y,
Millis () / 1000.0
);

wypełnić (255, alfa * 255);

elipsa(
to.position.x, this.position.y,
to.diameter, to.diameter.
);
};

To dla naszego pierwszego szkicu! Kliknij i przeciągnij, aby zobaczyć nowe gwiazdy pojawiać się i dostosować się do obrazu podpowiedzi.

Co dalej?

Stąd można dodać kilka elementów HTML do zmiennych sterujących za pomocą dodatku P5.dom lub nawet dodać dźwięk do wizualizacji P5.Sound. .

Musiliśmy tylko porysowaliśmy powierzchnię tego, co jest możliwe dzięki P5.js i z nowymi funkcjami po drodze, jest jeszcze więcej, aby się doczekać. Baw się dobrze!

Dowiedz się więcej o twórczej stronie kodowania Generować Londyn ! Brendan Dawes. nauczy Cię, jak używać przetwarzania i p5.js, aby włączyć dane do rzeczy piękna W jego warsztacie. ;On będzie również mówił o radości współpracy papier, plastik i piksele . Zarezerwuj teraz bilet !

Przeglądaj kreatywny kod z p5.js

Funkcja Rysowania

Funkcje pomocnicze.

Rysowanie gwiazd

Co dalej?

Jak - Najpopularniejsze artykuły

Przechowywanie w chmurze do zdjęć i obrazów: Jak wybrać najlepszą chmurę do swojej pracy

Jak używać obrazów referencyjnych: 13 podstawowych wskazówek dla artystów

Krita Tutorials: Dowiedz się podstaw oprogramowania artystycznego

Jak skanować osobę w mniej niż pięć minut

Obróć ilustracje 2D do sztuki 3D

Naucz się animować dla dzieci

Jak renderować fotorealistyczne niebo

Jak stworzyć piękny obraz krajobrazu akwarela

Kategorie