[From Bruce Abbott (2014.03.28.0835 EDT)]
Adam Matic (2014.03.28 10.15 cet)]
AM: I was going to make a demo of a two level system, but that turned into a week of partially successful attempts to learn advanced javascript’s design patterns. There is all these constructor functions, modules, revealing modules, function factories… And so much convoluted text written about them. (/end rant)
BA: Thanks for persisting. I know from personal experience how frustrating it can be to learn how to use such things. They don’t always work as expected!
AM: So, I decided I really like global variables. Here is a simulation of a basic single level control system: http://www.pct-labs.com/basicCS.html
(That’s my website, by the way. No home page yet)
AM: Try changing every slider on the right. If the simulation breaks, just reload the page.
BA: That’s an excellent start. Is the simulation supposed to run in real time? I only see movement when changing a parameter value or dragging the “playerindex” slider.
AM: All files can be downloaded from the top domain. File basiccs.js is the javascript code of the simulation. File basiccs.html contains only a
element filled with canvas elements and can be rearranged without effecting functionality of the simulation (for example, instead of a column, the elements can be arranged visually in a loop). The ‘style.css’ is from a website I liked, contains some unnecessary parts.
AM: File 'dat.gui.min.js" is a graphical user interface library that manages the sliders on right side. I liked it because it looks nice and is easy to set up, but it doesn’t appear to be working with touch screens, so it might not be the best choice for future projects. Perhaps they’ll add touch support later, it’s still in development. Here is the website with a tutorial http://workshop.chromeexperiments.com/examples/gui/#1–Basic-Usage
AM: I didn’t comment the code, since it’s short and uncluttered this way, and I tried using self-explanatory variable and function names. I hope it can serve as an intro to making javascript simulations. Shouldn’t be too hard for example, to modify the model into a two-level system and add a few variables to the gui.
Or instead of the sticks moving up and down on the screen, have them rotating around a single point, representing angular position variables. Or add a random disturbance generator… or an ‘automatic play’ button and disturbance control to make the system live and responsive.
BA: The Javascript syntax looks like an object-oriented version of the C language, (as does Processing). I didn’t have any trouble following what the code in basics.js does, but I’ve had plenty of exposure to object-oriented programming.
···
AM: The main drawback of this approach is that models are still not easy to design for non-programmers, are not interchangeable between users and are not directly comparable. That’s where SimCon will be used. Models need to be designed by visually rearranging elements. The effect of each change in parameters should be instantly visible. Model’s internal structure should be applicable to different kinds of variables - position of a ball in 2D environment or rotation of a cube in 3D environment, or a sound from the speakers… Well, there is much more that ‘should be’, so I’ll stop there.
BA: Have you seen Vensim? It allows you to create a diagram with components representing flows (of variables and signals), quantities, etc. And the run it as a simulation. A definite plus is that it includes sophisticated procedures for doing integration, etc. accurately. Apparently there is now a free version available online “for evaluation and educational use,” see https://www.shodor.org/tutorials/vensim/pre.php .
AM: I found Douglas Crockford’s book “Javascript: the good parts” recommended widely. It’s nice and short. http://books.google.hr/books?id=PXa2bby0oQ0C&printsec=frontcover#v=onepage&q&f=false
AM: A very, very, very useful reference site: http://www.w3schools.com/
BA: Thanks, Adam, much appreciated!
Bruce