-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathflower.html
144 lines (119 loc) · 3.8 KB
/
flower.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
<!DOCTYPE html >
<!--
By Dave Lawrence on 28 Oct 2009
A field full of flowers
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html,body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; }
</style>
<title>Field of flowers</title>
<script type="text/javascript">
var width = window.innerWidth;
var height = window.innerHeight;
var frame_time = 100;
var angle = 0.0;
var count = 0;
var numFlowers = width / 4;
var flowers = [];
var ctx;
var flowerId = 0;
function Flower(x, y, centreColor, centreRadius, petal) {
this.x = x;
this.y = y;
this.centreColor = centreColor;
this.centreRadius = centreRadius;
this.petal = petal;
this.flowerId = flowerId++;
}
function Petal(fillStyle, length, width) {
this.fillStyle = fillStyle;
this.length = length;
this.width = width;
}
// write out canvas as we have to put width/height inline in HTML, CSS will just scale pixels
document.write('<canvas id="canvas" width=' + width + ' height=' + height + ' />');
document.write('<canvas id="scratch" style="display: none" width=' + width + ' height=' + height + ' />');
function setup() {
ctx = document.getElementById("canvas").getContext("2d");
for(i=0 ; i<numFlowers ; ++i) {
var x = Math.random() * width;
var y = Math.random() * height;
//var x = width/2;
//var y = height/2;
/*
var length = 100;
var lineargradient = ctx.createLinearGradient(0,0, length, 0);
lineargradient.addColorStop(0, '#fff441');
lineargradient.addColorStop(1, '#fffeba');
var petal = new Petal(lineargradient, length, 70); // fffc00 = nice
flowers.push(new Flower(x, y, '#fffc22', petal));
*/
var size = 30 + Math.random() * 10;
var petal = new Petal('#ffffff', size, size * .7); // fffc00 = nice
flowers.push(new Flower(x, y, '#fffc22', size * .4, petal));
}
//setInterval(clock_tick, frame_time);
draw();
}
function clock_tick() {
count += 0.05;
draw();
}
function draw() {
var rad = 60;
// draw background
ctx.fillStyle = '#28d22c';
ctx.fillRect(0,0, width, height);
for (i=0; i<flowers.length ; ++i){
var f = flowers[i];
ctx.save();
ctx.translate(f.x, f.y);
//ctx.rotate(angle);
//angle += 0.02;
//minRad + Math.sin(count) * rad
drawFlower(f);
ctx.restore();
}
/*
var imageData = ctx.getImageData(width/2, height/2, 100, 100);
ctx.putImageData(imageData, 0, 0);
*/
}
function drawFlower(f){
var numPetals = 13;
var rot = Math.PI * 2 / numPetals;
for (p=0 ; p<numPetals ; ++p) {
ctx.save();
ctx.rotate( p * rot );
ctx.translate(f.centreRadius/2, 0);
drawPetal(f.petal);
ctx.restore();
}
// draw centre bit
ctx.fillStyle = f.centreColor;
ctx.beginPath();
ctx.arc(0, 0, f.centreRadius, 0, Math.PI*2, true);
ctx.fill();
ctx.stroke();
}
function drawPetal(petal) {
ctx.fillStyle = petal.fillStyle;
ctx.beginPath();
ctx.bezierCurveTo(0, 0, petal.length/2, -petal.width/2, petal.length, 0);
ctx.bezierCurveTo(petal.length, 0, petal.length/2, petal.width/2, 0, 0);
ctx.fill();
ctx.stroke();
// mini petal in the middle
ctx.lineWidth /= 5;
ctx.beginPath();
ctx.bezierCurveTo(0, 0, petal.length/2, -petal.width/4, petal.length, 0);
ctx.bezierCurveTo(petal.length, 0, petal.length/2, petal.width/4, 0, 0);
ctx.stroke();
}
</script>
</head>
<body onload="setup()">
</body>
</html>