Welcome to TIL #3, I'm Nero One, and this is what I learnt.

Package the p5js project and upload it to Arweave

For the development and building of the project, I used parcel (parceljs.org).

However the path is not relative, so I need to manually update the index.html to use ./ in front of the script file import. This is needed, if not your project won't work well when we deploy it to Arweave through Bundlr.network.

Uploading a directory/webpage using Bundlr is kinda simple, just use this command.

bundlr upload-dir ./dist --index-file index.html -c matic -h http://node1.bundlr.network -w privateKey

Make sure you have installed @bundlr-network/client like this

npm i -g @bundlr-network/client

and have a balance, which you can top up using matic. this example is adding 1 Matic to the node.

bundlr fund 1000000000000000000 -h https://node1.bundlr.network -w privateKey -c matic

Once done you can proceed with the upload directory command I mentioned earlier. Also note that if you're using the private key method, make sure it is without the 0x at the front, or not it won't work.

For more information on Bundlr.network you guys could check it here, https://docs.bundlr.network/docs/CLI/Installation-Setup

So once done, I should have the folder running as a website on Arweave

https://arweave.net/YG52zcPMFQjsnZrCzvvtTniM_AGs0j0Rot0EMAPD5pk/?play=true

You can have a look and explore the playground :)

Puppeteer

So what I have now is a working website on Arweave which I can use in the metadata of the project. However, I need one more important thing, which is the image.

As I mentioned previously on TIL #2, I managed to convert the canvas to SVG. The next step is to encode all these SVGs into base64 version of it so that I could store it in the metadata.

So what I did is simply get through the page based on tokenID/seed, then get the SVG element and encode it to base64 URI. Sample code below

import puppeteer from "puppeteer";

const main = async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`http://localhost:1234?seed=0`, {
      waitUntil: "networkidle2",
  });
  const svg = await page.$eval("svg", (el) => el.outerHTML);
  const encodedURI = "data:image/svg+xml;base64," + btoa(svg);
  console.log(encodedURI)
  await browser.close();
}
main();

Then I made some for loops to loop through all the IDs and save all of it into multiple JSON files. I then uploaded the metadata directory using Bundlr.

For more info on puppeteer, you guys can check the link here: https://pptr.dev/

Deploy the project using Zora Drops

@ourZORA

Drops.

→ Upload your artworks
→ Set up your sale
→ Launch your drop

Works with songs, videos and visual art.

Now open to all.http://zora.co

With all the metadata done, Now comes the deployment part of the project, I'm using Zora Drops this time around, also to try out their features.

https://create.zora.co/create/drop

Since I'm using my own self-hosted metadata, I can simply use it here.

Note that they will be using /1 instead of /1.json, so I need to redo my JSON file to export without the extension instead.

Once all is done, I put my baseURI, and max supply and that's it.

The next few steps are pretty much more on the description, setting the price, launch time etc.

Drop is live!

Drop is live here, and you could mint it now for 0.005 (approx 6 dollars):
https://create.zora.co/collections/0x38cd7cd896b4540902d6b520713736605e2e2364

Here is the OpenSea collection if you want to check
https://opensea.io/collection/x-gen-by-n1

X-GEN

What is X-GEN?

My latest gen art release. I have focused on creating compositions with a strong geometric aesthetic, using triangles and sharp lines as key visual elements. The minimalistic use of rectangles floating together with technical lines adds a sense of precision and order to the artwork.

I believe that these pieces are visually striking and intellectually engaging, and they offer a fresh take on traditional art forms by exploring the intersection of art and technology. If you appreciate the sleek and modern aesthetic of generative art, I think you will find my collection truly captivating.

Thank you for reading! If you like this, please consider subscribing so that this will be emailed to you :)