Deconstructing homunculus.jp distortion with three.js #11

hey good morning everyone nice to be back let me know if everything is working because i'm not really sure maybe let's get started hey good morning everyone nice to see you guys i have this delay and i'm gonna use this delay to open something him is back all right so this time it's going to be something like this i guess it will not focus on anything me but you can make it i hope someday i will just pull prosecco during the stream on my laptop this is gonna be the end of the streams this is gonna be a epic epic end yay cheers guys nice to see you 3 p.m 8 p.m is a perfect time to drink i think any time is a perfect time to dream for a second so guys cheers for getting back to streaming it will not be every week but it's still coming back to the streams and let me know which country are you from i'm wondering what the geography is and let's get started tastes so good in the morning hey is to see everybody so many people came to the stream but everybody already forgot that i'm streaming hey hello marcos one of the biggest sponsors of my stream and thank you guys for supporting me during this whole time because it's been kind of hard time for me and i wasn't able to quite stream a lot during the last couple of months but still a lot of people supported me and i'm really grateful for that and we are coming back with a lot more content autumn and winter and let's get started so today today i will be doing the i will be doing what i will be doing though i will be creating the homunculus website it's one of my favorite studios ever to be honest and i think it's where it all started because one of the developers of the homunculus once created the tao tajima website and that's where i begin to fiddle into the webgl it was so mesmerizing so magical it was yuichiro ori i think he was working at the moment at that studio maybe still working sure and yeah so kind of making a tribute to this studio i want to decompile the new animation today it looks so cool right it's so cool and then if you scroll a little bit it just all gets back to the images and what's cool about that is it's actually kind of like a bug usually the people who develop make a mistake and they create this bug but right now this buck is like in the spotlight it's just the perfect perfect addition to the design oh hello to all the countries kazakhstan india vietnam lebanon germany oh france nipple really impal that's so cool hey guys and thank you for like all the great energy that's coming in this morning all right so let's get started right we spent like four minutes doing nothing oh thank you guys i'm flattered best fab gel t-shirt so let's try to create at least most of the animation on this website and then i'll probably explain you how to do the rest but fiji really fiji crazy guys okay so i'm gonna hold this one on and then i'm gonna get my basic vgs template and for everyone asking like where is it the stream number 42 where i just literally build it in 10 minutes and then it doesn't really matter what you're going to use because this template is just based on the basic 3gs template so you could as well use that one really not really that complicated i'm gonna go to it's been a long time i wonder if i something inappropriate in view in my laptop okay i'm gonna use parcel as always some reason without the source maps hello shankar all right my website not gonna look that cool first i'm gonna make it look cool so parcel is building everything and start it insertion failed and usually what yeah just working i don't know what parcel was trying to do trying to spoil the first stream of the of the what or the autumn morning guys it's all right we have this basic thing and let's get started i'm gonna also desktop i think i managed to switch to the visual studio code finally probably i'm going to align all the windows so we could see everything at all times i really can't stop drinking this prosecco now i mean i'm aligning windows right now but all i'm thinking of is when i finish this drink some prosecco yeah sure it gets pledged for a beer it depends on which city you are but recently it turned out that i i'm gonna have a beer in ecuador who'd expected that oh thank you guys some pirates a lot of people watching stream right now record all right let's get started let's focus so i have this basic template let's start with what's going to be like an end of the animation finish part final part of the animation let's just create a couple of uh elements by the way i really like this waterlike effect i'm not sure i can make it into one hour to create this one as well but i might show you how you to do that maybe we will do it in some of the future streams it's really it's really cool way to do and what i wanted to do i wanted to get some images let's just get images from the original website because they are so colorful cool all that just refresh i'm gonna get a couple of images from there i think threes images have a lot of images that's being used in webgl tao tajima it's one of the coolest websites ever built in webgl i mean it's an old because there are maybe some more technical and all sorts of stuff but overall by so like such a cool synergy between html css and webgl it's cool all right let's get some powerful images i like this one has a lot of colors and we will see pretty soon why we need those colors and maybe this one so form one two three here yeah and also if you're into my awards courses they also have this basic template because basically that's basically it all right so we have the images in the folder image there are three of them so let's just import them because parcel needs them imported to have the urls t1 probably make the phone bigger from image please back to coding [Music] this or else urls or else 22 this is just an area of all the urls and if we now cancel log them and just get some weird hash urls for each of the images and what d1 is not there the t1 is just one all right we're going to get to the console log we should see just this three euros yeah you see there uh how can you convert webgl to the react project well uh i don't know if there's any simple and easy answer to that you just have to learn probably react3 fiber first and then think in the react three fiber entities and then just recreate your projects fiber i don't think there's an easy way to convert though if it's just a number of boxes you would just need to you know change the code all right so we have the urls now let's uh let's convert them to textures i'm going to do these textures equals this urls map this is going to be the url i could probably get away with this so now these textures is actually three textures that i'm using put the console look at it what this yes right now i have the array of the textures those images have been converted to the textures right now probably i could just have done map right here yeah so we have those textures we just test really fast if we really have them so i'm going to create the uniform view texture on my team plate i'm gonna go through the template probably because this is the first stream for a long time probably some people are new so i'm gonna explain what the template really does i'm gonna use these textures let's say zero and then i'm gonna go to fragment shader and it's gonna be you texture and color equals texture e texture uv just sampling my texture twitter and you should see the image here and we do means everything is good to go so just the basic uh like going through the template this is a class and this class has a couple of methods like the resize add object and pretty much every single 3gs i don't know application has all those methods so you need the resize function to resize the canvas you need to well this is just an event and you need something to add the objects and then you need the request animation frame loop which gonna render everything so basically this template is not very different from all the rest we have the resize function where we just i don't need just set the sizing of all the canvas and stuff here we just event and then inside constructor we just initialize everything in running all the methods creating the renderer and then getting the width height and then there's actual rendering i don't think i need these i don't think these basically simplified a lot because i've been adding some stuff that i use once in a year then i'm updating the uniform here all right all right so far so good yeah still working even though i deleted a couple of things where could you go if it's not front end i mean you could do anything this is just life you could go open the restaurant write a book do anything just go and travel all your life go buy a bike to the long trip across all the planets uh maybe you need to specify your question a little bit yeah i hope the font is all right now somebody asked me to make it bigger yeah so let's get started i'm going to create a couple of images and i'm going to put it on the black background and go here like background basically anything looks better on the black background live hack for beautiful animations it's kind of hard to create something on the white background still possible but websites are using like background all right and i'm going to create a couple of those images actually because i i just created one in my like heads the objects here i'm creating the shader material some simple geometry and then i'm just adding those meshes so basically i could just change this plus part because the geometry is going to be the same for each of the objects the material is still the same what i could do i could just uh what's the aspect ratio of this image by the way 600 by 315 let's use google to get the actual aspect ratio it's going to be 1.9 so i'm going to just use 1.91 geometry and that means i would i will not have to at all with the aspect ratio of the uvs because it will wrap perfectly on this geometry you could see that now it's a little bit too big and i'm a little bit too easy so i'm going to just divide it into to get the image and then let's do this these textures texture and then create an area of my meshes i'm gonna do add mesh it's gonna be this geometry and i'll need to recreate material because if i were gonna change the texture uniform for the same material obviously it's gonna be changed across all the objects they share the material i need to do this and then material uniforms new texture t actually just d and then i'm gonna add a new mesh with the material m and geometry it's gonna be the same geometry and then this scene at mesh and this meshes uh mesh and then because you're gonna be rendered at the same spot i'm gonna use positioning so the width of each of the objects is roughly one i could just do the eye mode just use the eye now we get all those images one century so we kind of get the the objects that we have here of course not quite because they obviously tied to the html here because this is the html part and this is the webgl part this is a bit kind of complicated moment which i covered in the awards course so you need to calculate the positions you need to do the full screen canvas and sync it with the html scroll basically just that but there's a lot of small things to do there so i'm gonna do that i'm gonna just create a couple of meshes and what else so now we have those meshes how do we do this kind of animation like obviously we can't just do that with the shader for the each of the meshes and it's kind of mind blowing because you have an image and then you have this image flowing in kind of a pixel river or something like that and then it's kind of complicated and then it it's just so beautifully like going with each other how to do that it's actually quite simple but then also a bit complicated so to do that we will first need to use post processing and then we will have to not use post processing so yeah just like that so we're gonna do the free js post processing this is basically how you develop just looking for a 3gs example and then you just post documentation is too complicated i mean it's not complicated at all but it's just it's much easier to use the existing code yeah you could also you could also use the target renderer and then to the texture and that's basically what you will end up doing anyway but let's just start with the when i import everything into input errors and from the npm you'll need to change this part to three now we have all those things in place now i'll need to initialize the post processing part something like and that's the part where the post processing being initialized create a neat post and basically decide everything this everything should be because i will need that in future in other matters so um we initialize this composer we edit the simple pass to render the basic scene which we are doing right now and then uh yeah science will be here oh maybe cosigns you never know and then we just head into post-processing so i'm gonna just show you the basic basic theme so don't get me wrong this animation is quite easy and that's why i decided maybe it's good for the first stream and then we could get into the more complicated stuff so we've initialized everything actually we can do the rendering now we have the initialization part this browser renderer see if it's working for us examples examples yeah so basically this way you create the post processing just easy as that copied couple of lines of code let it render it and now instead of this image we get this and just so your number it was just like this colorful and now we get this so how do you create the custom transition there are a couple of ways you could you could just remember the snippets or something like that but then you could also just use an existing code if you go to this emblem and if you just see the network tab for javascript we have a couple of things to see here from the post processing i think the dot screen shader is the closest thing that you see it's just 70 lines of code let's just copy that sure this this kind of puzzle already there but i think it's shader brush but we're going to create the custom button and then i'm going to call this one custom passageway and then i could import this one from right here so instead of shader pass i'm going to get the custom pass and gonna be just it should be working good for now and i should actually see the same thing because this custom path is just a copy of the dot uh shader or whatever before that so i'm gonna comment this one rgb shift bus it also actually see this rgb shift with this like red and greenish small shadow on the image which adds this cyber factory look and then instead of adding that screen shader i'm going to add custom patch shape now we lost this rgb shift thing but we still have this 40 or maybe one [Music] more grease so basically we have the shape now if we dig deeper into what actually is this custom path this is just another material so basically we render our scene is an image and then we could change something in our scene we have some uniforms just as any material has and the vertex shader is just the basic shadow which does nothing which just i mean it does something but nothing fancy and then all the fancy parts are happening here so basically this is the actual image so i just replace it for a moment also change the syntax we should see something so basically we see the same scene even though we are rendering it with a composer just because i'm rendering the image twice rather than this 3d scene and then i'm just rendering an image and texture on the plane that's how i get it and [Music] it's post processing but it's just so just so cool how it actually done i mean how simple it is create that kind of distortion so let's go further with this one first of all let's see that it's it is actually the the like actually just the usual shader material just a full screen quad just output the vuv which is used to sample the texture on the screen i'm going to just see the the uvs obviously zero zero at the left bottom and one one at the right top yellow but but let's do this a bit more complicated way so first of all when you distort those like this kind of images obviously it's a uv distortion so if you destroy uv you get this kind of gooey look so basically if you just do fak two new uv equals v d and let's sample with the new uvs now and then uuv equals the vb plus let's say sine then multiplied with the vub x this is the two dimensional thing this is two dimensions and this is one dimensional pin so i'll need to wrap that one let's say search so now this new uv and also this one is quite big i mean the whole uv thing is just between zero and one below cpm and we need to multiply it with something small because otherwise i don't see anything but in this one we're going to see that this kind of distortions being distorted it's kind of look maybe close to this one but not quite so we need some other type of distortion here to get this thing going and there are numerous ways to do this but with this one i think we first start with [Music] distorting our values with the something being from center i mean because obviously it's kind of centered and this one is just just a repeated sign thing i'm not sure if what i'm saying makes any sense though but let's try to do that first of all and also obviously trying to follow the steps of the original website creation but trying to do them a bit of my way first of all i'm going to create the center it uv which is going to be just do this this way it's like vuv minus 0.5 but then there's also a way to do this i mean one so it's just the same basically multiplied by two and then we could output the length of this vector and it's going to be something like this because this is just the distance from the center when we are at the center it's zero that's why it's going to be black and when we get further away it's just being it's just just growing yeah yeah we're gonna try that now just in a second get in there [Music] so now what i want to do i want to distort something with this center thing and let's first distort this interesting i mean let's try to add this thing and then distort it first of all instead of adding it here move this further below and then distort this new uv we have the center uv and let's uh we have centered uv i'm distorting uv right now i'm going to stop distorting them this way i'm going to sort them the other way what way could i distort them if i just add something like uh okay i need to sample texture obviously below this one so if it's going to be just this check everything stopped working because obviously i messed up the order of right header error color undeclarated here here on this right now we're just rendering the image because i'm not changing the uvs now if i try to change uvs let's say i'm going to add this centerfit uv thing here just try what's going to happen i'm going to get something like this i mean the these gradients already i can kind of look like what we're gonna get in the end but still not quite right so let's let's distort these new uvs and see what's going to happen and how we're going to do that let me check uv we have the centered uv so i'm going to distort this centered uv with something and i think i only want to distort it in one of the axis so i i don't need distortion on two axis i don't need distortion on one of the x's i could as well just multiply this one with this way it kind of does this crazy thing but it doesn't do this like on on one of the sides does it left or right side all right all right so then i also need time i need time here because time should change time 0 and i need to update this time i have the material this effect one okay i don't need to update the scale anymore what now effect one is not defined yep one okay now it's good now i need to check just just check if time is working so basically i could do something of the i need to add synonym or sign at some point but i'm just waiting for the perfect time to do this so we have the new uv century ub sorting only one of those and we're just totally only white i think it's better to distort already in the same kind of gradients i'm going to just distort them now we have the centered uv and i have this length of the centered uv because like this whole center tv at this moment is just kind of linear but once we get to the length of the vector it's going to be circular because length of the vector is something circular so what i want to do i want to distort my shape with the length of the vector with the length of the these distorted uvs and that way i could get the circular kind of shapes and how to do this i mean we will have two states at some points of one of the states is going to be the default state of the animation and the other state is going to be that's this reverse of pixels right now i'm going to just do the distorted shape let's try to do it this way uv let's say x zero let's try that i mean y equals zero and then x equals the length of this centroid uv let's just do this stupid thing for a moment and show me anything let's let's start on the progress to see how this code actually distorts the shape i'm gonna create the progress i already have like the basic template here with the settings need to enable that one i will have the progress here and i will just add the progress here too also don't yet have the uniform time here so from progress now could change the progress press and now let's do this so this new uv i'm going to do it like this so new uv what x i'm going to just overwrite those i'm not going to use like this formula anymore and just simply overwrite those and this is going to be like the euv x and when the progress is zero i expect it to be the default and then when the progress is one so this is basically interpolation i could have used mix maybe i should use uax and length of the centered uvs so these are two float values and i'm going to interpolate them with the progress and the same goes for y but instead of length i'm going to just use 0 here it's going to be v v y and 0 and then i'm set i'm going to sample the texture with the new uv and i'm going to output the color so let's see by default we have this and then you could see that it's getting kind of circular but it's just it's just disappearing from the screen and the reason for that is that actually when we when i sample the bottom of the texture the texture is the whole screen and that means oh and that means that the bottom of the screen is actually black pixels so when you're simple black pixels you get black pixels all over the screen to fix that and this is actually one of the kind of unexpected creative things like you expect them i mean of course some of you are experienced and you expect them to be like okay we rendered this scene and then we just distort it with the with some fancy um math some sine cosine some shader but that's not what is happening actually they are distorting the other scene not this one but the other i think about that it's not that this texture they are distorting to get those freeware of course and let me show you why because when you distort this kind of scene and basically what i just did is the same almost the same distortion that they do but we're just losing all the pixels and this is because one of the takes really tiny small hints and actually spends like almost half an hour or maybe an hour figuring that out but what we basically need to do is move our meshes to the bottom to get the sampling right so we just move them to the bottom let's say probably minus one and let's also rotate them mesh rotation on we get something like this now let's see what's going to happen when i'm going to distort them see that well that's because of the math obviously because we we assembling the further we go on the progress the more like the bottom pixels we sample and you can actually pay attention pay close attention to the bottom like 10 pixels of each of the images so basically when we go to the end of the progress we get those like 5 10 pixels and if we just get closer like 0.85 we can get the bottom part of those pixels and this is getting us already closer to what we need to do but let's build another beautiful beautiful shape which we would use to make the exact distortion they used on the website good question about using the noise you could use a noise but if you you look at this one it's really i mean in noise you would have a lot of small spots big spots it's not gonna be like near here actually even though it might be not that obvious but it's actually very periodic and like it's a very repeatable thing so you could see them like the same the size of every like small black lake is kind of the same and this means it's not really a noise function just assign the cosine you could if could of course use noise function you might achieve roughly the same result it's going to be not looking that pleasant probably but maybe you could try maybe it's going to be better so now let's distort this centroid uv before we get i don't need this actually already i'm just using this formula now so if we distort the centered uv a little bit we're gonna get some different shape right now we're getting just the perfect circle which is fine but usually this one are called p like in a array marching on or in development if you get the centered kind of uv some reason they're called p i'm wondering why p maybe some some short short hand for or what i don't know what but or something so maybe someone knows give me that information so let's let's do the distortion there are actually a couple of distortions and even some of them are commended out in in the original code of the website but let's do that so first of all i'm going to just do b i'm going to be distorting that and let's output the p first of all it's just the black thing in the center should be black oh yeah just the black scenes and now we're gonna be adding something it should be probably something small and i remember correctly the coefficients with something of this sort so this is actually kind of uvs we're just using the short hand version of the uvs so we're going to use the uvs here and just to maybe flip it you know in in in three in gel itself you could just flip the number of coordinates basically the same as using the e y kx i think it's good to flip at this this particular case because this way you would get more more waves more sine cosine waves inside your shape or maybe some maybe just some different waves which are kind of closer to see what's going to happen now nothing because with the dot still y z yeah because it's y x i could see these shapes trying to wobble a little bit so we kind of get getting there and actually to create the uh the actual animation you would need a couple of those things with the different period like seven same thing and then with the different timing also so the timing should be it should be not like it should be not twice the size of the of the the speed like basically this time is the speed of the animation so this speed should not be the multiplier of the with the other speeds twice speaker it should be something weirdly bigger so the user wouldn't be able to see the the repeatable pattern in all of this and then maybe 3.7 and fix something and you could see this probably buttons just starting to appear here and this is all about actually getting the right numbers here get it in a better way there's also i think some some some of these parts should be bigger and you could actually change it as a coefficient and i think the guys also sometimes it's good to like move the sine or cosine functions so they don't start at the same moment and usually this is done with something and just put random numbers there or maybe you're trying to guess the numbers and something of this search now you start to get these and i think time is running too fast for me i'm gonna just slow this down a little bit or so we're starting to get something some this bubbly shape i actually like how this looks like like this i don't really remember the the exact coefficients that the guys in the home course used but doesn't really matter we're going to get something yeah using primes as a coefficient is a good way to do this but basically if you if you don't want to use like the big numbers because primes are getting big pretty fast like one three five seven you need something to be like kind of close so so you have more oscillations in here and i still don't have a lot of them somehow probably because the times are the same here and they're kind of repeatable something is repeatable here i should probably make it bigger yeah but because when the numbers are bigger we have more waves coming in and this means more interesting animation like this if numbers are bigger we're going to get something like this this all depends actually on the behavior that we should like to get here we don't really have a lot of waves and we could use the scale let's say scale is going to be 1 by default and then i'm going to multiply everything with the scale and then let's [Music] this scale i'm going to add the scale to the i'll need here as well and i need to declare the scale he already finished up the head scale okay i'm resetting the scale here basically you could get even this kind of it's actually kind of beautiful pattern right but it depends on the like size of the distortion that you want to get i think for us it's pretty much one and scale by default is zero right put a one in there finding the the one in there what's the default okay i set it in the that three so yeah i think this is enough distortion for us and now let's switch back to the distorting the image we're gonna get something cooler so instead of outputting the length of the vector i'm gonna output this and now let's try slowly to get there and you're actually getting like these kind of waves but that's not it because obviously we need to put the animation from like the default position of the meshes to like this whole thing and i think what the guys are doing i'm not quite by the way this is quite interesting change the distortion just get this basically we're just looking at a small part of this whole distortion field with the sign because it's pretty amazing what just the simple sign and cosine could do without any noise and it looks like a noise right but it's just a bunch of trigonometry functions all right next next let's just do let's just add the animation of the meshes as well so when we animate the meshes just the basic one you guys are doing it differently i'm going to show you in a second how but just do that for now we have the meshes and the position of the meshes is what like this we only change actually the y and the z so what i could do here i could do this and then index and then m y equals minus basically when the progress goes to one the meshes should move to the bottom and what happened and we're not gonna we don't need this anymore because we're gonna set them in the request animation frame loop anyway and this rotation as well of course this could be done with the animation library so basically when the progress happens you could see that meshes have been rotated and moved to the bottom and eventually you will just get the whole screen with those pixel reverse and that's just it i mean this is usually a bug like when you have a bug in your uvs usually what's happening is that you lose all the pixel information you get just the tiny portion of the pixel and information and it's just this so we get only the bottom pixels because we're getting the basic zero point on the uv axis is meaning the bottom line of pixels the first pixel on the screen on the bottom line and that's why we need to move shapes to the bottom so we by sampling this bottom line of the pixels we just can move it through the reverse and stuff yeah so what else could be done here i mean it's fairly easy but yeah thanks guys for catching up all right what else could be done here what else there are a couple of things to consider as well first of all we have these waves how they are done they are done actually with another distortion texture so we are rendering first the scene and the scene just so you understand this scene looks like let's see how it looks this is how it looks like see this texture just a bunch of images at the bottom of the screen and that's why they are distorting this way and also put those images with a random rotation pattern so so that when we distort all the images we get the um get the random parts of random images that we we see on the screen so just random parts of the textures so they're basically using this one even though like once we scroll we actually get the images right in place maybe they even use a separate texture for that but no i don't think so because they need this smooth animation from the list of images to this basically river of images so i think while we animate we actually move those images right in place and also what i wanted to try yeah and basically this one texture is for original kind of texture to distort and then they use the other texture which couldn't be seen here or it i think it could be seen like this one for the waves so on every request animation frame loop we're actually creating a shape with an image they have like 50 shapes of those with the same texture and the texture is the texture is network image the texture is brush texture is brush and if you look at the texture it's just some kind of waves it's it's transparent engine but you open up photoshop like this so creating those shapes and animating the scale of those shapes and they are rendering this whole thing to the other separate texture and then this separate texture is being used as a distortion for this texture and that's why we get those waves actually every single one of those waves is like honest wave i mean because the the mesh is being created and scaled so this is actually like a like an actual wave and this looks like a wave right it's like away from the growing stone into the lake or something like that so this how they do this you could see this in this separate texture this one or two waves here are being scaled at the moment and this is how it's being created you can also see how every mesh has been rendered every render call here this is a spectre.js extension if anyone is wondering yeah it's spector gs best debugging extension for the webgl website all right all right we got there it's actually fairly simple animation but with a couple of gotchas right so this this was the first gaucho that we actually need to move meshes to the center by the way i think it could be avoided if we just instead of zero put here 0.5 and we're going to sample just the middle of the screen but we need to make sure that we have some pixels some color pixels in the center of the screen this way this way i'm not going to move it and i think the behavior we're going to change a little bit so it's going to just grow from the center instead of like crawling from the bottom or something like this so right now this is again just the texture and you could distort this texture with anything and even what is more like easier you could distort not the texture but just the uvs because we are being uh we are just sampling the texture in the end we are just assembling the texture with those distorted uvs just add something to those uvs again to those new uv we're gonna just distort this sampling and what i also wanted to try just recently aria mina released a new theater.js library i'm gonna just maybe try to try to get the correct easing behavior for this one i think it's also glitching because we have pixels touching the the yeah we had this kind of kind of a small glitch because the pixels of the images were touching the left and right border and that's why we got those colored pixels somewhere in the middle of the animation like this this is obviously a glitch it shouldn't be like that but that's only because we have the images touching the sides of the screen all right all right what i wanted to show you maybe just a couple of minutes to try theatre gs for this animation and yeah let's wrap it up i think this i just love this library and it's been just recently released i'm gonna get this started i'm looking forward to replace all the gui controls like these controls that i have in my in my template with the just theater gs because it's much more it's just better i'm going to get on the dependency and i'm going to explain what 30.js does maybe in the future streams we're going to use it a bit more so we need to do the studio initialize then then we need to set up this scene okay let's just set it up right here cheat it just has it's all it's its own number of entities you need to have the scene and then the sheet and every sheet you have finally an object which has some properties which you could animate them so it's not gonna be a notch it's gonna be uh what portion and it's going to be portion and let's see what's gonna happen now so it's been installed right now and we get this small tiny icon on the left top of part of the screen and it's in javascript probably we didn't uh yeah because now the order is right so we have this small tiny icon i really like how it looks more minimal than the dot gui if i go in here i have the project i have the scene and i have the distortion field if i click the distortion field i get all those parameters change some and then i could do the values changed new values so just the same way that you do in the dead gui yeah so basically i would get the instance of the object with the changed parameters and let's code this instead of using the progress which is set right here progress progress i'm gonna change it to i'm gonna just put it right here i mean this is the event right so i have somewhere here distortion on values changed new values it's going to work the same way hopefully for the next time i will just change my template to use the filter just by default and then here i could just get this line fine set it to new values progress right and then also need the new new new value to be between zero and one progress is just too big you can see it's 30 and then changing one by one it's way too big i think to do this and just t as and then you just do this instead of zero just do t number zero range no he is not defined why it's not defined yes types ts types but how did that [Music] there's a really cool video about that but i just need to look where the type says types just really look at the reference type says team yeah okay yeah right of course now we have this between zero and one it doesn't clamp the number yet some reason but it shows me when i'm in range so zero and one zero and one and now i could actually animate this one if i do the right click do the sequence i could add the keyframes here and this is why i love it this is the perfect tool to use it as a communication between designer and the yeah thanks in touhou i forgot to look at the okay so basically this point should be zero but then like uh what have i done but luckily it saves everything in local storage thanks sorry so basically here it's zero and then at one second it's gonna be create another already one and move it to one and then right now if i just press space just gonna animate but that's not the coolest part the coolest part is it you could actually there's this tiny icon where you could actually change the the animation curve like let's say when it animated three seconds and in the middle i'm gonna add another keyframe which is gonna move all the way to one and then in the end i'm gonna move it back to your back and fourth animation and you could immediately see photoshop and then you could actually see the whole animation back and forth this is so cool because this way you could arrange a couple of animation you could just go and tell the designer to just change the easiness whatever you like and you're going to get the final animation without getting this pinpoint feedback and then you could also do the pretty cool stuff here like whatever this does it might look cool you never know i think in the next animation i'm going to create something more it's just some jumpy animation of the distortion but it doesn't look quite cool with this particular animation arya has a really nice example and i really recommend you to try this library you can feature stream i'm going to try it for sure i just wanted to get a glimpse of it because i loving it so this is how you create this kind of animation this kind of distortion and basically just a glitch that's the glitch that most of the developers do when they create some many sample textures and this is how i want it to start all streaming theme hope you like this one gonna stop on this one it's pretty simple but then it's also pretty cool and thank you guys for being with me today hope you like that boots green let's put a small version of my screen on a stream so yeah hope you like that and let's get to the new streams and have a great day guys and try to experiment because this kind of animation only could have worked out from the like weird experimenting kind of thing then you just get this nice really cool result yeah it's all be the colors are changing it's looking pretty cool so yeah have a great day guys

Channel: Yuri Artiukh

Views: 3,207

Rating: 4.984436 out of 5

Keywords: webgl, triangle, canvas, animation, three.js

Id: qmRqgFbNprM

Length: 67min 20sec (4040 seconds)

Published: Sun Oct 03 2021