|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Superformula</title> |
|
5 <script type="text/javascript" src="../../d3.js"></script> |
|
6 <script type="text/javascript" src="superformula.js"></script> |
|
7 <style type="text/css"> |
|
8 |
|
9 path { |
|
10 stroke-width: 1.5px; |
|
11 stroke: #666; |
|
12 fill: #ddd; |
|
13 } |
|
14 |
|
15 #controls { |
|
16 position: absolute; |
|
17 width: 240px; |
|
18 font: 10px sans-serif; |
|
19 } |
|
20 |
|
21 #controls span, #controls label { |
|
22 position: relative; |
|
23 top: -5px; |
|
24 padding: 5px; |
|
25 display: inline-block; |
|
26 width: 20px; |
|
27 } |
|
28 |
|
29 #controls button { |
|
30 font: 10px sans-serif; |
|
31 padding: 5px; |
|
32 width: 70px; |
|
33 } |
|
34 |
|
35 </style> |
|
36 </head> |
|
37 <body> |
|
38 <div id="controls"></div> |
|
39 <script type="text/javascript"> |
|
40 |
|
41 var types = { |
|
42 asterisk: {m: 12, n1: .3, n2: 0, n3: 10, a: 1, b: 1}, |
|
43 bean: {m: 2, n1: 1, n2: 4, n3: 8, a: 1, b: 1}, |
|
44 butterfly: {m: 3, n1: 1, n2: 6, n3: 2, a: .6, b: 1}, |
|
45 circle: {m: 4, n1: 2, n2: 2, n3: 2, a: 1, b: 1}, |
|
46 clover: {m: 6, n1: .3, n2: 0, n3: 10, a: 1, b: 1}, |
|
47 cloverFour: {m: 8, n1: 10, n2: -1, n3: -8, a: 1, b: 1}, |
|
48 cross: {m: 8, n1: 1.3, n2: .01, n3: 8, a: 1, b: 1}, |
|
49 diamond: {m: 4, n1: 1, n2: 1, n3: 1, a: 1, b: 1}, |
|
50 drop: {m: 1, n1: .5, n2: .5, n3: .5, a: 1, b: 1}, |
|
51 ellipse: {m: 4, n1: 2, n2: 2, n3: 2, a: 9, b: 6}, |
|
52 gear: {m: 19, n1: 100, n2: 50, n3: 50, a: 1, b: 1}, |
|
53 heart: {m: 1, n1: .8, n2: 1, n3: -8, a: 1, b: .18}, |
|
54 heptagon: {m: 7, n1: 1000, n2: 400, n3: 400, a: 1, b: 1}, |
|
55 hexagon: {m: 6, n1: 1000, n2: 400, n3: 400, a: 1, b: 1}, |
|
56 malteseCross: {m: 8, n1: .9, n2: .1, n3: 100, a: 1, b: 1}, |
|
57 pentagon: {m: 5, n1: 1000, n2: 600, n3: 600, a: 1, b: 1}, |
|
58 rectangle: {m: 4, n1: 100, n2: 100, n3: 100, a: 2, b: 1}, |
|
59 roundedStar: {m: 5, n1: 2, n2: 7, n3: 7, a: 1, b: 1}, |
|
60 square: {m: 4, n1: 100, n2: 100, n3: 100, a: 1, b: 1}, |
|
61 star: {m: 5, n1: 30, n2: 100, n3: 100, a: 1, b: 1}, |
|
62 triangle: {m: 3, n1: 100, n2: 200, n3: 200, a: 1, b: 1} |
|
63 }; |
|
64 |
|
65 var format = d3.format(".4n"), |
|
66 scale = d3.scale.linear().domain([-10, 20, 1000]).range([0, 800, 1000]); |
|
67 |
|
68 var svg = d3.select("body").append("svg:svg") |
|
69 .attr("width", 960) |
|
70 .attr("height", 500); |
|
71 |
|
72 var shape = superformula() |
|
73 .type("asterisk") |
|
74 .size(100000) |
|
75 .segments(3600); |
|
76 |
|
77 var path = svg.append("svg:path") |
|
78 .attr("class", "big") |
|
79 .attr("transform", "translate(480,250)") |
|
80 .attr("d", shape); |
|
81 |
|
82 var control = d3.select("#controls").selectAll("div") |
|
83 .data(d3.entries(types.asterisk)) |
|
84 .enter().append("div") |
|
85 .attr("id", function(d) { return d.key; }); |
|
86 |
|
87 control.append("label") |
|
88 .text(function(d) { return d.key; }); |
|
89 |
|
90 control.append("input") |
|
91 .attr("type", "range") |
|
92 .attr("max", 1000) |
|
93 .attr("min", 0) |
|
94 .property("value", function(d) { return scale(d.value); }) |
|
95 .on("change", function(d) { |
|
96 var v = scale.invert(this.value); |
|
97 path.attr("d", shape.param(d.key, v)); |
|
98 d3.select(this.nextSibling).text(format(v)); |
|
99 }); |
|
100 |
|
101 control.append("span") |
|
102 .text(function(d) { return format(d.value); }); |
|
103 |
|
104 var types = d3.select("#controls").append("div").selectAll("button") |
|
105 .data(d3.entries(types)) |
|
106 .enter().append("button") |
|
107 .text(function(d) { return d.key; }) |
|
108 .on("click", function(d) { |
|
109 for (var param in d.value) { |
|
110 var control = d3.select("#" + param); |
|
111 control.select("input").property("value", scale(d.value[param])); |
|
112 control.select("span").text(format(d.value[param])); |
|
113 shape.param(param, d.value[param]); |
|
114 } |
|
115 path.attr("d", shape); |
|
116 }); |
|
117 |
|
118 </script> |
|
119 </body> |
|
120 </html> |