-
Notifications
You must be signed in to change notification settings - Fork 1
/
desmos_sierpinski.html
82 lines (60 loc) · 3.28 KB
/
desmos_sierpinski.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script src="https://www.desmos.com/api/v1.5/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
<body onload = "ensure_size()">
<div id="calculator" style="width: 100%; height: 80%;"></div>
<br />
enter desired iterations then press draw (warning: exponential time, start with 3 or something!)<br />
<input type = "text" value = '3' size = "100" id = "depth_box" onkeypress = "handle_key(event)"/>
<input type = "button" onclick = "reset_and_draw()" value = "draw"/>
<br />
view the code <a target = "_blank" href = "https://github.com/matthewbatcheler/sierpinski/blob/master/desmos_sierpinski.html">here</a>
</body>
<script>
var id_counter = 0; //next id to use
var o_x = -2;
var o_y = -2;
var start_width = 2 * Math.abs(o_x);
var elt = document.getElementById('calculator');
var calculator = Desmos.GraphingCalculator(elt, {expressions: false});
function handle_key(e) { // check if enter is pressed
if (e.keyCode == 13) {
reset_and_draw();
}
}
calculator.setExpression({id:"graph0", latex: "Enter\\ desired\\ iterations\\ below"});
id_counter++;
function reset_and_draw(){ //this is pretty inefficient because it redraws all triangles every time. who cares
max_depth = document.getElementById("depth_box").value;
var to_clear = [];
for(var i = 0; i < id_counter; i++){ //dont clear 1 since this is the outline and always can stay.
console.log("clearing " + i);
to_clear.push({id: "graph" + i});
}
console.log(to_clear);
calculator.removeExpressions(to_clear)
id_counter = 0;
//draw outer triangle
calculator.setExpression({ id: ('graph' + id_counter), color: Desmos.Colors.BLACK, latex: '\\operatorname{polygon}\\left(\\left('+o_x+','+o_y+'\\right),\\left('+ -o_x + ','+ o_y +'\\right),\\left(0,'+ (o_y + start_width * Math.sqrt(3)/2) +'\\right)\\right)', fill:false });
id_counter++;
draw_triangle(o_x,o_y,start_width,1,max_depth);
}
//precomputed things
var sqrt3_div_4 = Math.sqrt(3)/4;
//side length of the 'current' (outer) triange, new side len will be this/2
//start cords are bottom left corner of the outer (parent) triangle
function draw_triangle(start_x, start_y, side_len, depth, max_depth){
if(depth > max_depth){
return true; //break from the loop
}
var top_y = start_y + (side_len*sqrt3_div_4); //the y height for the top 2 verticies of the upside down triangle
var x_offset = side_len / 4; //offset from each bottom vertex x for the top verticices x position
var x_left = start_x + x_offset; //x positions for the top 2 verts
var x_right = start_x + side_len - x_offset;
//draw a triangle in the middle of this one. upside down base middle upper left
calculator.setExpression({ id: ('graph' + id_counter), color: Desmos.Colors.BLACK, latex: '\\operatorname{polygon}\\left(\\left('+ (start_x + side_len/2) +','+start_y+'\\right),\\left( '+ x_left +','+ top_y +'\\right),\\left('+ x_right +','+ top_y +'\\right)\\right)', fill:true });
id_counter++;
//now draw triangles for all sub-regions
draw_triangle(start_x, start_y, side_len / 2, depth + 1, max_depth); //DYNAMIC PROGRMAMING TIME!!!! :D
draw_triangle(start_x + side_len/2, start_y, side_len / 2, depth + 1, max_depth);
draw_triangle(x_left, top_y, side_len / 2, depth + 1, max_depth);
}
</script>