Making interactive and absorbing web art NFTs that are owned, tracked, and traded via the blockchain

a.k.a Build the Shopify for NFTs, not another Amazon

A few weeks ago I partner with Noman to come up with an idea for NFThack. It’s mid-March 2021 and the obsession with NFTs is growing. We want a project that’s unique, creative, a bit out of the box. There’s so many financial things. It limits the imagination. We want to break out of that and show what else is possible. Noman introduced me to dfeatures, and I’m smitten by the idea of media dfeatures. That are interactive. What’s that mean? Nothing yet, let’s find out.

Confetti Vortex. Play with the prototype here.

TLDR; We make an interactive art trading card

It’s called Confetti Vortex. You can play with the prototype. It’s fun. It works on desktop or mobile web, so try both. Move your finger side to side to see this cool glitchy effect. I love making interactive art, so it’s important for me to create an enjoyable interaction. One that you can kinda get lost in with how pleasant it feels. Note: the web3 stuff won’t work since the prototype runs on a local blockchain (more details on that below).

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.

All around we see that most art NFTs are static. They’re images or video. This is dynamic.

We see that most NFTs exist in a marketplace among many others. On OpenSea, Foundation, Rarible, SuperRare — your art sits alongside everything else. Here, we emphasize the standalone art piece. And this is where the Amazon vs. Shopify metaphor comes into play. On Amazon, your products and your storefront is mixed up with everything else. Uniqueness is lost. With Shopify, you make your own storefront. You set up how it looks. And you don’t have everyone else’s competing products all around. For art, this quality is crucial. Otherwise things just feel so commodified and replaceable.

Check out the video. Note that I may have made it at 4am 😅 I got super into making this thing.

We scope down the project to be able to complete a compelling prototype by the deadline. What’s next? Future developments include the ability for viewers to submit bids after clicking the icon, and the owner being able to accept them. We’ve 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.

How we made this

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 from the same pattern. 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. Well, the link above is a gh-pages one, but there’s a version on IPFS. Because it is decentralized, IPFS is more reliable than uploading it to a server. With an NFT, that longevity is essential. 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.

Designing the web3 interactions and arriving at a dfeature

Design explorations to show the blockchain stuff

My favorite quality while prototyping is when there’s a realization along the way that brings the whole project next level. Like you think the project is about this, but it’s actually about thiiiiiis. That’s what happened here.

One problem to solve is how to include the blockchain information in the piece, specifically ownership and the ability to change ownership of the work. That’s the NFTness of this whole thing. We could add it right on the site, with some fields up at the top of the artwork. This happens with NFTs online right now. There’s the art, and all around it the price and who owns it, etc. We want the art to come first. Kind of like when you’re at a museum. The signage about the artwork is there and adds to the framing, but it’s not front and center.

After some explorations we arrive at a method to show these features after clicking an icon in the corner. It’s pretty simple, but there’s some deeper implications. The icon becomes sort of a web3 widget. It’s an object that includes the ability to own and trade, a building block that can be easily added to sites.

Now imagine including a line of js on your site, adding some styling, and ✨✨✨ there you have it. The site (or whatever div the widget is attached to) is ownable, sellable, tradable. I love the simplicity of this. And it gets back to that design quality that deeply inspires me, that of the dfeature. An open, remixable component you can easily include in your sites and apps.

See the project page on NFThack.