We've made an interactive NFT as an art trading card. From the art side we've made a piece that's aesthetically interesting and also kind of enjoyable to play on the browser via desktop or from your phone. Behind the scenes, the artwork itself is included in a blockchain contract to allow for ownership, and change of ownership. Viewers of the art piece can play with it and then click an icon in the corner to see who the owner is. The owner can click this icon to set an owner. The ownership aspect is an important part of the work of art, and is included in a way that prioritizes the art experience first while still signalling this info. Most art NFTs are static, and this one is dynamic. Most NFTs exist in a marketplace among many others. For this work, we instead emphasize the standalone art piece. The icon in the corner opens up the features available with the blockchain. Future developments include the ability for viewers to submit bids after clicking the icon, and the owner being able to accept them. We also have explored a variety of brush shapes to expand the work from a single card to a series. We're interested in seeing more decentralized, simple features that can be integrated in one's sites. Here, all sorts of web media can include this feature as a subtle icon which opens up the ability to own, change ownership, and submit bids for ownership.

Confetti Vortex Cards  showcase

How it's made

The interactive graphics part of the project was made with p5js, which was used to handle the touch/mouse interactions and canvas drawing. The shape of the brush and the background image are the same. The project is built in a way that we can update the shape to have a unique shape brush for each card. The brush draws in HSB color space varying the hue. The project is deployed on IPFS. We created a local blockchain using ganache on which we created the contract using solidity. The contract is created alongside the IPFS link to the art piece, and ownership is set to who created the contract. The contract allows the owner to change ownership. We use web3.js to display the owner, and if the owner is on the page, allow them to set ownership to someone else.

Technologies used