You can change the current triangle effects by changing the radio buttons at the top. You can also drag and drop the triangle vertices by dragging the red circles at each triangle endpoint or vertex. This led to an interesting problem, which was how to how to maintain the current state or coordinates of all the shapes when the user selects a new effect from the radio buttons.
Another, more challening problem was to make sure that everything resized to the current ratio or scale if the browser window is resized. If you go to this url and resize the browser, you can see that everything re-renders nicely to scale. This does not happen out of the box. You need to code for this eventuality.
The bulk of the work takes place in the render method below:
The render function as you might expect, creates the svg document and renders all the shapes onto their specific coordinates as I outlined in the previous blog posts here and here. I use this function to both initially draw the shapes and also as the function that is attached to the resize event.
Below is the end of the render function that creates a hash that will keep track of the current state of the document or the coordinates of the all the shapes at any given time.
Lines 1 to 3 create a the hash and assign the xScale and yScaled3 scale objects that allow you to deal with a finer granuated scale than pixels. The x and y axis in the documment were created using these scale objects and you can think in terms of placing these objects at coordinates on these scales, e.g. (1, 1).
Lines 6 to 29 assign properties to this area hash such as the vertices of the triangle that will be used to read and write to when drawing the shapes. I pass this structure into most functions.
Line 31 uses the lesser known partial application properties of the bind function to create a new version of the render function. This partial function when called, will always be called with the area hash as an argument, that contains all the information we need to reconstruct the document. Line 33 adds this function to the hash, we will use this to remove the event listener each time it is called or else there will be a memory leak. LIne 35 creates an event listener for the resize event and assigns the new version of render to this event.
The beginning of the render function below uses the new es6 default paramaters feature to allow render to be called with no arguments or called from the resize event with an argument. If it is called in response to a resize event then there will be a state argument. Lines 2 to 5 remove the event listener each time it is called.
If we have a state hash then the invert method of the scale objects is used to get the value in pixels before using the scale to recreate the new x and y coordinates that are in scale with the new browser dimensions.
I also use partial application when adding the drag and drop event to the red circles at the vertices of the triangle on line 22 of the below: