-
Notifications
You must be signed in to change notification settings - Fork 0
/
russian_dolls.html
159 lines (129 loc) · 4.36 KB
/
russian_dolls.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
<!DOCTYPE html >
<!--
http://proceduralgraphics.blogspot.com
By Dave Lawrence on 8/4/2010
TODO:
-kaelidoscope into canvas then copy that each time (much faster)
-make initialise using map, random picker for multiple versions of each component
-different shawl (eg frills, different joins etc), buckle instead of tie/bow
-make randomPattern generate a pattern, and getRandomPatternDrawable() or something
patterns:
-feather
-leaves
-flower from the side/stem etc
-snowflake
-kaelidoscope of petals, leaves, fruit etc
-lsystem?
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html,body { width:100%; height:100%; margin:0; padding:0; overflow:hidden; }
</style>
<title></title>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="shapes.js"></script>
<script type="text/javascript" src="drawing.js"></script>
<script type="text/javascript" src="patterns.js"></script>
<script type="text/javascript" src="doll.js"></script>
<script type="text/javascript">
var width = window.innerWidth;
var height = window.innerHeight;
var midPoint = { x: Math.floor(width/2), y: Math.floor(height/2) };
var fps = 10;
var dolls = [];
var bgCanvas;
var cycle = 0;
var topDoll, midDoll, botDoll;
var nextFrame;
// write out canvas as we have to put width/height inline in the HTML, CSS will just scale pixels
document.write('<canvas id="canvas" width=' + width + ' height=' + height + '></canvas>');
function setup() {
dolls.push(dollFactory());
dolls.push(dollFactory());
createZoomDolls(dolls, width, height);
var aspect = width / height;
var numRows = 4 + irand(6);
var numCols = Math.floor(numRows * aspect);
bgCanvas = newCanvas(width, height);
var bgCtx = bgCanvas.getContext("2d");
drawMultiple(bgCtx, numRows, numCols);
var ctx = document.getElementById("canvas").getContext("2d");
setInterval(function() { update(ctx); }, 1000 / fps);
}
function update(ctx) {
drawBackgroundFromCanvas(ctx, bgCanvas);
drawZoomDolls(ctx, width, height);
cycle += 0.03;
if (cycle > 1) {
cycle = 0;
dolls.shift();
dolls.push(dollFactory());
createZoomDolls(dolls, width, height);
}
}
function drawMultiple(ctx, numRows, numCols) {
var buffer = newCanvas(Math.floor( width / numCols ), Math.floor( height / numRows ));
var ctx2 = buffer.getContext("2d");
for (var row=0 ; row < numRows ; ++row) {
for (var col=0 ; col < numCols ; ++col) {
var doll = dollFactory();
drawSolidBackground(ctx2, buffer.width, buffer.height, randomColor());
drawForeground(ctx2, buffer.width, buffer.height, doll);
ctx.drawImage(buffer, col * buffer.width, row * buffer.height);
}
}
}
function drawSolidBackground(ctx, width, height, fillStyle) {
ctx.fillStyle = fillStyle;
ctx.fillRect(0,0,width,height);
}
function drawBackgroundFromCanvas(ctx, bg) {
ctx.drawImage(bg, 0, 0);
}
function drawForeground(ctx, width, height, doll) {
ctx.save();
ctx.translate(Math.floor(width/2), Math.floor(height/2));
var size = height * .8;
ctx.scale(size, size);
doll.draw(ctx);
ctx.restore();
}
function createZoomDolls(dolls, width, height) {
topDoll = new Drawable();
topDoll.clipFunc = topOnlyMask;
topDoll.children.push(dolls[0]);
topDoll.x = midPoint.x;
topDoll.y = midPoint.y;
botDoll = new Drawable();
botDoll.clipFunc = bottomOnlyMask;
botDoll.children.push(dolls[0]);
botDoll.x = midPoint.x;
botDoll.y = midPoint.y;
midDoll = new Drawable();
midDoll.children.push(dolls[1]);
midDoll.x = midPoint.x;
midDoll.y = midPoint.y;
}
function drawZoomDolls(ctx, width, height) {
topDoll.y = midPoint.y - height/2 * cycle;
botDoll.y = midPoint.y + height/2 * cycle;
var size = height * .8 * (1 + cycle);
topDoll.scale = size;
botDoll.scale = size;
midDoll.scale = size/2;
ctx.save();
midDoll.draw(ctx);
ctx.restore();
ctx.save();
topDoll.draw(ctx);
ctx.restore();
ctx.save();
botDoll.draw(ctx);
ctx.restore();
}
</script>
</head>
<body onload="setup()">
</body>
</html>