Wobbly 2D Physics with Matter.js and Paper.js #5

hey good morning everyone my name is yuri and we're gonna be streaming today again doing some live coding hopefully it will be cool and interesting and everything stop the video now just let me know if you hear me well see me well if everything is all right and let's get started setup is constantly changing so i'm never sure everything is working properly yeah let me know where you're from by the way it's always interesting to know countries and time zones from yep it's small delay so gotta wait a little bit until you'll see your messages meanwhile i'm gonna switch the screen yeah thank you roman so i'm going to switch the screen and show you what we're going to be doing today so just to make a kind of short break from webgl but still making a cool effect because i've been working lately on my eight years laptop and it had some old ar archives i actually found some links that i put up to you know to decompile later on like three years ago maybe four years ago and finally because i'm working on this old laptop i found that those old links and one of the old links is actually this website from 2017 cedric pereira it's done by the cevalorski from france the domain is not working hopefully i will attack him later on the effect is these like bubbly wobbly physics on the website also has shadow and it also works at the mask for the for the image of course there's also some animations between them which is kind of easy i guess right but that's what we're going to be doing today yeah so i'm going to do a simple layout for my windows oh hola should say que pedo yeah okay hey banana france nice to see you guys thank you for supporting me in this morning and by the way i should actually be drinking some wine i've prepared some what is this on pasquale the wine from uruguay or uruguay it's crazy it's crazy geography and some line probably the whole bottle not that big anyway so yeah all right let's get started it's a little bit complicated hopefully we'll be all right you know at the time when i decompiled this website i wasn't able to actually like recreate this effect it it seemed hard to me because i wasn't maybe i liked some knowledge and some stuff and hold up yeah so like some knowledge but now right now actually succeeded and it's like closing the old stuff that you like the old dream that you had three years ago four years ago and i finally did it and it feels so good and i want to share it with you hello to india too so let's get started i'm gonna create folder i'm to call it i'm going to be using physics today and two-dimensional drawing mostly i believe this could be recreated with jlsl and shaders as well but just to follow the exact path of the developer for this website and to learn new stuff i will be just doing this because i'm you know i like to decompile websites learn new stuff from other developers share knowledge right so how do we call it i'm going to call it whoop because it's kind of wobbly so i'm going to use sublime baggage and you know what i actually have my license for the sublime in place i'm gonna do simple window layout so i could see everything you could see everything hopefully i think browser should be on the right and editor on the left sort of like this please so i'm going to create actually i'm going to copy my index html from my 3.js template i don't think i will need vgs and also js folder new folder s chess and then app.js and then stream and then yeah just objects so um should be good to go with the parcel i'm gonna go to whoop i'm gonna switch my note then also index html should be good to go somehow the most like heavy operation on my laptop currently is running parcel after like 10 minutes the fans go crazy uh yeah so high stream works we are good to go okay i need to figure out how to hit the chat here so i could see your messages like two years ago i guess already it's been some time i also had some other stuff to do like i don't know being depressed broken-hearted so i had some breaks with shadow learning obviously but yay your writing time so i'm just gonna probably see the last message yeah should be good all right ready to start so for this website just so we like know exactly what we will be doing developer actually used a pretty we should say complicated and nice and really cool technology first of all that was metro.js library which is usually used for physics well this is the physics engine literally so you could do like all sorts of crazy stuff you know crazy demo you could play with it's physics and it's actually like nice physics i don't see fps now but it's actually 60fps so it's pretty effective way of using two-dimensional physics on the web i mean probably one of the most effective ways so this is the first part the second part developer actually used paper js as well and paper jazz is the engine to draw stuff it's like kind of you can think about it like kind of like 3gs maybe but for two-dimensional stuff or maybe like a processing something like that so it's just a library with a bunch of functions which makes it easier to draw some two-dimensional shapes and shadows curves kind of like that so if you go into the examples you'll see a pretty complicated stuff actually which you can draw in 2d this is actually two-dimensional thing and then any of those is actually two-dimensional things and you can even draw the metal balls with paper jazz in a pretty effective way it should be something with a contrast and blur but still but still so yeah there we go so gonna be using those two libraries i mean not to not to be like an old person not being satisfied with anything but those two libraries actually have one thing in common and i mean the dogs are a bit they're not hundred percent telling you how you could use them so anyway you need to spend some time to figure out so hopefully the stream will be like useful to the people who would like to try or use the metro dress or paper dress in their 2021 or in future because it's not it turned out not that easy yeah they don't don't really have proper examples there with the stuff that you need all right so let's get started so first of all i'm gonna i'm gonna use metro.js and i'm gonna create a simple scene with metro.js and then we'll go from there hey everybody so i believe there should have been some demos on the metro.js website so go to demons there are lots of stuff in here so maybe just some simple something simple like a rigid body one should i use actually so it will be simple i'm just looking for one with a really either really short code you don't cradle interest card there's gravity friction okay let's just see a couple of them actually use even this one it has a lot of stuff in here too many stuff lunch and compound bodies everything is so complicated constraints too many constraints too many bodies i think i saw a really simple one but i'm not it's like missing this one which one was the simple simplest one shapes so maybe manipulation okay not as many bodies right here so maybe i mean it's not really clear which one is simple like if you go to the air friction okay that would be a friction you have the small icon here which gets you to the code it's not too too many lines of code like 88 so let's get started first of all i'm gonna look for the metro js on the npm matter yes so we're going to do letter yes and let's see what's what what we're getting there actually because in the example you you actually see something like these so it's in it's extending some example with an air friction function so of course that's more comfortable for the developers of the library but it's not really comfortable for the developers outside so let's see what we are getting there right get an object with actually all those objects in there like in the first hope so we have the grid query plugin bounds constraints so actually we are getting like all this stuff inside this object so let's just copy and paste this one actually pretty easy to copy yeah and then we have to create all this stuff run the render add the composites okay let's just copy paste to see that we can run the actual example from the the actual example so we have the runner create for runner render we have the engine world so need to create the mouse lots of stuff here that's why i told you about creating an easy example but probably we could replace these as well i don't think i need these also redundant also have some render look at kind of stuff which is crazy i'm not sure we need it hopefully it should work by now let's see it's not really working because we need to provide an element and this is required in document body element oh yeah it's actually working but it's just adding the canvas element to not the proper part of the page so i'm gonna do query selector yeah so right now we just converted the example from the library of the matter.js to our example of course it doesn't look nearly like what we need to recreate like this shape so we have to figure out how to do this shape to the shapes like this with physics you actually need a bunch of like points with some constraints that's like with some you know like a bunch of springs you usually called in physics hey hey thank you i love you too okay so we need to create a bunch of points here how do we go about this there's a lot of stuff to recreate so let's start with it first of all i need some shape i need i need to get some i think i had some um i copy pasted some some stuff for me just so i could get the shape okay i think it's this shape it's an svg shape from an actual website and let's do it path const path yeah let's go ahead and call it conspect i'm not going to be changing this one so this is just an scg path so just normal svgs that you will draw in figma or illustrator and you can just export this path then we could do something about this path well first of all i need to remove this stuff that i don't really need here so let's calculate the let's make the canvas full screen lots of stuff to do here okay so i'm just gonna go ahead and do this so these are gonna be the size for my canvas yes right now it's full screen i mean this is my full screen anyway so next i need to remove this stuff that i don't really need here so first of all there's some engine creation maybe it's it's it's time to just do something like this i'm going to switch to my normal structure of the request animation frame loop time equals zero this one then i will need to create an engine and then a new schedule just test if it's actually working and yeah the time working properly so i'm gonna i'm just gonna move to this because i think it's easier i also need to initialize my drawing engine at some point right so let's just convert the example to the sketch example run physics i'm gonna do this engine and create this world engine world okay i need to create the renderer this just means the canvas for my animation gonna be this piece it's gonna be just a little bigger i need to decide everything right and notice that i actually not i don't have to run anything inside my render loop because mero jazz takes takes this responsibility so then this is actually physics init it's like and then add objects somewhere here i also need to initialize this part i'm not sure i would need it for the render run engine create maybe i should call this one then let it go loop this render is already there so just switching everything to why do i have my console lock still here shouldn't engine is not defined yeah of course and then i will need to add this and this and this and this and that i don't think i need this doesn't actually do anything to me this is adding the actual objects some rectangles and then there's a mouse part almost this render all right visible files just wanna see it and then add the actual object to the scene i don't know because i'm used to classes it just structures scored a little bit better than just using the spaghetti code although i could have done it with the spaghetti code as well so render mouse there's also this okay and then render look at so this gotta do the job and not read property okay some engine is not defined missed this somewhere probably yeah so now we converted everything to the class annotation i think it's just just a little bit more structured because you have some you know constructor which runs everything and yeah even though we have the render loop for now and not using it so anyway right mouse constraint is not defined so i guess i've missed oh yeah because it was like this this render is not the function yeah because i need to call render loop now render loop right now it's perfect perfectly fine what else do i need i also need the paper.js library i also need the path which i have already and let's include the paper jazz library paper js library yes so it's just paper i'm going to import paper from this is another thing that those libraries have in common because they're just a bunch of functions in global scope so if you just output what paper is importing uh some reason got stuck sometimes so paper scope actually puts like just some just something yeah and i think the most of this stuff is in proto yeah and it's like a bunch of objects that you could use like curve path matrix group so it's just the library of useful functions i i would say functions useful for drawing stuff in the browser and there are like a lot of them so if you go into the paper.js library website even though it's i mean it's like in some crucial parts of the docs like how to run it for example not really clear it has a lot of stuff in there so if you go here and go for example to well i guess tutorials and working with paper gs there is some pretty simple code and they also use some pretty i would say weird notation so you set the canvas id inside the script as a canvas attribute which is uh which is so weird well probably that because the library was built like 10 years ago i don't know it's an old one so nobody used any bundlers and you used to do stuff like that anyway now it's different and we're gonna do stuff in a different way and just so we start from the beginning let's remove some objects that i don't really need here so we have this runner which runs the engine and we have the renderer which renders the stuff into the canvas we also have it now full screen right yes full screen perfect just checking my everything is good a to uk is there a winky bully mm-hmm so we have physics so what i'm thinking is we don't really need this part probably i need to add something else if i just comment this it's going to be just an empty canvas no errors whatsoever so let's start building stuff first of all i'm going to use the path object from the paper.js so paper.js has a path object which you can actually use with the path data which is an svg path data so i could just um you know feed my svg into this path and see what's going gonna happen so inside my adding objects i'm gonna do this i'm gonna please i wanted to call it path but i already have the past variable so i'm gonna call it pp okay and then it's gonna be new paper f and then path and then let's see what's gonna happen this is so wrong but [Music] who's trying to read those properties um paper path how did i go wrong maybe this stuff is being used any anywhere no so what the actual error i have here is it coming from that happens when i initialize new path the path is well should be fine what's wrong with your current style of now what the hell is current style even so yeah when you work with those libraries you can get some weird errors and i have no idea why i have this like maybe that was just a parcel error okay let's try to run this one again so new paper path then i immediately get this maybe i should initialize paper in some way before that so so that i have it so maybe before physics let's initialize paper we need paper i think it's called this way add objects and there's a new paper yeah right so to initialize paper it's actually the the thing that i had to find myself so to initialize paper you have to call like there are a couple of ways but one of the ways is to create a project so i'm going to create a like this project called new paper project and then into this project i have to keep the actual dom element so the paper canvas paper and then i'll create another canvas here like this and yeah like i'm gonna add some styles to it just so we see it uh should be there it's there i can scroll because because i made the this full screen and probably it's it's using my mouse or something maybe i should just do i really need this lookup thing by the way not really do i need this mouse at the moment not really i think the mouse was kidnapping my like hijacking my events and then i couldn't scroll because of this so let's not use it for now so right now on ours i have this new canvas from the paper and we can draw something into the paper now i have to connect the paper to these canvas though so i have to use these paper canvas when i initialize my project right and then and then okay what's next now the canvas is at the bottom everything is in place no errors that i'm getting here so this pp is actually working now so i had to initialize paper js before i was using the path thing okay let's see what's gonna put me now so right now switch to this view i have this path thing so i actually run the path object on my svg path and it will output me this stuff so it actually has a lot of data in here but the most important is segments stuff so actually have somewhere here segments which is in arie and this area has 32 points so this seems like the svg points from my svg path like just the path it's it's it's it's correct now oh i see that you have some experience with paper because i i i'm not and it's not really clear like in the docs there are no examples yeah i found the setup thing also found that there's a way to initialize it via the project creation but there's not a single example on the official website how to do that so i think we gotta go with the like project example because it's it's working anyway kind of doing the same i guess all all right so we have this project we have converted the path now we could you know we could just draw this path probably to draw this path i need to set the fill color or something to this path so let's just yeah so there we have it so this is the actual svg path and we just drew that one with the help of paper.js it's pretty easy right you didn't have to make a loop over all of those points and you just had to like feed it and it's immediately drawing there all right next thing i need to make it live i need to make physics based i need to make a lot of stuff in here so inside my objects creations i i created this uh paper dressing now i need to create the loop and let's do this this number of just number equals these pp segments length lock this number should be 32 [Music] come on yeah it's just 32. all right we have this number now i have to create a couple of loops to create the actual physics so i'm gonna create the loop until the this number and i'm gonna create a bunch of points in space which i will be using to to actually create the physics i think uh okay now it's so right now when i refresh the page i have some gravity i'm not sure we'll be needing the gravity for the example we're building here but let's see how it works with gravity first i have this composite steel in place which is kind of weird because this is not the thing that i'm building but yeah let's see how it works together creating the physical like points circles in in space so for this i will do i probably will need a couple of areas first of all i'm going to need the circles barry and then i'm gonna do this uh circles push something what's that gonna be i don't need to push somebody i need to recreate the bodies from the metro.js they actually have the bodies already here in place this is a way to build stuff like this rectangles but i need some circles so i will do this gonna be bodies circle slower case i think and then body circle so it accepts the coordinates of the stuff and then the radius and then some optional stuff so so first i will need the coordinates of the stuff and then the size of it the coordinates i will take from these pp segments so it's going to be like this and then let's see how the object is built so go into segments segments segments as an array and inside the various segment object which has the point and the point has x and y with an actual numbers all right so it's going to be point x gonna be point y that's gonna be some radius well let it be 10. all right so we just added the circles i think i would need to add them to the actual world at kind of stuff like i did here it's gonna be and then so i'm going to add the full array of those objects to my scene uh property add a fan defined first world was lowercase circles is not defined because it's these circles this world add is not a function so maybe i should import the world as well here one was a global one yeah right so we just added the same shape as a circle so our scene that's already looking pretty awesome because like it's physics it's working it's not what i need to do actually so to fix the objects in place actually first i need to remove gravity and to remove gravity i need to fix the engine so it's going to be this engine gravity i think is that x just gravity x 0 well probably i just need to change the y gravity but let's just be sure about that this engine it's world gravity yeah so right now we don't have any gravity so they just stay in place we have this compound object which i'm going to remove now because oh yeah yeah right now we have the same shape represented with some already kind of basic simulation the next step i'm going to add the mouse so i could like play around with this object so for this i will add the inside my add objects i'm going to create this cursor is going to be bodies circle again i don't know 300 300 and then the radius 50. then yeah you could also put up some settings to those objects like how how they physically interact with each other so we put some density meaning like a weight probably or an object and you could put up some restitution which one do i need for this example i don't really know so let's first start with doing the cursor thing so i could interact with the mouse with the object so i have the paris circle it doesn't seem so but we almost hit the end of the thing already just a little bit complicated from ethiopia a long way all right so we have the objects now i need to move the cursor on my scene and i think you should also set like this static false thing i'm just gonna set it so we don't get any errors any good errors and then i need to change the position of this thing when my mouse moves so i need to add some events this render canvas this is the dom element it is my canvas so i could add some event to this oh it's too much move all right so we have oh come on so let's see if it's working for us it does but the first one doesn't work because it's double l so now we have the coordinates on the screen of the mouse and i could set those coordinates i'm just gonna do something like this mouse i mean 300 actually and then here i'm gonna do this mouse x equals here and the same for white just set in mouse position and then inside my request animation frame loop i have to translate right now now it's it's still it's still normal so now i have to move my my actual body i have a lot of stuff here which i don't really need probably but anyway i have to translate my body and the way to translate this one in the metal.js is actually a little bit weird so to do this you would need to do run the global objects translate and then you have to use the the object that you want to move and then put up some coordinates where you want to move it so it's going to be x and y and those x and y's are going to be actual there's a there's a weird thing because when you translate you translate in matter js relatively to the object position so it's not the absolute like position absolute and you set coordinates on the screen you actually translate relatively to the relative to the object position and for this you need to know the previous object but this position so actually if i just use this this mouse x this mouse y shouldn't work for me i also need to add this cursor my scene so it's right here but it doesn't really work and i have some error body is not defined oh yeah but it's not so it just disappears immediately the cursor from the screen and to fix that instead of just setting the client x and y i would need to do something like this and it's going to be i need to calculate the relative position still disappearing from my screen for some reason so let's just output the actual coordinates not really changing some reason i'm not updating this mouse why is that so mouse events maybe i should put mouse events after i'm adding objects because i'm adding cursor right here the second one is none for some reason the y is none o because it's lowercase y now it's working now we can interact with the object so i had some bunch of small errors because i said had lowercase y and i also needed to calculate related position to the previous mouse position because this way the object moves correctly with with the metal.js and just restart it all and i could interact with the objects but i can like change their places and this is not not cool right to fix that i will need to add some anchors for them so they stick to the places they are at let's do that so when i'm adding the objects not just adding the circles i'm gonna also add like of course anchors and then inside those anchors i'm going to add another like the same same coordinates same spot but different so it's going to be again body's circle i'm going to it's like it's the same body actually but i'm going to later use it for different purpose because i will be changing coordinates of circles but i will not be changing coordinates of anchors and this means the objects will be trying to preserve its form actually all right lots of stuff here just a little bit of wine thank you antohan luckily we figured that out easy to make mistakes all right we have this we have also anchors uh i could also add those anchors to my scene but i don't i don't need to actually i don't need them to be drawn so that's right so the next thing is i would actually need to link those objects between them so first of all i would need to link every single like circle that i have on my screen come on just stopped refreshing some reason parcel is glitching so i i need to link all of those objects to their places and then probably some more links between them right okay okay where do i start next okay i'm just gonna go with another loop after this one because i need all those objects to be created before i start the next loop and i need to link objects between one another first of all i'm gonna i'm just gonna write some code and then explain it probably it's better because it could be a little complicated links i'm gonna add it immediately to my scene links then to add some links you use another object which is called constraint which is like literally a link or constraint constraint uh so we will push like new constraint which is also kind of weird way to create constraints like you run the global object to do that and then inside this you you put up two body a which is gonna be like this circle i circles i and body b which is gonna be just going to be what i'm gonna do what well yeah first of all i need to create to the same point but then later on i would need to link to another one by anybody b and there's also also some stiffness i don't really remember the number which works good for this so i think this one was like one just one let's experiment with this so created the links this is the loop i'm just pushing links all right should be good you could see now that they are yeah well something is different now right they're trying to kind of preserve its opposition or something like that i think i also need to change some density for them so they work better and also set the restitution for it to work better so there's a bunch of physics setting which you could play and you could achieve different effects but to achieve the exact effect that i want to achieve on this stream i will do this so when i create the object with the size and everything i will put another seal so this circle is going to be this and then for anchors it's going to be the same you can see now some vectors here like the physics being in place they're still moving around for some reason i think i need to connect them between one another too so i'm gonna create the next gonna be these circles plus one and it's going to be either or zero for the last one and i need to create another constraint here but this time between next right and the stiffness is gonna be hmm some but one of those should be small so maybe try to experiment like this right so now we see the constraints the object is being connected oh nothing something good is happening so actually if you set the stiffness one to this one it's gonna happen oh come on just refresh it's too dense and they are like staying in places because they're too stiff and because i set the stiffness too big i achieved like well also some kind of effect but different effect not the one i wanted to achieve so right now we have the shape already okay my browser just stops refreshing for some reason i believe this is a parcel issue so you could see this and matter just visualizing the physics with those springs on canvas of course that's not what we're going to have on the final on the final visual but we are getting somewhere so the next thing i actually want to move my my segments my segments somewhere closer to the center and also i want to connect them not only with the next neighbor but also within after the next neighbor right i also want to move my objects closer to the center so when i run this loop with the segments i can just add something like let's just move it closer to the center not really center it properly but close to the center come on somehow my library loading broken it's pretty cool now because i only moved the only move the actual circles but not the anchors so they have been like kind of crazy what you could do with this yes now i move this one i kind of also want to create this center part also static gonna be like 200 100 also 50 i'm gonna add almost there so uh is static true i believe on this one okay it's just i need to move it further like not really the proper way to center things but all right so now we have some kind of center now not only i will connect these circles with the their neighbors with the center as well so when i do this we'll make another connection between like this center and then this circles i and the stiffness i'm going to use there is gonna be something small this probably was a number yes now we have springs all over the place it actually looks kind of similar to make it more like physically correct i need to also create the links between the after the next object like here next next object so it's going to be i plus 2 and if it's available i plus 2 is going to be i plus 2 if not it's going to be either [Music] better get simple math it's going to be just circles i guess either zero or one okay just this circle zero or this circles one i'm just trying to protect it from the last point like when we get in the loop to the last point we're not gonna have the like the next next object it's gonna be next next and then the stiffness there were i just have my notes here the stiffness for the next next thing it was 0.4 it's a little bit bigger so it's kind of and the connection between them is really stiff like this is one stiff and then the connection to the further one is just a little bit smaller and then the connection to the center is really tiny it's just 0.4 and this way you get kind of wobbly shape okay my refresh is broken all right get some error here not read property x of undefined probably messed up in this calculation yeah maybe i could actually do it like this should have been the way right now there's some weird error here probably with the next next calculation right here because it's it's it's correct for everything else remove this stealing pants let's log in i'm gonna remove them as well okay nothing distracts me now it's not okay it's refreshed all right working now it's kind of what we needed to do there's a bunch of things we could play with the uh with the parameters here with the stiffness so maybe do i really need the next one i think i need it because it actually helps to to make it more wobbly yeah canon js is also nice but it's more for 3d animations so maybe i don't really need this one circle cyphus 2 number and then and then i have the server so somehow on id7 next next is calculated correctly but then i have some error here links push i'm adding the links circles i it looks like something is missing here but this should be fine right why doesn't it all put me anything i think it's they're pretty good they should be like close to each other so they don't really overlap each other so what the hell happened with my next next uh why doesn't it put me anything here that's what i'm wondering um oh yeah oh yeah thank you right right so you can see already that with next connections you could see more sprints here and it actually works a little bit better more stable you could also i think you could also remove the center connection now maybe it will get you a different kind of thing let's see come on just refresh is broken maybe it's better this way i don't know so in the original they actually used the connection to the center but i actually like this one more so right now we created the physics for the bubbly thing now we need to create the image mask and all this stuff actually this is the simplest stuff with the paper jazz but every time i mention something this simple it's not that simple after all so first of all we still have this voltage shape right here it's not being updated yet like if i just refresh the page let's put it over the new canvas so of course refresh is broken yeah right so now one canvas is over the other canvas uh let's uh do some paper js drawing then but there's no console logs now just one one console like that it's just freezing because of my parcel and because this is an old laptop some something is wrong with my parcel running on this exact laptop so i i don't know how to fix it better to buy a new laptop all right so let's do the uh the part where we draw something um first of all when we created this shape it stays static right so even when i'm moving this shape the one the other one is stays there too overcome this in my loop i will create another loop this number and then i need to like update the positions so it's going to be i called it pp so it's going to be these pp segments the one that we already remember i uh points x equals and then we should take the positions of our circles so we could take the these circles right and then just position x and the same goes for y maybe it will refresh this time yeah so now we are drawing on second canvas and it's actually correctly this one small thing that we could fix here as well you could see that it's not it's not quite smooth and that's actually a pretty nice pretty cool function in the paper just which makes it smooth so we could just do this just do this pp smooth so it's going to be a smooth pv now what it does it actually cuts all the all the corners in in the shape and makes them rounded so it creates probably creates more points or creates some easier curves so it's it actually looks smoother and like more even more wobbly than it looks right now because right now i have 32 points right now i'm not sure if you can notice but it's actually more smooth now so the next step is how to create the mask in the image well for the image i've recently watched the resident alien series i just took some image on there oh it's a web b ah we just take an image from there alien then i need to load this image alien png and we'll need to load this image there's also like a small catch here like how to do we need to do both shadow and we need to do the mask so to do the shadow and the math we will need to create two actually two objects shadow and then and the shadow should go first because it's going to be oh it's going to be the first one and then over the shadow i will draw the actual pp and then and then and then this shadow shadow ruler i guess right i post the name 30 should be good to go so yeah they're both placed in the same path and then i will need to update both of them actually and shadows should be also most i can't see shadow yet i guess i need to specify the shadow color as well okay now we now we have this slight red shadow for the for the shape it's almost there so now we only need to add an image and make a mask out of it let's do that let's do that right here so actually to do that we create a group in in the paper so i'm going to create group equals new paper group and then to create a mask you create a group and then the first object in the group sourced at the actual like clip path or the mask so the first object is going to be ep and then i need to add another object and i need to specify that it actually clips so it's going to be this group clipped true and then i need to add an image there so this is the code to create the mask but we don't have an image yet let's see what's going to happen now well now we see the green object which is shadow we don't really see the the bb anymore because it should be red you should do it okay but we don't see anything because this object now starts at the mask the clip path and it doesn't clip anything because we don't have any image yet so let's load an image let's load an image um i'm gonna just create the simplest kind of image pre-loading thing so image on load something it's the function and then image url equals how did i call it let's call it background i'm gonna call this one background pg and then when it loads i'm gonna alert something just to see that everything is working i also i always need to check that out i'm 100 sure you could use p5 instead of it just for the sake of learning new stuff and experimenting with new technology i actually used that one so i'm not getting any alerts here some reason maybe i have some javascripter uh image on lot ah that's what the url is src now it's stuck oh yeah we have the alert now all right so we have alert we have the image and now we could load the image so to load the image into the paper.js you first need to rasterize it so it's kind of a raster image it's going to be new paper raster and then this image so this is like the image in paper because for some reason they decided to call images like raster well it's of course it makes sense in some way but doesn't really help you much so then you could add this thing to a group at child raster image let's remove the clips for now okay so we are adding the image actually now there's a really handy function in the paper just which just fits the image like a background color or background content kind of thing so you could just do the raster image fit bounce and then provide the actual bounce and the bounce you could provide with the paper view pounds yeah to actually fit the image i think the second parameter decides whether it's like container cover yeah so now it's covered perfect and now i could bring back the clip because i'm already adding this one as a second object inside my group and if i add the clips attribute to true the first object is going to serve as a mask for the for the second object didn't really work the way i expected it to work but maybe something wrong with my refresh thing group is not defined because it's this group of course right right so now we see now we don't actually need the canvas that i've been using this whole time like we only need to i could maybe maybe just css hide it with css because i have the container so let's just set the container to opacity zero maybe it will refresh maybe not but the wine i just needed you know maybe i i'm using this these streams as an excuse to drink in the morning so actually this is it right well i mean of course the red shadow is not the best choice of the shadow out there but no not this one shadow color like this probably yeah of course like you could play with the exact visuals but right now we have the interactive kind of wobbly thing which can obviously morph to anything because this is just a loop here doing this where's my fps counter yeah so it's still 60 fps yeah it's still 60fps it's just my laptop it's been stuffed with person just so you're believe me actually note which is parcel not actually the chrome browser which is just 81 for now it's also kind of big but the note is actually draining all the resources at the moment for some reason i don't know why parcel is just broken on my laptop at least in my laptop at least so here we go we just created now it's stuck again i believe parcel tries to do the hot module replacement reloading kind of stuff and then duplicate the request animation frame loop and then just got stuck because of some recursive kind of thing yeah so well they do really like dogs both of those but it's still pretty fun to do right actually the the code they wrote to draw stuff is it's so small we didn't use any loops we didn't use any curves and yet it looks pretty cool right it's a shadow mask 60 fps with physics and a lot of kind of stuff and if you go into the actual website it's actually kind of fun that you could see the let's just see it's i mean it's the same physics obviously because we just recreated this effect and kudos to the developer it's it's anyway it's pretty cool idea to do but if you go into this uh crap we need to have white screen alright so if you go into this our size is broken come on come on if we go here and we find go into the element tab and we find the physics canvas and it's set to opacity 0 just like we did just like we did but it's still there so if i do this you will actually see the physics here the visuals are a bit different because of the old version of the metro.js and maybe because of that also the physics a bit different but you could actually see the like how it works so they have the centered objects still i didn't have it and i think it worked the same way for me like even without it they also have a couple of like constraints in the corners just so the the whole object is like maybe centroid so you could maybe change its position a little bit with the mouse you could see that the center is actually changing its position right now and you could your play with the center a little bit so it's pretty much the same yeah it's been some journey oh yeah i like this i like this effect now after the resize it's even better and by the way it's a pretty nice show i recommend you to try it if you like sci-fi and if you like alan tudyk which who played actually one of the roles in the firefly series in the past so yeah this is it it took us some time because the physics physics takes some time but it's pretty cool in the end yeah of course i need to fix the resize it's also pretty fun to play with you know it's just so lovely you don't really see those 30 points anymore because everything is so smooth and rounded thanks to the paper.js functions and what is nice about those actually learned that you could maybe just use them like maybe like a helper functions not really using paper fully because it's might be it might be complicated to build stuff fully with paper.js but just using some useful functions there are lots of i mean precious functions inside both metal.js and paper.js and you can learn a lot of those so yeah this is how you do two-dimensional physics to achieve some nice effects and win some awards and do some cool stuff on the website and still have those 60 fps's even though we are drawing to two canvases right now because one is still like with opacity zero but it's still being drawn by the browser so i don't think it's that tricky from which well you just need to recalculate the positions yeah kind of almost fully for the smooth but but also to to achieve this kind of shadow with uh this amount of code is actually and the clip path it's kind of it's easier with the paper jason with the native canvas because i would have to play with the clipping or blending modes in canvases and probably the paper js might be using what oh you can find the server it's literally there what do you mean you can find it okay nobody knows why but it doesn't work for me in safari anyway i think parcel might be using a couple of canvases just to achieve this clip and effect in the background it just helps you right right thank you everybody for being with me today hope you like this journey into physics two-dimensional stuff it took us some time it might be the longest stream in a while but this is the second stream in a while and i hope i will be doing those like every sunday thank you for being with me wishing you a good day i will stick in the chat for a couple of minutes you can ask me anything in twitter or just anywhere ping me on the email i love you all they say something good to the people that you love if you love them just say to them don't don't keep it inside make world a better place and see you hopefully on the next sun

Channel: Yuri Artiukh

Views: 5,793

Rating: 4.965517 out of 5

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

Id: 2JKEkcjF1aA

Length: 78min 45sec (4725 seconds)

Published: Sun Apr 11 2021