-
Notifications
You must be signed in to change notification settings - Fork 1
/
random_rectangles.html
123 lines (104 loc) · 3.24 KB
/
random_rectangles.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
<html>
<head>
<title>random rectangles - html5 canvas experiment</title>
<script type="text/javascript">
var CANVAS = {width: 800, height: 600};
var NUMBER_OF_RECTANGLES = 150;
var FALLING = true;
function init(){
setInterval(draw, 30);
setInterval(cleanupStaleResources, 1000);
}
function draw() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, CANVAS.width, CANVAS.height);
for (i=0; i < allShapes.length; ++i) {
allShapes[i].draw(ctx);
}
}
}
function cleanupStaleResources() {
for (i=0; i < staleResources.length; ++i) {
for (j=0; j < allShapes.length; ++j) {
if (staleResources[i] == allShapes[j]) {
allShapes.splice(j, 1);
}
}
}
staleResources = [];
}
/* Rectangle object */
var RotatingRectangle = function(opts){
var rotationState = 0;
var active = true;
if (opts.falling) {
var fallingSpeed = Math.ceil(Math.random() * 5);
opts.y = -opts.height
}
this.draw = function(ctx){
if (!active)
return;
if (opts.direction)
rotationState += opts.rotationSpeed;
else
rotationState -= opts.rotationSpeed;
if (opts.falling)
opts.y += fallingSpeed;
ctx.save();
ctx.translate(opts.x+(opts.width/2), opts.y+(opts.height/2));
ctx.rotate(rotationState);
ctx.fillStyle = opts.fillColor;
ctx.fillRect(0-(opts.width/2), 0-(opts.height/2), opts.width, opts.height);
ctx.restore();
if (opts.y > CANVAS.height) {
active = false;
staleResources.push(this);
allShapes.push(createRectangle());
}
}
}
function generateShapes(count){
var allShapes = [];
for (i=0; i < count; ++i) {
allShapes.push(createRectangle());
}
return allShapes;
}
function createRectangle(){
var red = Math.floor(Math.random() * 256);
var green = Math.floor(Math.random() * 256);
var blue = Math.floor(Math.random() * 256);
var opacity = Math.random();
var direction = Math.round(Math.random()) == 0 ? false : true
return new RotatingRectangle({
x: Math.floor(Math.random() * CANVAS.width),
y: Math.floor(Math.random() * CANVAS.height),
width: 50,
height: 50,
falling: FALLING,
rotationSpeed: Math.random()*.10,
fillColor: "rgba("+red+", "+green+", "+blue+", "+opacity+")",
direction: direction
});
}
var allShapes = generateShapes(NUMBER_OF_RECTANGLES);
var staleResources = [];
init();
</script>
<style type="text/css">
#canvasContainer {
border: 1px solid black;
margin: 0 auto;
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="canvasContainer">
<canvas id="myCanvas" width="800" height="600" />
</div>
</body>
</html>