Share
p5.js är ett JavaScript-bibliotek för artister, designers och lärare, med ett särskilt fokus på bildkonst. Det är ett extremt enkelt sätt att skapa interaktiva konstverk, animationer och prototyper i webbläsaren.
Det är starkt inspirerat av programmeringsspråket Processing, som refererar till sig själv som en "flexibel mjukvaru skissbok". Bearbetning skapades 2001 med syfte att undervisa icke-programmerare hur man kodar, men sedan dess har det blivit det språk som valts för tiotusentals konstnärer, designers och studenter.
p5.js har dock ett något annat syfte i åtanke. p5 ger kraft och enkelhet att bearbeta till webben. Denna handledning visar hur du skapar din första p5 "skiss" och några roliga saker du kan göra med det.
Eftersom p5 är utformad för webben, kommer vi att behöva en webbsida. Skapa en ny katalog på din dator och skapa en index.html filen inuti den. Vi behöver inte mycket här, bara standardbitarna och bobbarna.
Min första p5 skiss
Därefter behöver vi själva p5-biblioteket, vilket vi enkelt kan hämta från p5-hämtningssidan. Vi behöver bara det grundläggande biblioteket, så bara ladda ner den enkla filversionen av p5.
Lägg den nedladdade filen i samma katalog som din HTML-fil. Vi kan då hänvisa till det i vår HTML så här:
Min första p5 skiss
Vi behöver också en JavaScript-fil för vår skiss. En skiss är Behandling talar för teckningen eller animationen vi skapar med p5. Gör en annan fil igen i samma katalog och ring den my-första-sketch.js. Detta måste hänvisas till efter p5 biblioteket så vårt skript vet alla metoder som tillhandahålls av p5.
Det är all setup det finns! Vi är nu redo att börja skapa vårt mästerverk.
p5 ger oss två metoder som är nödvändiga när du skapar en skiss: inrätta() och dra(). Du kan noga gissa vad var och en är för, men de har en viktig dold skillnad. Öppna my-första-sketch.js och lägg till följande:
Accentsconagua
// Inställningskodsfunktionsuppsättning () console.log ('Hej från installation!'); // Ritningskodsfunktionsdrag () console.log ('Hej från rita!'); Nu trots att vi just definierat dessa funktioner och gjort inget annat, eftersom p5 väntade oss att göra det, kommer det automatiskt att utföra dem när vi laddar sidan. Öppna din index.html i din favoritwebbläsare och öppna JavaScript-konsolen. Här ser jag:
Som du kan se kallades båda funktionerna automatiskt, men inrätta() funktion kallades endast en gång, medan dra() kallades om och om igen-768 gånger inom några sekunder! Vi ses betydelsen av detta lite senare.
OK, för att börja ritningen, behöver vi något som alla artister behöver: en duk. Allt vi behöver göra är att använda p5s createCanvas () funktion och ge den en bredd och höjd som argument. Var ska vi kalla den här funktionen från? inrätta() självklart.
funktion setup () // Skapa en kanvas 200px bred och 200px lång createCanvas (200, 200);
Om du uppdaterar din sida ser du ingenting annorlunda. Detta beror på att duken är transparent som standard. Låt oss gräva upp det med lite färg. Vad sägs om en fin röd? Stick denna linje in inrätta() också.
bakgrund ( 'röd');
p5 är smart nog att veta om vi har använt ett HTML-färgnamn eller ett hex-värde, vilket betyder bakgrund ( '# FF0000'); är lika giltig.
Låt oss få ritning. Vi har några inbyggda former till vårt förfogande. Låt oss börja med en grundläggande rektangel. I vår teckningsfunktion kan vi skriva följande. Kom ihåg att alla koordinater börjar vid (0, 0), vilket är det övre vänstra hörnet av duken.
funktionsdrag () rekt (0, 0, 50, 50);
Om du uppdaterar din sida ska du se detta: en rektangel som börjar vid (0, 0) och är 50 px bred och 50 px lång (en kvadrat).
Denna torg kan färgas in så enkelt som vår bakgrund. Allt vi behöver göra är att ange en fyllfärg innan vi ritar rektangeln. Låt oss använda några hex den här gången.
Fyll (# CC00FF '); rekt (0, 0, 50, 50);
Nu har vi en lila torg. Inte precis ett mästerverk, men vi kommer någonstans. Vad sägs om en annan form? En cirkel hör jag dig? Inga problem.
// Rita en ellips som är 25px från toppen och // 25px från vänster om kanvasens kant. // ellipsen är 25px lång och 25p bred gör det // en cirkel. ellipsen (25, 25, 25, 25);
Du märker att vår cirkel inte bara har ritats ovanpå vår rektangel, men det är också samma färg som rektangeln.
Det beror på att den ordning i vilken vi kallar dessa funktioner är oerhört viktigt. Om vi hade ritat rektangeln efter ellipsen såg vi inte cirkeln alls som den skulle ha målats över. När det gäller cirkelens fyllfärg är den densamma som torget eftersom någon form som dras efter fylla() funktion kallas kommer att använda den färgen. För att ändra cirkelfärgen, ring bara fyllningsfärgen igen med ett annat värde.
Fyll (# 66CC66 '); ellipsen (25, 25, 25, 25);
Vi har nu följande:
Hmm, fortfarande inte så spännande. Låt oss se vad vi kan göra. Nu kom ihåg att majoriteten av vår kod här finns i dra() funktionen, och som vi såg tidigare, kallas allting i dragningsfunktionen om och om igen. Så väsentligen räknas vår kvadrat och cirkel om och om igen ovanpå torget och cirkeln som drogs i det föregående samtalet av teckningsfunktionen.
Vad händer om vi skulle dra våra former på en annan plats varje gång?
För att dra dina former på en annan plats kan du frestas att ändra sina koordinatvärden. Detta är helt acceptabelt och ett utmärkt sätt att ha fullständig kontroll över din ritning.
Det finns också ett alternativ. Vi kan ändra offset för hela duken, vilket betyder att vi kan ändra ursprung, de övre vänstra koordinaterna (0, 0) till något annat. Resultatet av detta är att våra former dras med denna kompensation. Om vi skulle skriva översätt (10, 10); vi skulle sluta med det här.
Observera att våra former nu ritas 10 px från vänster och 10 px från toppen.
Detta har inte riktigt fixat vårt ursprungliga problem med att formerna dras över varandra upprepade gånger, men vad händer om vi skulle ändra varans ursprung med varje dra() ring upp? Formerna skulle dras i en annan position varje gång. Men vilken ställning? Och hur skulle vi komma upp med en annan varje gång dra() kallas? Lyckligtvis har p5 oss täckt med slumpmässig() funktion-ett enkelt sätt att generera ett slumptal. Vi använder detta för att slumpmässigt ändra offset på vår duk.
funktionsteckning () // Förskjut kanvasen // slumpmässig (0, bredd) returnerar ett värde mellan // 0 och bredden på duken. // Liksom slumpmässigt (0, höjd) för höjd. översätt (slumpmässig (0, bredd), slumpmässig (0, höjd)); // Befintlig kod här
Detta ger oss en animerad version av detta:
Whee! Du kan hitta denna animering lite snabbt. Detta beror på att p5 ritar våra former så fort som möjligt med dra() kallas om och om igen. Om du vill sakta ner det här, kan du ändra bildhastigheten för att minska frekvensen i vilken dra() kallas. Ringa ett samtal till framerate () i din installationsfunktion.
funktion setup () createCanvas (200, 200); bakgrund ( 'röd'); framerate (5);
Det är bättre. Återigen är det lite tråkigt med torget och cirkeln ligger alltid på toppen av varandra. Låt oss försöka rotera våra former för att göra sakerna mer intressanta. Så, hur gör vi det? Yup, gissa det, p5 har vi täckt än en gång. Först berättar vi p5 vi vill rotera med grader istället för radianer, och att vi vill rotera slumpmässigt innan vi ritar varje form.
angleMode (grader); // använder globala GRÄNSER konstant rotera (slumpmässigt (1, 360)); // rotera till slumpvinkel fyllning ('# CC00FF'); rekt (0, 0, 50, 50); rotera (slumpmässigt (1, 360)); Fyll (# 66CC66 '); ellipsen (25, 25, 25, 25);Vi har skapat ett monster.
Jag är ganska säker på att jag hade en tröja tillbaka 1991 med samma mönster på den ...
Nej, mitt misstag, det hade några gula trekanter på den. Låt oss gå in och lägga till lite.
// Slumpmässig positionerad gul triangel rotera (slumpmässig (1, 360)); fylla ( 'gula'); // 3 par triangelpunkter triangel (25, 0, 50, 50, 0, 50);
Härlig. Bad 90s tröja eller dagens Jackson Pollock? Det är upp till dig. Konst är i ögat av den som ser, som de säger.
Jag hoppas att du har sett från den här handledningen hur lätt det är att börja skriva i webbläsaren med p5.js. p5 har många mer användbara, praktiska metoder för att hjälpa oss att rita former, animera och hantera användarinmatning. Om du är intresserad av att lära dig mer, besök p5-referenssidan eller kolla in min Envato Tuts + -kurs Interactive Art With p5.js.
För referens, här är den fullständiga källan till vår p5 skiss:
funktion setup () createCanvas (200, 200); bakgrund ( 'röd'); framerate (5); funktionsteckning () translate (slumpmässig (0, bredd), slumpmässig (0, höjd)); angleMode (grader); rotera (slumpmässigt (1, 360)); Fyll (# CC00FF '); rekt (0, 0, 50, 50); rotera (slumpmässigt (1, 360)); Fyll (# 66CC66 '); ellipsen (25, 25, 25, 25); rotera (slumpmässigt (1, 360)); fylla ( 'gula'); triangel (25, 0, 50, 50, 0, 50);
