Explorați codul creativ cu p5.js

Feb 2, 2026

să

Petrece o zi cu Brendan Dawes. la Generați Londra și descoperiți cum Datele sunt dawesome. . În acest atelier de zi, el va explica cum să ia datele care ne înconjoară în fiecare zi și să-l transforme în ceva frumos folosind procesarea și P5.Js. Rezerva acum Fotografiile!

P5.JS. este o bibliotecă concepută pentru a aduce puterea Prelucrare la web. Scopul său este de a introduce artiști, designeri și educatori în lumea programării, oferind, de asemenea, instrumente versatile pentru a aduce devs și ingineri în artele vizuale.

Să ne aruncăm și să creăm prima noastră "schiță". Scopul nostru este de a construi un instrument de desen care transformă o imagine simplă într-un câmp de stele animate. În primul rând, vom defini câteva variabile globale și vom scrie înființat() funcţie. P5's. înființat() Se execută o dată, când schița este încărcată, deci este locul ideal pentru a gestiona inițializarea.

Descărcați fișierele de care aveți nevoie Aici .

 Var HinTimage, SkyImage, Stars = [];
Configurarea funcțiilor () {...}

În interiorul nostru înființat Funcția, vom crea o pânză și vom ascunde cursorul mouse-ului, astfel încât să putem atragem propriul nostru. În mod implicit, P5 adaugă o schiță în jurul formelor - dorim să dezactivăm loviturile în acest caz.

 CreateCanvas (800.500);
nocursor ();
nostroke ();

The background image – this night sky scene provides the setting for our animation — Imaginea de fundal - această scenă de noapte de noapte oferă setarea pentru animația noastră

Apoi, vom încărca o pereche de imagini. Unul va servi drept fundal - în acest caz, o scenă de noapte de noapte. Celălalt va fi imaginea "indică" - designul alb-negru Designul nostru final va fi bazat pe. Ideea este de a pune majoritatea stelelor peste pixeli negri în imaginea noastră de sugestii, pentru a recrea designul în scena noastră de fundal. Ar fi ușor să creați aceste imagini cu instrumentele de text și desenate ale P5, dar din motive de concurs vom folosi active statice.

 HinTimage = Loadimage ("// bit.ly/hintimage");
skyImage = loadimage ("// bit.ly/skyimage") ;

The hint image, which dictates the positioning of our stars — Imaginea indiciu, care dictează poziționarea stelelor noastre

Funcția de tragere

Pentru asta înființat() Fotografiile! O altă funcție cheie este a desena() . Se numește într-o buclă continuă, care este utilă pentru animații și adăugarea de elemente în timp.

 Draw Function () {...}

În cadrul funcției de remiză, prima noastră sarcină este de a umple panza cu imaginea de fundal. P5 nu clarifică automat panza dintre a desena() Apeluri, așa că trebuie să facem acest cadru sau vom ajunge cu unele efecte ciudate de acumulare. Pentru a plasa o imagine încărcată pe panza, utilizați imagine() Funcția și dați coordonatele X și Y pentru poziționare.

 Imagine (SkyImage, 0, 0);

Apoi, vom apuca locația actuală a mouse-ului și o vom păstra ca pe un P5.Vector folosind CreateVector () . Acest obiect vine cu funcții la îndemână pentru a face față punctelor în spațiu, dar îl folosim în cea mai mare parte ca un container.

 VAR Poziția = CreateVector (Mousex, Mousey);

Folosind poziția noastră nou-stocată a mouse-ului, putem atrage cursorul nostru. Vom da culoarea desenului completati() prin trecerea valorilor RGB și a utilizării elipsă() pentru a desena un cerc la locația mouse-ului.

 Umpleți (255, 192, 0);
Ellipse (poziția.x, poziția.y, 8, 8);

Vrem doar să desenăm noi stele în timp ce mouse-ul este apăsat, așa că vom verifica P5 mouse-impresionat înainte de a începe. Dacă mouse-ul este în jos, trebuie să calculăm un loc bun pentru următoarea noastră stea de a ajunge. Vom face asta cu o funcție personalizată numită FindPixel () , pe care o vom defini mai târziu.

Discover the creative side of code with Brendan Dawes at Generate London — Descoperiți partea creativă a codului cu Brendan Dawes la generarea Londrei

Odată ce avem o țintă, vom crea o nouă instanță a unui obiect personalizat (mai jos) și o vom împinge pe capătul matricei de stea. Dacă ajungem cu peste 2.000 de stele, vom începe să renunțăm la cele mai vechi.

 Dacă (MouseSpressed) {
Var Target = FindPixel ();
VAR STAR = Noua stea (poziție, țintă);
stele.push (stea);
dacă (steles.length & gt; 2000) stele.Shift ();
}

În cele din urmă, vom bucura prin gama noastră de stele și vom apela Actualizați() și a desena() pe fiecare dintre ele. Ne vom arunca în aceste metode mai târziu.

 pentru (var i = 0; i & lt; stele.length; i ++) {
stele [i] .Update ();
stele [i] .Draw ();
}

Funcții de ajutor

Acum înființat() și a desena() sunt în vigoare vom lucra la funcțiile și obiectele ajutorului. În primul rând, vom defini o funcție care găsește o poziție de odihnă pentru fiecare stea nouă. Tot ce trebuie să facem este să verificați niște pixeli aleatoriu în imaginea noastră de sugestii, folosind obține() pentru a vedea dacă sunt negru sau alb.

De fapt, trebuie doar să ne uităm la valoarea roșie, deoarece în ambele cazuri se potrivesc valorile RGB. Dacă găsim un pixel non-alb, o vom returna pentru că ne-am lovit designul. Dacă nu, vom reveni la ultimul pixel verificat și va servi ca o stea aleatorie.

 Funcție FindPixel () {
var x, y;
pentru (var i = 0; i & lt; 15; i ++) {
x = podea (aleatoriu (Hintimage.Width));
y = podea (aleatoriu (hintimage.hight));

dacă (roșu (hintimage.get (x, y)) & lt; 255) pauză;
}
retur creațiVector (x, y);
}

Ultimul este obiectul nostru personalizat. Puneți pur și simplu, dorim un recipient reutilizabil care stochează informații despre fiecare stea și oferă, de asemenea, un mijloc de actualizare și desenare. JavaScript nu oferă o modalitate de a crea clase într-un sens tradițional, dar putem obține același rezultat prin definirea unei funcții și extinderea acesteia pentru nevoile noastre.

Fiecare stea are câteva proprietăți (poziția de pornire, locația finală și un diametru generat la întâmplare), pe care îl vom defini într-o "funcție de constructor" care este chemată pentru fiecare nouă stea creată în bucla noastră de tracțiune.

 Funcție stea (poziție, țintă) {
această poziție = poziția;
the.target = țintă;
Acest.diameter = aleatoriu (1, 5);
}

Apoi vom adăuga un Actualizați() metodă de a stele, care va folosi p5.vector LERP () Pentru a calcula o nouă locație între pozițiile curente și țintă ale unui stea. În acest caz, ne mișcăm patru la sută din distanța rămasă pentru fiecare remiză, care ne dă efectiv un efect de ușurință.

Dacă am vrut să fim fantezie, am putea simula și o anumită fizică aici, dar pentru moment o vom păstra simplu.

 Star.protype.update = Funcție () {
this.position = p5.vector.lerp (
această poziție,
acest.target,
0.04.
);
};

Desenarea stelelor

În cele din urmă, steaua lui a desena() Metoda atrage de fapt steaua la panza. Încă o dată, folosim completati() și elipsă() , deși de data asta sunăm completati() cu o valoare de tonuri de gri și o valoare alfa pentru transparență.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Fiecare cadru, interpolarea liniară ne oferă un nou punct de-a lungul căii dintre poziția curentă a starului și destinația acesteia

Pentru a da stelelor o clipire, valoarea alfa este determinată folosind P5 zgomot() funcţie. Acest lucru returnează valoarea zgomotului Perlin pentru coordonatele specificate, ceea ce înseamnă că obțineți o secvență fluidă netedă de numere aleatorii. Pentru al treilea parametru, trecem o valoare bazată pe timp, mai degrabă decât o valoare spațială, astfel încât zgomotul să fie animat în timp.

 Star.protype.Draw = funcția () {
VAR ALPHA = zgomot (
the.target.x,
acest.target.y,
milis () / 1000.0
);

umpleți (255, alfa * 255);

elipsă(
the.position.x, this.pozition.y,
Acest.diameter, acest.diameter.
);
};

Asta e pentru prima noastră schiță! Faceți clic și trageți pentru a vedea că apar noi stele și conform cu imaginea de sugestii.

Ce urmeaza?

De aici, s-ar putea să adăugați unele elemente HTML pentru a controla variabilele utilizând add-on-ul P5.Dom sau chiar adăugați sunet la vizuale utilizând P5.Sound. .

Am zgâriat doar suprafața a ceea ce este posibil cu P5.js și cu noi caracteristici pe drum, există și mai mult pentru a aștepta cu nerăbdare. A se distra!

Aflați mai multe despre partea creativă a codării la Generați Londra Fotografiile! Brendan Dawes. vă va învăța cum să utilizați procesarea și P5.js pentru a transforma datele în lucruri de frumusețe în atelierul său ;va vorbi, de asemenea, despre bucuria de a lucra cu Hârtie, plastic și pixeli . Rezervați biletul acum Fotografiile!

Explorați codul creativ cu p5.js

Funcția de tragere

Funcții de ajutor

Desenarea stelelor

Ce urmeaza?

să - Cele mai populare articole

Cum se creează o pagină comică

Un ghid pentru viziunea Cloud Google

Cum de a desena un caracter în stilou și cerneală

Obțineți mai multe din grafit cu aceste sfaturi

Cum se selectează cu instrumentele Lasso Photoshop

5 sfaturi pentru a vă îmbunătăți creațiile VR

Vopsea un portret de stil în Photoshop CC

Accelerați fluxul de lucru al texturii

Categorii