| 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();
|
|---|