Spores 🛠 A Deep-Dive into Spores - Alec Resende

[Applause] [Music] hey everyone italic here and in this presentation i'm going to break down spores for you we're going to look into the tech behind it and how it powers remix culture and web3 so what is spores spores is a new way to remix culture as you experience it using a spore shown here you can listen to music and then remix them as you listen to it you can sort of like apply effects slow it down loop stuff like uh just make it your own and then after listening to it a new recording of your like session has produced a new remix and we preserved that on chain with all the historical information preserved as well but what exactly is this entire flow so pictured here is like how we imagine the flow it goes from the metaverse where there's like all this music beautiful art videos and there's like a subset of that that is just music so we take this music and put it into the sport player which is where the user sort of like remixes it and then at the end of the session a new recording is produced an mp3 and then we also then have the remixer open up their wallet and sign a message attesting that they recorded that mp3 that remix but then along with that we collect other provenance information like the collection address of the music nft that was used and the token id so basically from that you can get what was remix and who remixed it so if you get this content and provenance if you combine that and transmit that on chain you have all you need to basically say what are all the remixes for a certain music nft and who remixed them and can i listen to it yeah it's right there so the actual like transaction that we run is a it's a test net transaction it's basically very simple it just emits a new message that says a new remix has occurred it has this address of the remixer the original content is this collection address and token id and the mp3 is this address on ipfs this identifier so after all these events start like popping up we like index them and basically just show it on the front end and it lets you sort of like open up a song to remix it but then also see all the other remixes that sort of match up for that song and so um with all this like information stored on chain it actually becomes really easy to fairly mint a remix so we imagine uh when someone wants to mint a remix it would be very crucial to cut cut part of the proceeds to go to the originator like the originator of the content so using ox splits you could actually get to create a split between the remixer's address the creator of the original and even cut in like the owner of the original like the collector say there's a collector of the original music nft you might want to actually like cut them into so using ox splits we create a split between all these three people and that generates a new address where all funds could go to if a sale is made so using this the flow becomes mint a and mp3 on wherever place and then listed for sale using one of the zora marketplace modules and we want to use the zora marketplace modules because they have this awesome field called seller recipient funds which basically says if um the nfc is sold the the funds should actually go to this specific address and you could actually put an ox split address as that uh recipient for any sales so you can imagine if that's if that thing is if that nft is actually sold then the remixer the creator of the original and owner of the original will all get their um their like distributed proceeds but that sort of like describes like the the surrounding ecosystem around the sport player but for the rest of the presentation i want to get into like the actual mechanics of inside the nft itself so to begin i'm going to just say that spores nft spores are html nfts which is this new sort of like newish thing that is basically a an encapsulated website with no back end and it can't go down because it's hosted on decentralized storage and if they get displayed on marketplaces like zora as an embeddable iframe basically like a mini website within a larger parent website so what are they actually good for well real-time interactive nfts basically can only be an html nft they're really good for generative art as well because they actually can utilize powerful web apis like web audio for music and webgl for graphics and many other things just like the entire library like mpm library um so here are just a couple examples of my favorite html nfts kim aston dorf and made sabotage which is this amazing infinite web gl sort of uh shader thing um it's just it's just amazing it just goes on forever and um you can see here that these are like different tokens that just get updated and it's a different um it's a different thing each time because they're all generative um you have hepta by tarot parvian which is fx hash piece which is basically an infinite piece of music that goes through different like scales and stuff along with this cool graphic you should definitely check it out it's on the fx hash and then solvency by ezra miller um it's also just an infinite webgl just a exploration of what can what you can do with this new format so those are just like three examples that all sort of like tie into the fact that you deploy like the the piece of art once but then use the token ids to make them different for each token sort of like the generative aspect of it so you could sort of think of like html nfts that's just a little box with an input and the input just takes in token id and based off of that input it becomes different each time you could think of it uh sort of like a url that's really what it is it's a url pointing to the the base the base uri of the of the nft but then also like the token like the params the query params is where these inputs go and they're like read once on load and then based off of that it looks different each time or for each token but if you start to like think of stuff as just boxes with inputs you start to actually get into like modular synth territory which is why i think html entities are literal are basically just modular synths shown here are two amazing electron pieces of equipment they communicate via midi cables and then audio cables they go to a shared uh speaker and you hear it they like the protocol they listen they communicate with it is a midi and uh they can basically control each other and uh pass information back and forth so we actually think that html nfts are like that for for spores for instance we really uh sort of like go off this concept of inputs and outputs you could think of in the center spores is here as the html nft we pass the nft a a remix to a song to remix as a url along with stuff like start the the song go to the middle of it change the tempo you could basically sort of just pass control data and other stuff into it but then also it outputs data as well like for instance at the end of the song it outputs a scid and ipfs identifier of the new mp3 like in our front end like the parent website actually listens for a message emanating from the embed like the iframe and then that that is sort of like how we capture the the recording so it's actually something that um i would like to see more nft doing is actually sort of exploiting the fact that the whole iframe post message uh api you could basically pass um pass in nft like arbitrary data while it's actually playing not even just on load but like in the middle of uh of experience you could like pass like a a piece of data like like change everything or whatever um so this is actually how we so this is really how we do like the entire like front end for spores is we have like the sport player at the center and then we basically pass it in inputs for example we sort of like hook up the xor api and we like query it and we get like new songs to remix you can sort of think of it as like another module and like the modular synth the zora api is like outputting songs it goes into the uh our spores nft the user sort of like controls it and then it spits out a new recording at the end but you could actually extend that beyond just uh just like different apis you could actually have uh you could sort of chain nfts together in this way so say you had like another html nft that also like outputs data you could put you could like presumably like output that data into like another nft which then outputs it into another nft and sort of get this sort of like chain of uh of objects sort of like talking to each other and sort of working in tandem uh in an interesting way this is really how like um music devices work they all communicate in midi but you can have different brands making different uh different like devices but since they all talk the same protocol they all can sort of like communicate and control each other and sort of like add value to each other where they're not like competing and stuff so uh basically it starts to um we think that html nfts are are like that especially when you exploit the fact that they can pass data in um anyway at the end of this presentation i just want to get into sort of like the hackathon side of things so we created a new github repository that's open source and it basically lets you uh add a programmable sport to your site you can do a few things with it you can just go to the github here and um you'll see like how to set it up and like basic usage and then um also just like the app.js will just show you how to use what's like some examples of how to use it but like the main the main thing that i want to get into is uh we added the ability to sort of mix two songs together sort of like a dj mixer would so to add that to your site all you have to do is just add this line that's just like sport embed the the url to the main song and then a url to the alternate song and then with that it'll load the player and let you sort of like crossfade between the two so i think it would actually be really interesting if someone tried to use the zora api to find tracks that mix well together slash r and uh key the spore will just keep them in time and it'll make sure everything sort of works as long as they're in key but there's some other things that you could also do with this uh library is uh you could pass it um an image to sort of like skin the the spore so i i'd imagine it'd be cool to sort of to send cover art to be the skin of the spore again you can get that with the zor api or even or even just uh yeah any image really just make it your own and sort of uh like have fun with it and then finally one last thing that i think is really interesting is uh sending actual like samples into the spore player so the sport player basically lets you mix like two songs together like the main and the alternate but then you sort of have this list of samples that you can sort of uh cycle through and they're just basically play on top of the music that's playing so you can imagine you could have like drum breaks there that are just you could sort of just fade them in and have a sort of like have them play like on top of like the whole mix so um i think like with with all these things you could actually create like a pretty interesting uh compound format so i think it would be a cool thing to hack on is to create a json a json containing the main song an alternate song and a list of samples that work well together and store this json on ipfs so you basically have a new format that bundles two songs with loops that work with it and um sort of if you just plug that into your uh your like hack like your project it would just play that for people um and just really quick i just want to like for hacking purposes it's probably good to know what the different controls uh do so this is just like a general diagram of the spore player you know you have like sort of four sliders a center button and like an led button so this the those like additional loops we call juice samples are controlled with this slider like the top left the bottom right slider controls the cross crossfade between the main track and the alternate track basically at zero you just hear the main track at 100 but then at 100 all you hear is the alternate track with none of the main it's just like a dj crossfade between the two and then finally like the center button will sort of like go to the next juice sample again just like going back to this juice samples you could pass them into the player as a list like you could think of it as like break numb like drum break number a like letter a drum break two drum break three and then by clicking the center button it will go from one to like drum break one to drum break two etc but then also if you want to go back to like a previous sample like go back in that list of where you are just click the background it will basically like shift like go back one so uh so yeah i think with the spores kit and like a couple of these like initial ideas i think there's something there's something there that you could um that can really be hacked together and make something really cool but anyway thank you so much for hearing me out i really loved just like explaining all this and just like thinking about how to how to explain this but if if any of this have left you with some questions or just want to chat just feel free to dm me at my twitter or at sportsdown or our projects twitter page and yeah see ya you