1 | var counter = 0;
|
---|
2 |
|
---|
3 | var PIXEL_SIZE = 4;
|
---|
4 |
|
---|
5 | var temp_1 = 0;
|
---|
6 |
|
---|
7 | function init()
|
---|
8 | {
|
---|
9 | setInterval('render()',50);
|
---|
10 | }
|
---|
11 |
|
---|
12 | function dist(a, b, c, d)
|
---|
13 | {
|
---|
14 | return Math.sqrt((a - c) * (a - c) + (b - d) * (b - d));
|
---|
15 | }
|
---|
16 |
|
---|
17 |
|
---|
18 | function render()
|
---|
19 | {
|
---|
20 | var canvas = document.getElementById('tutorial');
|
---|
21 | canvas.resize(128, 128);
|
---|
22 | var ctx = canvas.getContext('2d');
|
---|
23 | ctx.save();
|
---|
24 |
|
---|
25 | var time = counter * 5;
|
---|
26 |
|
---|
27 |
|
---|
28 | for( y = 0; y < 128; y+=PIXEL_SIZE) {
|
---|
29 | for( x = 0 ; x < 128; x+=PIXEL_SIZE) {
|
---|
30 |
|
---|
31 |
|
---|
32 | var temp_val = Math.floor(Math.sin(dist(x + time, y, 128.0, 128.0) / 8.0)
|
---|
33 | + Math.sin(dist(x, y, 64.0, 64.0) / 8.0)
|
---|
34 | + Math.sin(dist(x, y + time / 7, 192.0, 64) / 7.0)
|
---|
35 | + Math.sin(dist(x, y, 192.0, 100.0) / 8.0));
|
---|
36 |
|
---|
37 |
|
---|
38 |
|
---|
39 |
|
---|
40 | var temp_col = Math.floor((2 + temp_val) * 50);
|
---|
41 |
|
---|
42 | var rand_red = temp_col * 3;
|
---|
43 | var rand_green = temp_col ;
|
---|
44 | var rand_blue = 128 - temp_col;
|
---|
45 |
|
---|
46 | ctx.fillStyle = "rgb("+rand_red+","+rand_green+","+rand_blue+")";
|
---|
47 |
|
---|
48 | ctx.fillRect(x,y,PIXEL_SIZE,PIXEL_SIZE);
|
---|
49 | }
|
---|
50 | }
|
---|
51 |
|
---|
52 |
|
---|
53 | ctx.restore();
|
---|
54 | counter++;
|
---|
55 |
|
---|
56 | }
|
---|
57 |
|
---|
58 | init();
|
---|