Share
p5.js is een JavaScript-bibliotheek voor kunstenaars, ontwerpers en docenten, met een specifieke focus op de beeldende kunst. Het is een uiterst eenvoudige manier om interactieve kunstwerken, animaties en prototypen in de browser te maken.
Het is sterk geïnspireerd op de verwerkingstaal Processing, die zichzelf een "flexibel softwareschetsboek" noemt. De verwerking werd in 2001 gemaakt met als doel niet-programmeurs te leren coderen, maar sindsdien is het de taal van keuze geworden voor tienduizenden kunstenaars, ontwerpers en studenten.
p5.js heeft echter een iets ander doel voor ogen. p5 brengt de kracht en eenvoud van verwerking naar het web. Deze tutorial laat je zien hoe je je eerste p5 "schets" kunt maken en wat leuke dingen die je ermee kunt doen.
Omdat p5 is ontworpen voor internet, hebben we een webpagina nodig. Maak een nieuwe map op uw computer en maak een index.html bestand erin. We hebben hier niet veel nodig, alleen de standaard bits en bobs.
Mijn eerste schets van p5
Vervolgens hebben we de p5-bibliotheek zelf nodig, die we gemakkelijk kunnen vinden op de p5-downloadpagina. We hebben alleen de basisbibliotheek nodig, dus download gewoon de versie van een enkel bestand van p5.
Plaats het gedownloade bestand in dezelfde map als uw HTML-bestand. We kunnen het dan als volgt in onze HTML raadplegen:
Mijn eerste schets van p5
We hebben ook een JavaScript-bestand nodig voor onze schets. Een schets is Verwerken spreken voor de tekening of animatie die we maken met p5. Maak nog een bestand, opnieuw in dezelfde map, en bel het my-first-sketch.js. Hiernaar moet worden verwezen na de p5-bibliotheek, dus ons script kent alle methoden die door p5 worden geboden.
Dat is de opzet die er is! We zijn nu klaar om te beginnen met het maken van ons meesterwerk.
p5 geeft ons twee methoden die essentieel zijn bij het maken van een schets: opstelling() en trek(). Je kunt waarschijnlijk raden waarvoor ze allemaal zijn bedoeld, maar ze hebben een belangrijk verborgen verschil. Doe open my-first-sketch.js en voeg het volgende toe:
Accentsconagua
// Setup code functie-instelling () console.log ('Hallo vanuit setup!'); // Tekeningcodefunctie tekenen () console.log ('Hallo uit tekenen!'); Nu, hoewel we deze functies zojuist hebben gedefinieerd en niets anders hebben gedaan, omdat p5 verwachtte dat we dit zouden doen, wordt het automatisch uitgevoerd wanneer p5 de pagina laadt. Open je index.html in je favoriete browser en open de JavaScript-console. Dit is wat ik zie:
Zoals u kunt zien, werden beide functies automatisch aangeroepen, maar de opstelling() functie werd slechts één keer aangeroepen, terwijl trek() werd steeds opnieuw gebeld - 768 keer binnen enkele seconden! We zullen het belang hiervan een beetje later zien.
OK, om te beginnen met tekenen hebben we iets nodig dat alle kunstenaars nodig hebben: een canvas. Het enige dat we moeten doen is gebruik maken van p5's createCanvas () functie en geef het een breedte en hoogte als argumenten. Waar zouden we deze functie vanaf moeten noemen? opstelling() natuurlijk.
functie-instelling () // Maak een canvas 200px breed en 200px hoog createCanvas (200, 200);
Als u uw pagina vernieuwt, ziet u niets anders. Dit komt omdat het canvas standaard transparant is. Laten we het opfrissen met een beetje kleur. Wat dacht je van een leuk rood? Steek deze regel erin opstelling() ook.
achtergrond ( 'red');
p5 is slim genoeg om te weten of we een HTML-kleurnaam of een hex-waarde hebben gebruikt achtergrond ( '# FF0000'); is even geldig.
Laten we tekenen. We hebben een paar ingebouwde vormen tot onze beschikking. Laten we beginnen met een eenvoudige rechthoek. In onze tekenfunctie kunnen we het volgende schrijven. Onthoud dat alle coördinaten beginnen bij (0, 0), wat de linkerbovenhoek van het canvas is.
functie draw () rect (0, 0, 50, 50);
Als u uw pagina ververst, zou u dit moeten zien: een rechthoek die begint bij (0, 0) en is 50 px breed en 50 px lang (een vierkant).
Dit vierkant kan net zo gemakkelijk ingekleurd worden als onze achtergrond. Het enige wat we moeten doen is een vulkleur opgeven voor we tekenen de rechthoek. Laten we deze keer een hex gebruiken.
vullen ( '# CC00FF'); rect (0, 0, 50, 50);
Nu hebben we een paars vierkant. Niet echt een meesterwerk, maar we komen ergens. Hoe zit het met een andere vorm? Een cirkel, hoor ik je zeggen? Geen probleem.
// Teken een ovaal van 25 px vanaf de bovenkant en // 25 px vanaf de linkerkant van de rand van het canvas. // De ellips is 25 px hoog en 25 px breed, // het is een cirkel. ellips (25, 25, 25, 25);
Je zult zien dat onze cirkel niet alleen op onze rechthoek is getekend, maar ook op dezelfde kleur als de rechthoek.
Dit komt omdat de volgorde waarin we deze functies noemen, buitengewoon belangrijk is. Als we de rechthoek na de ellips hadden getekend, zouden we de cirkel helemaal niet zien zoals deze zou zijn overschilderd. Wat betreft de vulkleur van de cirkel, is deze gelijk aan het vierkant omdat elke vorm getekend na de vullen() functie wordt gebruikt, gebruikt die kleur. Als u de kleur van de cirkel wilt wijzigen, belt u de vulkleur opnieuw met een andere waarde.
vullen ( '# 66CC66'); ellips (25, 25, 25, 25);
We hebben nu dit:
Hmm, nog steeds niet zo spannend. Laten we kijken wat we kunnen doen. Onthoud nu dat de meerderheid van onze code hier is vervat in de trek() functie, en zoals we eerder zagen, wordt alles in de draw-functie steeds opnieuw gebeld. Dus in wezen worden ons vierkant en onze cirkel steeds opnieuw getekend bovenop het vierkant en de cirkel die werden getekend in de vorige call van de draw-functie.
Wat als we elke keer onze vormen op een andere plek zouden tekenen??
Om uw vormen op een andere plaats te tekenen, kunt u in de verleiding komen om hun coördinaatwaarden te wijzigen. Dit is perfect aanvaardbaar en een geweldige manier om volledige controle over uw tekening te hebben.
Er is ook een alternatief. We kunnen de offset van het hele canvas veranderen, wat betekent dat we de oorsprong, de coördinaten linksboven (0, 0) naar iets anders kunnen veranderen. Het resultaat hiervan is dat onze vormen getekend worden met deze offset. Als we zouden schrijven vertalen (10, 10); we zouden hiermee eindigen.
Merk op dat onze vormen nu 10 px vanaf de linkerkant en 10 px vanaf de top getekend zijn.
Dit heeft ons oorspronkelijke probleem van de vormen die herhaaldelijk over elkaar heen getrokken worden niet echt gerepareerd, maar wat als we de oorsprong van het canvas met elk zouden veranderen trek() bellen? De vormen zouden elke keer in een andere positie getekend worden. Maar welke positie? En hoe zouden we elke keer een andere vinden? trek() wordt genoemd? Gelukkig heeft p5 ons bedekt met de willekeurig() functie: een eenvoudige manier om een willekeurig getal te genereren. We zullen dit gebruiken om de offset van ons canvas willekeurig te veranderen.
functie draw () // Offset het canvas // random (0, width) retourneert een waarde tussen // 0 en de breedte van het canvas. // As doet willekeurig (0, hoogte) voor hoogte. transleren (willekeurig (0, breedte), willekeurig (0, hoogte)); // Bestaande code hier
Dit geeft ons een geanimeerde versie hiervan:
Whee! Misschien vindt u deze animatie een beetje snel. Dit komt omdat p5 onze vormen zo snel mogelijk aan het tekenen is trek() steeds opnieuw worden gebeld. Als u dit een beetje wilt vertragen, kunt u de framesnelheid wijzigen om de frequentie te verlagen trek() wordt genoemd. Bellen naar frame rate() in je setup-functie.
functie-instelling () createCanvas (200, 200); achtergrond ( 'red'); frameRate (5);
Dat is beter. Nogmaals, het is een beetje saai met het vierkant en de cirkel altijd op elkaar. Laten we onze vormen draaien om dingen interessanter te maken. Dus, hoe doen we dat? Yup, je raad het, p5 heeft ons alweer afgedekt. Eerst vertellen we p5 dat we willen roteren met graden in plaats van radialen, en dat we willekeurig willen roteren voordat we elke vorm tekenen.
angleMode (GRADEN); // gebruikt global DEGREES constant roteren (willekeurig (1, 360)); // draai naar random angle fill ('# CC00FF'); rect (0, 0, 50, 50); roteren (willekeurig (1, 360)); vullen ( '# 66CC66'); ellips (25, 25, 25, 25);We hebben een monster gemaakt.
Ik ben er vrij zeker van dat ik in 1991 een hemd had met hetzelfde patroon erop ...
Nee, mijn fout, er stonden een paar gele driehoekjes op. Laten we all-in gaan en wat toevoegen.
// Willekeurig gepositioneerde gele driehoek roteren (willekeurig (1, 360)); Vul (geel); // 3 paar driehoekige driehoeken (25, 0, 50, 50, 0, 50);
Heerlijk. Bad 90s shirt of moderne Jackson Pollock? Dat is aan jou. Kunst is in de ogen van de toeschouwer, zoals ze zeggen.
Ik hoop dat je in deze tutorial hebt gezien hoe gemakkelijk het is om in de browser te tekenen met p5.js. p5 heeft veel meer handige, handige methoden om ons te helpen vormen te tekenen, de invoer van de gebruiker te animeren en te verwerken. Als je meer wilt weten, ga je naar de p5-pagina of ga je naar de Envato Tuts + -cursus Interactive Art With p5.js.
Ter referentie, hier is de volledige bron voor onze p5-schets:
functie-instelling () createCanvas (200, 200); achtergrond ( 'red'); frameRate (5); functie draw () translate (random (0, width), random (0, height)); angleMode (GRADEN); roteren (willekeurig (1, 360)); vullen ( '# CC00FF'); rect (0, 0, 50, 50); roteren (willekeurig (1, 360)); vullen ( '# 66CC66'); ellips (25, 25, 25, 25); roteren (willekeurig (1, 360)); Vul (geel); driehoek (25, 0, 50, 50, 0, 50);
