A Fully Decentralized Artwork

Hey, how's it going guys? Welcome back to the channel. So, in today's video, we are going to make some art, but not any art. This type of art is some cool concept that I came up about a year ago. Now about a year ago and I know it's a year ago because if we look at the hard drive uh site I can see that the latest uploads was around about 2025 in February and March. However, what makes these artworks truly unique is that they would live for over 200 plus years on Aweave on a decentral storage. And not only that, each one of these artworks layers, for example, each one of these figures, the banana, uh this face, the word, all of these assets that you see in these artworks, they are uploaded individually onto Arweave as well and then represented and stitched together inside of one piece. If you click on the logo over there, you can actually see uh the JSON format and the assets that was used in that particular piece. Each asset living on its own link by itself like this face or we can have a look at the eye and as well as this half banana. Now, this is what makes it cool because these pieces become reusable as time goes on. The more and more artworks that I create, the more assets I upload to Arweave, living there for a very long time and being able to reuse them, constructing these HTML artworks at the end. All right, so now that you have a bit better understanding of the concept, or I hope you do, but don't worry if you don't, stick around. I'm going to make some art right now, and then I'm going to show you the entire process that I follow to achieve this end result. The first things first is that I need to create an artwork. So, I already have um something that I'm starting off with here. So, we have this figure and I just uh created uh the eyes. Now, as I'm creating this art piece, I'm not thinking about which layers I'm going to split out. I'm just going to build out the piece naturally. Um, it might not even look like this at the end because of positioning and how things will move, but I'm going to put down concepts of items and then I'll take it over to the HTML uh after uploading the assets and then go and position them there. I'm thinking that this scene we can maybe use some sort of umbrella perfectly shaped things. That's the whole point, right? Every every art artist has their own style, but I like things that's a bit imperfect. I'm not sure how big this umbrella needs to be, but let's give it at least a decent amount of size, I guess. I guess that's big enough. Very nice. Very nice indeed. Right. So, we've got this umbrella. And for now, I'm just going to have that as an element. And I think obviously with umbrellas, we need to tell some sort of story, right? So, I would I would kind of like it for there to be some sort of subject matter here at the top of the umbrella that this person is looking at. And then maybe we can have some rain. So, next I think we should work on the rain. Now the rain is interesting obviously. Um we can work with maybe one raindrop right and then just duplicate it. So let's get like the perfect perfect imperfect drop. So let's do that one. Let's do this one. We'll have maybe one more. There's three different ones. And we can give this some sort of color. I like yellow. Yellow contrasts really nice with blue. I'm simply going to copy these raindrops. Maybe we um rotate them or flip them. Just make them seem a bit more random. All right. So, now we've got that. I think what I'll do for now is let me also make a few drops that kind of looks a bit more unique. We maybe make some thin ones, some smaller ones over here. That looks that looks quite good. Now, something very cool with patterns that I've noticed before um as I've been creating a lot of shapes is that if you end up duplicating these shapes enough, like if you put that there for example, and you combine these layers and you duplicate them again, they kind of somehow fit pretty nicely um pretty nicely into one another. It's almost as if the shapes automatically start making space for each other by just duplicating the shapes. It's quite uh it's quite nice to to see when that happens. So, what I'm doing now is I am duplicating all these drops because I really want to cover the entire page basically with with drops because I was thinking I could either have one drop or just the entire page of drops. And that will also save us on the assets that we upload later on. So, there you go. There's our rain. All right. So, now we need some subject matter. So the plan here is to put the subject matter whatever it is on top of the umbrella. So let's just hide the rain just for one second so we can see what we are doing. Maybe we put earphones or headphones. I think that would kind of have a very nice symbolic meaning. I don't know. this person, this figure staring at the umbrella with headphones at the top, you know, wondering kind of what what are they missing out on with all the rain and the umbrella above them. I think I think that's pretty cool. So, I think that's what we will create. So, let's create a set of headphones. So, the first thing is we need a strap like so. And then I have to make it a different color because it needs to stand out. So a little bit orange like that. Now let's make the headphone ear sections. That I'm going to make that a tiny bit brighter. Now for the other side. So we're going to do the same. And from this side, this would be the inside of the headphones. So maybe what we could do is on the top have an extra circle and we can make this maybe a lot darker. And then we can go and duplicate it. Move it a little bit down just like so. and actually change this color of that shape tiny bit lighter again. So you see there's this rim that gives it some sort of perspective. Okay. And then the other inside of the ear, we can just uh do it like this. And then make it a tiny bit darker. Doesn't have to be perfect. It just needs to look like headphones. Okay. So, let's group that up. And we've got the headphones over there. Now, what do I need to do next? Well, we need to upload each one of these layers onto our drive. So, let's go and do that. I'm going to export them and let's upload these to the Dententral storage. So, on our drive, I have these folders where I've uploaded some CSS and some JavaScript as well. Believe I cover this in a video too. And in the assets folder, we've got all of the assets previously used. So, I'm just going to drag all of these in here and let's upload them, too. All right. So, the new assets have been uploaded. Well, they still need to sync. As you can see, there's the headphones. There's the figure looking up, but they have this yellow icon instead of this green icon. That means they are just busy processing or syncing on the network. And essentially we need them to fully sync because what we're going to use from them is if we click on the details of them we can see there is this uh data ID right the transaction ID now this transaction ID is basically where this image live right it is it's the position of this image on our so essentially when we build out the HTML which I'm going to do in a second you'll see me use uh this quite a when I am uh placing an image in the page. Maybe if we click on this one already, we should start seeing it. Not yet. So, we have to give it a bit of time for it to sync. It's been a minute. It's still yellow, but what I can see is if I click on the data transaction now, I can see the transaction there. It's still pending, but uh we have a transaction on the blockchain, which is pretty exciting in itself. If you think about how this artwork is coming into existence right now, it's pretty cool because it consists of these several pieces spread across the blockchain and then coming together into one piece that's also going to be uh on the blockchain itself. All right. Now that those artworks have uploaded and they are ready to use, I can now go to the project where I keep track of all the artworks that I create in this way. So, I've made myself this template HTML, which is an HTML file I've constructed that does a few interesting things. It pulls uh the data from those transaction ids to populate the images that we place in these divs right here at the bottom with this dataweave tag on it. So, I've got some JavaScript that's also living on Rweave. And the reason for that is I want everything to be persisted on chain even the JavaScript files. So this is a tiny template and then the template JSON is simply a reference to all the artworks that we use inside of the art piece. So I'm going to copy this and then this artwork's name will be called mind map. So let's make sure that this is exactly the same as our JSON. And then in the HTML itself, I reminded myself here to replace it. Let me just see did I Okay, so we can name this then mind map without the dash over here. Mind map like that is fine. Now for us to replace this um metadata. Remember earlier on in the video I showed you when you clicked on the logo that uh you can actually see the JSON. So we first have to later on upload the JSON in order to replace this. So we first have to go ahead and build out the art piece itself. You can see that I already have a CSS that's also living on our as well. So now what we're going to do is let's copy this and paste it four times. Four elements each one for our art piece. The headphones, rain, umbrella, and the figure looking up. Now all I need to do is go and grab those transaction IDs. We need to replace each one of these with the appropriate ID. Let me go and do that. Now that that is done, if I render the artwork, it should technically already uh show us how it looks like on a live server. It loads the assets. And as you can see, well, we got a pattern. And obviously, this is now um emulating one of the earlier artworks where it overlays everything and makes it into this pattern. So, we're going to now deconstruct this so that we can build out our artwork how we like it. All right. So, now we can build it out how we like. Now, the thing here is that we've got this div um that is basically wrapping all of these. And we want to get rid of this outer div cuz that's the div that is clipping everything. Right? We've got our canvas and then we've got this div which is basically the background. So, we can start off by giving the background a nice color. I actually liked the color that we had um in the in the Photoshop, which was this this light light yellowish gray. I think we should try and do that gray. We'll see how that turns out. Secondly, each one of these pieces I'm just going to turn into an art piece. This is just a CSS class that identifies each one of these as its own piece. All right, so do start seeing something on the page. We can start with the rain. I do have this handy style that I grab from the other artworks, which is basically giving it a 100% height and width and then also positioning it in the center of the screen. And then also having this slight uh infinite loop of floating animation, I think it just adds that tiny little bit of dynamicness. So here's the raindrops. So now you can see that they have this slight hovering animation which looks pretty cool and calm and serene. So let's go and work on the rest. All right. So for the umbrella firstly we're going to change this div into an image tag as this will just be a standalone image. And for the styles we'll give it a height of 50 and 50% width and then left 30% and bottom 20%. So there is the umbrella very nice and positioned. Now, I want to show you if I move the browser around, notice how it shrinks and scales to the window size, which is a nice artifact. And of course, this is HTML and CSS. We can do a lot with this, but it's working well, and I like the position where it's at. Now, I'm going to do the exact same to the figure as well as the headphones. Just add some styles and move them around. All right, I did a bit of moving around. So, I move the headphones right to the bottom cuz we want that to be at the very top of the layer. And this is what we have so far. Looking really good and really nicely positioned, right? The person's looking at the umbrella with the headphones there at the top. Now, the only issue is if we move this around, you can see that I like how everything is moving apart from how the headphones is moving away from the umbrella cuz we want it to stick there. So let's drop those two inside a div and make them stick to one another. All right. So now I have placed a box that contains the umbrella as well as the headphone. So the end result looks like this. And if we now move it around, you can see how that headphone is stuck basically to the umbrella. And that works to some degree. I believe if you go down like this, it does separate, but it adds to the story as well. So, um I like it. It's pretty cool. And there's the piece. Now, all that's left to do is let's fill in the mind map Jason. And here it is. This basically explains all the artworks that was used in this art piece. So, if we just go and click on the figure, we should see the figure pop up. This is a very nice reference and I know it's a bit tedious but eventually this becomes really useful when you want to do things like indexing. We then go ahead and upload that JSON onto our drive as well. So we can use that transaction ID when we click on the logo. And now that we have it, we can go and copy that ID. We bring it over to our new artwork. And there is where we're going to replace it. This is now so that if we go back to the actual artwork, we can simply go to the logo here at the bottom. Click on it and you can see the artworks that was used in the art piece. The last piece that we have left to do is to essentially upload the artwork itself. And now when we go to the final URL, you can see the artwork here. I'll leave it in the description. Maybe tell me what do you think about this method. would really appreciate your feedback. Apart from that, I hope you have an amazing weekend and I'll see you in the next video.