Explorez le code de création avec p5.js

Jan 31, 2026

Comment

[dix] [dix] [dix]

[dix]

Passer une journée avec Brendan Dawes à Générer London et découvrez comment les données sont dawesome . Dans cet atelier d'une journée, il expliquera comment prendre les données qui nous entourent tous les jours et la transforment en quelque chose de beau à l'aide de la transformation et de P5.J. Reserve maintenant !

[dix]

p5.js est une bibliothèque conçue pour apporter le pouvoir de Traitement au web. Il vise à introduire des artistes, des concepteurs et des éducateurs dans le monde de la programmation tout en offrant des outils polyvalents pour apporter des Devs et des ingénieurs dans les arts visuels.

[dix]

Plongons et créons notre premier «croquis». Notre objectif est de construire un outil de dessin qui transforme une image simple en un champ d'étoiles animées. Tout d'abord, nous définirons quelques variables globales et écrivez notre installer() fonction. P5's installer() est exécuté une fois, lorsque le croquis est chargé, c'est donc l'endroit idéal pour gérer l'initialisation.

Téléchargez les fichiers dont vous aurez besoin ici .

 var hintimage, skylage, étoiles = [];
Configuration de la fonction () {...}

À l'intérieur de notre installer Fonction, nous allons créer une toile et cacher le curseur de la souris afin que nous puissions tirer le nôtre. Par défaut, P5 ajoute un contour autour des formes - nous voulons désactiver les coups dans ce cas.

[dix]

 CreateCanvas (800 500);
nocursor ();
Nostroke ();

The background image – this night sky scene provides the setting for our animation — L'image de fond - cette scène de Sky Night fournit le cadre de notre animation

Ensuite, nous chargerons une paire d'images. On va servir de fond - dans ce cas, une scène du ciel nocturne. L'autre sera l'image "indice" - la conception noire et blanche que notre conception finale sera basée sur. L'idée est de mettre la plupart des étoiles sur les pixels noirs dans notre image d'indice, de recréer la conception dans notre scène de fond. Il serait facile de créer ces images avec des outils de texte et de dessin de P5, mais pour des raisons de brièveté, nous utiliserons des actifs statiques.

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

The hint image, which dictates the positioning of our stars — L'image d'ascension, qui dicte le positionnement de nos étoiles

La fonction de tirage

C'est tout pour installer() ! Une autre fonction clé est tirer() . Il s'appelle dans une boucle continue, ce qui est utile pour les animations et l'ajout d'éléments au fil du temps.

 Fonction Draw () {...}

Dans la fonction DRAIN, notre première tâche consiste à remplir la toile avec notre image d'arrière-plan. P5 n'efface pas automatiquement la toile entre tirer() Appels, nous devons donc faire ce cadre ou nous finirons par des effets d'accumulation étranges. Pour placer une image chargée sur la toile, utilisez le image() fonctionner et donner des coordonnées X et Y pour le positionnement.

 Image (Skyimage, 0, 0);

Ensuite, nous allons saisir l'emplacement actuel de la souris et le stockerons sous forme de P5.Vector en utilisant Creevector () . Cet objet est livré avec des fonctions pratiques pour faire face aux points dans l'espace, mais nous l'utilisons principalement comme un conteneur.

 Var position = Creevector (Mousex, Mousey);

En utilisant notre position de souris nouvellement stockée, nous pouvons dessiner notre curseur. Nous allons mettre la couleur de dessin avec remplir() En passant des valeurs RVB et utilisez ellipse() dessiner un cercle à l'emplacement de la souris.

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

[dix]

Nous voulons seulement dessiner de nouvelles étoiles pendant que la souris est pressée, alors nous allons vérifier P5 sourissed avant de procéder. Si la souris est en panne, nous devons calculer un bon endroit pour notre prochaine étoile pour vous retrouver. Nous ferons cela avec une fonction personnalisée appelée FindPixel () , que nous allons définir plus tard.

Discover the creative side of code with Brendan Dawes at Generate London — Découvrez le côté créatif du code avec Brendan Dawes à Generate London

Une fois que nous avons une cible, nous créerons une nouvelle instance d'un objet étoilé personnalisé (plus ci-dessous) et de la pousser à la fin de notre tableau STAR. Si nous finissons avec plus de 2 000 étoiles, nous commencerons à jeter les plus anciens.

 Si (Mousousispresse) {
var cible = FindPixel ();
var star = nouvelle étoile (position, cible);
stars.push (étoile);
Si (Stars.Length & GT; 2000) Stars.Shift ();
}

Enfin, nous allons faire boucler notre éventail d'étoiles et appelez mettre à jour() et tirer() sur chacun d'eux. Nous allons plonger dans ces méthodes plus tard.

 pour (var i = 0; i & lt; stars.length; i ++) {
étoiles [i] .update ();
étoiles [i] .Draw ();
}

Fonctions d'assistance

À présent installer() et tirer() sont en place, nous allons travailler sur les fonctions et objets de l'aide. Premièrement, nous allons définir une fonction qui trouve une position de repos pour chaque nouvelle étoile. Tout ce que nous devons faire est de vérifier des pixels aléatoires dans notre image d'indice, en utilisant obtenir() pour voir s'ils sont noirs ou blancs.

Nous ne devons réellement examiner que leur valeur rouge, car dans les deux cas, les valeurs RVB correspondent. Si nous trouvons un pixel non blanc, nous le retournerons parce que nous avons frappé notre conception. Sinon, nous allons simplement retourner le dernier pixel vérifié et servira d'étoile aléatoire.

 Fonction FindPixel () {
var x, y;
pour (var i = 0; i & lt; 15; i ++) {
x = sol (aléatoire (hintimage.width));
y = étage (aléatoire (hintimage.height));

Si (rouge (hintimage.get (x, y)) & lt; 255) pause;
}
Retour Creevector (x, y);
}

Dernier up est notre objet Star personnalisé. Mettez simplement, nous voulons un conteneur réutilisable qui stocke des informations sur chaque étoile et fournit également un moyen de les mettre à jour et de les dessiner. JavaScript ne fournit pas un moyen de créer des cours dans un sens traditionnel, mais nous pouvons obtenir le même résultat en définissant une fonction et en l'étendant pour nos propres besoins.

Chaque étoile compte quelques propriétés (position de départ, emplacement final et diamètre généré au hasard), que nous allons définir dans une «fonction de constructeur» appelée à chaque nouvelle étoile créée dans notre boucle de tirage.

 Star de la fonction (position, cible) {
cela.position = position;
ceci.target = cible;
ceci.diamètre = aléatoire (1, 5);
}

Ensuite, nous ajouterons un mettre à jour() Méthode d'étoile, qui utilisera P5.Vector lerp () calculer un nouvel emplacement entre les positions actuelles et cible d'une étoile. Dans ce cas, nous ouvrons quatre pour cent de la distance restante pour chaque tirage au sort qui nous donne effectivement un effet de repos.

Si nous voulions avoir envie de sortir, nous pourrions également simuler une certaine physique ici, mais pour l'instant, nous le garderons simples.

 star.pototype.update = fonction () {
ceci.position = p5.vector.lerp (
cela.Position,
cela.Target,
0,04
);
};

Dessin d'étoiles

Enfin, Star's tirer() La méthode attire en fait l'étoile à la toile. Encore une fois, nous utilisons remplir() et ellipse() , bien que cette fois, nous appelons remplir() avec une valeur en niveaux de gris et une valeur alpha pour la transparence.

Each frame, linear interpolation gives us a new point along the path between the current star position and its destination — Chaque image, une interpolation linéaire nous donne un nouveau point le long du chemin entre la position vedette actuelle et sa destination.

Pour donner aux étoiles un scintillement, la valeur alpha est déterminée à l'aide de P5 bruit() fonction. Cela renvoie la valeur de bruit Perlin pour les coordonnées spécifiées, ce qui signifie que vous obtenez une séquence fluide lisse et fluide de nombres aléatoires. Pour le troisième paramètre, nous passons une valeur à base de temps plutôt qu'une valeur spatiale, de sorte que le bruit animera au fil du temps.

 star.pototype.draw = fonction () {
var alpha = bruit (
cela.target.x,
cela.Target.y,
millis () / 1000.0
);

remplir (255, alpha * 255);

ellipse(
ceci.position.x, cela.position.y,
ceci.diamètre, this.diamètre
);
};

C'est pour notre premier croquis! Cliquez et faites glisser pour voir les nouvelles stars apparaître et se conformer à l'image d'ascension.

Et après?

À partir de là, vous pouvez ajouter des éléments HTML pour contrôler les variables à l'aide de l'add-on p5.dom ou même d'ajouter du son aux visuels en utilisant p5.sound .

Nous n'avons rayé que la surface de ce qui est possible avec P5.Js et avec de nouvelles fonctionnalités sur le chemin, il y a encore plus d'attendre avec impatience. S'amuser!

En savoir plus sur le côté créatif du codage à Générer London ! Brendan Dawes vous apprendra comment utiliser le traitement et le p5.js pour transformer des données en objets de beauté Dans son atelier ;il parlera aussi de la joie de travailler avec Papier, plastique et pixels . Réservez votre billet maintenant !

[dix] [dix]

[dix]

Explorez le code de création avec p5.js

La fonction de tirage

Fonctions d'assistance

Dessin d'étoiles

Et après?

Comment - Most Popular Articles

Le Guide essentiel pour désamorcer dans l'art

Utilisez Framer X pour créer des prototypes interactifs

Comment créer un loup-garou 3D dans un moteur irréel

Nivelez votre art VR

Créer une image interactive parallaxe

Ajouter un effet de glitch à votre site Web

Comment capturer la lumière avec des huiles

Faites un gif animé dans Photoshop

Catégories