Three.js Particles from Mathis Biabiany website #42

um my name is yuri welcome to my stream let me know if you can give me well see me well and let's get started coding i really appreciate you sharing this morning with me or just sharing your time if you watch this on record my name is yuri welcome to my stream ouch i didn't meant that thanks everybody for supporting me on patreon i got a couple of new supporters i really appreciate that guys i think i'll be sharing some additional content on my patreon soon hey all good hey guys alrighty what kind of white we are drinking um you know i feel i feel guilty i kind of lied to you judging by my brain i don't know status but this morning i decided i should better drink tea today you can drink whatever you want yeah this shirt by the way is made of the it's a handmade of the manhole you know the sewer hatch on the street somebody just put a t-shirt over it some paint and then they made this t-shirt and this is the key of symbol like my city symbol so kind of specific sewer hedge of a kiev yeah that's where i am living now all right all right hi to belgium yeah and really guys share where you are right now it's it's always nice to hear like where you're from so they're going to be replicating this kind of webgl stuff this is not a new website i think it's been two years but it's been in my list for two years on my list of the websites that i need to you know try to do try to do those kind of effects hello friends hello and then well finally i came into this one so this is the website portfolio from matisse biabiani and it's a real cool one i'll just post a link go check it out if you haven't seen this one it's real cool i believe matisse is working i used to be working for resin and resin is a really really cool studio oh epic clip and just see come on guys you just took my stream now i used to be the fanboy for all those studios like the rest i'm still offended by for all those two like the active theory resin epic and all those studios okay so this website is done by matisse bibiani there are also a couple of copyrights that i'd like to mention he said big thanks to celia lopez i believe and then lionel is a designer for this website for part of the wireframes at least i believe this is an inside joke and if you go to the matisse viabiani you can support me him by you know subscribing to him and telling him he's a cool guy and he says big thanks to celia lopez and by the way celeb has just launched her own webgl course and yeah go check it out i think it's gonna be in two weeks uh where is it yeah so here it is on awards she just launched her own webgl course i don't know what that would be i believe it should be cool because i really admire her work and she's not she's not even the um the creative developer she's a digital storyteller which i think like level up from the creative developer so yeah already bought that one nobody paid me for that believe me and it's also nice to see more women doing those courses in webgl because somehow webgl communities mostly consists of the guys okay okay so i believe you just check out the website and let's get started oh i should i should i should have changed the screen right cause you still see a big big me but not a big big screen screen yeah i know it's hard to get up in sunday morning sunday mornings i know i know believe me believe me yeah i'm the person from november it's hard to get up on sunday morning sunday morning every all right all right um where do we start there's lots of people asking about my vgs starter keys something like that and like that and i decided i'm gonna do it am i pronouncing it right that's right from his website his website by the way i changed the way i changed the the mic position and all this stuff in my mind i hope the sound is cool sound it's just like me just let me know the sound is okay so let's get it to you okay i'm gonna call it um how do we call it this is always this is the hardest moment i'm gonna call it let's call it particles articles such creative creative name nobody would nobody come up with more creativeness than me particles articles echo echo lots of actions of echo is it better right now i think i think yeah i think i had some shitty checkbox on so i hope it's good now so it was shitty all alone sound is oh my god better than one is it better than is it better is it better now let me know that's what you get for live streaming five minutes of shitty sound it's better now oh my gosh oh my gosh well i hope you uh i hope you understood what i've been saying this whole time so yeah well just just too long don't listen we're going to be replicating this website by matisse biabiani and yeah go check out the celia lopez stella lopez i'm i'm always kind of wondering if i'm pronouncing the names right so hard so go check out the cellulops twitter because she just launched the webgl course and i believe it should be good so go check it out and go check out the twitter of [Music] matisse okay okay okay i don't know why i had this whole thing enabled so go check out the twitters of mahis and sila lopez because i'd like to give the shout out to those developers somehow they have less followers than me have no idea why because they are way cooler than me and lots of guys way cooler than me so i'm just gonna try to replicate this stuff okay let's get started i'm going to try to replicate the basic basic template and i came up with a real cool name which is a particle name particles name so first i'm going to create the index.html i'm going to try to cut real fast so you don't get bored with me because we had five minutes of shitty sound you've been telling me this all alone right right yeah yeah i'm sorry guys okay hey hey everybody all right so first of all i'm gonna need script then i need some kind of container so as i said previously i'm just going to take like five seven minutes to replicate the template that i'm using for the 3gs just to show you that it's really simple to do that some advanced css techniques nobody knows how to do this except me the old school css reset i'm that old and then what else did i need here well usually the canvas is this thin and then usually for those who have jail websites i need to set their scope behavior to none all right it's good to go you can even set something like this just to see something on the screen and then let's start the parcel okay i need to create the objects oh i just really hope everything is all right now every single time something goes wrong like last time i have i have my stream cut from sights okay hmm be okay i guess i need to close all those possible inappropriate notifications that i might get all right alert works so then we go to the 3.js um 3gs what 3.js something just and then nice to see all of you guys here really appreciate you sharing my mornings with me and then i kind of i kind of like it more when it's classes and i have this namespace and all the stuff so i'm gonna and then i need to run it immediately now i'll just go copy pasting all this stuff in there but i'm gonna do the add mesh thing here and this render and then render and then i'm gonna run render again and then i'm gonna introduce some variable this time which is equal by zero and then yeah so right now this is a basic request animation frame thin loop so i'm just starting it and it goes forever i believe i can just do it like this all right then i need to move the basic setup of the 3gs scene right here i'm sure there are numerous ways of doing this and you can come up with your own it's just the basic stuff i need to do here and then the mesh creation and adding mesh to the scene this mesh and this geometry not that geometry a lot of 3gs community as well i hope i'm doing good with 3.js uh okay and then box geometry i don't like box challenge i like plain buffer okay okay okay i got missionary material scene adding and then mesh it in there i don't need this anymore i can do this i need the renderer also so the last thing i want to do is and then i need to run the renderer so i render all the scenes somewhere and this is it actually this is like the whole template i've been using the only thing left is adding the shader material now i also need to initialize the renderer rate so i can remove all this stuff the whole template is now done with my code with the class and then tell us through this window right not document body but document get element by id container pen child renderer dom element now this well it should be working now i think i've done all the heavy lifting of creating this 3.js basic template with a class oh thank you guys this is too much to handle emotion very emotional time so we just created a simple basic and this is this might be you might be useful for 3gs beginners because i used to mess it up a lot and spend a lot of time figuring out what's wrong because i just forgot about this so sometimes you might be looking at the plane from the back side and you just don't see anything you your head explodes you're looking for the mistake you're just missing the double side again is it again the double voice what the hell oh is it just for you i'm not sure maybe you open up two streams i don't know fingers crossed because i don't know what i what i can do to [Music] actually remove the second device is it still double voice okay so we just created the basic one let's move it to the shader so for this for this i need i need to find the basic shaders so i need i need to create them probably right so i'll create the folder shaders and then yeah thank you guys yeah fragment jlsc and then vertex jlso and then the fragment gel cell is kind of easy i think it's main just create a red one i believe this should be enough and then for the vertex shader actually sometimes i do this maybe we do this jail chord no not this user oh well maybe i wrote those shaders in past anyway and i'm also on github so this is fragment gel point size and should be void main yeah i'm not good c programmer obviously and yeah jail point size just let's go to this thing and well you can find those shaders all over the place you just need to know what what to look for because i hate like remembering all those names i can just write them down copy paste them easy peasy lemon squeezy okay so i have this thing now this gel point size like this gel position because i'm i'll be working with particles today i kind of want to do the particles and for particles you need to set gel point size and this point size is set with perspective in mind because when the particle is going to be farther from the camera it's going to be smaller okay and then i don't need this size thing here let's make them big so let's make some particles actually we can use plain buffer geometry to do particles let's start creating particles i think it's the time that i do the screen layout i'm gonna move it right here because i don't have any resize function yet yeah yeah okay i'm glad it's good now so we have rotating plane so instead of mesh we could just do points and instead of material i need to do the shader material material equals new and then there are some properties uh well i i might even remember them already yeah oh whoa visual studio code just helps me so i need to import both shaders and then set them here all right then i should set uniforms which i believe should be the object and then let's set some progress oh my god do i really remember those oh my gosh it's not that i wanted to remember those but i think i do know yeah i needed to to look up how to type this one value zero all right so we have the progress zero we have the fragment shader vertex shader what else we are missing i think i need to set this side double side too i'm not sure how to handle all the particles handle that by the way maybe we don't need that all right import vertex from vertex glsl we don't have it at what vertex shell cell no it should be like this cannot resolve dependency but it's here why can't you resolve that we should just restart now i can't spot the mistake here what the heck might have gone wrong there uh yeah thank you it wouldn't have worked without that one but what's the mistake there have you got spot line 25 yeah this one is is all right yeah i forgot shaders okay it's building something something is happening at least the chrome is loading something yeah i think it's been let's just restart it i can't see anything yet so got some mistakes we we and declared i didn't identify maybe it wasn't a good idea to start without the template still almost there actually and oh yeah that's because that's because i'm using the uvs here button ah yeah uv red definition i don't need this uh euv yeah yeah it's right now perfect so now we have particles rotating it's that simple how you make particles and how you make my team plate so team plate time done 20 minutes what no maybe 15 minutes but still way too much i think i'm kind of over little this way will look more natural okay we have rotating particles now but i want to make those particles like a lot of them i actually want to make them this many like quarter million particles so let's do that instead of geometry the fans started working hard on my pc because because of this console lock not because of webgl no it's just because of the cancel lock all right we have particles and by the way this is the easiest way to create lots of particles you can do just something like this and you'll have a lot of particles now but we're going to do buffer geometry then i want to set the number of particles number equals i don't want to remember that it's number and then i can add the attribute position to this geometry which gonna just stay in the positions of each of the particles so let's do that and by the way i'm gonna fix real fast the camera and the positioning of the camera so i think it's gotta be something like this and i kind of wanna look at my particles from far because i already have some numbers in my mind and i just want to set them prior to doing everything else and then of course i can change the okay i have to i have to do the lee out now i can change the size of the particles so i could still see them from this distance to make them bigger probably so it's just one by one maybe i should make it like oh this is because i override overwrote the geometry yeah so right now we have particles we're looking at them from 1000 unit distance they're kind of big enough so we can see them but now when i switch to buffer geometry it's going to be empty for a while but i will need to create some attributes and the first one is going to be position i believe yeah um where do i start here okay so let's just start with creating attributes so this for attributes and then we should say the that it should be an array and the number of data in that array should be my number multiplied by three because each of the particles would have three coordinates now you're not late we just started this whole time i've been creating my basic 3gs template so i decided maybe in this stream incorporate like the basic way to create the 3gs team play i don't know if that of some value but i hope so okay um positions all right and then we need to add these positions too i'm gonna remove the redundant stuff now i don't need this anymore these positions this material maybe this material is going to be the first one to create and then i think i don't need that much space for my particles positions positions positions positions and then i need to have two loops yes and then we could set the position and because this buffer attribute is already a 3gs thing we could actually use this is the thing that i learned on this project by the way you could just use these positions and then do the set xyz and i need to set the number like index equals zero this is going to be the number between one and this big number it's gonna be index and then some values here and what values i need to put in there well i believe it's gonna be just i n g and zero so x y and z as zero yeah then after all this stuff i need to add this to my geometry it's gonna be this geometry at uh by the way quite nice feature of the 3gs if i this is the old api and if i to continue using this see the duplicated api is done by this in visual studio code i think it's something with the typescript right but it's quite a nice feature you like it's obvious if it's deprecated now now it's set attribute and well and then i need to add this attribute right how do you add the attributes just name this and then edit um something wrong with the render count as prime count what's that yeah let's just see i believe some some type of in there somewhere those are all zeros what the hell is it this this position is not working for me some reason i could do just the boring old style loop yeah this could be right yeah but still it had to contain some numbers now maybe i think the xyz should handle that i shouldn't be multiplying this the xyz should handle so it's a clever one and it should put the numbers exactly where i need them to i'm just wondering these positions float attribute and then these positions set xyz and then this position somehow all zeros right and the count is none and this is the problem okay let's cancel log them prior to that why the count is none oh yeah i know i know the reason i know the reason i know the reason i should have said the like the number of values that would be assigned to each of the vertexes vertices and i forgot about that and this is the reason so yeah right now we see all the particles just it's just outside the screen you know just can't spot this thing all right so we have positions and well maybe i should just multiply this by two so i could see the particles i think the particles are too big so i'm gonna change that a bit yeah yeah yeah okay getting close i will remove all this stuff i don't like this rotation so now we have the particles now i kind of want to center them right so i will do something like and then so now it's centered but we don't see anything because we don't have orbit controls yet so let's connect orbit controls i'm just gonna this time i'm gonna just grab the code from my template probably because it's just two lines of code which i hate to look up now orbit controls and then initialize them this camera this renderer dumb element should be fine is it is it though we have added orbit controls running out with controls what else do you want from me oh yeah it's working actually it's actually working yeah just yeah i was scrolling the wrong direction so now we can interact with this scene it's just one of the ways of requiring i think the gotta be the better way now you can just require it from somewhere inside of the 3gs probably doesn't really matter at this moment i'm going to get rid of it in a couple of minutes anyway so i think the particles are too big now i want to see them just barely see them [Music] yes now we see those particles if we zoom in they're kind of this is too small okay so now they're barely touching so we have lots of particles right here i think also one was two well let's make it 0.1 because when you're getting close you're gonna see them hiding by the way i think you can fix this thing with the particles and the only way to avoid this like what's its frostum hiding something with the is to just zoom a bit the whole thing and then you avoid that just another life hack not really related to what we're doing here all right so now we have this thing and then maybe i'll just make it a bit bigger so it fits into the screen 70 anyway okay so now we have all those things and it's particles what else i want to put up some images here so i have the imposter image and i have one of the images that that is have been using his website one of his portfolio images and then also have the mask for the particles usually particles are using some kind of textures so i'm just gonna create the image i'm gonna add all this stuff so now the order of making things first of all i wanna i want to see i want to see an image on my screen this is the first thing then we'll be doing all the animations with that image because it will look a lot cooler when the image is in place already so we have the mask mask we have the texture t this is going to be the t1 okay you can see i'm i'm pretty good at naming things you know pretty consistent all right um t1 t2 okay then i need to do something like this equals an array and then you i need to import those because parcel will return me a new url the final url to the image that i can actually load now okay so now i have two textures now i have to set them inside my phone inside my vertex material so it's going to be okay t1 type t value is textures 0 and then the same goes for t2 all good see something in chat okay yeah we have two textures now i'd like to see those textures how do i see them how do i see them well i'd like to i'd like to i think i add another attribute just to not over complicate the calculations please and this is going to be definitely ing this one's going to be two-dimensional think i don't need it three-dimensional this coordinates and then oh maybe that'll be three-dimensional too all right just for the sake of using the same thing so it's the same amount of number this coordinates except that's it's ing so they're both going to be between 0 and 511 all right and then i'm going to be adding them this is a common naming strategy for the attributes these coordinates then i have to declare them here a coordinates and then i can get the v coordinates the thing is that attributes are only accessible in the vertex shader and i need to do this so now i can use the variant here and well they used to be red now they can be yellow right yellow but i can also color them by v coordinates x divided by this something is wrong different type yes now i could see the gradient coming out and then it can do the same right here and this might look familiar to you if you've seen my streams but this is all particles let me just remember you this is all it's hard to see now but those are particles i can actually do already double the distance yeah this looks familiar to you and the only thing that's you can do now we should do now uniform t1 sampler 2d t1 why do we remember all those things now and then and then and then and then and then i can do i can just use not here actually in a fragment shader i have to set them up and then i can do with my uv equals this okay getting close and now i can just do this i can sample my texture t1 with this my uv and then let's see and now see the image 82 poster looks fine now we can see the image perfect perfect and now instead of just using the image here i think i have to set transparent true because otherwise my particles wouldn't be transparent the other thing i i kind of need to set for particles usually good thing to do that yeah so now we got the transparency because an image is transport and the particle becomes transparent and it's all good and then we could change the size just a little bit so the particles are a bit smaller now we could see them all being colored in the color that we need perfect perfect amazing this is just stunning all right next next step next step akiela it's gonna be the next step the image is done let's load the the mask of the particles while we are here and then i don't yet have it set even but i can do this i can do this like for this is a built-in variable already but not like this mask and then mask texture it kind of adds to this whole feel of this creative website mask texture and this should be mask right and i need to i need to add this mask too but yeah yeah yeah why can't you fix this kind of mistake by yourself visual studio call all right so we've added it we don't see anything because i actually don't know the reason because i haven't saved maybe the file yeah so now we see and all the particles are using this same texture we actually only need it well usually all those particle made websites they just do we just see the black one the black part and then those kind of they look like particles but on this particular website i don't know why i think for creative effect because it looks kind of it gets another feel it actually used the opposite so they made every particle to be transparent inside now i can just do this i'm gonna remove this and we have the same image that's gonna be a bit different because every single particles will have a hole in it and it's not just yeah they are transparent see it's a weird kind of transparency because we have we don't we don't have a z depth here but it's still z transparency you are guys kinda sus okay this moment is already there but i was in electrical this whole time so i'm not a sus so we have the image we have there so now let's get to the creative effects of the image well let's start basic let's start basic there are a couple of states on the on the website that we need to code and then we will need to switch between those states well first state is this kind of stable position with the camera a bit moving to the left right this the second state is this so i'm going to start with second because why not and this whole thing is going to be happening inside the vertex shader and remember we're just doing this whole thing from scratch but it's been a lot of time already running out of time running out of time of my life okay so i think like those particles they're not changing the color actually just changing their position and they're not even changing their position in this way just changing position in the zit index that's that z axis so we could just do this and they're moving this whole time right plot move i'm gonna add this now there's gotta be also some something called time right move in time i need them both so how do we move particles how do we move them i think i'm just gonna add the basic c coordinate plus plus something what i need to add there [Music] i need to add the movement multiplied by something let's call the a speed because i want all the particles to have different speed and then i want to add [Music] let's just start with this a speed yeah i don't see anything now because why i believe it also need the offset okay so i need the a speed and the offset speed would be something between 0 and 1 probably and the offset should be something big because the camera is at one thousand position speeds just one speed per particle offset also just one offset per particle yeah i think it's possible to use instant buffer geometry just that you don't really need at this moment and maybe 200 000 instance would be just a bit too much depends on the geometry though so i got the asp the a offset and now i need to set them it's going to be just set x we'll need the index i'll just do the this is just the simplest function to return something random between a and b and these coordinates this is not these coordinates offset and the offset what's the offset i need because the camera is at 1000 i'm gonna do the offset like this and then the speeds what was the good value between something between zero and one but if it's going to be zero the particle is going to be staying in place that's why i need something like not quite from zero maybe from zero point four to one okay we have it now so now i want to to code this state i also need to set the uniforms move time i'm going to be growing this whole time air both value don't forget about that and then move it's gonna be this move and then what's that move let's call the mouse effects and then i want the mouse effect to be tied to the window probably right mouse wheel probably well if i'm mistaken i'm gonna i'm gonna see the error anyway and i don't see anything because the orbit controls probably takes all the events from me yeah so this is the mouse wheel event and i want this to be the movement event so this move plus by default this move is going to be zero and then it's going to be something i want it to be quite quite small so i'm going to divide this by 1000 probably so now we are setting this move thing on each of the mouse events we also set in the time event everything is in place now i can do this offset thing and i have the offset which is between minus thousand and 1000 and then i have this speed now i just have to preview this position probably so now you see something right they're not moving yet very fast if i will be scrolling they actually move i think i gotta multiply this by 20 or something and all the particles actually moving with the different speeds because the speed the a-speed part is different there's also one thing that i'd like to change here i have to add another variant i hope you don't mind guys this stream is going to be a bit longer than usual because it took some time to develop the basic template at the start another 20 minutes expected yeah i've just created this one from starters i can just follow my actions i think i'll be sharing that code with patreons anyway but yeah but it was educational all right that was i time movement so now we scroll we are moving through the space through the imposter space but we can actually at some at some point we can just move away from it right yeah so right now we moved away from it to avoid this kind of situation i'm going to do the mod 2000 now we will never be able to avoid the the particles we see on the screen i think also like this value will be always between 0 and and 2 000 and this means that we see only half of the particles we need to subtract 1000 we'll still see all the particles now this is not the whole effect of course we need to add a bit more i kind of want to move to fragment shader yeah that's what i wanted to do i wanted to add another variant vpos and i need to set this vpos to actual pos to the final position that i will be using so this post is now between minus 1000 and plus 1000 and this means that instead fragment shader i can do the i can do following like float alpha what what is wrong uh yeah the dimensions did i mention someone so good now okay okay okay mask texture alpha so alpha should be dependent on the distance of the particle to the [Music] to the camera and i believe because it's 100 so i can just do this i can should i maybe multiply it first so if i just take the absolute value of so right now particles are disappearing right in my face and then they are disappearing or appearing at the background of the stage so i need to make those two stages kind of a bit more transparent and this means v plus z this is z coordinate divided by thousand maybe just something less than sound ends i'm going to clamp this to zero one range so now this value is uh one at the center of my universe it's the zero point and it should go to zero uh no no it should go to one right now so it's zero at zero point and it goes to one when it's close to my screen and this means i can do this and now i can well just to see the stuff i can do this yeah you kind of see that they becoming more transparent on the edges of my universe and what i wanted to do i wanted just to multiply this like this and i could see that it's much better i think the particles should be bigger now that's the point where they could become bigger and still look good yeah but they're kind of transparent on the edges and it gives so much to this artistic effect and when i scroll i just move through them all right all right not many things left so i want to do the transition now between two images let's do that let's do that i have this move variable let's just output it and i have to make the transition between like two states the states when it's exploded in the state when it's in one place i think this is operator and all the setup is by the way in the in the description of the video you can check it out okay okay okay i need some more attributes so let's get back to the basic stuff let's get back i need to close the stuff concentrate so this is the position now i can have two positions actually this stable and not stable so let's make the stable this is not stable and by the way i think i can i think the guys just added a little bit of just so it looks a bit random sign from the move function oh not this so this is between minus one and one this is too small i think and then multiply this by ten i don't know this should just add a bit of a bit of randomness when we scroll it but this randomness is now like the same for every single one of them so if we just multiply this by a speed became a bit more random maybe this is a bit too much just a bit more artistic like the flying kind of random in but they're just moving a little bit from side to side that's it okay that's it for the not stable position now i have to do this stable position stable position let's get back and then so we are back to basics and what else i want to do here so now i want to use my mouse when i press mouse something should happen like something crazy like on the original website something like this let's do that and this is actually some just this is just the movement there's nothing special if you look closer sometimes you'll even see that the particles are going in circles right you could see the particles are going in circles there and this is exactly what we need here we need to make them run in circles and for that for that i first need to get the mouse position it's going to be the longest stream in my life okay ray caster mouse let's set everything up okay i have the right customer variable position then i have to mouse move to setup and mouse move i'm going to add this whole thing to the mouse effects and then inside of the mouse move i'm going to calculate this mouse position normalized and then i could set the raycaster and find the intersects with my scene it's going to be this and this should be an array but i i don't actually have any kind of objects in my scene yet so i'm going to do this test intersects zero point so this test has got to be some object in my scene that i could interact with and these tests should be just some material doesn't really matter i i don't really need to add this one to this scene even so right now i'm cancel log in the position of my mouse let's see recaster is not defined because it's got to be this ray cluster okay so now when i move my mouse actually get the actual position in it in the same plane that my particles are so i could use this inside my gothic shader now so this mouse is that position and now i could do the uniform mouse and then in my loop this mouse then inside vertex shader i need to set it up okay to check republic too all right mouse i have the mouse now the mouse is inverted shader now now i can calculate the distance from the mouse to the actual position and well there is this function let's just call it this is going to be distance between stable position and um because the mouse is two dimensional you can just do this so now i have some distance what can i do with this distance i have to um i have to use it on my particles so on some part of my screen the particles changing their i don't know physics let's do the physics first so we would be able to see where it's changing right so the physics i'm gonna just write some numbers because i don't wanna remember them this is gonna be 50 multiplied by sign i just took those numbers from the original website decompiling stuff time because i have the time variable and then and then and then and then and direction there's got to be a random direction for them too when i add this too this could be just random like science science stuff just to see if this you know looks good there's got to be another random thing because it's gonna be the same just as you remember previously it's gonna be moving on the same way so i have to come up with two random numbers now let's make it one until now in the direction okay let's just for a moment remove all those and see how it looks like this is quite crazy this is exactly what we're heading to now they're moving in the same way but we need to randomize this stuff okay let's randomize it by steps i believe nobody can stop me from continuing this stream right so first of all the direction it's gonna be the random number and i believe it should be something just mine one minus one direction and then press the direction is going to be just so they move in the different loops and the press is going to be i'll let it be the same value like the press and then i need to add those so now we see some randomness happening already i think it's too fast also the time goes too fast for those so we have two directions now that's why it's random now i have to multiply this one by the random value a press and nothing happens because why oh no they become random actually yeah just that it's not too slow yeah you could see them but i can add some offset to here so it's complete random but you can see the circles happening right now it's not it's now i need to use this distance so that this thing chaos happening only under my mouse this i would need to calculate something with a small step probably this is going good for you guys is it too complicated are you having fun i have some conversation there happening okay [Music] looks good right it looks good so we have the not stable position then we're calculating this table right here and the only thing left here is then what what what what just for a moment i will switch to the old position if it's working good yeah it's working good perfect so this value changes between i don't know zero and thousand i need to have some radios like couple of hundred probably zero three hundred and then this dist so you could see my mouse it's actually in the in the center at the moment they're not moving but they're moving on the all the other parts right and to fix this i would need to do yeah something like this so now they're moving where the mouse is just that somehow mouse is not moving the mouse is not changing so it's zero zero all the time why is that so why is that so i'm using the mouse here i'm using the stable x y here the mouse is uniform it's coming from the outside world the mouse seems to be okay okay yeah i see what's wrong here uh this i'm not setting this mouse actually or am i i'm setting this mouse to this but i actually have to set um this is the wrong one i just messed up the variable names this mouse is the actual position of on the mouse screen what i actually need to get inside this shader is this point position so let's call it [Music] this point point i can do it like this i can just introduce another variable like this point two-dimensional and then here there are much better ways to do this but it's gotta work and then i have to set this point here not the mouse but the points yay it's working guys so now we could do this to our share i want the way it's a bit random though like the positions are a bit random i'm gonna fix that later on okay so at least we got this now i have to do the mouse press i can do the uniform let's do the bouncy value and just multiply this whole thing with the mouse pressed and then let's run with gsap oh and then on the mouse effects i'm gonna do and then i need to have i need to declare this thing most pressed i called right mouse pressed and then yeah coral noise would do the job but it's actually simpler to do those kind of things with just a couple of signs and cosines less calculations okay mouse pressed type slot value zero by default what you don't like now 86 line 86 mouse press should be flawed okay now it's good but the mouse just doesn't work because yeah because it's zero and then when i press it down come on to this material uniforms mouse rests so when the mouse downs go down we animate it to one and all the other cases when you made it to zero on the mouse up uh yeah it does work now so when i hit the mouse but it but it's not cool if you go here i think also the time should be a bit bigger come on come on just load everything yeah i think i need the elastic this is the old one i need the g-subs free you gotta fix something with it come on so i want the elastic i want the elastic one yeah and you could see how it will spice up all the things now see just much is pretty cool i think the particles can be bigger can be even bigger now i should go to the vertex shader and just do them maybe four thousand and it'll be way cooler especially cool when the image has different colors because you could see this happening all those circles going randomly yeah so this is what matisse biabiani did with this and then we have two states we have two states let's get back to the other state i'll show you the small trick probably the last one for this stream so right now we have this and if we look closer to the this move variable this move it's too big i want it to be something roughly in 0 2 3 range so i'm going to remove all the console logs we'll delta so right now yeah it's something between zero and one and two and i think i i want to make the move a lot harder when the mouse moves yeah so right now when i make this interaction that you have on the these bibiani website like when you scroll all the images turning one into another let's do this we have two textures let's do it with two textures for now [Music] we have the move variable already in place i want to use it in my shader this one and we have two textures t1 and t2 so instead of just using the image here i'm gonna use the t1 like tt1 tt 2 t1 t2 and then and then like final equals mix between tt1 tt2 and then the move but the move is between 0 1 2 3 4 or whatever so i'll just take the fractional part of move and i need to use the t1 here final final image here right let's see what's going to happen so now when i scroll one image is turning into another but then it's just not right sometimes right it just links this moment in this moment i believe it's when it's crossing the integer part like eight becoming nine what we can do here it's quite a simple trick probably the last one i'm gonna do today um and then modulo 2. and this one modulo 2 as well should be fine and then i should i should just state like those uniforms t1 and t2 uniforms t1 value equals this textures mt2 now let's just call this one okay something is wrong it's zero one it's minus so it could be minus one i don't need it to be minus one yeah now they're constantly slightly changing one into another isn't that great also because this change changes line here now to make it look way cooler you could do this so instead of just using the fractional part here use the permit function to be much nicer because this is non-linear now and when you scroll you just travel through all the images and then and we can make up some button that changes between those two states let's just add a dot screen to do that it should be enough so i i want now to have transition between those two states so it's going to be uniform i don't know how you call it transition costume is becoming too long i won't get into the actual transition because i spent some time with the basic stuff i wouldn't be spending it anymore in my future streams you know keep it that under one hour so this is the transition and i'm gonna use it between those two so the final position i mean you could just use the position equals mix and i'll write it between the pos stable and use the transition and that's it so right now it's not stable because the transition is zero now i'm going to just copy paste that gui code from my team plate could copy paste it from the docs doesn't really matter and then and then the settings part there's one progress variable for now let's see if we see anything now it's probably downloading all the dependencies yeah we have the progress it doesn't change anything but i have this settings progress between zero and one now and i can change i can set the transition and i can set it right here it's pretty i think it's pretty complicated stuff what we are doing here i don't know why i'm trying to trying to stick it into a one hour this is crazy progress it's progress so now the transition uniform is being changed and let's see yay yay when we scroll we change it scroll change it and then back again and then on this one we could use this we could make it bigger not 300 somewhat like 500. yeah i like this bouncy effect from the elastic gsa and that's pretty much it well of course there's much more to this transition and one important thing that i would like to notice it's actually using the post processing like this moment that i'm hitting the scroll it's usually using the post processing part otherwise it's just the same thing that i just did maybe slower gotta play with some numbers and that's it if you just stay in place you can just scroll like this it's also kind of weird hope you like that i wouldn't be getting deeper into that because i know you couldn't you could do this infinitely and i think even especially this part i've done it a bit better than the guys because the guys who called it i believe this is matisse babiani they hard coded in the shader is completely okay this works for them but i think my way is a bit more i don't know it's easier to support easier to add new images because you don't have to you don't have to change the shader code after you add some new images with this line of code it's done a bit more complicated way in the original website but otherwise i hope you like that one it's been a long one this time let me know if like what you like what you like dude i think it's too long right i have to keep them under one hour i'm also still planning to write to do to create to whatever short videos and i hope they will be aired soon i hope you like this whole thing yay how you been doing guys if you have any questions i'll be up for one minute maybe answering them because there's some delay and some people ask me something otherwise that's what i wanted to show you this is the whole stream i think it's it's pretty cool i think the main the main value in this whole like animation is actually the creative part because i don't i have no idea how guys come up with all those effects how they merge them into another i think there gotta be lots of experimenting and like throw in some new values and then well this looks cool i'm gonna live with it something like this hey guys glad you like it yeah usually everybody who supports me on patreon go to discord but there's also a discord for the react 3 fiber community and there's also discord for the 3.js community so just there are lots of communities anyway if you go if you want to go to particular mine one we will not really excel in that chat but from time to time we just ask a question somebody answers i'm sharing some stuff that i do sometimes yeah so i hope now no questions about the basic template anymore because i just created yeah okay that's good to know that you don't mind the long videos thank you guys for being with me uh on the cross um have the croissant so i'll go i don't know do some dumb stuff now i'll be playing pubg now hopefully i will be online next week too so expect some new stream if you have any ideas to what you want to see on the stream just let me know maybe some basic stuff maybe not a basic stuff at all i saw some suggestions about the stream yes so of course do the suggestions i've saw some suggestions about the active theory website and all the but they you know some of them are pretty complicated like even this one it looked kind of simple but it still took us one hour it doesn't sound right one hour is not that much right but it still takes some time to do those yeah on twitter you can just message me on twitter i'm most active on twitter so write me on twitter i'm wishing you a fantastic day slap like under this video if you like this one i'm gonna continue doing this if you like me and support me on patreon links are below and otherwise i'm gonna show a big me and a cool t-shirt that i got this week and i'll go with my day have a good one guys stay

Channel: Yuri Artiukh

Views: 12,861

Rating: 4.8982186 out of 5

Keywords: threejs, webgl, triangle, tutorial, canvas, animation, ascii

Id: 8K5wJeVgjrM

Length: 89min 25sec (5365 seconds)

Published: Sun Oct 25 2020