Generative Art
Digital Art
Child
MARBLES (Part 2) – Exploring Interactive Features

MARBLES (Part 2) – Exploring Interactive Features

written by Leo Hu

23 Jun 202420 EDITIONS
1 TEZ

Concept

Concept of MARBLES
Concept of MARBLES

I believe that an art piece gains added value when it allows interaction between the viewers and the artwork itself. This interaction, which offers surprises and encourages exploration and fun, is central to the experience. In MARBLES, the concept originates from the unique characteristics of physical marbles — their shapes, features, and the random colors and patterns of their Vanes. Additionally, the 'rolling' nature of the marbles is a key aspect of the design; following these principles to enhance the overall engagement and enjoyment of the piece.

You may notice that the artwork, without the sphere of the outer glass, does not resemble real marbles at all. This is a result of artistic interpretation — emphasizing certain aspects while downplaying others to encourage viewers to fill in the missing details with their imagination!

Variations & Features

There are 4 distinct features (fxhash) / traits (OpenSea) classifications:

  1. Number of Vanes (2 to 5)
  2. Background Hue (30 to 360, in step of 30)
  3. Background Type (Light or Dark)
  4. Vanes Color Type (Color or Gray)
Background color
Background color
Variations
Variations

Most of the MARBLES have a light background, while some feature a dark one. A rare few showcase gray Vanes instead of colorful ones. Amongst the light background colors, there are 12 variations — the saturation and brightness remain constant, with each variation differing by 30 degrees in hue.

The number of Vanes is kept at maximum 5. Having more than 5 would make the artwork appear too cluttered, while fewer than 2 would not adequately highlight the characteristics of MARBLES.

To add an element of surprise, the minter would not be able to choose specific features they prefer. The minting process is random, and everyone will not know what they will be receiving until after minting is done.

Blend Mode

Blend mode
Blend mode

The ability to toggle between different blend modes is a special feature in the MARBLES series. The default blend mode is 'multiply' for light backgrounds and 'screen' for dark backgrounds. Using [b] on the keyboard allows viewers to observe color changes resulting from different blend modes. There are 11 blend modes to toggle through, each labeled at the bottom right corner. This feature also serves as a useful guide for artists interested in exploring the effects of various blend modes in p5.js.

Controls & Outputs

Animation controls
Animation controls

While the still image stands independently as an art piece, the added interactive function allows viewers to engage with the artwork by pressing keys on the keyboard.

Controls
Advanced Output

Open the artwork in another browser tab, start rotating the Vanes 360 degrees clockwise with [a] to observe how the artwork rotates. If you find a preferred angle, use [p] to pause. While in still mode, use [+] or [-] to rotate in small steps and refine to your preferred angle.

You can also modify the speed with [/] and [*], reverse the rotation with [r], and change the blending mode with [b], as illustrated in the previous section. Always use [a] to revert the artwork to its original mode.

Output resolution and output / file name
Output resolution and output / file name
Advanced output
Advanced output

Adjust the artwork resolution with [1] (lowest) to [9] (highest) while in still mode. Use [s] to save the artwork as a PNG file. To save the Vanes and background separately, use [x] to save each Vane as PNG (please allow multiple files download) and [z] to save the background as PNG.

Use [g] to save the animation as a GIF. Do not close the browser and let it run for 1 minute until 'Done. Downloading your gif!' appears at the top left corner.

MARBLES #1 in GIF animation
MARBLES #1 in GIF animation

project name project name project name

project name project name project name

stay ahead with our newsletter

receive news on exclusive drops, releases, product updates, and more

feedback