Ok, so let’s recap. In the first two chapters we developed a physics engine, and used it to simulate a string with mass as a way of studying the physics of waves. In this chapter we will build on this work by moving up into the third dimension.
To do this, we will have to venture forth to the land of computer graphics. In particular, we will be making use of a library called three.js, which is a wrapper for a technology called WebGL, which is a port of a storied technology called OpenGL.
Going down this road will allow us to create interactive 3D environments directly in the browser - which for better or worse will probably end up being one of the most culturally impactful technologies of this decade (just look at the infrastructure levels of investment going into VR and AR).
All this to say that we might just be able to draw a leaf pretty soon!
Starting to use a more heavy handed computer machinery, we hit upon the point where it becomes distracting to attempt to hold all parts of the program in view simultaneously.
The programmers solution to this problem is generally called separation of concerns or encapsulation, and basically refers to splitting up the program into files where each one has a specific purpose.
As an exersize, let’s do it to the program we have been building. In the example below, we connect a ring of masses with springs and then connect each mass to a central node. The sliders change the driving frequency of either the bottom node or the central node. Note how upon initialization, a resonant mode with five fold symmetry appears. What other modes can you discover? Can you find the spanish dancer?
Things to Think:
In the previous section, we returned to the central theme of our exploration, namely the study of the way in which high order structure emerges from local rules.
Now is a good place to take an interlude to learn a little more about some of the things that one should keep in mind when making computers draw in 3D with webGL. A good tutorial on the subject can be found here.
We will avoid repeating that material here, instead moving forward to building a simple cloth simulator (adapted from this demo). We have already essentially done this. The first step is to initialize a “fabric” of springs.
Having done this we need to do all manner of incantations to summon a webGL context (to initialize a camera and define shaders and things). We won’t go into these details for fear of getting too far afield, but certianly try changing values in the editor and rerunning things. It’s a great way to study the different parts of a big system.
In the system below, we have a fabric attached to fixed points at four corners, and driven from a variable place in the Z axis. The top visualization of this data projects each point to the XY-plane, and marks the point being driven in red. The bottom visualization allows one to witness the three dimensional structure of the fabric. If you would like to turn off the camera rotation in order to get a closer look, set rotateCamera to false, and re-run the simulation script.