-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
82 lines (64 loc) · 2.43 KB
/
main.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
/**
* @author Ikaros Kappler
* @date 2017-05-18
* @version 1.0.0
**/
$( document ).ready( function() {
var $canvas = $( 'canvas#my_canvas' );
var ctx = $canvas[0].getContext('2d');
var canvas_width = 820;
var canvas_height = 540;
var x = 410-300/2; // Stating x value
var y = 270-300/3; // Stating y value
var len = 300; // Stating length value
var alpha_angle = 0; // Stating angle value
var iteration_count = 8; // Stating iteration value
var line_width = 2;
var default_angle = 45;
// var colors = [ 'red', 'orange', 'blue', 'dark_grey' ];
var colors = [ '#0000ff', '#0000a8', '#000068', 'dark_grey' ];
var toRadians = function( d ) {
return Math.PI*(d/180.0);
};
var paint = function(ctx) {
c_curve(x, y, len, alpha_angle, iteration_n, ctx);
};
var mrand_i = function(max) {
return Math.floor( Math.random()*max );
};
var draw = function() {
ctx.fillStyle = 'black';
ctx.fillRect(0,0,820,540);
iteration_count = getIntegerInput('iterations');
line_width = getIntegerInput('line_width');
c_curve( x, y, len, alpha_angle, iteration_count, ctx );
};
var c_curve = function( x, y, length, angle, iteration, ctx ) {
var alpha = angle;
if( iteration > 0 ) {
length = (length / Math.sqrt(2));
c_curve(x, y, length, (alpha + default_angle), (iteration - 1), ctx ); // Recursive Call
x = (x + (length * Math.cos(toRadians(alpha + default_angle))));
y = (y + (length * Math.sin(toRadians(alpha + default_angle))));
c_curve(x, y, length, (alpha - default_angle), (iteration - 1), ctx ); // Recursive Call
} else {
ctx.strokeStyle = colors[ mrand_i(colors.length+1) ]; // Pick a random color for this segment
ctx.lineWidth = line_width;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo( x, y );
ctx.lineTo( x + (length * Math.cos(toRadians(alpha))),
y + (length * Math.sin(toRadians(alpha))) );
ctx.stroke();
}
};
draw();
$( 'input#iterations' ).change( draw );
$( 'input#line_width' ).change( draw );
} );
var getFloatInput = function(id) {
return parseFloat( document.getElementById(id).value );
}
var getIntegerInput = function(id) {
return parseInt( document.getElementById(id).value );
}