Travelling particles with Three.js #3

good morning everyone my name is yuri and we're gonna do some live coding today so just let me know if the video and sound quality is all right and let's get started let's get started how are you feeling today where are you from that that part actually really inspires me when i like see the vests geography that we have in here everyone everyone and while we are yeah good and morgan to you too and while we are at the start i want to thank everybody who supported me thank you all my patreons you're inspiring me to continue to do this i want to apologize in advance because in the following one or maybe one and a half months there gotta be some breaks in streaming but i'm gonna i'm gonna do more write-ups i'm gonna do more short videos so i'm gonna keep you posted hey india germany i gotta learn how to say good morning in india in hindi all right so i've prepared some wine to drink today but then i thought maybe more like in a cookie mode today so i actually i actually had a serious intention of drinking wine today but then it's such a sunny day and i didn't have any breakfast yet so yeah i guess it's a cookie cookie mode i have cookies in the shape of heart oops yeah so let's get started enough enough of that three minutes poland nice i guess everybody in the states are sleeping them today because it's like 3 am usually there in texas all right all right i'm gonna switch the screens this is gonna be the website i'm gonna try to replicate today it's been on my list for i don't know one or two years already because i've seen it and i thought like this is a really fun effect when those dots are traveling through the streets and it's pretty cool there's some minor 3d rotation but this one is you know the usual stuff but i mean i liked the dots look and i like how they travel and i was like how would they do this so i was fascinated by this website i think it's done by red color agency if you go to the menu yeah designed by red color it's a russian web agency and kudos to the developer it's really nice solution he found and we're going to try to replicate that solution today with 3gs and this is just a little bit of math it's really a little bit of math it's not even sine functions it's just simple arithmetic functions but still there's some math here anyway let's get started so we're going to do the vault replica and we're going to check the usual vgs team play that i have it's shared with my patreon so you can go to the 40 second stream and you can get that code they are like calling it in 10 minutes and yeah let's let's get started alt replica i'm gonna open the visual studio i'm gonna run parcel i'm gonna do the layout this way brazil well i believe it's gotta be night in brazil too right now it's like two or three a.m right it's next three a.m oh gosh well i'm guilty of that too all right [Music] so we have the team plate and we have this website how do you go about decompiling well first of all the thing that fascinated me the most and which turned out to be the simplest one is actually how do those dots know where to travel like they are just following the real map and the streets and i thought it's kind of fancy webgl well it kind of is but not well not defensive so the genius solution is actually simple so if you go into the source code you'd find the svg and let's just just get that svg so this is an svg map this is still a webgl animation but we're gonna get this effect webgl i mean we're gonna get this svg into the source code so i'm gonna insert it right before the app.js and you can already see the like i'm not sure like holmes but this website has been done by a russian developer definitely okay and then we have the svg and svg has all those paths and actually we could just do something like this to investigate this svg no just save it on the desktop svg like test svg the desktop right and then go to figma because figma is like i believe but okay figma is the best way to edit sdgs at the moment so if you open up this svg well if you open up just in just a preview it's like hard to see anything there if you zoom a little bit and that's because those paths are being filled and this is why we see like shapes instead of actual paths but this is actually a set of dots following some some path and those are actually the paths that you see on the webgl map that follows streets and the stuff and well each of those like if i select the different one it's just a number of dots that follow the path so what they did actually they had this jpeg and then they just draw an svg map of streets over that gpac and they had this svg with just the street maps just picking up manually random paths across the city how do you how do you hide these sidebars here well oh i found it no you can only make it whiter right well anyhow i think you see the point so just just the pass but how do we use them inside the webgl how to do this kind of interactive nice dots animation well let's start this churning it's gonna be a 3js journey just like the bruno simon has now all right i'm gonna go to abjs and obviously we need particles today so i'm gonna switch to particle shader particles shader and then uh i'm gonna open the preview it's working all right yes it's it's happening in real time well well of course i've looked into this website i'm gonna be it's just plain crazy i can do this actually i can do this but it's going to take more than one hour and i don't want to bore you with that because of course i looked into the website before i knew i figured out the ways to do this in one hour so i would still make a lot of mistakes but anyway anyway well i closed figm already so we have this and then well let's build the data so let's please get data get data maybe i'll make it a little bigger get data and then i would just start by querying my svg right and if you look into those svg paths they all has the same class name it's cls one so they all cls one i think it was 20 around that number of them let's just count them all right oh thank you guys i will now know the shortcuts yeah maybe but i'm not like trying to get the most number of people um where was i i was trying to get my svg so i'm gonna get those svg by the class names so i'm gonna do the document query selector all and then cls1 and then this one returns me a node list so i actually need to convert this one back to the array so it's easier to work with this one so this log i mean this svg is now the all the paths it's 22 of them actually each of them is the path and what's nice about svg paths is that they have its own api so i can use it right how do i use it then i'm going to just loop through those you can just svg for each path and then inside of those i can use the length of this so there's the get total length of path and i think it's better to click to the stack overflow usually so if you just query the path you can then get the length of the path so let's just see path get total length and now we see those fans and they are well quite huge and that's because the svg is actually going to see the view box well yeah the view box is 2k by 1k so it's actually quite big svg and those paths are really big huge ones and then well the length of those paths also is a big number so we have 22 paths we have all the lengths of those paths now i kind of need to well to use the coordinates of those paths to produce lots of points on my map to do this yeah do a little bit of react but uh maybe just a little little bit of angular in my past but i'm not really a framework guy all right so i need to i need to build some some data some kind of store of storage for my whole data of all those paths and i think it's good to build it around the lines uh entity like every single thing is going to be a line and then inside the lines we're going to have the dots and so forth so so now i need to get dots on each of those lines so first of all i need to calculate the number of points so let's click number of points i could of course fixate this let's fix this because it could be like a thousand for each line but because each of the lines is already has its length so to make it normalized i think i need to make the number of points dependent on the line length actually and it should be something like okay let's just save this one to variable then close this and then number of points called should be the land divided because length is it would mean that we we have like two thousand points on each line that's too much maybe divided by five and then we have to round up this value because it shouldn't be it shouldn't be the integer right so now we have the number of points roughly and then we can just output it to check everything is working and yeah we have like 500 roughly three to 500 points on each of the lines virtual points we don't really see any of those yet and by the way i'm going to just jump back and forth because i i created the the particles shader and this means that i could actually use it it's going to be vertex but then instead of creating the mesh i'm going to create points and instead of creating geometry like this i'm going to create it like this and well points from the capital and yeah this is kind of the points but i need to make them smaller obviously still too big yeah so we got the points now well not the points we need but still and i'll also switch to the black and black background from the start so i'm gonna do the points white and i'm gonna change the background to black all right so now i have black points perfect well frame works controlling the animation usually but anyhow i think you're having your own conversation at the moment alright um so we have black dots and i need to jump back to my data creation so i have number of points and then i could well i should actually produce those points and there's another api for the path which is get point point at length when i set the when i have the length and this length is something between 0 and this get total length so i can get the actual coordinates in x y terms coordinate inside this svg path ah more angular all right i'm gonna create some angular variable maybe come on stop arguing guys all right so i need to produce the points for this i'll create the loop i and then until the number of points which is the integer value now and then i need to produce some value like point l which is going to be the length multiplied by i divided by number of points so this square is going to change between zero and the total length of the path so now we can just get this point can we actually just do the let p equals f get points at length and then this point that thin and then we should actually get something here log p and let's see what we're getting so we're getting the svg point object and it has x y coordinate so it's kind of perfect so i can actually do i can actually do the so for each svg path i'm going to produce something like the line array and then this line i'm going to push should i pan i think i should should make one view of the moderator all right so now we have the line with the coordinates and i think it's going to be p x p y and then just zero zero the last one z because then the dot's gonna be on one z zero plane anyway right so it's p x p y p zero and then i had this this line so these lines push object and then well i could produce the id which is going to be some index j j then i could have the path which is going to be the path that i have here then i could have the length length which is equal to len and then i have the number which is equal to number of points on this exact path and then i have the points which is just well actually this should be the points makes more sense which is just the point all right all right so we have those lines this is the data that we're building inside the when we loop through the all the svg paths and then let's just see what's inside so we have an array and it has an id the length of the path and let's just check the points and we have some coordinates now so we have some numbers well obviously i want to use those numbers to produce the points on my screen so let's just go ahead and do that so instead of playing geometry i'm gonna do this buffer geometry my favorite kind of geometry and then i need to well i obviously need to create a an attribute positions how do i do that well these positions equal scenario and then these lines for each line and then [Music] line points for each and this is going to be the point and then this positions push px py pz which is just zero but anyway so now we're going to have all positions of all the points that are generated through the svg in this this positions array and then i always forget like how to do this buffer geometry how do you set the buffer so it's got to be the float 32 area and then so we're going to set this geometry set attribute position to 3 buffer attribute and then i'm going to create the floored array right here and put these positions in there so this way i'm i'm just replacing all the positions with these positions and it should should do the job should it what do you think should we finally see the particles we don't see anything because geometry is not a function this geometry set attribute is not a function y it's not a buffer attribute obviously it's 5 geometry right no errors now we don't see anything well that's probably because if you look into the into the actual coordinates they are quite big like 200 1000 they are really huge and this means my camera is like four units away from the zero zero point i don't know people asked about muting him and just muted it just for a while i don't know i'm sorry victor if i muted you accidentally i was just too distracted with coding anyway i hope you're not offended with this in any way [Music] so you know i have a camera far away but the particles are quite small still because i changed the yeah you could see them already and they shifted like far away so i guess i need to play with the camera too [Music] camera so like 100 maybe 10 000 yeah yeah you're not alone so now we see all those particles actually they've been created but they all shifted to the right point of the screen and this is because the svg has a view box and system coordinates like 1k 2k which is starting from zero and going positive and i should just normalize them and to normalize them because i already know the size of the svg i could just do like minus and half of the width and so now we have it centered on my screen so now we have all those dots centered this is already huge make the dots much bigger we have to set the pretty big value here just to see them on the screen actually normally and this is because i need to eat a cookie i'm sorry this is a cookie break oh thank you guys nobody's a much rather but i could make one i'm i don't know all right the cookie break is done i believe there's a lightning change so lighting change i got it i'm gonna make it this way so we don't really see the green screen all right let's continue so we have the particles we see them but it's way too too many of them so if you just check the number of those particles let's check the number of those particles how many of those do we have so it's somewhere here if i just actually output this the size of this one and i also kind of want to comment the length the number of points so it's actually well divided by three but still this is going to be like seven eight eight with something solvent particles and that's a lot to animate on cpu and the nice thing in the first life hack that you see that you don't really see like six or five thousand particles on your screen well to be honest at most you see a couple of hundreds of those and this is the cool thing because you can actually optimize we don't really need to render all the particles at the same moment we just need to render those so next step would be let's do the next step first i'm going to change the look of the particles and then we're going to do the actual animation like so they travel through this tree so you just don't see those particles on the screen but they actually travel through the streets and this is going to be like the most math part of the stream that kind of traveling because it's going to involve multiplication addition and the model operation so that's a lot of math to handle all right the look of the particles let's start with the look of the particles well because i already have this attribute for position i could actually add another one let's get to it i could actually add another one i'm going to call this one opacity it's gonna be just linear it's gonna be this opacity just to add some randomness to the particle oh hi to the mexican yeah i'm creating a randomness right i need to remind myself what i'm actually doing so when i'm creating the those coordinates actually i need exactly the same amount of pushes to the area as i have here so this opacity push something random and then i could use this randomness in my oh come on where'd you go in my shader and by the way maybe camera should be a bit further like i don't know 600 i think it's better all right and i'm going to use the randomness so we have the attribute attribute opacity obviously i need to get it to the fragment shader and i need to use the opacity so instead set it here the opacity and then have the opacity here and then i could just i could just multiply and where you see something random it's actually looking pretty nice i like this like merge of the chaos like the randomness of the opacity and then the order because they all follow the street map and well it looks cool already but it's gonna look way cooler in a couple of minutes alright about particles so i believe i need to make them way bigger way bigger than that so we have them like 1000 maybe 10 times bigger so we have the particles with the different uh shades of gray like not even 50 but much more shades of gray and what i want to do next i want to set some stuff usual stuff for particles so they will look better that's true yeah bruno simon just launched the beginner course about 3gs but i'm thinking of my courses too obviously so now we removed the depth in depth test and depth right so are they all rendering like in the same spots and if i just change the opacity now for the particles we're gonna see something whoa hello to chile we're gonna see some overlapping i'm gonna see some kind of bloom effect because when you look at this website it's kind of that they use some post-processing to make those particles like flare or something to make them bloom and they actually didn't so it's done without any post processing so well they're using post processing but not for the particle bloom again let's get to the actual stuff so the usual thing do we have a date for your course oh my god do you want me to tell you some date and then being stressed over the deadline well i think i'm really going deeper into this in the following one two months so you're gonna see more content for me in following months maybe less streams because i'm gonna be on the shitty internet for some time but definitely more content i will produce on more other kind of content all right just let me code a little bit and then let's just make some q and a session in the end i'm going to answer all the questions possible because it gets really complicated sometimes to concentrate on some stuff some stuff is simple some stuff that i do is simple but some requires some thinking and then i'm getting lost in my thought process so maybe like i'm gonna have a break in the end or before the end i'm gonna answer some questions so so first of all i'm gonna produce some uvs for my particles and the usual stuff i mean the particles they don't have uv but we can do the uv like this we have the gl point chord gl point chord and we can just do it like this i'm not sure if we need this normalization by the way they used it so i'm going to just replicate it for the sake of v class so we have those uvs now and if i just output it so we're going to see uvs on each of the particles well kind of uvs if i said that zero it's more like uv look the greenish with the reddish yeah right so now we have uv's when we have the uv some system of coordinate i can actually produce some circles so this is the usual thing to do this circle so um first of all i need to normalize uvs like uh centralize them so the central uv is going to be just the uv 2 multiplied by the uv minus one so now the this number is between zero and two and this whole number is between minus one and plus one well there are lots of ways of doing this i could just have subtracted 0.5 actually i don't know i don't think this is really that important at this moment so then we're gonna have some calculations to produce but the usual thing is you just do the like flawed disk equals length of the cuv and then you can just output it i'm gonna see some kind of this stuff and you can just do one minus these and we're gonna see these kind of circles and this is also a way and i think it's it's totally possible to do the animation we're doing today with this way but the guys went a bit the other path and i kind of like it because it gives you more control over the size of the particles oh come on guys stop that i'm gonna ban everyone who's participating in the discussion all right so length cuv so they they went to the different path so they went for this kind of path so they created the new i'm scholar myself josh koenigsegg actually i want to make it the full color so in the end i could set this full color to jail for a color come on i hope it was the cause of the whole [Music] discussion thing all right so we have this color default by one so it's just white every channel is white and then what do we do next so they actually i think uh i was thinking too much about the discussion and we actually kind of can go the other way so i still produce the vect4 but they went at least they went this magic number and i don't think it matters much we could change it later and then they divided this by length c ue so this number is between zero and like one yeah and actually one and square root of two actually yeah inside the particle it's actually between zero and square root of two but then if you divide any number with something close to zero you're gonna get infinitely big number right so this color is now going like infinitely huge and then when on the edge of the particle it's just it's just small it's gonna be zero points i mean 0.08 and divide it by one and it's going to be just just that small value right so it's going to be still kind of dark so we wouldn't be able to see anything with this setup but then they just multiply this stuff and the reason they do this you'll see the bit later why they actually do this so the color rgb we're taking the minimum so it doesn't go over the sum number it could be any kind of number actually it just changes the the type of the look that we are getting we are coding this animation that you see on my screen now and by the way you could just go and see the url all right so uh we have those particles on the screen now now we need to make a look and then animate them so when we divide this color color rgb yeah now we should normalize it so it doesn't go the infinitely big number doesn't go over 10 let's say 10. so it's going to put color rgb so we're going to take the minimum value of those two and it wouldn't go over 10. and then they're actually using some like some number for the color flawed color is going to be actually actually kind of a good good practice to encode rgb in rgb colors inside the jlsl is just to set the rgb values and divide them by 255 and it's gonna be 10 right 155 and 20 divided by 255 this is a bluish color that you see on the on the website actually like the color that you see you could have used any other color maybe we'll change it in the end of the stream well i'm sorry it's going to be hard to answer all those questions all right um language it's just shady language so we have this color i think i believe i had some i have some error now or why do i don't see anything shader error dimension mismatch now because i'm setting flawed color and this should be original color maybe original something like this yeah i should i should have divided like 0 0.8 by the length of the of the uv because well everything i explained for that based on that so we're dividing something with zero almost zero so we don't see anything changed yet and even if we well let's just output the original color for a second just to see if it's working and what color is actually that it's kind of bluish it's dark dark bluish but we're going to be multiplying this color with something so we're going to see the blue yeah it's a graphic programming mostly not a react sorry all right so they're going to be a couple of magic kind of multiplications but then in the end they're going to see that you could actually achieve this with a smooth step but i'm still interested to replicate the exact way the developers used because you gotta you gotta learn some new ways to do the same thing so i think this could have been done with two small steps also but still but still so we have this this math now and then we gotta involve the actual color now so color rgb we're gonna multiply this one with the original color so because this now has all the same values like it's gray it's rgb channels all are the same here so i'm going to multiply this with the original channel and some big value because it's too dark you know and i think the 120 worked good for me and then i could just [Music] remove these i set the color rgb here yeah and the color starting to look well kind of like the color that we get here it's not yet clear why we have this square stuff but we are getting there so now we have this color rgb and the thing that we need to do the thing that we need to do i'm going to multiply my whole color with the the opacity value to randomize the all these all the things here so now we have those things random but i also need the transparency of the particles because right now they are not transparent at all we have the alpha channel set to one the whole time so i'm gonna do another calculation with my um with my opacity part and it's going to be so it shouldn't go over [Music] one so the color still has some uh some alpha now maybe multiply this 10. so we are getting there they already square root they are kind of bright not quite yet there and i think uh the reason is i gotta make it bigger make particles way bigger than that now they are overlapping did i have actually sent transparent to true i did oh and then i need to set the blending part because blending looks cool on particles usually now i have them bright because they are just adding the additive blending they're just adding the color [Music] but then i think i just need to set the value in a different scale i mean uh the opacity i'm setting here i'm spending too much time on on the look maybe divided by 10. yeah see what we're getting now maybe by five so if you play with those values you could get all kinds of looks and it's not even post-processing which is they're just additive blending and the particles are huge again so if you just get back you see them small on screen but if you just get back for a moment and make them i don't know white i mean white you could see the squares the squares are quite big of them but if we just do this so the particle is big but it has this flare it has its brightness and because it is additive blend and you get this nice look and with randomness i think it looks already pretty cool to me so i need to drink some water um sorry you keep on doing this stuff sorry victoria because i'm not sure if you're victoria now all right so you could see those particles you could you could actually see the edge even the edge of those things if you make them brighter but anyway let's continue so now we have those particles in place they look cool and then and then we need to make this animated so first of all let's get back to the area we have we have 22 lines here 22 paths on my screen so what i need to do i need to animate them all separately and i need to animate them all in my render loop also i don't need all particles like one of them has like 500 particles another one has like also 500 particles i don't need 500 particles on my screen i actually need to like 50 maybe 100 i think the guys used just 100 particles so i just need to see the trail just but just one trail to see on my screen and let's implement the trail so i'm gonna do the this update things update things and instead of doing the geometry where i do like all the particles on my screen i'm gonna do just 2200 of them because i already had what oh this is because it's the other website i'm just going to do i'm going to do 2200 buffered geometry so it's going to be i'm gonna be using just 2200 particles on my screen not those seven ten thousand so let's try to do this so instead of instead of doing this i'm gonna do like this max equals 2200 or actually this could be these lines length multiplied by 100 and then i'm gonna do the loop max and then instead of these loops showing all the particles i'm going to do this this opacity well actually the same same line i'm gonna do 2200 of them and then the same goes for the positions but i can actually push just zero zero zero like which 2200 should i put because we see the different particles on my screen the whole time so i could actually push just zeros for this well at this moment and then let's see well maybe math random math random just to see them and the same here just to see something in my screen okay something broke down max is not defined because it's this max so we see those particles it's actually looking kind of good you see but with those particles you could achieve lots of different looks and this is magic magical looking particles and then let's continue let's continue so we have particles with random location they are not following any pests we just well commented actually all the connection between paths and that stuff and what i want to do actually so i have those like 100 i have 100 reserved particles for each of my lines so when my when the time goes by i want those particles to uh i want to see only particular hundred particles from each of the lines and for this i'm gonna just um i'm gonna just do this i'm gonna update the the attribute and like three js update attributes that where's that so to update the attribute you just get the array of this attribute which is the floor 32 area and then in the end you just set this so because i already have the these this geometry i just need to update it like this it's update true and then in between i need to change it how do i change it i'm going to set it first this position area equals this position because this position is already 32 array i believe so is it so this positions is not yet 32 array but we can do it's a little area i could remove the could remove it here now and actually when i'm setting instead of push i'm going to use the the api of 32 array which is set these values and i multiplied by three and well probably the same goes for the opacity i'm gonna change them both like this right and instead of push i'm going to use set it's going to be an array and then oopsie and then it's going to be i alright so it doesn't it shouldn't change anything well it already changed something offset is out of bounds i guess i have to set the size of the arrays right away when i initialize them so it's going to be multiplied by three and this is just this max uh bytes for element of undefined okay i guess this is because i'm setting those values right so back to something working again so we have this position which is actually this positions which is 32 every that i initialize and i could actually this should work right yeah so just updating with the same values on each request animation frame right now and nothing's happening because i'm running it in my render loop i'm updating it with the same exact value every time and nothing is happening so now i need to change those these positions inside so this loops i'm going to do these lines for each and this is going to be line i also need to have some j equals 0 some index right so now i can i can get the first 100 points of each of the line so first of all for each of the lines i need to have some speed i need to have some current position so let's set those values let's set those values zero speed equals let's say one for every single one of them and then should be enough so now when i see first hundred points of each of my lines let's try to do this this is looping through all the lines i'm taking first hundred points i'm gonna push them to these positions and i should see them this is the plan like 100 and then so i have this line the line has points so i could actually okay so the point is going to be line points i so this is a vector 3 vector 3 and then i'm going to have these positions set i'm going to p x p y p z i multiplied by 3 and i runs from zero to one hundred so it's going to be first hundred points but it it couldn't be it shouldn't be i because if it's i on the each of the loops we're gonna take we're gonna set first hundred of positions this is gonna be this j it's gotta be this chain let's see so now we have first hundred points of each of the lines and just so you understand what i did because if it's replace it with i i'm gonna just see one line here because only first hundred of positions being updated and all the others staying the same so i just need to do this j here so now i need to make it move right and to make it move i need to change the current position of my line so on each of my update themes for each of the lines i'm going to change the current pause current pause i'm going to add the line speed which is just one at this moment which is just one in the moment and if the line speed in the current position goes over the length of the of my line so the current post should be equal i mean line it's not current it's line i mean not this it's line so line current pause line length so it shouldn't go over the edge of the number for the maximum number of particles that we have okay all final because i'm not really using the current position yet so now now when i'm getting this point i should actually involve current positions somehow there so i'm gonna produce the index i'm gonna use this index there and this is going to be equal what it's going to be line current boss plus i because well it used to be just i and now just adding the current pos but this could also get over the maximum amount of the maximum number of particles in my array so i need to do the same thing here i need to make it modular and length i only don't see anything because properties of n defines probably i'm still going over there over the edge somewhere here line length it's it's not line length actually length is the length of the path right it's it's not actually an integer we need to use the number of particles which was what was the name of this just number i need to use number not length well in my head it was length of the area but it's actually just number okay still something wrong so we are getting some index here which we don't really have in the array let's just output the line here so the current post is actually none what the i mean amitavito yeah i could have used that as also yeah it's nice suggestion but so current post is none and this is because why what was this yeah and now you see this because we are moving and we are looping on each okay i have to remove the we have to remove the console and this was the hardest math part the whole stream so now because the index is growing all the time and because it's modular we're just having looped paths all over the place yuma lauda okay so we have them traveling now it's not yet like what i wanted to see but we are getting there so now we are setting the positions so it's kind of good in terms of positions but we but we still have to set the opacity like so it's like fading away so the trail is fading away so we do the opacity and i'm going to set the opacity you know the closer it gets to the head of the thing and you know we have this number like from 0 to 100 this is actually from trail to the head of the i don't know what's that that's kind of snake traveling through the screen so i could just set the opacity also j to something uh like i divided by a hundred and maybe by thousand because i used to have this opacity like divided by five so by 500 let's see and now we see it's already well it's kind of it's kind of it i think we almost made it we have to add some randomness also but we just did those traveling things so what we need to do next we could just show the image behind this is actually jpeg just the jpeg image that you used as a reference to build all those svg paths so we could use this image and just show it behind and then well we could play with the with the numbers also maybe out end in the end so it looks more like we should add some randomness to the particles also so when i when i create the coordinates i could actually do some randomness i mean that might be too big but just a little bit of randomness adds to this whole look so now we have them like this and well this is kind of it but let's just try to also show the image this is going to be the last part um we gotta guess which images we're gonna show though uh let's just see what images are they using on the website i think it's one of these and it's also multiply black it's also multiplied with the background color so it's bluish let's try to guess which image do i see here right now i think it's the first one i'm gonna go to vault replica gpec i'm just use i think i'm going to use just mesh basic material so we have this image and i could just add the mesh basic material with the color here and with the map so not here not like here so let's okay let map free and you just the last touch it should be 248 by and then um3 mesh basic material i don't know blue and then map all right so just real fast created the mesh for me this scene adds map can resolve dependency.js image jpg js image jpeg alright something is wrong blue is not defined of course blue is not defined still something is wrong image is not defined because it's just in i have to be more consistent with well i guess it's not the it's not that one or maybe i think it's a flip yeah i think it's a flip y situation so i need to create texture equals this yeah so now we have it now they are really traveling those street paths and i think well of course we could we should play with the color definitely here maybe just make it a bit darker should be enough oh you get the point i guess that's too much should be enough we could play with the brightness and the contrast values i think they used the separate shader material just to show the map and show because they also have this like a little bit of lighting for the street parts but this is already quite simple so now we have this path they have these dots travel in the streets of the city and this is really well i think this is amazing this is kind of a magic to me even though on the other hand it's kind of a simple pretty straightforward way so we're just setting the positions of the visible points on my screen but in the end it's just well it's so cool just so cool to look at so mesmerizing it's so simple to produce you need to of course use the figma or the illustrator to draw all those paths but you know it's quite easy you just see the image and you just connect the points i mean you don't have to be a desire to do that any developer can do that yeah so as i'm finished with today's animation we can have like questions because i'm i probably missed some messages yeah you're trying to help me thank you yeah i think it's z position because when we rotate it's it's a slight z position thing so just just moving the particles in the z axis and that's it and that's it this is not that you know mesmerizing so i wouldn't do that but they're just moving to z and this the value right oh thank you i don't think i'm not i'm totally i'm that talented i'm just learning new stuff it's really cool and by the way i i actually promised to to change some variables just so we see how it looks with the different settings for the fragment shares we could just try to play with these values and do something like this which is well something different already and then maybe multiply by 100 here okay this is not good something like this also which like can kind of more bloom bloomish effect which is i think might be even cooler than what i've seen on their website actually i like it a bit more well both of them look cool so it's plenty of experiment in here and i really like this kind of bloomish effect on the on the particles well i could actually do also like the first thing i'm thinking it's here they now lay nearly fading out so i could just do i could square this so i could do math poll back to the second power what oh because it's that small and then when i raise it to the power maybe just okay now it's the same maybe look like this so now they're kind of fading like they're not the square but 1.3 square root i mean i mean i could get back to the more brighter option here yeah it's also kind of cool well we just everything that we do here is actually pretty cool and could be used in any design hue and saturation of a clock well of course i can because i have this opacity thin so i have this the opacity value so i could actually do do we do this how do we do this do i need some hsl jlsl function for that we could do like the uh this is definitely the last thing i'm gonna do today we could do this i'm not even sure how it would look like and i i haven't even really tried that on this particular example but let's try to do this palette palette where's the formula okay so uh actually this original color is kind of the color that we're getting here and maybe if i do this forward here you're gonna get the completely different look so instead of this original color i can use something dynamic depending on the opacity maybe or because opacity is changing between 0 and 1 i could i could just maybe do something like this and then i don't know just some random numbers maybe it will look nice probably made a mistake still a mistake somewhere okay 10. um should have changed the color probably because i'm making them too bright i'm losing the color here so what i told you in the beginning that you actually could achieve this effect with two smooth steps one smooth step for the bright part of the particle and another smooth step for the other part of the particle for this particular it's flare and i think it would be easier to change colors and hue saturation with those instead of just using this like really dark color and then multiplying it with big values just to get some bloom effect so this is a different look so i think this might be a different animation but this is the way to do this you could just play with those values and do the smooth step yeah maybe also multiply this by 100 so we're getting the different colors but not enough different somehow right i don't know maybe so we're just getting one color in the end the opacity doesn't change much maybe should i multiply it with a bigger number just to make a gradient on some sort well because the opacity is between like some small values maybe i could just i don't know maybe we should just stop this is just you know you could experiment with this infinitely so it's going to be a homework try to do the animation so i think you should just do this smooth step with the opacity and then mix colors like multiply the cell color rgb with some different colors and you'll get it just a different math and maybe i will do a mistake and already over one hour so probably should stop and get a nice sunday everybody yeah just go ahead and try it i already broke this piece okay i'm just gonna get back so i have a nice version of this animation purple i don't remember which number was there by the way oh it was four there okay yeah so this is the animation thank you everybody for being with me today i don't think there's going to be stream next sunday so it's going to be a short break and then we're going to get back hope you like that one let me know what you think also leave some comments i really appreciate it and it helps to promote my streams my videos and well yeah push like button subscribe comments uh thank you for being with me thank you for supporting me today yeah have a nice sunday everybody and see you in the next stream see you on twitter see you everywhere also if you're still here i'm actually i have a russian course now for junior developers so if you're interested in that those kind of things you could go ahead and run it it's still in alpha beta but i'm i'm going to be keeping you updated i'm going to be updating new stuff in there it's mostly for junior developers though so not for 3.js fans no not for the webgl but anyway so guys thank you i believe i should change this background now have a good day everyone have a nice sunday say some kind words to the people that you love live a happy life and see you

Channel: Yuri Artiukh

Views: 8,741

Rating: 4.9772081 out of 5

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

Id: MnKKetZZi8g

Length: 71min 0sec (4260 seconds)

Published: Sun Jan 31 2021