Utforska kreativ kod med p5.js

Feb 2, 2026

Hur

Tillbringa en dag med Brendan Dawes på Generera london och upptäck hur data är dawesome . I den här dagsverkstaden kommer han att förklara hur man tar data som omger oss varje dag och gör det till något vackert med bearbetning och p5.js. Boka nu !

p5.js är ett bibliotek som är utformat för att få kraften av Bearbetning till webben. Det syftar till att införa konstnärer, designers och lärare till programmets värld, samtidigt som de erbjuder mångsidiga verktyg för att få devs och ingenjörer till Visual Arts.

Låt oss dyka in och skapa vår första "skiss". Vårt mål är att bygga ett ritverktyg som omvandlar en enkel bild till ett fält av animerade stjärnor. Först definierar vi några globala variabler och skriver vår uppstart() fungera. p5 s uppstart() Körs en gång, när skissen är laddad, så det är den perfekta platsen att hantera initialisering.

Ladda ner de filer du behöver här .

 Var Hintimage, Skyimage, Stars = [];
Funktionsinställningar () {...}

Inuti vår uppstart Funktion, vi skapar en duk och dölj muspekaren så att vi kan dra vår egen. Som standard lägger P5 en skiss runt former - vi vill inaktivera stroke i det här fallet.

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

The background image – this night sky scene provides the setting for our animation — Bakgrundsbilden - den här nattsky scenen ger inställningen för vår animering

Därefter laddar vi ett par bilder. Man kommer att fungera som bakgrund - i det här fallet en nattsky scen. Den andra kommer att vara "tips" -bilden - den svarta och vita designen vår slutliga design kommer att baseras på. Tanken är att sätta de flesta av stjärnorna över svarta pixlar i vår ledtråd, för att återskapa designen i vår bakgrundsplats. Det skulle vara lätt att skapa dessa bilder med P5s text- och ritverktyg, men för korthetens skull använder vi statiska tillgångar.

 Hintimage = Loadimage ("// bit.ly/hintimage");
Skyimage = loadimage ("// bit.ly/skyimage") ;;

The hint image, which dictates the positioning of our stars — Hintbilden, som dikterar positioneringen av våra stjärnor

Draw-funktionen

Det är det för uppstart() ! En annan viktig funktion är dra() . Det är kallat i en kontinuerlig slinga, som är till hjälp för animeringar och lägger till element över tiden.

 Funktionsdragning () {...}

Inom dragfunktionen är vår första uppgift att fylla duken med vår bakgrundsbild. P5 rensar inte automatiskt duken mellan dra() Samtal, så vi måste göra det varje ram eller vi kommer att sluta med några konstiga ackumuleringseffekter. För att placera en laddad bild på duken, använd bild() Funktion och ge X och Y-koordinater för positionering.

 Bild (Skyimage, 0, 0);

Därefter tar vi det aktuella musplatsen och lagrar den som en P5.Vector med creameVector () . Det här objektet kommer med praktiska funktioner för att hantera punkter i rymden, men vi använder mestadels bara som en behållare.

 Var position = creameVector (mouseX, mousey);

Med vår nylagrade musposition kan vi dra vår markör. Vi ställer in ritningen med fylla() genom att passera RGB-värden och använd ellips() att rita en cirkel på musens läge.

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

Vi vill bara dra nya stjärnor medan musen trycks, så vi kan kolla p5 s musiserad innan fortsättning. Om musen är nere måste vi beräkna ett bra ställe för vår nästa stjärna för att hamna. Vi gör det med en anpassad funktion som heter Findpixel () , som vi definierar senare.

Discover the creative side of code with Brendan Dawes at Generate London — Upptäck den kreativa sidan av kod med Brendan Dawes på Generate London

När vi har ett mål skapar vi en ny instans av ett anpassat stjärnobjekt (mer nedan) och tryck det på slutet av vår Star-array. Om vi hamnar med över 2000 stjärnor börjar vi kassera de äldsta.

 om (musiserad) {
Var Target = HittaPixel ();
var star = ny stjärna (position, mål);
stjärnor.Push (stjärna);
Om (stars.length & gt; 2000) stars.shift ();
}

Slutligen slår vi genom vår mängd stjärnor och samtal uppdatering() och dra() på var och en av dem. Vi dyker in i dessa metoder senare.

 för (var i = 0; i & lt; stjärnor.length; i ++) {
stjärnor [i] .update ();
stjärnor [i] .Draw ();
}

Hjälparfunktioner

Nu uppstart() och dra() är på plats kommer vi att arbeta med hjälpenfunktionerna och objekten. Först definierar vi en funktion som hittar en viloläge för varje ny stjärna. Allt vi behöver göra är att kontrollera några slumpmässiga pixlar i vår ledtråd, med hjälp av skaffa sig() för att se om de är svarta eller vita.

Vi måste faktiskt bara titta på deras röda värde, för i båda fallen matchar RGB-värdena. Om vi hittar en icke-vit pixel, kommer vi tillbaka det eftersom vi har slagit vår design. Om inte, kommer vi bara tillbaka den senaste pixeln kontrollerad och det kommer att fungera som en slumpmässig stjärna.

 FUNCTION PRINDPIXEL () {
var x, y;
för (var i = 0; i & lt; 15; i ++) {
x = golv (slumpmässig (hintimage.width));
y = golv (slumpmässig (hintimage.height));

Om (röd (Hintimage.get (x, y)) & lt; 255) brytning;
}
returnera creameVector (x, y);
}

Senast upp är vårt anpassade stjärnobjekt. Sätt helt enkelt, vi vill ha en återanvändbar behållare som lagrar information om varje stjärna, och ger också ett medel för uppdatering och ritning av dem. Javascript ger inte ett sätt att skapa klasser i traditionell mening, men vi kan få samma resultat genom att definiera en funktion och förlänga den för våra egna behov.

Varje stjärna har några egenskaper (startposition, slutlig plats och en slumpmässigt genererad diameter), som vi definierar i en "konstruktörsfunktion" som heter varje ny stjärna skapad i vår dragslinga.

 Funktionsstjärna (position, mål) {
this.position = position;
this.target = mål;
this.diameter = slumpmässig (1, 5);
}

Nästa lägger vi till en uppdatering() Metod till Star, som kommer att använda P5.Vector s lerp () Att beräkna en ny plats mellan en stjärnans nuvarande och målpositioner. I det här fallet flyttar vi fyra procent av det återstående avståndet för varje dragning, vilket effektivt ger oss en lätthetseffekt.

Om vi ville ha fint, kunde vi också simulera någon fysik här, men för nu håller vi det enkelt.

 star.prototype.update = funktion () {
this.position = p5.vector.lerp (
denna position,
this.target,
0,04
);
};

Ritande stjärnor

Slutligen, stjärnans dra() Metoden drar faktiskt stjärnan till duken. Återigen använder vi fylla() och ellips() , även om den här gången vi ringer fylla() med ett gråskala värde och ett alfanumtal för öppenhet.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Varje ram, linjär interpolering ger oss en ny punkt längs vägen mellan den aktuella stjärnpositionen och dess destination

För att ge stjärnorna en twinkle bestäms alfa-värdet med p5 s ljud() fungera. Detta returnerar Perlin-ljudvärdet för de angivna koordinaterna, vilket innebär att du får en slät, flytande sekvens av slumptal. För den tredje parametern passerar vi ett tidsbaserat värde snarare än ett rumsligt värde, så att bullret kommer att animera över tiden.

 star.prototype.draw = funktion () {
var alfa = brus (
this.target.x,
this.target.y,
Millis () / 1000,0
);

Fyll (255, Alpha * 255);

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

Det är det för vår första skiss! Klicka och dra för att se nya stjärnor visas och överensstämmer med ledbilden.

Vad kommer härnäst?

Härifrån kan du lägga till några HTML-element för att styra variabler med hjälp av P5.DOM-tillägget eller till och med lägga till ljud till visualerna med hjälp av p5.sound .

Vi har bara repat ytan av vad som är möjligt med p5.js, och med nya funktioner på vägen är det ännu mer att se fram emot. Ha så kul!

Läs mer om den kreativa sidan av kodning på Generera london ! Brendan Dawes kommer att lära dig hur man använder bearbetning och p5.js för att göra data till skönhet i sin verkstad ;Han pratar också om glädjen att arbeta med Papper, plast och pixlar . Boka din biljett nu !

Utforska kreativ kod med p5.js

Draw-funktionen

Hjälparfunktioner

Ritande stjärnor

Vad kommer härnäst?

Hur - Mest populära artiklar

10 saker du inte visste att du kunde göra med Photoshop

Hur man skapar tillgängliga webbformulär

Skapa spöklika texturer med blandade media tekniker

Skapa en animerad ångtexteffekt

Hopp Start Reagera Native med Expo

Bygga appar som fungerar offline

10 Gyllene regler för responsiva SVGS

Skapa en upptagen stadscen i Illustrator

Kategorier