Prozkoumejte kreativní kód s p5.js

Sep 16, 2025

jak

Strávit den s Brendan Dewes. v Generovat Londýn a zjistit, jak. Data jsou Dawesome. . V tomto celodenním workshopu bude vysvětlit, jak si vzít data, která nás každý den obklopuje a přeměnou ji na něco krásného pomocí zpracování a p5.js. Zarezervovat hned Dokázal se!

p5.js. je knihovna navržená tak, aby přinesla moc zpracovává se na web. Cílem je seznámit studenty s umělci, designérům a pedagogům světem programování a zároveň nabízet univerzální nástroje přinést devs a inženýry do výtvarného umění.

Pojďme se ponořit a vytvořit první 'skica'. Naším cílem je vybudování nástroje pro kreslení, který transformuje jednoduchý obraz do pole animovaných hvězd. Za prvé, budeme definovat několik globálních proměnných a napsat naše založit() funkce. p5 založit() je spuštěn jednou, když je náčrt načten, takže je to ideální místo pro řízení inicializace.

Stáhněte soubory, které potřebujete tady .

 var hintimage, skyimage, hvězdy = [];
Nastavení funkce () {...}

Uvnitř našeho založit Funkce, vytvoříme plátno a skrýt kurzor myši, abychom mohli nakreslit vlastní. Ve výchozím nastavení P5 přidá obrys kolem tvarů - chceme v tomto případě zakázat tahy.

 CreateCanvas (800.500);
Nocursor ();
nostoke ();

The background image – this night sky scene provides the setting for our animation — Obrázek na pozadí - tato noc Sky Scéna poskytuje nastavení pro naši animaci

Dále, budeme načíst pár obrázků. Jeden bude sloužit jako pozadí - v tomto případě, noční obloha scéna. Ostatní bude obraz "TIPING" - černobílý design Naše konečný design bude založen na. Myšlenkou je dát většinu hvězdy na černé pixely v našem obrazu nápovědy, abyste znovu vytvořili design v naší pozadí scény. Bylo by snadné vytvářet tyto obrazy s textovými a čerpacími nástroji P5, ale pro stručnost používáme statická aktiva.

 hintimage = loadimage ("// bit.ly/hintimage");
SkyImage = LoadImage ("// bit.ly/skyimage");

The hint image, which dictates the positioning of our stars — Obrazový obraz, který diktuje polohování našich hvězd

Funkce kreslit

To je to založit() Dokázal se! Další klíčová funkce je kreslit() . To je nazýváno v nepřetržité smyčce, která je užitečná pro animace a přidávání prvků v čase.

 Funkce Draw () {...}

V rámci funkce Draw je naším prvním úkolem vyplnit plátno s naším obrázkem na pozadí. P5 automaticky nevymaže plátno mezi kreslit() Volání, takže musíme to udělat každý rámec nebo skončíme s některými podivnými akumulačními efekty. Chcete-li umístit naložený obraz na plátno, použijte obraz() Funkce a dát souřadnice X a Y pro polohování.

 Obrázek (SkyImage, 0, 0);

Dále budeme chytit aktuální umístění myši a uložíme jej jako p5.vector pomocí CreateVector () . Tento objekt je dodáván s praktickými funkcemi pro řešení bodů ve vesmíru, ale většinou ji používáme jako kontejner.

 VAR Pozice = CreateVector (Mousex, Mousey);

Pomocí naší nově uložené polohy myši můžeme nakreslit náš kurzor. Nastavíme barvu kreslení vyplnit() Přechodem hodnot a použití RGB elipsa() Nakreslete kruh na místě myši.

 výplň (255, 192, 0);
elipsa (poloha.x, poloha.y, 8, 8);

Chceme jen nakreslit nové hvězdy, zatímco myš je stisknuto, takže zkontrolujeme P5 Mouseispressed. před pokračováním. Pokud je myš dolů, musíme vypočítat dobré místo pro naši další hvězdu, abych skončil. Uděláme to s vlastní funkcí FindPixel () , které budeme definovat později.

Discover the creative side of code with Brendan Dawes at Generate London — Objevte kreativní stranu kódu s Brendan Dawesem na Generovat Londýn

Jakmile máme cíl, vytvoříme novou instanci objektu vlastního hvězdy (více níže) a zatlačte jej na konec našeho hvězdy. Pokud skončíme s více než 2000 hvězdičky, začneme nejstarší.

 Pokud (myšisprimovaný) {
var cíl = findpixel ();
var hvězda = nová hvězda (pozice, cíl);
hvězdy.Push (hvězda);
if (hvězdy.length & gt; 2000) hvězdy.Shift ();
}

Konečně, budeme smyčkou přes naši řadu hvězd a volání Aktualizace() a kreslit() na každém z nich. Později se ponoříme do těchto metod.

 pro (var i = 0; i & lt; hvězdy.length; i ++) {
hvězdy [i] .Update ();
hvězdy [i] .draw ();
}

Pomocníka

Nyní založit() a kreslit() Jsou zavedeny, budeme pracovat na pomocných funkcích a objektů. Za prvé, budeme definovat funkci, která najde pozici odpočinku pro každou novou hvězdu. Vše, co musíme udělat, je zkontrolovat některé náhodné pixely v náhodném obrazu, pomocí dostat() vidět, zda jsou černé nebo bílé.

Ve skutečnosti se musíme jen podívat na jejich červenou hodnotu, protože v obou případech se hodnoty RGB odpovídají. Pokud najdeme ne bílý pixel, vrátíme ji, protože jsme zasáhli náš design. Pokud ne, vrátíme se poslední zkontrolovat poslední pixel a bude sloužit jako náhodná hvězda.

 Funkce FindPixel () {
var x, y;
pro (var i = 0; I <15; i ++) {
X = podlaha (náhodné (hintimage.width));
Y = podlaha (náhodné (hintimage.Height));

pokud (červená (hintimage.get (x, y)) <255) přestávku;
}
Vrátit CreateVector (X, Y);
}

Poslední je náš objekt Vlastní hvězda. Jednoduše řečeno, chceme opakovanou kontejner, který ukládá informace o každé hvězdě a také poskytuje prostředky pro aktualizaci a jejich kreslení. JavaScript neposkytuje způsob, jak vytvořit třídy v tradičním smyslu, ale můžeme získat stejný výsledek definováním funkce a rozšířením pro naše vlastní potřeby.

Každá hvězda má několik vlastností (počáteční pozice, konečná lokalita a náhodně generovaný průměr), které definujeme v "konstruktérní funkci", která je volána pro každou novou hvězdu vytvořenou v naší losené smyčce.

 Funkční hvězda (pozice, cíl) {
this.Position = poloha;
this.target = cíl;
TentodiaMeter = náhodný (1, 5);
}

Dále přidáme Aktualizace() Metoda hvězdy, která bude používat p5.vector lerp () Pro výpočet nového umístění mezi aktuálními a cílovými pozicí hvězdy. V tomto případě se pohybujeme čtyři procenta zbývající vzdálenosti pro každou remízu, což nám efektivně dává snadný efekt.

Kdybychom chtěli dostat fantazii, mohli bychom zde také simulovat nějakou fyziku, ale teď to budeme mít jednoduché.

 star.prototype.Update = Function () {
this.position = p5.vector.lerp (
this.position,
this.target,
0.04.
);
};

Kreslení hvězd

Konečně, hvězda kreslit() Metoda skutečně nakreslí hvězdu na plátno. Opět používáme vyplnit() a elipsa() , i když tentokrát voláme vyplnit() s hodnotou ve stupních šedi a hodnotu alfa pro transparentnost.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Každý rámec, lineární interpolace nám dává nový bod podél cesty mezi aktuální hvězdnou polohou a jeho cílem

Chcete-li dát hvězdy blikat, hodnota alfa je určena pomocí p5 hluk() funkce. To vrací hodnotu šumu Perlin pro zadané souřadnice, což znamená, že dostanete hladkou, kapalinovou sekvenci náhodných čísel. Pro třetí parametr přecházíme spíše časově založenou hodnotu než prostorovou hodnotu, takže hluk bude časem oživit.

 Star.prototype.draw = Funkce () {
var alfa = hluk (
this.target.x,
this.target.y,
Millis () / 1000.0
);

výplň (255, alfa * 255);

elipsa(
this.position.x, this.position.y,
Tento systém, tento.Diametr
);
};

To je pro náš první skica! Kliknutím a přetažením zobrazíte nové hvězdy a odpovídají obrazu nápovědy.

Co bude dál?

Odtud můžete přidat některé HTML prvky pro ovládání proměnných pomocí doplňku P5.dom nebo dokonce přidat zvuk do vizuálních systémů p5.Sound .

Pošli jsme pouze povrch toho, co je možné s p5.js, a s novými funkcemi na cestě je ještě více těšit. Bavte se!

Další informace o kreativní straně kódování na Generovat Londýn Dokázal se! Brendan Dewes. Učí vás, jak používat zpracování a p5.js otočit data do věcí krásy v jeho workshopu ;Bude také mluvit o radosti z práce Papír, plastové a pixely . Rezervujte si jízdenku Dokázal se!

Prozkoumejte kreativní kód s p5.js

Funkce kreslit

Pomocníka

Kreslení hvězd

Co bude dál?

jak - Nejoblíbenější články

Mapa Ilustrace: Krok za krokem průvodce

Jak nastavit místní rozvojové prostředí

Rozumí přirozeným jazykovým zpracováním

Použijte nástroj pero a textury pro přidání hloubky v aplikaci Photoshop

Proveďte interaktivní 3D typografické efekty

Jak simulovat výbuchy v Maya

Naučte se spustit design a obsah sprintů

Top tipy pro malování expresivní ruce

Kategorie