Extend Smooth Life

The project is to extend the Javascript implementation of Smooth Life at [login to view URL] [for a description of this code, see [login to view URL] ] in three specific ways: 1) Simultaneously display and animate a small number (2-6) of 2-D grids instead of a single grid like the current code does. Presumably, this would be achieved by creating an array of length 2-6 for variables like M_re_buffer, M_im_buffer, etc. Each of the grids can show an animation based on different parameter values. 2) The 8 parameter values (INNER_RADIUS, OUTER_RADIUS, B1, B2, D1, D2, ALPHA_N, ALPHA_M) associated with each of the grids are controlled and shown below each grid using HTML 5 sliders and a text box with the associated number inside. Thus, there might be as many as 6X8=48 sliders&boxes on the screen at a time. If the user moves a parameter’s slider, the parameter value for that grid immediately changes and the text box is immediately updated with the new value. Likewise, if the user edits the number in the text box, the parameter value for that grid immediately changes and the slider position for the parameter is immediately updated. 3) Create an event listener that responds when a user clicks in each of the grids. For now, that event listener can simply respond [login to view URL](‘User clicked on Grid # ‘,grid). Later on, I’ll modify this response. 
Notes: 1) Currently, the code’s only dependency is [login to view URL] ([login to view URL]). I’d like to keep it that way. 2) We can assume that the user’s screen will be at least 1366 X 768, although a small amount of that screen real estate may be taken up by various browser navigation bars.