Udforsk kreativ kode med p5.js

Sep 11, 2025

hvordan

Tilbring en dag med Brendan Dawes. på Generere London. og opdag hvordan Data er Dawesome. . I denne hele værksted vil han forklare, hvordan man tager dataene, der omgiver os hver dag og gør det til noget smukt ved hjælp af behandling og p5.js. Book nu !

p5.js. er et bibliotek designet til at bringe kraften i Forarbejdning til internettet. Det sigter mod at introducere kunstnere, designere og pædagoger til verden af programmering, samtidig med at man tilbyder alsidige værktøjer til at bringe devs og ingeniører ind i billedkunst.

Lad os dykke ind og oprette vores første 'skitse'. Vores mål er at opbygge et tegne værktøj, der omdanner et simpelt billede til et felt af animerede stjerner. For det første definerer vi et par globale variabler og skriver vores Opsætning() fungere. P5's. Opsætning() Køres en gang, når skitsen er indlæst, så det er det ideelle sted at håndtere initialisering.

Download de filer, du har brug for her .

 Var HintImage, SkyImage, Stars = [];
Funktion setup () {...}

Inde i vores Opsætning Funktion, vi vil oprette et lærred og skjule musemarkøren, så vi kan tegne vores egne. Som standard tilføjer P5 en oversigt over figurer - vi ønsker at deaktivere slagtilfælde i dette tilfælde.

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

The background image – this night sky scene provides the setting for our animation — Baggrundsbilledet - denne nattehimmel scene giver indstillingen for vores animation

Dernæst vil vi indlæse et par billeder. Man vil tjene som baggrunden - i dette tilfælde en nathimmel scene. Den anden vil være 'Hint' image - det sorte og hvide design Vores endelige design vil være baseret på. Ideen er at sætte de fleste af stjernerne over sorte pixels i vores Hint-billede for at genskabe designet i vores baggrundsscene. Det ville være nemt at oprette disse billeder med P5s tekst- og tegne værktøjer, men for korthedens skyld bruger vi statiske aktiver.

 Hintimage = lastbillede ("// bit.ly/hintimage");
skyimage = lastbillede ("// bit.ly/skyimage");

The hint image, which dictates the positioning of our stars — Hintsbilledet, som dikterer positionering af vores stjerner

Tegnefunktionen

Det er det for Opsætning() ! En anden nøglefunktion er tegne() . Det hedder i en kontinuerlig sløjfe, hvilket er nyttigt for animationer og tilføjer elementer over tid.

 Funktion Draw () {...}

Inden for tegnefunktionen er vores første opgave at fylde lærredet med vores baggrundsbillede. P5 rydder ikke automatisk lærredet mellem tegne() Opkald, så vi skal gøre dette hver ramme, eller vi vil ende med nogle mærkelige akkumuleringseffekter. For at placere et lastet billede på lærredet, brug billede() funktion og giv x og y koordinater til positionering.

 Billede (SkyImage, 0, 0);

Dernæst får vi fat i den aktuelle mus-placering og gemmer den som en p5.Vector bruger Createvector () . Dette objekt leveres med praktiske funktioner til at håndtere punkter i rummet, men vi bruger det for det meste bare som en beholder.

 Var position = Createvector (Mousex, Mousey);

Ved hjælp af vores nyopbevarede musestilling kan vi tegne vores markør. Vi sætter tegningsfarven med fylde() Ved at passere RGB værdier og brug ellipse () at tegne en cirkel på musens placering.

 Fyld (255, 192, 0);
ellipse (position.x, position.y, 8, 8);

Vi ønsker kun at tegne nye stjerner, mens musen trykkes, så vi kontrollerer P5's mouseispressed. før du fortsætter. Hvis musen er nede, skal vi beregne et godt sted for vores næste stjerne at ende op. Vi gør det med en brugerdefineret funktion kaldet findpixel () , som vi definerer senere.

Discover the creative side of code with Brendan Dawes at Generate London — Oplev den kreative side af kode med Brendan Dawes at generere London

Når vi har et mål, opretter vi en ny forekomst af et brugerdefineret Star-objekt (mere nedenfor) og skubbe den på slutningen af vores stjernekunst. Hvis vi ender med over 2.000 stjerner, begynder vi at kassere de ældste.

 hvis (mouseispressed) {
var mål = findpixel ();
var stjerne = ny stjerne (position, mål);
Stars.push (Star);
Hvis (Stars.Length & GT; 2000) Stars.Shift ();
}

Endelig løfter vi gennem vores vifte af stjerner og ringe opdatering () og tegne() på hver af dem. Vi vil dykke ind i disse metoder senere.

 For (var I = 0; I & LT; Stars.Længde; I ++) {
Stjerner [i] .Update ();
Stjerner [i] .DRAW ();
}

Hjælperfunktioner.

Nu Opsætning() og tegne() er på plads, vi arbejder på hjælperfunktionerne og objekter. For det første definerer vi en funktion, der finder en hvileposition for hver ny stjerne. Alt, hvad vi skal gøre, er at kontrollere nogle tilfældige pixels i vores Hint-billede ved hjælp af få() at se om de er sorte eller hvide.

Vi skal faktisk kun se på deres røde værdi, for i begge tilfælde matcher RGB værdier. Hvis vi finder en ikke-hvid pixel, returnerer vi det, fordi vi har ramt vores design. Hvis ikke, vil vi bare returnere den sidste pixel kontrolleret, og det vil fungere som en tilfældig stjerne.

 FUNKTION FINDPIXEL () {
var x, y;
for (var I = 0; I & LT; 15; I ++) {
x = gulv (tilfældig (hint 1width));
Y = gulv (tilfældig (Hint 1height));

hvis (rødt (hint 1,00 (x, y)) & lt; 255) pause;
}
returnere kreativevektor (x, y);
}

Set op er vores brugerdefinerede stjerneobjekt. Simpelthen vil vi have en genanvendelig container, der lagrer information om hver stjerne, og giver også et middel til at opdatere og tegne dem. JavaScript giver ikke en måde at skabe klasser på en traditionel forstand, men vi kan få det samme resultat ved at definere en funktion og udvide den til vores egne behov.

Hver stjerne har et par egenskaber (startposition, endelig placering og en tilfældigt genereret diameter), som vi definerer i en 'Constructor-funktion', der kræves for hver ny stjerne, der er oprettet i vores træksløjfe.

 Funktionsstjerne (position, mål) {
denne.position = position;
this.target = mål;
This.Diameter = tilfældig (1, 5);
}

Derefter tilføjer vi en opdatering () Metode til stjerne, som vil bruge P5.Vector's lerp () at beregne en ny placering mellem en stjerne nuværende og målpositioner. I dette tilfælde flytter vi fire procent af den resterende afstand for hver tegning, som effektivt giver os en lette effekt.

Hvis vi ønskede at blive fancy, kunne vi også simulere nogle fysik her, men for nu vil vi holde det enkelt.

 Star.Prototype.update = funktion () {
this.position = p5.vector.lerp (
denne.position,
this.target,
0,04.
);
};

Tegne stjerner

Endelig stjernens tegne() Metoden trækker faktisk stjernen til lærredet. Endnu en gang bruger vi fylde() og ellipse () , selv om denne gang vi ringer fylde() med gråtoneværdi og en alfa-værdi for gennemsigtighed.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Hver ramme, lineær interpolation giver os et nyt punkt langs stien mellem den nuværende stjernesposition og dens destination

For at give stjernerne en glimt, er alfa-værdien bestemt ved hjælp af P5'er støj() fungere. Dette returnerer Perlin-støjværdien for de angivne koordinater, hvilket betyder at du får en glat væskesekvens af tilfældige tal. For den tredje parameter passerer vi en tidsbaseret værdi snarere end en rumlig værdi, så støj vil animere over tid.

 Star.prototype.Draw = funktion () {
var alfa = støj (
this.target.x,
this.target.y,
millis () / 1000,0
);

fyld (255, alfa * 255);

ellipse (
this.position.x, this.position.y,
This.Diameter, This.Diameter.
);
};

Det er det for vores første skitse! Klik og træk for at se nye stjerner vises og overholder hintsbilledet.

Hvad er næste?

Herfra kan du tilføje nogle HTML-elementer til at styre variabler ved hjælp af P5.Dom-tilføjelsen eller endda tilføje lyd til visualerne ved hjælp af p5.sound. .

Vi har kun ridset overfladen af, hvad der er muligt med p5.js, og med nye funktioner på vej, er der endnu mere at se frem til. Hav det sjovt!

Lær mere om den kreative side af kodning på Generere London. ! Brendan Dawes. vil lære dig, hvordan du bruger behandling og p5.js for at vende data i ting af skønhed i hans værksted ;Han vil også tale om glæden ved at arbejde med Papir, plast og pixels . Book din billet nu !

Udforsk kreativ kode med p5.js

Tegnefunktionen

Hjælperfunktioner.

Tegne stjerner

Hvad er næste?

hvordan - Mest populære artikler

10 måder at opbygge bedre 3D World-miljøer

Sådan ændres du et billede i Photoshop

Sådan gør du realistiske gennemsigtige overflader

Sådan opbygges en chatbot-grænseflade

Design en afspilbar avatar til et videospil

5 Tips til at forbedre dine VR-kreationer

Sådan oprettes tegneseriefigurer i Cinema 4D

Sådan designe en promo til et imaginært mærke

Kategorier