DEV Community: Victor Quan Lam

NFT images generator with Javascript Nodejs (800,000 cryptopunks)

Victor Quan Lam — Sun, 05 Sep 2021 10:48:10 +0000

CryptoPunks is one of the most popular NFT projects out there. And now, they are selling for millions of dollars. Yeah I know! Shocking! There are only 10,000 uniquely punks. Each of them has a set of attributes which make them special and stand out from rest.

Cryptopunk Types and Attributes

Punk Types

Alien
Ape
Zombie
Female
Male

Attributes

There are approximately 89 attributes avail for each punk type.

Attribute Counts

Each punk can have none or up to 7 attributes at a time.

From the given materials, we can potentially create more than 800,000 cryptopunk nfts.

Let's put everything aside and write a little Javascript command-line app to generate a bunch of these punks. On top of that, we will get a chance to solve the "cartesian product of multiple arrays" challenge in Javascript.

Setting up

Please download all the trait-layers and punk images here.

Folder structure:

We will be using node-canvas package to draw image in this project. Please make sure that you follow the installation instruction if you run into problems. More helps can be found here.

npm install canvas

Add imports and config variables

const  fs = require("fs");

const { createCanvas, loadImage } = require("canvas");

const  console = require("console");

const  imageFormat = {

    width: 24,

    height: 24

};

// initialize canvas and context in 2d
const  canvas = createCanvas(imageFormat.width, imageFormat.height);

const  ctx = canvas.getContext("2d");

// some folder directories that we will use throughout the script
const  dir = {

    traitTypes  : `./layers/trait_types`,

    outputs: `./outputs`,

    background: `./layers/background`,

}

// we will update this total punks in the following steps.
let  totalOutputs = 0;

// set the order of layers that you want to print first
const  priorities = ['punks','top','beard'];

Refresh outputs function

Create a function to remove the outputs data for us. Then it recreates the outputs folder along with new metadata and punk folders inside.

const  recreateOutputsDir = () => {

    if (fs.existsSync(dir.outputs)) {

        fs.rmdirSync(dir.outputs, { recursive: true });

    }

    fs.mkdirSync(dir.outputs);

    fs.mkdirSync(`${dir.outputs}/metadata`);

    fs.mkdirSync(`${dir.outputs}/punks`);

};

Calculate all the possible outcomes

In this step, we will figure out how to generate combinations from multiple arrays of trait layers. Now let's get down to business and have some fun. Don't copy and paste the code yet.

There're many ways to implement this so-called simple function.

First is using the Reduce and FlatMap functions which were introduced in ECMAScript 2019. This is the shortest option and yet easiest to understand.

const cartesian = (...a) => a.reduce((a, b) => a.flatMap(d => b.map(e => [d, e].flat())));

Another common option is to use Recursion function

const cartesian = (arr) => {
  if (arr.length == 1) {
    return arr[0];
  } else {
    var result = [];
    var allCasesOfRest = cartesian (arr.slice(1)); // recur with the rest of array
    for (var i = 0; i < allCasesOfRest.length; i++) {
      for (var j = 0; j < arr[0].length; j++) {
        var childArray = [].concat(arr[0][j], allCasesOfRest[i])
        result.push(childArray);
      }
    }
    return result;
  }
}

Most of the options require to have an absurd amount of recursion, or heavily nested loops or to store the array of permutations in memory. It will get really messy when we run them agains hundreds of different trait layers. These will use up all of your device's memory and eventually crash your PC/laptop. I got my PC fried multiple times. So don't be me.

Instead of using recursion function or nested loops, we can create a function to calculate the total possible outcomes which is the product of all array's length.

var permsCount = arraysToCombine[0].length;
for(var i = 1; i < arraysToCombine.length; i++) {
    permsCount *= arraysToCombine[i].length;
}

Next, we will set the divisors value to solve the array size differ

for (var i = arraysToCombine.length - 1; i >= 0; i--) {
      divisors[i] = divisors[i + 1] ? divisors[i + 1] * arraysToCombine[i + 1].length : 1;
   }

Add another function to return a unique permutation between index '0' and 'numPerms - 1' by calculating the indices it needs to retrieve its characters from, based on 'n'

const getPermutation = (n, arraysToCombine) => {

    var  result = [],

    curArray;

    for (var  i = 0; i < arraysToCombine.length; i++) {

        curArray = arraysToCombine[i];

        result.push(curArray[Math.floor(n / divisors[i]) % curArray.length]);

    }

    return result;
}

Next we will call getPermutation (n) function using for loop

    for(var i = 0; i < numPerms; i++) {
        combinations.push(getPermutation(i, arraysToCombine));
    }

The complete script that we need.

const  allPossibleCases = (arraysToCombine) => {

    const  divisors = [];

    let  permsCount = 1;

    for (let  i = arraysToCombine.length - 1; i >= 0; i--) {

        divisors[i] = divisors[i + 1] ? divisors[i + 1] * arraysToCombine[i + 1].length : 1;

        permsCount *= (arraysToCombine[i].length || 1);

    }

    totalOutputs = permsCount;

    const  getCombination = (n, arrays, divisors) =>  arrays.reduce((acc, arr, i) => {

        acc.push(arr[Math.floor(n / divisors[i]) % arr.length]);

        return  acc;

    }, []);



    const  combinations = [];

    for (let  i = 0; i < permsCount; i++) {

        combinations.push(getCombination(i, arraysToCombine, divisors));

    }

    return  combinations;

};

According to this quick performance test, the last version completely outperforms the others. Looks promising to me!

Create draw image function

const  drawImage= async (traitTypes, background, index) => {

    // draw background

    const  backgroundIm = await  loadImage(`${dir.background}/${background}`);

    ctx.drawImage(backgroundIm,0,0,imageFormat.width,imageFormat.height);



    //'N/A': means that this punk doesn't have this trait type

    const  drawableTraits = traitTypes.filter(x=>  x.value !== 'N/A')

    // draw all the trait layers for this one punk

    for (let  index = 0; index < drawableTraits.length; index++) {

        const  val = drawableTraits[index];

        const  image = await  loadImage(`${dir.traitTypes}/${val.trait_type}/${val.value}`);

        ctx.drawImage(image,0,0,imageFormat.width,imageFormat.height);

    }

    console.log(`Progress: ${index}/ ${totalOutputs}`)

    // save metadata
    fs.writeFileSync(

        `${dir.outputs}/metadata/${index}.json`,

            JSON.stringify({

            name: `punk ${index}`,

            attributes: drawableTraits

        }),
        function(err){
            if(err) throw  err;
        })

        // save image as png file

        fs.writeFileSync(
            `${dir.outputs}/punks/${index}.png`,
            canvas.toBuffer("image/png")
        );

}

Create main function

const  main = async () => {

const  traitTypesDir = dir.traitTypes;

// register all the traits 

const  types = fs.readdirSync(traitTypesDir);

// set all prioritised layers which will be drawn first. for eg: punk type, hair and then hat. You can set these values in the priorities array in line 21
const  traitTypes = priorities.concat(types.filter(x=> !priorities.includes(x)))

                                .map(traitType  => ( 
                                    fs.readdirSync(`${traitTypesDir}/${traitType}/`)

                                .map(value=> { 
                                    return {trait_type: traitType, value: value}

                                    }).concat({trait_type: traitType, value: 'N/A'})
                                ));

// register all the backgrounds
const  backgrounds = fs.readdirSync(dir.background);

// trait type avail for each punk

const  combinations = allPossibleCases(traitTypes)

    for (var  n = 0; n < combinations.length; n++) {

        const  randomBackground = backgrounds[Math.floor(Math.random() * backgrounds.length)]

        await  drawImage(combinations[n] , randomBackground, n);
    }
};

Call outputs directory register and main function

(() => {

    recreateOutputsDir();

    main();

})();

Run index.js

Open cmd/powershell and run

node index.js

npm build

Ta-da. Let's the app run and generate all the nfts for us.

Resources

Source code: victorquanlam/cryptopunk-nft-generator)
Stackoverflow: Cartesian product of array values

Please drop a like if you like this post.

Why is chia-blockchain trending on Github?

Victor Quan Lam — Sun, 29 Aug 2021 18:22:10 +0000

Chia-coin (repo) is a python- based open-source project where "modern cryptocurrency is built from scratch, designed to be efficient, decentralized, and secure".

In contrast to Bitcoin or Ethereum, Chia coin are mined by the force of a processor or video cards, this new digital currency is mined on hard drives and SSDs.

What's space and time-proof?

While in PoW, the client should demonstrate the work he has done, in PoS, the stake is made, PoT related to Proof-of-Space suggests verification of free hard plate space. Proof of space and proof of time improve the network's security immensely.

The algorithms

Notwithstanding a few similitudes to Bitcoin, Chia's code is composed without any preparation and doesn't utilize the Bitcoin codebase.

To lessen the instability of the coin, Chia will utilize the essential hold made because of pre-cultivating. The engineers set the accompanying regions as their objectives: making an ideal blockchain for conveying applications, making the first traded on an open market cryptographic money near ETF, animating reception in partnerships and among end-clients.

Being one of the most trendy repo on github, there're plenty of issues are required to be resolved This may be a good opportunities for you to contribute to this "green" crypto project and gain some solid coding experience.

NFT images generator using Python Jupyter Notebook

Victor Quan Lam — Sun, 29 Aug 2021 17:16:56 +0000

Generate NFT images using python and Jupyter Notebook

Let develop a nft image generator which generates a series of unique images using a collection of layers.

Install Python
Install PIP Download PIP get-pip.py

curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py

python get-pip.py

Install Python Pillow

pip install pillow

Install Python display

pip install display

Install Jupyter Notebook

pip install jupyter

Set up developing folders similar to the following structure
Shift + right click => choose PowerShell
Run Jupyter in your generator folder

jupyter notebook

Choose New => Python 3 to create a new notebook
Import necessary packages.

from PIL import Image 
from IPython.display import display 
import random
import json

Inject all the shapes and set their weights

# Each image is made up a series of traits
# The weightings for each trait drive the rarity and add up to 100%

background = ["Blue", "Orange"] 
background_weights = [30, 70]

circle = ["Blue", "Orange"] 
circle_weights = [30, 70]

square = ["Blue","Orange"] 
square_weights = [30, 70]

# Dictionary variable for each trait. 
# Eech trait corresponds to its file name
# Add more shapes and colours as you wish

background_files = {
    "Blue": "blue",
    "Orange": "orange",
}

square_files = {
    "Blue": "blue-square",
    "Orange": "orange-square",     
}

circle_files = {
    "Blue": "blue-circle",
    "Orange": "orange-circle", 
}

Create a function to generate unique image combinations

TOTAL_IMAGES = 8 # Number of random unique images we want to generate ( 2 x 2 x 2 = 8)

all_images = [] 

def create_new_image():

    new_image = {} #

    # For each trait category, select a random trait based on the weightings 
    new_image ["Background"] = random.choices(background, background_weights)[0]
    new_image ["Circle"] = random.choices(circle, circle_weights)[0]
    new_image ["Square"] = random.choices(square, square_weights)[0]

    if new_image in all_images:
        return create_new_image()
    else:
        return new_image


# Generate the unique combinations based on trait weightings
for i in range(TOTAL_IMAGES): 

    new_trait_image = create_new_image()

    all_images.append(new_trait_image)

Return true if all images are unique

def all_images_unique(all_images):
    seen = list()
    return not any(i in seen or seen.append(i) for i in all_images)

print("Are all images unique?", all_images_unique(all_images))

Add token Id to each image

i = 0
for item in all_images:
    item["tokenId"] = i
    i = i + 1

Print all images

print(all_images)

Get traits count

background_count = {}
for item in background:
    background_count[item] = 0

circle_count = {}
for item in circle:
    circle_count[item] = 0

square_count = {}
for item in square:
    square_count[item] = 0

for image in all_images:
    background_count[image["Background"]] += 1
    circle_count[image["Circle"]] += 1
    square_count[image["Square"]] += 1

print(background_count)
print(circle_count)
print(square_count)

Generate Metadata for all Traits

METADATA_FILE_NAME = './metadata/all-traits.json'; 
with open(METADATA_FILE_NAME, 'w') as outfile:
    json.dump(all_images, outfile, indent=4)

Generate Images

for item in all_images:

    im1 = Image.open(f'./layers/backgrounds/{background_files[item["Background"]]}.jpg').convert('RGBA')
    im2 = Image.open(f'./layers/circles/{circle_files[item["Circle"]]}.png').convert('RGBA')
    im3 = Image.open(f'./layers/squares/{square_files[item["Square"]]}.png').convert('RGBA')

    #Create each composite
    com1 = Image.alpha_composite(im1, im2)
    com2 = Image.alpha_composite(com1, im3)

    #Convert to RGB
    rgb_im = com2.convert('RGB')
    file_name = str(item["tokenId"]) + ".png"
    rgb_im.save("./images/" + file_name)

Generate Metadata for each Image

f = open('./metadata/all-traits.json',) 
data = json.load(f)

IMAGES_BASE_URI = "ADD_IMAGES_BASE_URI_HERE"
PROJECT_NAME = "ADD_PROJECT_NAME_HERE"

def getAttribute(key, value):
    return {
        "trait_type": key,
        "value": value
    }
for i in data:
    token_id = i['tokenId']
    token = {
        "image": IMAGES_BASE_URI + str(token_id) + '.png',
        "tokenId": token_id,
        "name": PROJECT_NAME + ' ' + str(token_id),
        "attributes": []
    }
    token["attributes"].append(getAttribute("Background", i["Background"]))
    token["attributes"].append(getAttribute("Circle", i["Circle"]))
    token["attributes"].append(getAttribute("Square", i["Square"]))

    with open('./metadata/' + str(token_id), 'w') as outfile:
        json.dump(token, outfile, indent=4)
f.close()

It will output all the generated images to the /images folder, and the metadata to the /metadata folder. The filenames will refer to tokenIds.

This blog will show you how to upload your first nft to Opensea.

My latest blog which shows you how to make an nft generator using JAVASCRIPT

Step by Step Guide to NFTS creation and sale for beginners using OpenSea

Victor Quan Lam — Sat, 28 Aug 2021 07:10:41 +0000

https://opensea.io/

The first thing you may do is to pay for a "mint" platform (i.e. create) an NFT. You have to construct a digital wallet and buy any currency for this reason.

How to construct a digital wallet to purchase NFTs?
You have to put money into a digital wallet from which you can spend before you start.
OpenSea employs ether, a cryptocurrency that you will have to purchase. Consider it as an arcade. You walk in and want to play games. But you have to buy some tokens before you play the games. Here is the same principle, except the tokens are called ether and you are presumably starting small, with fractions of ether, instead of buying a lot of tokens.
All right, so back to the digital wallet. OpenSea proposes utilizing a Chrome browser plug-in known as MetaMask but supports many alternative digital wallets.
It took approximately 30 seconds to install the plug-in and enter a password. Now, let's do that.
Tap the Profile icon on the website upper right.
• Click on the "Get " button.
• Choose "Install MetaMask" for Chrome or your favourite compatible browser. This installs a plug-in for Chrome.
• Select "Get Started."
• Choose "Create Wallet."
• Select "No thanks" for feedback sharing.
• Create a password.
• Write down the secret sentence you are given. This is extremely crucial and your backup for accessing your account. Don't lose it. Don't lose it.
• Tap "Next" and confirm the confidential sentence.
• To connect your account to the digital wallet, click "Next."
• Click again on "Connect."
Okay, you have an OpenSea digital wallet now. You now have to acquire a certain ether that you can spend on NFTs.

How to buy ether
You may use a range of applications to purchase cryptocurrency. Coinbase is popular. Robinhood is like that.
Tap the symbol on the top right of Chrome at the end of your URL box.
• Click on the icon.
• Click on "Buy." If you have any in another account, click "Directly Deposit Ether."
• Click "Follow Wyre."
• Select the amount of ether you want to buy. Get used to these fees; when you buy something, there are more.
• Click on the "Next" button.
• Enter your payment and telephone number.
• Tap "Send."
• Enter your phone's payment authentication code.
Authorize your purchase by typing in your bank account a six-digit number for an outstanding Wyre transaction.

How to create and sell NFTs
You have some cool digital art, or you’re ready to sell.
• Go to any site and tap on the top right on the "Create" button.
• Create one or more collections— the latter for a collection, for instance, of images or cards that you have prepared.
• To upload a PNG, GIF, MP3 or another form of a file, select "Choose File." The maximum capacity is 30MB.
• Enter the price you want, or leave "place on sale." If it's ever sold. It seems sensible. It seems logical.
• Enter your NFT name and description.
• Set royalties. You will still be paid if it is sold on the secondary market. This is based on the present selling price.
• Choose "Connect and create a wallet."
• Connect your wallet.
• Pay the "Gas" cost for listing processing.
• To sign a sales order using your digital wallet, click "Start."
• Click "Sign".
That's it! It's listed now Offers will be displayed on the sales page. If the monies are ever sold, they will be transferred to my digital wallet. I may then use them to purchase more NFTs or cash in an app like Coinbase.

OpenSea employs NFTS creation and sale, a cryptocurrency that you will have to purchase. You must construct a digital wallet from which you can spend NFTs before you can access the platform. The best place to start is with a Chrome browser plug-in called MetaMask. What does it take to create and sell an online art collection? You will still be paid if it is sold on the secondary market, based on the price you paid for it in the primary market.

Software development for portable gadgets

Victor Quan Lam — Fri, 27 Aug 2021 10:25:10 +0000

A portable communication device is a pocket-sized gadget that a person carries with them. They usually have a touch-screen display or a small keyboard. The input and output of a personal digital assistant (PDA) are merged into a touchscreen device. Cellphones and PDAs are popular among folks who need the aid and conveniences of a traditional computer but cannot take one with them.
We want to think that the humanity has always been forward-thinking. However, for the majority of the twentieth century, innovation was a slow and steady process. It was the result of individual brilliance or think tanks. For the most part, clever people innovate, and the general public gradually adopted the concept. With the development of the computer, the mainstream's love affair with innovation began. It gained traction with the invention of the Internet.

Smart Gadgets:
A smart gadget is an electronic device that communicates with other networks or devices via wireless protocols such as Wi-Fi, Bluetooth, NFC, 3G, and so on. They have the ability to work autonomously as well as collaboratively. Modern technology has transformed previous technology and has had a significant impact on everyone's lives. In our daily lives, we use smart devices in a variety of ways. Smart key chains, smart bands, smart watches, smartphones, tablets, and phablets are some common examples of smart electronics.
It is also capable of artificial intelligence. Smart gadgets are known to function in a variety of ways in a given setting. They have many qualities and may be adapted to the computing environment, the human environment, and the physical world. A smartphone is one of the suggested gadgets that everyone should have in today's environment. Smartphone technology has radically altered the global landscape.

The Impact of Technology on Human:
The way humans connect with one another has been transformed by technology. Various forms of human communication, helped by technology, have been interwoven into people's life. This has an impact on how individuals and groups interact and communicate with one another. Technology has both positive and harmful effects on people in society.
How we can improve performance of Gadget with Software?

Cleaning Gadget:
Dirt accumulates on technological devices over time. Dirt is not only ugly, but it may also render gadgets inefficient and dangerous. For example, dust in a computer chassis can cause it to overheat. This causes fans to work faster to disperse heat, requiring more electricity. Most gadget makers provide detailed instructions on how to clean their products.

Deleting Unnecessary Files:
We wind up acquiring a large number of unneeded files on our storage devices over time. This has the disadvantage of making computing systems slower and files more jumbled. You can manually sort through files and delete those that are no longer needed. You can also use third-party software to sort files based on factors such as frequency of use or date of update. This will give you a good indication of which files you rarely use and can safely delete.

Scanning for Malware:
Despite our best efforts to keep systems safe, dangerous software occasionally finds its way into our computing devices. This demands regular scans to detect and remove viruses and malware. Most anti-virus and/or anti-malware products allow users to schedule complete scans at regular intervals. Even if you are confident that your system is secure, enable this setting.

Updating Software:
Because developers are always adding new features such as security and performance, the software we use in computers, cellphones, and other devices is incredibly dynamic. The quick evolution is advantageous in that it improves user experience and protects against malicious entities. This necessitates that you keep the software on your devices up to date.

Accelerometers in Smartphones:
The twenty-first century ushers in a new era of technological advancement. Many engineers and scientists' technological creations have benefitted the globe in important ways, such as smartphones, cameras, laptop computers, and many more electrical gadgets that are incredibly valuable to humans and are used in large quantities around the world. The accelerometer is made up of several separate elements that work in a variety of ways.
It is utilized not just in cellphones, but also in many other vital items including as planes, computers, iPhones, tablets, and televisions, all of which are basic human requirements in today's society. Accelerometers are also employed to guarantee that images are shown properly - portrait or landscape - depending on how the phone is held. Accelerometers are increasingly being employed as a form of user input, most notably in current games where tilting and rotating the handset can direct onscreen action. Not only do accelerometers have several applications in business and science that benefit society.

How to create a primary blockchain on BSC (Binance blockchain) step by step

Victor Quan Lam — Sun, 22 Aug 2021 01:13:47 +0000

The BEP20 coin is easier to start on the Binance Smart Chain than you would imagine. One of the most significant ways to learn more about cryptocurrency's inner workings is by starting your digital token. And the good news is: on the Binance Smart Chain, everyone may create their BEP20 coin.

You need to select a blockchain platform that is acceptable for your use cases before creating your crypto-currency. Look no farther than Binance Smart Chain if you're seeking a cheap cost, quick transaction speeds, and intelligent contract compatibility platform (BSC).
Binance Smart Chain is a concurrent chain developed mainly to handle smart contracts and develop decentralized apps (DApps).

Smart Contracts

Simply put, intelligent contracts are code running on a blockchain intended for specific applications or services.
For example, if you want to build a decentralized voting application, the voting logic on the blockchain would be a smart contract.
Ethereum, currently the largest innovative contract blockchain, is also cross-compatible with Binance Smart Chain. In contrast to Smart Chain, however, Ethereum has significantly higher transaction costs.

The BEP20 Token Standard

It is surprisingly straightforward to create a BSC token. These coins meet the BEP20 standard, which is comparable to the ERC20 standard. The token standard assures fundamental functions of the token such as transfer, balance, token ownership, etc.
You may view the BEP20 API here. Please note that BSC tokens may be traded for "ordinary" Binance Chain tokens comply with BEP2. In addition, each transaction that occurs on-chain with these tokens requires a fee paid in BNB. This charge compensates validators for network security.
Let's investigate how to produce the following tokens
Creation of a Token BEP20 token

Go to Create Token
Complete all your token information
Choose 'Token Create' and approve the transaction

The URL for stage one may be accessed by entering cointool.app/BnB/BSCCreateToken in the Address Bar in the Trust Wallet Dapp browser. Make sure you're on the upper right of the Smart Chain network.
You will need to give your token a name and a symbol for step two. You will also need to define your token's initial supply quantity and divide the number of decimal places in the token.

Check Creating Token Mark Settings

Additional checkbox options are given below.

Can be a Burn
This check determines if your tokens can be burnt to reduce the number of tokens.
Can be a Mint
The contrary is specified by minting, which determines whether or not new tokens can be generated to raise the original supply.
Can be Pause
This check determines if your token and any related operations may be paused and restarted at any time based on the results. Use this pause function in the event of software vulnerabilities or malicious attacks on the system. When pausing is turned on, the token's inventor, for example, will have the ability to pause or unpause. This central authority may not be appropriate for some use cases.
Blacklist
It's possible that accounts can also be banned if they behave in an unsavory manner. For some tokens, it may be best to disable this functionality. Allowing blacklists creates central authority, which may not be appropriate in some situations, similar to halting.
Create Token
As soon as you click 'Create Token,' you'll be sent to a screen that shows you the cost of the token. In the case of BNB, the price will be charged.
Once you authorize the transaction cost, the token will be produced for you.
A Custom BEP20 Token Can Be Added To Your TrustWallet
Once your token is created, how do you get it to show up in your Trust Wallet? Simple. Follow the steps outlined below to get started.
Select the symbol of the two sliders in the upper right corner of your wallet.
Choose 'Add Custom Token' at the bottom of the token list.
You may do this by setting the network to "Smart Chain."
Your smart contract address may be found just below the network settings. Enter it here.
Enter the token's Name, Symbol, and Decimal Divisions.
Whenever you go back to your wallet, your token will be there, ready to be seen!