Perlin Noise Wave - THREE.js

so I'm gonna talk be talking about the wave animation we recently did for Melbourne music quick start behind this is this was kind of like a placeholder that to put in to the design because we didn't have all the brand assets collated at that point though we knew it was gonna be something kind of along these lines of a techie looking kind of wave so to the client was kind of a bit nervous about it so they really wanted to see something early so I said about trying to tackle the problem how had I know about making something that looks kind of like this with code we could have easily just done a video or something like that didn't feel particularly dynamic or kind of interesting so I said about creating this prototype which we showed at the all-agency a couple of months ago now this is done using p5.js and that is a JavaScript port of processing and processing is a creative coding toolkit that's built on top of Java essentially so the idea behind how I tackled this problem was basically just creating a lot of points on an x and y axis so just create a square and then create dots every you know 100 pixels or something and then I had to go yeah animating it and I'll talk a bit more about the animation technique bit later so as this kind of evolved from this we started to get a bit more closer to the design of what we realized was it was using 150 percent of the CPU and just draining the battery on mobile very very quickly so p5 kind of got cut pretty quickly as an option for this development which is good time to catch it rather than in QA or in production so being sort of more familiar with p5 and processing in general it disappointed so did next option to look at was three.js most a lot of the protein with a code of three J's three J's is a 3d JavaScript library that allows you to do a lot of really cool WebGL stuff and all also has a lot of different renderers for canvas and things like that so this is an example of one of those things that you can build with WebGL or three J's so like a over the one-carbon control do mad donuts with flats over so all that's rendering in real time with JavaScript I'm sorry it's critical my wife is in Quad cousin first thing that's up but so this is kind of like the final result of how it looks and now I'm going to attempt to do something I've never done before just code in front of an audience so I've got here I've just got a very simple HTML page we've got one div some styles that just takes up the entire space and a few kind of variables up here for all the things we're going to be using I'm not going to sort of get bogged down in the the minutiae of how to study how to code no mod so just got this little init function here so this is going to kick off everything so the way 3d is works it has a concept of scenes so scene is kind of like the entire canvas it has a camera so that's the thing that points out all your 3d objects and then it has kind of geometry which is you know things like cubes cylinders Formula one cars that sort of thing so first I will create the same so nothing's got on P here for a fair while yes so this will constantly refresh as I'm kind of typing this is type in those of you who are committed it's a really nice tool to just do quick and dirty prototype so it's for this is a really cool stuff in there actually that people have built so then I have a camera there are quite a few different types of cameras if you look at the documentation you explore all the different types we're just going to be using it it's there that perspective camera and this is the kind of economist closely mimics the human eye and he'll we see so that takes four arguments so the first one is in field of vision so how wide it kind of looks whether it's a wide angle or just fairly narrow so we give it about 45 degrees say 50 an aspect ratio so it's just classic you know sixteen by nine somebody like that say 1.3 the last two are kind of how me and how far the camera can try to see so if you imagine like a pyramid shooting out of the camera these are all the parameters that kind of define the shape of that purity so put a really small number for that a really big number for that and kind of need to position it so I've got a variable called size and this is kind of born out of the need for it to be responsive so when it's important mode it needs to take up the biggest space possible so the height is going to be bigger than the width so that size variable is basically just on the biggest number out of the X&Y so the position of the camera set the Z index so if you think of x and y then it's kind of in and out that's how far away or how close to your geometry at that camera city and the next part is we need to create a renderer so irregular is how all the mathematical stuff that you're doing with your geometry gets displayed so there are a few there's an SVG render art which is really sloped don't really want to use up is canvas renderer just kind of similar and the WebGL regular which we're going to use he want to give it an eyewitness's okay that's true that just makes it look really nice enough to computer graphics see we have to set a color just basically just say for the moment and then we have to tell it what size it needs to be just looking hot picture just variables I've spawned a whole so that's just gonna take those numbers if it with it hot and now we need to actually add it to the page so target is just that div in child elements so nothing's really showing up just we inspect it it's my canvas there and that's where we roll out rendering these going to happen so because it's animated we need to animate it so just up its function animate JavaScript now has a real cool function you could call can request animation frame and the mate so it's just calling itself and that just trust : is often as a cat so generally you'd get about 60 frames a second and then to actually render it and then we passed the same kind of camera so that's just c'mon says two together there we go we've got a what Spence fantastic so now I need to create some geometry it would be very easy if there was just like a grid or plain thing you could add in just stroke it that three.js doesn't really work that way it's a bit more low-level than that so I originally was going to just use points but and I ended up rendering it the lines just kind of looked really terrible and they kind of overlapped and yeah that kind of got can very quickly so luckily it's got something called as playing buffer geometry and that's just a fancy way of saying a square so it accepts all parameters said first to adjust the width and height so I will just make a square so it's going to be the size of this and that second two parameters are the number of divisions so you can divide it into two or 2,000 it's really kind of up to you say 25 then I need to create a wireframe geometry I'm just passing the plain Buffalo geometry into that so the wireframe geometry is just going to give us an outline or geometry then I have to give it a color the wireframe by itself doesn't have any concept of color so we need to create a line material just leave a color that's a hex code that just means it's black so six zeros absence of color yeah so that's red that's green and then you just make combinations so completely 30-27 and EF I'm not gonna get into hexadecimal notation here it's another talk it's not very interesting so then we have to kind of combine the assumed you have to come on the wireframe and the material and three has something called line segments not particularly user-friendly we need to add that to the same so all your geometry just gets added to the same and there we go we've got a grid now one of the problems I noticed was it's doing triangles it's making squares out of triangles and that's because GL has no concept of kind of squares it basically renders everything as triangles so it's got an x and y and is it so you get a triangle out of that if I had more time and budget I probably could have made it into actual squares but the squares is what it was actually killing that initial prototype adding the square rendering just for some reason just might have blow up completely so it was kind of I kind of accepted early on that this it's just gonna have to die so we can rotate that great I'm not going to get into degrees in radians but radians are hard to understand degrees are very easy to understand we all understand degrees so that three.js is natural language is radians so we need a method to convert them still to say minus 45 so that's just rotated that around the x-axis so it's going to slip backwards kind of that way so cool got the geometry and now we need to kind of make it dance so I've got this function called update vertices or vertices basically all the points where these lines kind of intersect so I'm going to pull update vertices on the line and now it also so we have to get the vertices so the job is just the line I'm passing in good it's geometry then we get its attributes don't get its position never get us a right so if I love that you just gotta say all these numbers it doesn't make much sense to anyone but what we can do that does give us an array to kind of look through and manipulate all those values because you can read and write so we create a loop this is how you do a loop you have a starting number then you have an end number so we stopped at the length or the number of vertices is probably thousands in there and then we set a value ticking Quebec PI so because there's three vertices in every triangle we need to increment that by three so when I reference a vertice your vertices I so that just means whichever number I'm up to get that first one so it could be 0 10 9 10 9 and there's basically you refer to the X as I the wire as I plus 1 and the Zed is I plus 2 so if I just try to set it to say 10 I just get a lot because it's just shrunk it over to decide why that so we need to get a bit of motion happening so the one I wanna tag is the Z vertice to make that kind of dance or one way you can do it is to take a random number and they just multiply it by a big number you get that that's not very interesting it doesn't really look like a wave it should be dancing a little another way to do it is using something called Perlin noise so Perlin noise was developed in the 80s by going Ken Perlin kindly enough and he developed it for the movie Tron and he was kind of tired of how computer graphics always looked really foxy and he wanted something that looked a bit more natural so if you've ever used Photoshop there's a little filter called clouds that's basically Perlin noise it's just a kind of gradient variation that it's random but it's people organized than that it's a bit more predictable as well I know what I've been doing need to tell up to update this is one of the quotes in three.js yeah so could cause an epileptic just Brandon us going through time might give it a value here might get up here this might look okay but it's a bit jagged but then if you go through again your value here might be here that next one there and that's how you get this kind of visually disturbing animation so we're : oiz comes in is any value you give it along a particular axis it will always return the same value did you do it again so I say I give an x0 clock to you don't give me a valuable so it always gives you a value between 0 and 1 that'll always be consistent where it will change or how we get generation I'll explain it event but let's do so this is a native to JavaScript I've imported a Perlin noise library externally so so we can say it usually accepts two dimensions but certain implementations have a third and a fourth dimension so you can manipulate the value you get back C's so we're just taking the x and y value now kind of looks the same and that's because we our value is between 0 and 1 so it's very very tight so if we just multiply that by 300 that's getting kind of closer to 2 what we want it's still a big jaggedy so one thing you can do is make those x and y numbers a bit smaller so what we can do is divided by a big number so say 500 don't you see it's sort of starting to get a nice smooth gradient you go yeah that's looking pretty good so I might change that rotation it sounds like so because if you look at the design that's kind of more looking at it from above there yeah but we still don't have any kind of animation because those values we're passing the thermal noise are always going to be the same so it's gonna basically be the same result every time so what we need to do is give add another dimension or augment that dimension by some sort of time so we can do here in this animate function you can I've got a variable just called T so we just increment that by a very small amount it can be a large amount if you want a really fast animation weekly also that kind of it slow which is plus T we had T to that thank you you get your animation it's really nice it's free so if I bump this up that's no that's too fuss or I can have it really slow good no that's too slow so you just fiddle with the values and you get something failing us when I got to this stage I was really happy he's like yeah job done awesome but as you can maybe see the squares actually killed heids parts of the wave behind it if it's kind of a bit above he's in front of it behind yeah that make sense so there was no easy because it's a wireframe geometry Phillip so you have i had to i took me one thing in there but i had to create a separate geometry that followed exactly the same pattern so random wouldn't have work anyways that's so i had to go back here and create terrain to create a mesh and that means the material so i need to find the material so material can be a texture it can be or just a flat color which is the only lead in this case and there are a lot of different materials like fall materials possibly others it's in the documentation a basic material then you give it a color so you make it the same it's the background which i will change in a minute and then you need it to tell it to be double-sided so by default you don't just render one side so you have to tell it explicitly to to render both sides so then i need to rotate that to the same X as the line and I did - how's that - the same oops so at least me now exciteing it to the same bob would have to update the vertices in that mesh to the same value as the line so if I go back here yeah now you've got a nice smooth animation that looks pretty close to design and that's basically it any question if we had more time I could have made it look more like what they actually used in the end it won't take that long to be honest the 80% of it was done in about two hours the other 20% was about 16 just that little finessing things cuz I had to do a lot of rework cuz certain techniques didn't work right pull out a lot of code start again try different techniques now it's just ask at the static sketch yeah video is gonna become similar to that yeah we didn't have to follow it so if it goes up or down on it it's starting that's off one of the workplane so it'll crack down on the bridges yeah like the white Polaroid's works if you think it also generates writing something like this so by talking about report PR it's always going to look at values around it and kind of get a value somewhere in that range whereas with revenue is going to get without up here what they don't hear possibly so that's how you get that nice food there is randomness involved but it's it's nice right so you know over time this could kind of move up here but then it reaches a point where like oh I might go down there and although the points around a kind of move in unison yeah yeah so that's how you make it kind of look and feel dynamic rather than just a repetitive kind of video like a wild woman caps because if it can be between I values yep yeah it fills in the lot so yeah so you know you're just animating the points that you can't actually see in three JSS going are going to point it 100 so I tried that if you look at that geometry has where it's size size in 25 25 he's got it set up to only have 25 lines and that grid the more you add in the smoother that surface materials gonna feel and water and that's one of the valleys on to play with is too many

Channel: David Johnson

Views: 1,462

Keywords: webgl, threejs, creativecoding, creativetech, glsl, perlinnoise, ie, loveyourwork

Id: 8ot2Ul9ncuQ

Length: 34min 12sec (2052 seconds)

Published: Wed Aug 07 2019