Subdividing triangles


Repeatedly click triangles below.
image of a circle
Your browser did not display the SVG image. It is showing a standard image as a fallback.
You can view a full screen version of this graphic.
Source of triangle-click.svg:Hide line numbers
01: <svg version="1.1" baseProfile="full"
02:      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
03:      width="502px" height="435px" viewBox="0 0 502 435"
04:      stroke="black" stroke-width="0.5px">
05: 
06: <script>
07: //<![CDATA[
08: 
09: var svgNS = "http://www.w3.org/2000/svg";
10: var xlinkNS = "http://www.w3.org/1999/xlink";
11: 
12: function divide(evt){   
13:    // Get the triangle that was clicked.
14:    var triangle = evt.currentTarget;
15:    
16:    // Get the point that was clicked:   
17:    var position = document.rootElement.createSVGPoint();
18:    position.x = evt.clientX;
19:    position.y = evt.clientY;
20:    var correctPosition=position.matrixTransform(triangle.getScreenCTM().inverse());
21:    xclick = correctPosition.x;
22:    yclick = correctPosition.y;
23:    
24:    // Find the vertices:
25:    var points = triangle.getAttributeNS(null, "points");  
26:    var pointsArray = points.split(" "); // Array of 3 points of the form "x,y".
27:    var point1 = pointsArray[0].split(",");
28:    var x1 = parseFloat(point1[0]);
29:    var y1 = parseFloat(point1[1]);
30:    var point2 = pointsArray[1].split(",");
31:    var x2 = parseFloat(point2[0]);
32:    var y2 = parseFloat(point2[1]);
33:    var point3 = pointsArray[2].split(",");
34:    var x3 = parseFloat(point3[0]);
35:    var y3 = parseFloat(point3[1]);
36:    
37:    var newTriangle1 = document.createElementNS(svgNS, "polygon");   
38:    points = ""+xclick+","+yclick+" "+x2+","+y2+" "+x3+","+y3;
39:    newTriangle1.setAttributeNS(null, "points", points);
40:    newTriangle1.setAttributeNS(null, "fill", "red");
41:    newTriangle1.setAttributeNS(null, "onclick", "divide(evt)");
42: 
43:    var newTriangle2 = document.createElementNS(svgNS, "polygon");   
44:    points = ""+x1+","+y1+" "+xclick+","+yclick+" "+x3+","+y3;
45:    newTriangle2.setAttributeNS(null, "points", points);
46:    newTriangle2.setAttributeNS(null, "fill", "yellow");
47:    newTriangle2.setAttributeNS(null, "onclick", "divide(evt)");
48: 
49:    var newTriangle3 = document.createElementNS(svgNS, "polygon");   
50:    points = ""+x1+","+y1+" "+x2+","+y2+" "+xclick+","+yclick;
51:    newTriangle3.setAttributeNS(null, "points", points);
52:    newTriangle3.setAttributeNS(null, "fill", "blue");
53:    newTriangle3.setAttributeNS(null, "onclick", "divide(evt)");
54: 
55:    document.documentElement.removeChild(triangle);
56:    document.documentElement.appendChild(newTriangle1);
57:    document.documentElement.appendChild(newTriangle2);
58:    document.documentElement.appendChild(newTriangle3);
59: }
60: 
61: // ]]>
62: </script>
63: 
64: <polygon points="1,434 501,434 251,1" fill="blue" onclick="divide(evt)"/>
65: 
66: </svg>

References:

We do some string manipulating above. Here are some references related to strings.

This presentation is part of a SVG Tutorial for Mathematics Students.


© 2013 by W. Patrick Hooper. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Creative Commons License Valid XHTML 1.0 Strict Valid CSS!