### Concept

![Concept of MARBLES](ipfs://QmVSsfbeaidX5M8cUT1BCoXxHm2jgQZQdF1qqk7qpNg4Xa)

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](ipfs://QmbCyX1BBDAVRo2sL798o5mb4vi9ZzsKek794nVuiMgih9)

![Variations](ipfs://QmfYTE2Uy4bDzTmtEUSx6FGZA7HJ6xaZGANjnkivNaSxTp)

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](ipfs://QmdhEX1iDBHWK59PeEAdxa5F8SFTFJgeNh1yC6o5CkMyDx)

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](ipfs://QmdbEbwoLkDGnxJtht9cqN6r7Zc8uKahzkrH2T12rEi2Rm)

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

-   \[a]: start Animation / original mode
-   \[p] / \[space] / \[click]: start / Pause / resume
-   \[+]: increase rotation angle (in still mode)
-   \[-]: decrease rotation angle (in still mode)
-   \[\*]: increase speed (during animation)
-   \[/]: decrease speed (during animation)
-   \[r]: Reverse rotation (during animation)
-   \[b]: toggle Blend modes
-   \[1] to \[9]: select resolution
-   \[s]: Save artwork as PNG
-   \[g]: save animation as GIF (wait for 1-minute)

##### Advanced Output

-   \[x]: save each Vanes as PNG
-   \[z]: save background as PNG

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](ipfs://QmRFM6skEd2zrHhvZBfuRAYBibqnstsaaxbo717Lz383oh)

![Advanced output](ipfs://QmXHF5DzNkqsi9CeeqphWJNd1BXy6gHzbmY25zgjkzCC1H)

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](ipfs://QmZhKpTQyk7u6Gwrd9qkpZuGNpsi6FkUu21iTTCkKKjHBK)

***

::tezos-storage-pointer[]{contract="0x325b16C8fC3655382F120AE09523954dB89361Ad" path="token_metadata::1"}

::tezos-storage-pointer[]{contract="KT1BJC12dG17CVvPKJ1VYaNnaT5mzfnUTwXv" path="ledger::0x325b16C8fC3655382F120AE09523954dB89361Ad" data_spec="FX-GEN-DATA-002"}


Part 2 talks about the exploration of interactive digital art experiences by integrating dynamic designs with interactive features. MARBLES fosters exploration and creativity, enabling viewers to experiment with different blending effects, capture preferred views, and save their favorite creations. By merging art with interactive technology, MARBLES transforms digital art into an enjoyable platform for viewers to immerse themselves in dynamic visual exploration and experimentation.

Designer / Artist collecting Fine Art NFTs and creating Generative Art with p5.js. Excited to learn and connect with fellow Artists and Collectors! 🌈

MARBLES (Part 2) – Exploring Interactive Features

Written by

Editions

Share

Details

stay ahead with our newsletter