Inspiration

Over the past few months, we've observed fantastic artworks being produced and minted as Non-Fungible Tokens, otherwise known as NFTs. We experienced firsthand what it was like to be on the artist and developer side of things. It's very chaotic and has a steep learning curve.

We developed a passion for pushing NFT technology forward, and one way was through interactive artwork. Interactive artwork allows for a totally new way of experiencing art, and we saw there was a need to empower artists to create interactive NFTs. Decades from now, we envision NFTs will be in museums or hanging on walls with touch screens. Creating a platform for everyone, including non-programmers, to easily create interactive NFTs without diving deep into blockchain programming is vital for this to happen.

What it does

On Easel, users can create their interactive artwork as HTML, CSS, and JavaScript files, upload it as a Zip file, set a few settings, and immediately launch their project within seconds.

We took all of the pain points for existing interactive NFT platforms and other NFTs on the market and gave our best shot at filling the gaps with an ultra-streamlined user experience we think will shake up the NFT world.

Gas fees

There are ultra-high gas fees from the Ethereum network that many NFT projects suffer from, just for the sake of being on the Ethereum network. We have a different philosophy, and we have decided to build our platform on top of the Polygon network to reduce gas fees and potentially scale back to Ethereum once Ethereum 2.0 launches.

Launching a project on Ethereum would generally be $2000 USD at the current price, minting would be $200 in gas. These two actions reduced the cost to pennies.

There is an additional cost to Chainlink verified random function when minting, which would cost the users an additional $200 to mint a token on Ethereum. Using a Layer 2 solution like Polygon was a no-brainer for us because we want an accessible user experience.

Solidity development knowledge

Many projects nowadays want custom interactive functionality and multiple mints, requiring a developer to create a contract and launch their contract. Hiring and onboarding a developer to a project is costly and risky for artists who want to put their art there.

Easel is a freestanding platform. Figuring out how interactive artwork and multi-mint projects are made in Solidity is a few weeks of effort to get entirely right. We've done the work and made it easy for artists to start without hiring developers to create their vision.

Verifiable randomness

Verifiable randomness is something many creators want in their project, but it is too costly and challenging to implement.

Solutions for generative artwork like artblocks utilize a hashing algorithm that is not truly random. We implemented this and have it as an option for artists to use if they want it. Implementing and thoroughly testing this function is also weeks worth of effort that we figured out on behalf of the artists.

User experience

Many projects are not focused on the user experience and assume that users have Web3 knowledge and no educational aspects to them. This lack of knowledge leaves newcomers to the space lost.

Our goal is to make the workflow as easy as possible and provide the user with many opportunities to ask questions and get them answered. Currently, our demo showcased in this hackathon shows what the rest of the platform will be. Fast and easy.

Immutable assets

It's an unofficial standard nowadays for projects to store their artwork immutably. Currently, lots of projects utilize IPFS to upload their art. However, IPFS requires users to pin the files to be visible to the world. Services like Pinata exist to allow users to pay to have their project pinned, but this is only a temporary solution that incurs a cost each month.

Projects have recently been using arweave as a solution for perma-pinning with IPFS. Currently, we use Filecoin through NFT.Storage is better than just IPFS, but not as long-term a solution.

How we built it

There are a lot of aspects of our project which led to our final product. We first outlined what our minimum viable product needed to have:

  • Cheap
  • Interactive art capabilities
  • Chainlink VRF compatibility
  • Seamless immutable file storage
  • Artists should be able to add projects in one step

Cheap

We chose to use the Polygon network. As we mentioned, we reduced gas fees by a surprising amount by switching over. The process was straightforward because deploying on Polygon is the same process as deploying on Ethereum.

Interactive Art

Interactive NFTs can be rendered on sites like OpenSea or Zora by loading the code through an iFrame. More information on this can be found within OpenSea's Metadata Standards, specifically animation_url.

Platforms also support Base64 Encoded JSON as the metadata. Easel creates the Base64 encoded metadata with the animation_url set to the user's pinned IPFS URL, and that is how these marketplaces can render it.

In addition, we accompany the URL with query parameters that users can access through the user's script. One of these is the Chainlink VRF Number.

Chainlink VRF Compatibility

Once a user mints a token, we wanted Chainlink VRF to generate a verified random number for us. To do this seamlessly, we wanted the user's action to make the swap, rather than us pre-populating our Easel contract with the appropriate $LINK tokens.

To do the swap, we first set up a swap from $MATIC to $LINK using Polygon's QuickSwap, which is effectively a Uniswap fork. Then, we had to convert the $LINK into tokens appropriate for use with the Chainlink VRF by using Pegswap.

Finally, we called the Chainlink VRF and set up a callback to store our verified random number, utilized in our interactive artwork!

Immutable File Storage

We had to consider what our platform would support the file sizes, and we also investigated what other platforms like Foundation and Artblocks used.

We found NFT.Storage and saw we just needed to make a single API call to their platform to upload and store files immutably for a long time. This was straightforward to implement and afforded us a quick and clean user experience.

We also experimented with using Arweave as a perma-pinning solution. Ideally, in the future, we would like to transition over to this platform. Artists would have the option to incur an extra cost to store their art immutably forever. This was a stretch goal of ours during this hackathon. In an ideal scenario, we would like to make a single Blockchain transaction and have it pinned on Arweave, but no oracle service that allows for this functionality exists that we could find.

Artists Usability

We wanted the application to be as clean as possible. We stripped every aspect of NFT creation to the basics and decided what we could automate and what we couldn't. We knew that it was possible to create a project and launch it in a single transaction, so we designed our user experience around that.

Challenges we ran into

Interactive Art

Figuring out interactive art itself was a significant challenge. We had previous experience with similar projects on testnets, but we never had utilized Base64 encoding and took advantage of query parameters. This took a good deal of time to test and get right.

Chainlink VRF

Every step of the way was a struggle for getting the Chainlink VRF to work because documentation was scarce for our specific use case. We found out that to swap to the correct $LINK tokens; we had to make a QuickSwap path from $MATIC to $QUICK to $DAI to $LINK then to the other $LINK via PegSwap.

In addition, we wanted to make sure Chainlink was well tested. We forked the Polygon Mainnet through Hardhat's test suites and then tested the Chainlink VRF as far end to end as we could.

We plan to create a write-up for how we went about implementing the Chainlink VRF and testing with unit tests on the Polygon network so that everyone can learn from it.

Immutable File Storage

We were hunting for a way to store files immutably while still making it so the user could only do one transaction. NFT Storage turned out to be the perfect solution for enabling this user flow.

We considered how we might do this with Arweave since no service bridging Polygon and Arweave exists-- We would take in an extra cost from the user when they create their project, and on our backend, we would do the Arweave transaction. Ideally, we would like this service to be decentralized, but the current architecture would centralize this on our backend.

Accomplishments that we're proud of

Creating a complete end-to-end solution working on the mainnet is something we are very proud of. We worked hard to complete this by the end of the Chainlink Hackathon, and we managed to fulfill our goals.

We also are proud that we got the Chainlink VRF working. It took us many hours of tinkering to get everything right, and we were close to giving up.

Finally, we are proud that we created a cohesive solution to all of the pain points we listed above.

What we learned

Through this project, we learned about the pain points of artists and developers in the NFT place. While also learning about the potential of NFT technology, setting up Chainlink VRF, unit testing, end-to-end testing, Solidity coding, forking mainnets to run tests, immutable file storage solutions, and interactive NFTs.

What's next for Easel Studio

We have plans to build Easel Studio into a fully functioning NFT marketplace for interactive artwork. We have plans to introduce:

  • Secondary sales
  • User profiles
  • Payment splits
  • On-chain data capabilities through composable contracts
  • Composable interactive NFTs
  • Templates
  • Compatibility with many more Web3 technologies, including Unity or VR development.

Tech Breakdown

  • TypeScript + NextJS + React for the front end/backend
  • Solidity for the Easel smart contracts
  • TypeScript + Hardhat + Alchemy for unit testing with a Polygon Mainnet fork
  • Polygon for deploying project on
  • IPFS + Filecoin + NFT.Storage for hosting art assets
  • Moralis for seamless web3 functionality in our web application
  • Chainlink VRF to produce verified random numbers in our project
  • Google Cloud Platform + Google Cloud Run + Docker for hosting our web app
  • Google Container Registry to store docker images

Built With

Share this project:

Updates