Ontdek creatieve code met P5.JS

Sep 11, 2025

Procedures

Doorbrengen met Brendan Dawes Bij Genereer Londen en ontdek hoe Gegevens zijn Dawesome In deze alledaagse workshop zal hij uitleggen hoe de gegevens om ons elke dag omgeeft en het in iets moois gebruiken met verwerking en p5.js. Boek nu

p5.js is een bibliotheek die is ontworpen om de kracht van te brengen Verwerken naar het web. Het is bedoeld om kunstenaars, ontwerpers en opvoeders aan de wereld van het programmeren te introduceren en tegelijkertijd veelzijdige gereedschappen aan te bieden om Devs en ingenieurs in de beeldende kunsten te brengen.

Laten we in duiken en onze eerste 'schets' maken. Ons doel is om een tekeningstool te bouwen dat een eenvoudige afbeelding transformeert in een veld van geanimeerde sterren. Ten eerste definiëren we een paar globale variabelen en schrijven we ons opstelling() functie. P5's opstelling() wordt eenmaal uitgevoerd, wanneer de schets is geladen, dus het is de ideale plek om initialisatie te verwerken.

Download de bestanden die je nodig hebt hier

 Var hintimage, skyimage, sterren = [];
Functie Setup () {...}

In onze opstelling Functie, we maken een canvas en verbergen de muiscursor, zodat we onze eigen kunnen tekenen. P5 voegt standaard een overzichtsrondvormen toe - we willen in dit geval slagen uitschakelen.

 CreateEcanvas (800.500);
Nocursor ();
nostroke ();

The background image – this night sky scene provides the setting for our animation — De achtergrondafbeelding - deze nachtelijke hemel scene biedt de instelling voor onze animatie

Vervolgens laden we een paar afbeeldingen. Men zal dienen als de achtergrond - in dit geval, een nachtelijke hemelscène. De andere is het beeld 'Hint' - het zwart-wit ontwerp Ons eindontwerp zal gebaseerd zijn op. Het idee is om de meeste sterren over zwarte pixels in onze hintafbeelding te plaatsen, om het ontwerp in onze achtergrondscène opnieuw te maken. Het is gemakkelijk om deze afbeeldingen te maken met de tekst- en tekengereedschappen van P5, maar omwille van de beknoptheid gebruiken we statische activa.

 HintImage = loadImage ("// bit.ly/hintImage");
skyimage = loadimage ("// bit.ly/skyimage") ;

The hint image, which dictates the positioning of our stars — De hintafbeelding, die de positionering van onze sterren dicteert

De tekenfunctie

Dat is het voor opstelling() Een andere belangrijke functie is trek() Het wordt in een continue lus genoemd, wat nuttig is voor animaties en elementen in de loop van de tijd toevoegen.

 Functie Draw () {...}

Binnen de trekfunctie is onze eerste taak om het canvas te vullen met onze achtergrondafbeelding. P5 maakt het canvas niet automatisch op trek() Oproepen, dus we moeten dit elk frame doen of we eindigen met een aantal vreemde accumulatie-effecten. Om een geladen beeld op het canvas te plaatsen, gebruikt u de beeld() Functie en geef x- en y-coördinaten voor positionering.

 Afbeelding (skyimage, 0, 0);

Vervolgens pakken we de huidige muislocatie en bewaren het als een P5.Vector met createvector () Dit object wordt geleverd met handige functies om te gaan met punten in de ruimte, maar we gebruiken het meestal gewoon als een container.

 Var-positie = creatiever (Mousex, mousey);

Met behulp van onze pas opgeslagen muisstand kunnen we onze cursor tekenen. We stellen de tekeningkleur in vullen() Door het doorgeven van RGB-waarden en gebruik Ovaal() om een cirkel op de locatie van de muis te tekenen.

 Vul (255, 192, 0);
ellips (positie.x, positie.y, 8, 8);

We willen alleen nieuwe sterren tekenen terwijl de muis wordt ingedrukt, dus we zullen P5's controleren muiskundig voordat u doorgaat. Als de muis is omlaag, moeten we een goede plaats berekenen voor onze volgende ster om te eindigen. We doen dat met een aangepaste functie genaamd FindPixel () , wat we later zullen definiëren.

Discover the creative side of code with Brendan Dawes at Generate London — Ontdek de creatieve kant van de code met Brendan Dawes bij Generate London

Zodra we een doelwit hebben, maken we een nieuw exemplaar van een aangepast sterobject (meer hieronder) en duwen deze op het einde van onze Star Array. Als we eindigen met meer dan 2.000 sterren, beginnen we de oudste af.

 if (mouseispressed) {
Var TARGET = FindPixel ();
var ster = nieuwe ster (positie, doel);
sterren.push (ster);
If (Stars.Length & GT; 2000) Stars.Shift ();
}

Eindelijk, zullen we door onze reeks sterren en bellen bijwerken() en trek() op elk van hen. We duiken later in deze methoden.

 Want (var i = 0; i & lt; sterren.lengte; i ++) {
sterren [i] .Update ();
sterren [i] .DRAW ();
}

Helperfuncties

Nu opstelling() en trek() zijn op hun plaats. We zullen op de helperfuncties en objecten werken. Ten eerste definiëren we een functie die een rustpositie voor elke nieuwe ster vindt. Alles wat we moeten doen is enkele willekeurige pixels in onze hintafbeelding bekijken, met krijgen() om te zien of ze zwart of wit zijn.

We hoeven eigenlijk alleen naar hun rode waarde te kijken, omdat in beide gevallen de RGB-waarden overeenkomen. Als we een niet-witte pixel vinden, zullen we het terugkeren omdat we ons ontwerp hebben geraakt. Zo niet, dan zullen we de laatste pixel retourneren en het zal dienen als een willekeurige ster.

 Functie FindPixel () {
var x, y;
voor (var i = 0; i & lt; 15; i ++) {
x = vloer (willekeurig (hintimage.width));
y = vloer (willekeurig (hintimage.hoogte));

if (rood (hintimage.get (x, y)) & lt; 255) pauze;

Return CreateVector (X, Y);
}

Als laatste is ons aangepaste sterobject. Simpel gezegd, we willen een herbruikbare container die informatie over elke ster opslaat, en biedt ook een middel om ze te updaten en te tekenen. JavaScript biedt geen manier om klassen in traditionele zin te creëren, maar we kunnen hetzelfde resultaat krijgen door een functie te definiëren en het uit te breiden voor onze eigen behoeften.

Elke ster heeft een paar eigenschappen (startpositie, eindlocatie en een willekeurig gegenereerde diameter), die we definiëren in een 'Constructor-functie' die wordt opgeroepen voor elke nieuwe ster die in onze Draw-lus is gemaakt.

 Functie Star (positie, doelwit) {
deze.positie = positie;
this.target = doelwit;
this.Diameter = willekeurig (1, 5);
}

Vervolgens voegen we een bijwerken() methode om te ster, die P5.Vectors zal gebruiken lerp () Om een nieuwe locatie te berekenen tussen de huidige en doelposities van een ster. In dit geval gaan we vier procent van de resterende afstand voor elke gelijkspel, die ons effectief een effectief effect geven.

Als we graag luisteren, konden we hier ook wat fysica simuleren, maar voor nu houden we het eenvoudig.

 STAR.PROTOTYPE.UPDATE = FUNCTION () {
this.position = p5.vector.lerp (
deze positie,
this.target,
0.04

};

Stars tekenen

Eindelijk ster trek() Methode tekent eigenlijk de ster naar het canvas. Nogmaals, we gebruiken vullen() en Ovaal() , hoewel we deze keer bellen vullen() met een grijswaardenwaarde en een alfa-waarde voor transparantie.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Elk frame, lineaire interpolatie geeft ons een nieuw punt langs het pad tussen de huidige Star-positie en zijn bestemming

Om de sterren een twinkeling te geven, wordt de alfa-waarde bepaald met behulp van P5's lawaai() functie. Dit retourneert de perlin-geluidswaarde voor de opgegeven coördinaten, wat betekent dat u een soepele, fluïdumsequentie van willekeurige nummers krijgt. Voor de derde parameter gaan we een tijdgebaseerde waarde in plaats van een ruimtelijke waarde, zodat het geluid in de loop van de tijd zal animeren.

 STAR.PROTOTYPE.DRAW = FUNCTION () {
Var Alpha = Ruis (
this.target.x,
this.target.y,
Millis () / 1000.0


vullen (255, alfa * 255);

Ovaal(
this.position.x, this.position.y,
this.Diameter, this.diameter

};

Dat is het voor onze eerste schets! Klik en sleep om nieuwe sterren te zien verschijnen en conformeer aan de hintafbeelding.

Wat is het volgende?

Vanaf hier voegt u een aantal HTML-elementen toe om variabelen te regelen met behulp van de P5-add-on of zelfs geluid toevoegen aan de visuals P5.Sound

We hebben alleen het oppervlak gekrast van wat mogelijk is met P5.JS, en met nieuwe functies onderweg, is er nog meer om naar uit te kijken. Veel plezier!

Meer informatie over de creatieve kant van codering bij Genereer Londen Brendan Dawes zal je leren om verwerking en p5.js te gebruiken om gegevens in dingen van schoonheid te veranderen In zijn werkplaats Hij zal ook praten over de vreugde om mee te werken Papier, plastic en pixels Boek nu uw ticket

Ontdek creatieve code met P5.JS

De tekenfunctie

Helperfuncties

Stars tekenen

Wat is het volgende?

Procedures - Meest populaire artikelen

Karakterbladen voor 3D-modellers: 15 toptips

Creëerperspectief in Adobe Illustrator

Hoe een teken te maken in VR

Verf een energetisch zeegezicht in oliën

Maak een meteoordouche in 3DS Max

Krijg de grip met de nat-in-natte schildertechniek

Hoe een fotorealistische lucht te maken

Toptips voor het schilderen van expressieve handen

Categorieën