Fedezze fel a kreatív kódot p5.js-vel

Sep 13, 2025

kézikönyv

Töltsön egy napot Brendan Dawes nál nél London létrehozása és fedezze fel, hogyan Az adatok dawesome . Ebben az egész napos workshop ő majd elmagyarázza, hogyan kell az adatokat, ami körülvesz minket minden nap, és kapcsolja be valami szép a feldolgozás és p5.js. Foglalás most !

p5.js egy könyvtár, amelynek célja a hatalom Feldolgozás az interneten. Célja, hogy vezessenek be művészek, tervezők és oktatók a világ a programozás közben is kínál sokoldalú eszközt, hogy devs és mérnökök a vizuális művészetek.

Merüljünk be, és hozzon létre első "vázlatunkat". Célunk egy rajzeszköz építése, amely egy egyszerű képet átalakít az animált csillagok területére. Először néhány globális változót határozunk meg, és megírjuk a miénk beállít() funkció. p5 beállít() egyszer fut, amikor a vázlat betöltődik, így ideális hely az inicializálás kezelésére.

Töltse le a szükséges fájlokat itt .

 Var Hintimage, SkyImage, Stars = [];
Funkcióbeállítás () {...}

Belül beállít Funkció, hozzon létre egy vászonot, és elrejtjük az egér kurzort, hogy felhívjuk a sajátunkat. Alapértelmezés szerint a P5 egy vázlatot ad a formák körül - szeretnénk letiltani a stroke-t ebben az esetben.

 CreateCanvas (800 500);
nocursor ();
nostroke ();

The background image – this night sky scene provides the setting for our animation — A háttérkép - Ez az éjszakai égbolt jelenet biztosítja az animációnk beállítását

Ezután betöltünk egy pár képet. Az egyik a háttérben szolgál - ebben az esetben egy éjszakai égbolt jelenet. A másik lesz a "Tipp" kép - a fekete-fehér design végső kialakításunk alapul. Az elképzelés az, hogy a csillagok többségét a fekete pixelek fölé helyezzük a tippképünkben, hogy újrateremtsék a tervezésünket a háttérben. Könnyű lenne létrehozni ezeket a képeket a P5 szöveges és rajzeszközökkel, de a rövidség kedvéért statikus eszközöket használunk.

 Hintimage = terhelés ("// bit.ly/hintimage");
skyimage = terhelés ("// bit.ly/skyimage");

The hint image, which dictates the positioning of our stars — A tippkép, amely diktálja a csillagok pozícionálását

A Draw funkció

Ez az beállít() ! Egy másik kulcsfunkció az húz() . Ez egy folyamatos hurokba kerül, amely hasznos az animációkhoz és az elemek hozzáadásához.

 Funkció rajz () {...}

A Draw funkción belül az első feladatunk a vásznat kitöltése a háttérképünkkel. A P5 nem törli automatikusan a vásznat húz() Hívások, ezért meg kell tennünk ezt a keretet, vagy végül néhány furcsa felhalmozási hatással. Ahhoz, hogy betöltött képet helyezzen a vászonra, használja a kép() Funkció és adjon X és Y koordinátákat a pozícionáláshoz.

 kép (skyimage, 0, 0);

Ezután megragadjuk az aktuális egér helyét, és tárolja azt p5.Vector alkalmazásként Crealkector () . Ez az objektum praktikus funkciókat tartalmaz, amelyek az űrben lévő pontokkal foglalkoznak, de többnyire csak konténerként használjuk.

 Var Position = CreatEvector (Mousex, Mousey);

Az újonnan tárolt egérpozíciót használva rajzolhatjuk a kurzort. Beállítottuk a rajz színét tölt() Az RGB értékek és a használat útján ellipszis() egy kört rajzoljon az egér helyén.

 Töltse ki (255, 192, 0);
ellipszis (pozíció, pozíció.y, 8, 8);

Csak új csillagokat szeretnénk felhívni, miközben az egeret megnyomja, így ellenőrizzük a P5-et egérmegnyomott eljárás előtt. Ha az egér le van állítva, ki kell számolnunk egy jó helyet a következő csillagunkhoz, hogy végül. Ezt az egyéni funkcióval fogjuk megtenni FindPixel () , amit később határozunk meg.

Discover the creative side of code with Brendan Dawes at Generate London — Fedezze fel a Kód kreatív oldalát a Brendan Dawes-szel London generálásakor

Miután van egy célunk, létrehozunk egy új példányt egy egyedi csillagobjektum (több alább), és nyomja meg a STAR tömb végére. Ha több mint 2000 csillaggal végzünk, elkezdjük eldobni a legrégebbieket.

 Ha (Mouseispressed) {
varcal = findpixel ();
var star = új csillag (pozíció, cél);
csillagok.push (csillag);
Ha (csillag.length & gt; 2000) csillagok.Shift ();
}

Végül, a csillagok és a hívás frissítés () és húz() mindegyikükön. Később fogunk merülni ezekbe a módszerekbe.

 a (var i = 0, i & lt; stars.length, i ++) {
csillagok [i] .Update ();
csillagok [i] .Draw ();
}

Helper funkciók

Most beállít() és húz() a helper funkciókban és tárgyakon dolgozunk. Először egy olyan funkciót határozunk meg, amely minden új csillag számára nyugodt pozíciót talál. Mindössze annyit kell tennie, hogy ellenőrizzük a véletlenszerű képpontokat a tippképünkben, használva kap() látni, hogy fekete vagy fehér.

Valójában csak a piros értékükre kell néznünk, mert mindkét esetben az RGB értékek megfelelnek. Ha nem fehér pixelt találunk, akkor visszaadjuk, mert megütöttük a designunkat. Ha nem, akkor az utolsó képpontot ellenőrizzük, és véletlenszerű csillagként szolgál majd.

 Funkció FindPixel () {
var x, y;
(var i = 0, én & lt; 15; i ++) {
x = padló (véletlen (hintimage.width));
y = padló (véletlen (hintimage.height));

ha (piros (hintimage.get (x, y)) és 255) szünet;
}
Visszatérő Creavector (X, Y);
}

Utoljára az egyéni csillagobjektumunk. Tedd egyszerűen, olyan újrafelhasználható tartályt akarunk, amely információkat tárol az egyes csillagokról, és eszközt biztosít a frissítéshez és rajzoláshoz. A JavaScript nem biztosít módot arra, hogy hagyományos értelemben hozza létre az osztályokat, de ugyanazt az eredményt kaphatjuk, ha egy funkciót meghatározunk, és kiterjeszthetjük saját igényeinkre.

Minden csillag egy pár ingatlanok (kiindulási helyzet, végleges helyére, és egy véletlenszerűen generált átmérő), amit majd határozza meg a „kivitelező funkció”, hogy hívják, hogy minden új csillag létre a sorsolás hurok.

 Funkciócsillag (pozíció, cél) {
ez.Pozíció = pozíció;
this.target = cél;
ez.diameter = véletlen (1, 5);
}

Ezután hozzáadunk egy frissítés () módszer a csillaghoz, amely a p5.Vector-t fogja használni lerp () Új hely kiszámítása a csillag aktuális és célhelyzetei között. Ebben az esetben a fennmaradó távolság négy százalékát mozgatjuk minden húzáshoz, ami hatékonyan könnyű hatással jár.

Ha szeretni akarunk, akkor is szimulálhatunk néhány fizikát, de most már egyszerűen megtartjuk.

 star.prototype.update = funkció () {
this.Position = p5.vector.lerp (
ez a pozíció,
ez.target,
0,04
);
};

Rajz csillagok

Végül csillag húz() A módszer valójában a csillagot a vászonra húzza. Ismét használjuk tölt() és ellipszis() , bár ezúttal hívjuk tölt() szürkeárnyalatos értékkel és az átláthatóság alfa értékével.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Minden keret, lineáris interpoláció új pontot ad az aktuális csillag pozíció és az úticél közötti út mentén

Ahhoz, hogy a csillagok pislogjanak, az alfa értéket a P5-k segítségével határozzák meg zaj() funkció. Ez visszaadja a meghatározott koordináták perlin zajértékét, ami azt jelenti, hogy a véletlen számok sima, folyadékszekvenciáját kapja. A harmadik paraméter esetében az időalapú értéket helyettesítjük, nem pedig térbeli értéket, hogy a zaj az idő múlásával animáljon.

 star.prototype.draw = funkció () {
var alpha = zaj (
this.target.x,
this.target.y,
Millis () / 1000.0
);

Töltse ki (255, alfa * 255);

ellipszis(
this.Position.x, this.position.y,
ez.diameter, ez.diameter
);
};

Ez az első vázlatunk számára! Kattintson és húzza, hogy az új csillagok megjelenjenek és megfeleljenek a tippképnek.

Mi a következő lépés?

Innen előfordulhat, hogy hozzáadhat néhány HTML elemet a Változók vezérléséhez a P5.DOM ADD-ON vagy akár hangot a vizuálisokhoz p5.Sound .

Mi csak a p5.js-vel és az új funkciókkal megragadtuk a felületet, még inkább várom. Érezd jól magad!

Tudjon meg többet a kódolás kreatív oldaláról London létrehozása ! Brendan Dawes megtanítja Önt, hogyan kell használni a feldolgozást és a p5.js-t, hogy az adatokat a szépség dolgára fordítsa A műhelyében ;Ő is beszélni fog az örömmel együtt dolgozni Papír, műanyag és képpont . Foglalja le jegyét most !

Fedezze fel a kreatív kódot p5.js-vel

A Draw funkció

Helper funkciók

Rajz csillagok

Mi a következő lépés?

kézikönyv - Most Popular Articles

44 a legjobb iPad parancsikonok és gesztusok iPados 2020

Hogyan építsünk egy blogot a jekyll-vel

Hogyan lehet létrehozni egy szuper-realisztikus fantasy teremtményt

Hogyan hozzunk létre egy alkalmazás ikont az Illustrator-ban

Az Adobe Capture CC használata

11 Tippek egy vizes táj létrehozásához 3D-ben

Hogyan hozzunk létre egy élénk tündér királynőt

Hogyan kell elsajátítani a bőr árnyékolását 3D-ben

Kategóriák