Comment créer un Token génératif fxhash avec fx(params) et p5.js

Les Tokens Génératifs (GT) offrent une nouvelle approche passionnante dans le monde de l’art numérique et des crypto-monnaies. Dans cet article, je vais te montrer comment créer et publier ton premier token génératif fxhash en utilisant un exemple de code qui montre comment intégrer p5.js pour créer des œuvres uniques. C’est parti !

Un son tout frais, enjoy 🙂 J’avais mis un clip de KAS:ST mais franchement voir des jeunes se défoncer j’en peux plus et ça me dérange, dommage, car la musique est bonne. Voici le remplaçant

Connaissances requises

Pour créer un GT sur fxhash, tu dois connaître les langages HTML, CSS et JavaScript. Les GT sont des documents Web qui génèrent des visuels ou des sons basés sur un nombre de 51 caractères encodés en base 58. C’est important de comprendre comment afficher des éléments graphiques dans un document Web pour utiliser la plateforme.

Utiliser le boilerplate

Le boilerplate est un ensemble de fichiers et de code prêts à l’emploi qui te permettent de démarrer rapidement ton projet de GT. Pour l’utiliser, il te suffit de télécharger les fichiers et de les utiliser comme base pour ton projet. Tu peux ensuite les modifier et les adapter à tes besoins.

npx degit fxhash/params-boilerplate your_project_name
cd your_project_name
npm i
npm start

À ce moment, tu vas être redirigé vers l’URL http://localhost:3300/?target=http%3A%2F%2Flocalhost%3A3301, je sais, c’est pas jojo, mais ça fonctionne !

Ajouter p5.js

Pour ajouter p5.js dans le projet, ce que j’ai trouvé de plus simple, c’est de récupérer le fichier p5.min.js sur le site de p5.js puis d’ajouter une ligne d’import dans le fichier projet/public/index.html, le boilerplate indique d’ailleurs que c’est un bon emplacement.

    <!-- if you need to import js scripts do it here -->
    <script src="./p5.min.js"></script>

Exemple de code

Voici un exemple qui va créer 1 ellipse colorée animée. Le code qui suit est à coller dans un nouveau fichier nommé sketch.js à côté du fichier index.js dans project/src

// project/src/sketch.js

let t = 0;
const radius = 100;

function setup($fx) {
  createCanvas(400, 400);
  noStroke();
}

function draw($fx) {
  background(255);
  noFill(); // évite d'avoir des cercles qui se recouvrent 

  // récupération des params $fx
  const color1 = $fx.getParam("color_id").arr.rgb
  const n1 = $fx.getParam("number_id")

  const circle1Color = color(...color1);
  const circle1Size = map(sin(t + PI / n1), -1, 1, 10, 150);

  const px = width / 4.0 + radius * cos(t);
  const py = width / 4.0 + radius * sin(t);

  strokeWeight(5);
  stroke(circle1Color);
  ellipse(width / 2, height / 2, py, circle1Size);

  t += 0.01
}

// on passe les params à runSketch via le $fx configuré dans index.js
const runSketch = ($fx) => {
  window.setup = () => setup($fx);
  window.draw = () => draw($fx);
}

export {
  runSketch
}

Dans le sketch p5.js, tu peux voir que j’ai utilisé 2 params qui sont déclarés au début de l’index.js du boilerplate : number_id et color_id

Enfin, dans le fichier index.js du boilerplate, tu as juste à ajouter 2 lignes à la fin :

// project/src/index.js

import {runSketch} from './sketch.js';
runSketch($fx);

On aurait pu tout mettre dans l’index, mais je trouve que le code est mieux organisé de cette façon et si le projet grossit, on évite d’avoir un seul énorme fichier index.js.

Maintenant, tu vas pouvoir jouer avec l’interface fournie par le boilerplate pour faire des réglages. C’est franchement super pratique.

Comparatif Midjourney

Code très court, mais résultat très court aussi… Je veux uniquement un cercle et il me fait un disque remplit de cercles et de rayons… J’ai pourtant formulé ma demande très simplement… J’en ai demandé trop peu. Midjourney est un maximaliste.

a graphic drawing of a circle --v 5

Il est parfois bien plus efficace de coder quelques lignes. En plus on a l’animation !

Publier ton token génératif

Une fois que tu as adapté et testé ton GT, il est temps de le publier sur fxhash. Pour cela, suis les étapes de la documentation pour synchroniser ton portefeuille Tezos avec fxhash, puis mint ton GT.

Conseils pour bien débuter

• Teste régulièrement ton GT pour t’assurer qu’il fonctionne correctement.
• Utilise des modules fxhash pour intégrer des fonctionnalités supplémentaires à ton GT.
• Fais attention à la complexité de ton GT, car les performances peuvent être affectées si ton GT est trop complexe ou prend trop de temps à charger.

En suivant ces étapes et en t’appuyant sur le boilerplate et l’exemple de code qui te montre comment intégrer p5, tu seras en mesure de créer et publier ton premier Token Génératif sur fxhash. N’oublie pas que la clé pour réussir est de bien comprendre les concepts et de pratiquer régulièrement. Bonne chance et amuse-toi bien avec ton GT !