OLTA 🛠 Interactive NFT's using a Subgraph - Terence Reilly

[Applause] [Music] hey everyone welcome uh we have terence riding here from ulta who's gonna give a session on um interactive arts sorry if you have any questions in the meantime feel free to pop them in the chat and we can take them over discord as well thanks cool okay go on okay right so um hi guys um hi everyone my name is uh tennis riley uh i'm a co-founder and ceo of ulta and i've got a background in 3d character animation and i love the great interactive force and please note just get ahead of this i'm not a developer and my co-founder i couldn't be here today and to help out so but he's going to be available in discord i have some really tech questions please direct them there today and we're going to be talking about dynamic um [Music] so during the workshop i'm going to do a brief demo of working of an example we've prepared it's on our mumbai ulti test now then we're going to jump through some of that code of that example and then you'll be able to grab that example actually on our github afterwards and we welcome you to create your own uh you know dynamic nfc experiments on our testnet website so the focus uh of today's workshop is all about code as creative media and by the end of this workshop we hope to inspire you to use your coding skills to uh in new creative ways so uh thanks thanks to earning global for inviting us through this and so our smart contracts are built on top of sort smart contracts and we extended them to with additional features to give creators who code more control with their type of art um so here's an example i'm going to be looking at truth today um this is on ultratestnet it's on a on mumbai and so i've got this is a project uh the idea of the this dynamic nft is to enable collectors to get different interactive controls uh depending on their editions depending on when they they purchase or mint that nft and during the dutch auction okay so um let me show you an example so here's the project there is four of these artwork submitters uh the first one and the second one are actually part emitted in the first drop time so if i just go into edition one there is you'll notice there's three interactive controls here uh where you can do some basic stuff this is by the way a 3gs scene then if i go over here to that project i look at edition number three i will see two controls okay okay and then and last we've not just done three i'll just refresh that if i go to this is a id token for you've got one control okay so additionally there's also one other thing where you've got uh like the properties of the aesthetic can change as well so for example there's more boxes on this one uh in this there's uh less boxes and this one there's uh even less okay so there's the working example it's on our mumbai and uh just wanted to start off with that so we will have this code up on a github uh for you to grab and explore and create to them again nfp so first of all i just wanted to introduce alter um you know there's a platform for nfc experiences it's for people who love to create interactive art interactive design music web games all that sort of stuff uh we're like if you think of google chrome experiments or like theo or a or immersive web as fts excuse me that's what we're all about you can check out by the way at arts.com for for a range of um entities we've already uh uh got minted we've got some motion detective motion detection and of these we've got web for your nfts got 3d interactive entities and lots of different types so but today this workshop we're going to talk about dynamic entities and to get started on that we have to first know a bit about the projects feature we've built and the subgraph and so what are projects on ulta and our new feature is called projects uh a project is a smart contract which basically manages editions dynamic nfts are end of these that can dynamically change based on events that happen on the blockchain we built an altered sub graph using the graph protocol for creators to represent blockchain events in their artworks so when the state of the blockchain changes they are all changes like i've shown and then using code is creative medium with the oldest subgraph creators can choose which events the entity query and how exactly it affects it so there's ultimate control and there's a few properties that we can use in the projects and so we can query data and fetch data back to their projects those are edition number commonly known as a token id uh seed number seed id and project and smart contract address for each project there's a smart contract so that's known as a project id the key takeaway is that these unique properties are added to the url so they can be rendered and viewed in a browser and by reading the url additions can become dynamic so let me show you a local artwork here so this is the example i showed you that you can always grab at the end and so as i mentioned before this project is a query this specific project queries the different price drops in uh in its dutch option so collectors get different interactive controls based on when they meet during that during this projects and touch octo so it's going to run through like briefly some of the files here and that makes up this example so we've got start off with we've got um we're importing 3gs which is a 3d interactive library and then we're uh we're running some sorry running the url search parameters from this helper.js file then we're querying and we're getting the project data uh from the graph uh through the queryjs file and and then here for example we've got some the logic of the subgraph logic basically so what we're really querying here is is the meat of it like creating the dutch auction drop the number of price drops and the remaining ones and okay now we've also got things so because the project id is not created until you actually create anything on ulta you we have got in this example for you uh some mock data we can bring in that's coming in from uh gs in here you've got lots of data you can uh pull into your main.js file for example we're bringing in data all around the dutch auction drop so in here for example there you can yeah then you can this is a example so i can query i can have three controls i bring in here and so on okay however there's also another thing where you can override all these like uh mock data where if there is a actual an auction running on ulta you can paste the project id address in here and test how your entity updates whether it's aesthetically or controls and you can test it there so in here we've got this is the sub graph url and in here this is a sort of a tool that you can create or use to create and query data on the blockchain and in this example we've got like we're creating the first 10 products on old subgraph and and things like the name the total mintex the creator and the id and stuff like that there's over here there's a range of um functions you can check check out and uh you can then bring all this data and like put it into like a sort of a queryjs file then you can like for example this is just getting the project id which has got everything in it and the touch option id as well so that's what we're wearing here in ngs mainly sorry then that's like the the most uh parts of uh briefly to show you the last thing to show you is then the actual app so for example anything in this folder is basically that what you're going to sip up and upload to ulta and in here the only thing that might be unique is a an app web manifest this is a way this is a file you can edit to include um like a screenshot image or a thumbnail or extra metadata if you like and then when you npm uh start or build this you then will bundle all your js into this file and then you can just zip that up yeah and then upload it to and to alter so basically that's the majority over and workshop and please again like direct your questions like the more technical questions to uh discord noted but like with this example um we're uh we we welcome you to create your own dynamic nft experiments on our test net and uh just to let you know that all the creative tools such as like upload let me show you um so in the beta ultra arc mumbai we have got upload create and then once you create you have a option touch auction access on our test now and if you do want to become a creative on alta from polygon mainnet you then have to submit an application because we're creating uh people there so please you're welcome to go wild on and using this example play with it explore and please push the boundaries of nfts because we'd like to see more interesting stuff out there and we we really think uh coders are creative uh so yeah thank you thanks terence for the great workshop and yeah we can follow up with the questions over this course okay brilliant thank you very much thanks have a good day yeah take care bye you