Coding Challenge #12: The Lorenz Attractor in Processing

hello and welcome to another coding challenge in this coding challenge I am going to implement the system you see over here on the right called the Lorenz attractor visualize that in 3d in processing all in one session here which will hopefully be about 10 to 20 minutes we'll see how long it takes I've got a timer running up there ok so before I start actually writing the code for it I want to talk about what this system is why does it exist why is it interesting and well how does the math behind it work on a kind of you know higher level and then we'll start looking at the formulas for it and implementing those formulas in code okay so Lorenz system you know there's a lot of resources for this online I'm going to put a few in the description of this video a Paul Bork site is a particularly useful one that I'll just mention really briefly but I'll go to look just at the Wikipedia page here which says the Lorenz system is a system of ordinary differential equations ok so the first thing we have to tackle here is what is a differential equation I could easily I got a timer reading here I can easily be here for like the rest of the day talking about differential equations and confusing myself over and over again but the basic idea of a differential equation is an equation that looks at how a certain variable changes according to other variables how the rate of change of a variable is affected by other variables in a system that rate of change being a differential so let me give you an actual practical real-world example that might help solidify this understanding let's say you have a spring okay so I have a spring connected to a wall with a bob at the bottom and you could think of this spring as having a position called Y how does its Y position change over time that's often written as the change in Y over time you could think of that at in programming speak as y equals y plus the change in Y right every frame of animation Y changes but it changes based on its the rate of change of Y actually changes based on the Y position itself if you pull it all the way down here how fast it's going to spring back is going to be much more than if you pull it over here so dy over DT the change in Y the differential of Y is a function of other variables in the system itself y itself this is a differential equation and so you know this actually comes up all the time in programming you have position you have velocity velocity being the derivative the rate of change of position this is a sickness of something that you'll see over and over again and here the Lorenz system is defined by these particular differential equations the rate of change of X over time the rate of change of Y over time in the rate of change of Z over time now these variables x y&z those are those defined the state of the system but I'm going to use those literally as XYZ positions to visualize this particular to get this particular structure so if I look at those visit the state XYZ over time and draw them with colors and lines I'm going to see this particular this particular system so why is this system interesting it turns out that the Lorenz system which was you know invented or discovered in 1963 by Edward Edward Edward Edward Edward Lorenz you know here studying medial wild row conditions the flow of the atmosphere this type of thing it's one of these chaotic nonlinear systems meaning whatever the inputs you feed into the system you feed some inputs into the system you calculate that system over time it's a deterministic system that will produce an exact result every time with the same inputs but if you change the input ever so slightly you could get a wildly different output it's nonlinear a tiny change to the input makes a large change of the output this is the butterfly effect a little butterfly flaps its wings changing the air just a tiny bit in the outside on one side of the world and on the other side of the world a giant volcano erupts okay so this is this idea of a nonlinear system it's chaotic its unpredictable and a lot of these types of systems exist in nature and this is one particular example of a model of that type of system okay so now let's look at these formula and let's try to figure out how we're going to actually make this happen in code I think we're ready so we know that I need three variables and X a Y and a Z so let me go to my program here and I'm going to close this one and I'm going to start writing some code from scratch and I am going to give myself an x and a y and z and I'm going to give them some initial values like that okay so we're good so I saw those equations I know I need an X a Y to Z so that's a good start now one thing I should mention really briefly as I'm for about five minutes into this is that notice I could find those values as floats if you look at examples you'll find on the Internet often the the datatype that will be used as a double a double being just like a floating-point number but having more decimal places and sometimes with these systems you really need a high degree of accuracy but I'm just some person here on the internet programming colors and things on the screen I don't care if it's a little bit not so accurate and float is a bit more native to processing so I'm going to use floats okay so now what I need to figure out is I want to kind of implement these equations so let's just start with X the change in X over time equals a Sigma that's the Greek letter Sigma times y minus X so first of all I can't use the Greek letter Sigma easily in my code so Sigma I'm going to make a row I'm going to make B and Beta I'm going to make C which I realize is a bit confusing but that's what I'm going to do so those are constants by the way I need constants for those values so let me go back to my code and I'm going to say a float a equals one let's start with the constant one now what I'm going to do is have this particular calculation happen over and over over time right it's supposed to happen over time taught this is the interesting thing about this those formulas the change in X over time where those formulas are talking about real life time that's continuous our time in processing is frame by frame by frame so every cycle through draw is one unit of time so what I'm going to say is that the change in X equals that constant times what Y minus x y minus X and now x equals x plus that change in it's really that simple right I'm just taking that exact formula says the change in X over time equals the constant times y minus X and now change in X just means change X by that value x equals x plus DX so I can actually start to go implement y&z the change in Y and the change in Z and now I just need to go back and refer to those formulas again x times B minus Z minus y I've got I hope I get this right it's hard to - oh sorry X X times B minus Z times y I get this right - why I want to have spaces there what's wrong here oh it doesn't know it B is I'll fix that later and now the change in Z is x times y minus C times Z so it's x times y minus C times Z so this should be good and now I just need to get some spacing here and I need to also add two more constants float B equals one float C equals one and now I need to just change XY and Z X Y Z X Y Z Y Z dy DZ ok so this is the idea I implement those formulas directly from the Wikipedia page to calculate the change in X to change it why the changes thee and then actually change it now here's the thing what is my time there's a weird sort of thing that I'm going to bring up here which is my time step so right now every frame is like a singular unit of time but the the pattern that I'm going to draw right is going to look you know I'm not going to it's going to look something like this and in the sort of continuous world I was moving this marker continuously but in the processing animation world I have point point point point point so how close and I might connect those with a line so do I want to see my result look like this or do I want to see it as more continuous curve how fine do I want those to be and that's the sort of D tea right if you think about whoops I'm going to come back over here right really I'm saying DX over DT equals something so I want to do is actually take that something and multiply it by DT what is the change of time for each frame so what I'm going to do is also introduce a variable called DT and I'm going to say it's like zero point I'm just going to make that one for right now but I'm going to take the whole thing and multiply that by DT for each one of these to sort of scale and I'll show you how different that's going to look as we as I continue doing this so now we've got those formulas implemented now we've got to see is anything working correctly here so I need a way of figuring that out the first way I'm going to do to figure that out is first just make sure the program runs I'm going to add a black background and I'm going to run it and okay so I don't have any errors that's a good sign you know one thing I could do is I could say print line XYZ so I could sort of look at what's being printed out now notice something here all I'm doing is getting the values of zero so there's a little bit of an issue here which is that that doesn't make any sense so I can't start with zero zero if I start with zero zero zero these formulas are only ever going to produce zero zero zero so I gotta modify the inputs a little bit and I'll just start with X as like 0.01 that should do pretty well and if I run this again we should see like look I'm getting some interesting values there now what are these values producing anything of note not really but why not well because my constants I just made my constants 1 1 and 1 so the Lorenz attractor works a particular way based on what those input constants are so if I go back to the Wikipedia page I could sort of find somewhere on here it's going to give me some values I could use like Sigma equals 10 Rho equals 28 and beta equals 8 divided by 3 so let's use those constants I believe Sigma was a B was B was 28 and C was 8 divided by 3 and I'm going to do that just to make sure I get a floating point value okay so I think that should work like skeptical and we should see who not number okay so what have I done wrong here I might have to timeout this video Scott long was debugging Jake's and this might get edited out if it starts to take a really long time but let's look here so what have I done wrong here XYZ so let's let's comment out and just do X for a second and see what I get oops and I just want to look at X oh I had some numbers and then I got not a number for y so I might just be like one is a terrible number for DT because I'm like it's as if I'm teleporting myself through time massively fast so let me just make this 0.01 yeah okay this is more like what I expect it to see all those numbers are getting incredibly small I hope I implemented this right I have to check my formulas let's go back here and see if I'm getting some reasonable formulas ok good reason okay so this is better this is what I expected to see okay great so now I'm seeing some numbers that make more sense so my issue there was literally just having an apical that won't get edited out was just having the number 1 it just sort of went off to infinity super fast these systems um they don't have a recognizable repeating pattern and they tend towards though often tend towards infinity or some like non-existent value okay so let me go back to 0.01 now I want to be able to figure out is something actually working here so the first thing I'm going to do is just say stroke 255 and I'm going to I'm also going to translate to the center of the window and I'm just going to draw a point and I'm just going to do this in 2d so I'm not going to worry about the Z I just want at least see like let me plot those the state of the system over time with XY so let's do that and AH good this is very good so it looks like I did the formulas correctly you can start to see like that's something there so I'm actually we're kind of like we're trucking along here I've got the Lorenz system like sort of visualizing right now so that we're really basically I'm done however I want to make this look like something I want to make this look like a 3d shape I want to maybe add some color to it I want to be able to spin around it I want to I need to do more with it maybe I want to be able to like explode it so that all the points also didn't come back so I want to do even though it's 13 minutes we kind of got the math down I want to do more with this in terms of the visual output of it so so let's go forward with that so the first thing that I'll do is let's just go ahead and work in 3d so I'm going to change the renderer to P 3d and then I'm going to add the Z point so we should see now that it's the same it looks pretty similar but there's actually a Z value there now one thing I want to add also is just I want to use the the processing function scale so scale is a transformation you can add to your scene to kind of like stretch it out a little bit I'm not going to get this through zooming in and out as well but I just want all the points to be sort of spaced out a bit more and look a little bigger so I'm going to basically scale everything by 5 so we can see yes so this looks so now I kind of have a bit of a closer view you can see all the points of the Lorenz attractor are being plotted in 3d now here's the thing how am I getting all these points on the screen I'm just drawing one point at a time well notice how my background is in setup so this worked just to see that the system was working but it's not going to be a very good solution for eventually over time be able to manipulate this system so what I need is some sort of data structure some sort of list that I can store all the points of the Lorenz attractor so let me do that and what I'm going to do for that is an ArrayList and this is where we might rather be in JavaScript and I'll try to make a JavaScript version of this as well I'm going to call that points I'm going to make that a new empty ArrayList so this is the syntax for something in Java called an ArrayList which is a flexibly sized array I mean I could just add two and I'm calling it points and the data that I'm going to put into that array list or P vector objects why do I want a p vector object it's because every single frame I'm going to say points add a new P vector with that x y&z okay so I want to add a new vector with x y&z to that particular array list and we can see that this is still working nothing is broken yet and what do I want to do now as those points are being added over time I want to draw all of them because I need to erase the background right so let me let me just show you what I mean I'm going to move this background to draw well this is actually going to produce kind of an interesting result because now you're going to see this point I kind of love this just moving along the pattern of the Lorenz attractor it's kind of this beautiful interesting kind of chaotic motion I just want to stop and watch it but 15 minutes in I want to see if we can wrap this up in about 20 minutes so I'm going to keep going so what I want to do is instead of just drawing the existing point what I want to do is say for every vector V in that ArrayList points draw a point at V X V Y and V dot Z so I'm now saying instead of just drawing the current point loop through and this is known as an enhanced loop in Java for every vector V in the ArrayList points draw a point at V X V Y V wise be wise back after a technical hiccup you can see that the entire Lorenz attractor is drawn with each element as a separate point based on every P vector that's in that array so really essentially I'm done there you go it's in 3d that's the entire Lorenz attractor shape but I do want to add some more things to this and give you some exercises to think about what you might do with this so first let's just change the way we're drawing this a little bit one thing that I could do is connect all the points with a line so instead of drawing everything as a single point I could actually set the vertex of a shape so if I say begin shape before I draw all the points and end shape after I draw all the points with vertex instead of point what that's going to do is connect every point and you're going to see now that whoa it's doing it but it's actually trying to fill it in as if it's an entire shape so there might be some interesting things I could do with that but for now I'm just going to add no fill and we're going to be able to see now this continuous line so I could zoom into it and sort of see that every point is now connected right so now we have this continuous shape which is a nice start of sort of seeing how I could sort of tinker with how this is visually I could also try to come up with like a clever way of changing the colors of it I'm sure that you as a wonderful person on the internet with visual design talent will do something much more interesting but I'll just show you really quickly I already have that in there because I that was from the technical glitch but I could add something called color mode and I could change the color mode to HSB meaning hue saturation brightness so what I could do is set the stroke of with a some sort of hue a saturation of 255 the maximum and a brightness of 255 so I'm now now as I draw it it's going to have a particular kind of like turquoisey greeny hue and why not while I'm doing this make a variable start it as zero have that variable be the hue and for every single vertex increase that by some value and then if it goes above 255 reset it back to zero and now I should get a why not have a rainbow since this is coding rainbow a rainbow Lorenz attractor patter so you can see as the color is changing we've got kind of yell Oh red to yellow to orange that sort of thing so really it's the last thing I want to mention so what's interesting about what I'm doing with this particular strategy separate from the Lorenz attractor separate from the Lorenz attractor algorithm itself is the fact that every one of these points is saved in memory in that array so one thing I might just demonstrate to you is the fact that those points can be manipulated do in processing is I could write a vector called offset and I could say P vector dot random 3d that's going to be give me just a random unit vector of unit 1 of length 1 pointed in a random direction and I could add that offset to every single vector in the Lorenz attractor now if I run this it's kind of going to go crazy because the unit of I've scaled up by five so you can see it's like shaking and jiggling like crazy so what I could do is maybe shrink that offset down quite a bit by you know make it 10% of the length of itself and you can see now if i zoom into it you can see how the points are kind of moving ever so slightly in space now I'm not suggesting that what I've done is a particularly magnificent result but what if you had all those points move along a sine wave or what if you have those points expand out and then come back to their original location are morph into another shape or fill in the blank of your interesting idea there so what I think I would like you to do now that you've seen how to program this Lorenz attractor from scratch if you have to do anything if you're just watching this video maybe you want to go outside and toss a frisbee around or eat some lunch which is what I kind of want to do right now because I'm feeling a little woozy but I think what would be interesting well I'd be excited for some of you watching this video to explore is what types of other how can you put your own design spin on this particular shape what happens if you start to manipulate the variables right here are the constants that I'm using make up your own constants look up on the internet some other known constants for the Lorenz attractor that produce other kinds of shapes what happens if you change the DT variable what can you mess around with these formulas and get something else can you go to poll could you go to its site and find a different kind of attractor that's not the Lorenz one there's a sort of there's a lot of these under the sort category of strange attractors so try to make your own version of this be creative play experiment don't worry too much and share with me your results but this has been hopefully something you've enjoyed which is programming the Lorenz attractor from scratch in processing in 3d thank you very much for watching I'm thrilled I finished this because you may not know there was about a 45-minute audio problem I really hope the audio is working right now this is actually the end of this video thanks for watching and I'll see you in the future and in DECT in another video goodbye

Channel: The Coding Train

Views: 344,141

Keywords: processing, attractor, lorenz system, processing (programming language), programming, mathematics (field of study), daniel shiffman, processing tutorial, nature of code, processing 3, challenge, coding, coding challenge, creative coding, daniel shiffman processing, learning processing, programming challenge, 3d, pvector, differential equation, lorenz processing, lorenz java, lorenz attractor, strange attractor, strange attractors, strange attractor processing, chaos

Id: f0lkz2gSsIk

Length: 21min 21sec (1281 seconds)

Published: Fri May 06 2016