forked from dp50mm/chaos-theory-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
super_formula.html
91 lines (82 loc) · 2.46 KB
/
super_formula.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
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<title>Superformula</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<style>
.svg-container {
width:600px;
height:600px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
}
</style>
<script>
$(document).ready(function() {
// Logging to see if the code actually starts
console.log('document ready');
/**
* parameters defining the shape.
* Change these and refresh the page!
*/
var parameters = {
a:1,
b:1,
m:10,
n1:5,
n2:5,
n3:5
};
// Log to check in page which parameters are used
console.log(parameters);
/**
* The formula function itself
* Reives parameters & the angle
*/
function super_formula(a, b, m, n1, n2, n3, angle) {
var first = Math.pow(Math.abs(Math.cos((m*angle)/4)),n2);
var second = Math.pow(Math.abs(Math.sin((m*angle)/4)),n3);
return Math.pow(first+second,(-1*(1/n1)));
}
/**
* Create SVG elements
*/
var svg = d3.select('.svg-container').append('svg')
.attr('width','600px')
.attr('height','600px');
var group = svg.append('g')
.attr('transform','translate(250,250)');
var points = [];
for (var angle = 0; angle < Math.PI*2; angle += Math.PI/100) {
var radius = super_formula(parameters.a,
parameters.b,
parameters.m,
parameters.n1,
parameters.n2,
parameters.n3,
angle);
points.push({
'x':(radius*Math.cos(angle)),
'y':(radius*Math.sin(angle))
});
}
console.log(points);
var lineFunction = d3.svg.line()
.x(function(d) {return d.x*50})
.y(function(d) {return d.y*50})
.interpolate('linear');
var lineGraph = group.append('path')
.attr('d',lineFunction(points))
.attr('stroke','black')
.attr('stroke-width',2)
.attr('fill','none');
});
</script>
</head>
<body>
<div class='svg-container'>
</div>
</body>
</html>