-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
182 lines (144 loc) · 5.69 KB
/
index.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="https://snehalchaudhari98.github.io/fractal-geo/">
<title>Julia Set</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<svg id="canvas"></svg>
<div>
<label for="creal_slider"> c-real Value:</label>
<input type="range" id="creal_slider" name="slider" type="number" min="-2" onClick="drawPlot()" max="2" step="0.05" value="-0.8">
<p>c-real value: <span id="creal_slider-value"></span></p>
</div>
<div>
<label for="cimg_slider"> c-img Slider Value:</label>
<input type="range" id="cimg_slider" name="slider-cimg" type="number" onClick="drawPlot()" min="-1" max="1.5" step="0.01" value="0.184">
<p>c-img Value: <span id="cimg_slider-value"></span></p>
</div>
<script>
// Function to compute the Julia set for a given point
function julia(x, y, maxIter, creal, cimag) {
var zreal = x;
var zimag = y;
for (var i = 0; i < maxIter; i++) {
var zreal_new = zreal * zreal - zimag * zimag + creal;
var zimag_new = 2 * zreal * zimag + cimag;
zreal = zreal_new;
zimag = zimag_new;
if (zreal * zreal + zimag * zimag > 4) {
return i;
}
}
return maxIter;
}
// Define the zoom event handler
/* function zoomed() {
// Get the current scale and translation
var currentScale = d3.event.transform.k;
var currentTx = d3.event.transform.x;
var currentTy = d3.event.transform.y;
// Update the scale and translation
scale = currentScale * 200;
tx = currentTx + width / 2;
ty = currentTy + height / 2;
// Recompute the Julia set with the new scale and translation
values = new Array(width * height);
for (var j = 0; j < height; j++) {
for (var i = 0; i < width; i++) {
var x = (i - tx) / scale;
var y = (j - ty) / scale;
var idx = j * width + i;
values[idx] = julia(x, y);
}
}
// Update the plot based on the new scale and translation
plot.data(values)
.attr("fill", function (d) { return colorScale(d); });
}*/
// Call the zoom function on the SVG element
// svg.call(d3.zoom().on("zoom", zoomed));
drawPlot();
function drawPlot(){
console.log("in drawPlot()");
// Set up the SVG element
var width = 500;
var height = 500;
// var creal ;
// var cimag ;
var svg = d3.select("#canvas")
.attr("width", width)
.attr("height", height);
// svg.call(d3.zoom().on("zoom", function () {
// d3.select(this).attr("transform", d3.event.transform)
// }));
const crealOrderSlider = document.getElementById("creal_slider");
const slider_output = document.getElementById("creal_slider-value");
slider_output.innerText = crealOrderSlider.value;
let initial_slider = crealOrderSlider.value;
var creal = Number(initial_slider);
console.log("initial_slider c-real :", initial_slider);
crealOrderSlider.oninput = function () {
slider_output.innerText = this.value;
};
const cimgOrderSlider = document.getElementById("cimg_slider");
const slider_outputci = document.getElementById("cimg_slider-value");
slider_outputci.innerText = cimgOrderSlider.value;
let cimginitial_slider = cimgOrderSlider.value;
var cimag = Number(cimginitial_slider);
console.log("initial_slider cimag : ", cimginitial_slider);
cimgOrderSlider.oninput = function () {
slider_outputci.innerText = this.value;
};
// Set up the scale and translation
var scale = 200;
var tx = width / 2;
var ty = height / 2;
// Define the parameters for the Julia set
// var creal = -0.8;
// var creal = 0.37;
// var cimag = 0.184;
// var cimag = 0.189;
// var cimag = 0.1;
// var maxIter = 250;
var maxIter = 100;
// Create an array of values for the Julia set
var values = new Array(width * height);
for (var j = 0; j < height; j++) {
for (var i = 0; i < width; i++) {
var x = (i - tx) / scale;
var y = (j - ty) / scale;
var idx = j * width + i;
values[idx] = julia(x, y, maxIter, creal, cimag );
}
}
// Define the color scale for the Julia set
var colorScale = d3
// .scaleLinear()
// .domain([0, maxIter])
// .range(["#000000", "#FFFFFF"]);
.scaleSequential()
.domain([0, maxIter]) // Set the color domain to the range of the side lengths
.interpolator(d3.interpolateViridis);
d3.select("#julia").remove();
console.log("in drawPlot() removing prev.julia plot");
// Plot the Julia set
var plt_julia = svg
.append('g')
.attr("id", "julia");
var plot = plt_julia
.selectAll("rect")
.data(values)
.enter()
.append("rect")
.attr("x", function (d, i) { return i % width; })
.attr("y", function (d, i) { return Math.floor(i / width); })
.attr("width", 1)
.attr("height", 1)
.attr("fill", function (d) { return colorScale(d); });
}
</script>
</body>
</html>