-
Notifications
You must be signed in to change notification settings - Fork 0
/
fractal.js
101 lines (88 loc) · 2.53 KB
/
fractal.js
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
$(document).ready(function() {
if (!Julia.prototype.canvasSupported) {
var message = "You'll need a browser that supports HTML canvas for this demo";
alert(message);
return;
}
var buildData = function(el) {
var $el = $(el);
return {
top: $el.offset().top,
left: $el.offset().left,
max: +$el.data('max'),
min: +$el.data('min'),
step: +$el.data('step'),
base: +$el.data('base')
};
};
var onInputFocus = function() {
var $el = $(this),
data = buildData(this);
$('.scrubber')
.css({top: data.top - 20, left: data.left + 9})
.draggable({
axis: 'x',
containment: [
data.left + data.min / data.step, 0,
data.left + data.max / data.step, 0
]
})
.show()
.on('drag', function() {
var delta = (data.left - $(this).offset().left) * -data.step;
$el.val(Math.round((data.base + delta) * 10) / 10);
})
.on('dragstop', function() {
$el.trigger('change');
});
};
$('input').on('change', function() {
var loader = $(this).parents('.fractal').find('.loading'),
id = $(this).parents('.controls').data('for'),
fractal = $('canvas#' + id).data('julia'),
val = +this.value,
data = buildData(this);
if (isNaN(val) || val < data.min) this.value = data.base;
loader.show();
fractal.options[$(this).attr('name')] = val;
fractal.drawQueued();
$(this).parents('.fractal').find('.loading').show();
});
$('canvas').on('drawstop', function() {
$(this).parent().find('.loading').hide();
});
$('input')
.on('focus', onInputFocus)
.on('blur', function() {
$('.scrubber')
.off('drag dragstop')
.hide();
});
// Give the page a chance to render before the thread is blocked drawing fractals.
setTimeout(function() {
var f1 = new Julia(document.getElementById('fractal1'), {
iterFunc: Julia.prototype.iterate2,
});
var f2 = new Julia(document.getElementById('fractal2'), {
iterFunc: Julia.prototype.iterate3,
colors: [
'rgb(84,30,50)',
'rgb(142,53,87)',
'rgb(136,163,62)',
'rgb(194,189,134)',
'rgb(247,242,178)'
]
});
var f3 = new Julia(document.getElementById('fractal3'), {
iterFunc: Julia.prototype.iterate4,
colors: [
'rgb(59,47,48)',
'rgb(151,117,103)',
'rgb(230,222,213)',
'rgb(43,30,27)',
'rgb(42,0,1)'
]
});
$('.loading').hide();
}, 100);
});