Generativemasks example image.

'Generativemasks' is the interesting NFT art that creates a mask with different colors and patterns every reload.

The code of 'Generativemasks' was published as open-source. Anyone can make derivatives freely under the terms of the CC BY-NC-SA 3.0 license.

I was interested in it so I made a derivative.

👉 この記事は日本語でも読めます。


Then, I realized that there were some problems when I used the original code directly.

  • Canvas size affects the mask shape.
  • 'randomSeed()' influences the whole code.
  • etc.

So I wrote a JavaScript module. It generates a mask and it returns the result as 'p5.Graphics'. You can designate the mask size and the color palette to draw!

It settles a matter caused by using the original code directly, and you can make a derivative easily.

Let me show you this JavaScript module and the example application. It must be fun to make some derivatives with this!

 

What I made.

I wrote a code that freely makes 'Generativemasks' like below.

  • Size changeable.
  • Can assign original color palette(compatible with coolers URL style).
  • Set a background color or transparent.
  • Set a shadow effect or not.
  • Set a texture effect or not.

The name of this module is 'Garg'. 'Garg' stands for 'Generates A Resembling Generativemasks'.

'Garg' can generate much the same as Generativemasks shape and pattern. But it is not exactly the same that is because I modified the mask generation part of the original code.

They said 'You can use the original code if you want the original shape'.

 

The example application.

I made a web application called 'Generativemasks to Your Taste' to demonstrate the functions of 'Garg'. You can make your favorite size and color mask with it.

The appearance of web application called 'Generativemasks to Your Taste'.
'Generativemasks to Your Taste' on OpenProcessing.

The settings below will generate the mask much the same as the original Generativemasks.

  • Size = 1600
  • Color palette : none
  • Background color : on
  • Shadow : on
  • Texture : on

 

Yet another application.

Collaborate with the 'p5.pattern' made by Mr. SYM.

The 'p5.pattern' is a 'p5.js' pattern generate library made by Mr.SYM(@hyappy717). I tweaked the 'Garg' to draw the Generativemasks pattern with 'p5.pattern' and I made 'GargPattern'. This is the example web application using 'GargPattern'.

The appearance of web application called 'Generativemasks meets p5.pattern'.
'Generativemasks meets p5.pattern' on OpenProcessing.

 

This was just the reason to make the 'Garg' module.

It makes Generativemasks to the abstract art. I applied the Node-Garden technique in the article 'The node-garden technique : application section.' to the image of Generativemasks.

The appearance of web application called 'Generativemasks Abstractor'.
'Generativemasks Abstractor' on OpenProcessing.

You'll get an image like this with low-level abstraction.

The example result image of web application called 'Generativemasks Abstractor'.

 

How to use the 'Garg'.







It's an example p5.js code to draw a mask on the canvas. The mask id = 37, size = 480x480, shadow effect on, texture effect off, background-color off.


const gg = new Garg(true, false, false);
image(gg.createMask(37, 480), 0, 0);

The example mask image that was generated by 'Garg'.

 

Constructor

new Garg(s, t, b)

Parameters

s boolean : true Shdow effect on
t boolean : true Texture effect on
b boolean : true Background-color on, false Tranaparent background

 

Check the color palette

Method

chkRgbStrings(s)

Parameters

s String : Color palette

Description

It checks the syntax of the color palette. It returns true when passing the check, nor it returns false.

The color palette must be RGB, 'RRGGBB-RRGGBB-RRGGBB' form and it needs at least three colors. For your bonus, it is compatible with the 'coolers' URL form.
ex. https://coolors.co/000000-14213d-fca311-e5e5e5-ffffff

 

Create the mask

Method

createMask(i, s)

Parameters

i Number : Generativemasks ID to create. The original id is between 0 to 9999. 'Garg' accepts over 10000.
s Number : The size of the image to create. It returns a square image so it is s x s pixels image.

Description

It create mask and it returns as 'p5.Graphics'.

 

Apply color palette

Method

setPalette(p)

Parameters

p String : Color palette

Description

It applies the given color palette. To make the mask with this color palette, you need to run this method before 'createMask()'.

See 'chkRgbStrings()' description for the syntax of the color palette.

 

Apply random color palette

Method

setRandomPalette()

Parameters

none

Description

It applies the randomly chosen color palette from the palettes inside 'Garg'

 

The code of 'Garg'.

The code of 'Garg' is published on the OpenProcessing.

 

Acknowledgement.

I've had a fun time making 'Garg'. I would like to thank you all for your effort to publish the Generativemasks code and the originator of Generativemasks takawo shunsuke (@takawo).

It's my great pleasure to see you make something with 'Garg'. If you find bugs or something please let me know via Twitter.

To tell the truth, it's my first time making a JavaScript module, and also I wonder I can call it a 'module'.