Ajax Loader
HTML 
<canvas id="canvas" width="512" height="512">¡Tu navegador no soporta HTML5! :-(</canvas>
1
<canvas id="canvas" width="512" height="512">¡Tu navegador no soporta HTML5! :-(</canvas>
 
CSS 
html {
1
html {
2
  margin: 0;
3
  padding: 0;
4
}
5
 
6
body {
7
  margin: 0;
8
  padding: 0;
9
  background-color: #000000;
10
}
11
 
12
canvas{
13
  padding-left: 0;
14
  padding-right: 0;
15
  margin-left: auto;
16
  margin-right: auto;
17
  display: block;
18
}
19
 
 
JavaScript 
var canvas       = document.getElementById('canvas');
1
var canvas       = document.getElementById('canvas');
2
var canvasWidth  = canvas.width;
3
var canvasHeight = canvas.height;
4
var cw2          = canvas.width/2;
5
var ch2          = canvas.height/2;
6
var ctx          = canvas.getContext("2d");
7
var points2d     = [];
8
var points       = [];
9
var max_it       = 20000;
10
var frame        = 0;
11
  
12
window.requestAnimFrame = ( function() {
13
  return window.requestAnimationFrame ||
14
  window.webkitRequestAnimationFrame  ||
15
  window.mozRequestAnimationFrame     ||
16
  window.oRequestAnimationFrame       ||
17
  window.msRequestAnimationFrame
18
})();
19
20
// FF only.
21
if( ctx.setStrokeColor == null ) {
22
  ctx.setStrokeColor = function setStrokeColor( r, g, b, a ) {
23
    var rgba = [
24
      Math.floor( r*255 ),
25
      Math.floor( g*255 ),
26
      Math.floor( b*255 ),
27
      a
28
    ];
29
    this.strokeStyle = 'rgba(' + rgba.join(',') + ')';
30
  }
31
}
32
        
33
function draw( ) {
34
  var grad         = 255;
35
  var color_change = Math.floor( max_it/grad );
36
  var red_grad     = 1/( 6*grad );
37
  var green_grad   = 3*red_grad;
38
  var p            = 0;
39
                                                
40
  ctx.fillRect( 0, 0, canvasWidth, canvasHeight );
41
42
  for( var i = 0; i < grad; i++ ) {
43
    ctx.beginPath();
44
    ctx.setStrokeColor( 1 - i*red_grad, 1 - i*green_grad, 0, 0.8 );
45
    ctx.moveTo( cw2 + points2d[p].x, ch2 + points2d[p].y );
46
  
47
    for( var j = 0; j < color_change; j++ ) {
48
      if( ++p < frame*3) {
49
        ctx.lineTo( cw2 + points2d[p].x, ch2 + points2d[p].y );
50
      }
51
    }
52
  
53
    ctx.stroke();
54
    ctx.closePath();
55
  }
56
}
57
  
58
function rotate_and_project() {
59
  points2d.length = 0;
60
  var alfa        = 0.015*frame;
61
  var sin         = Math.sin( alfa );
62
  var cos         = Math.cos( alfa );
63
  for( var i = 0; i < max_it; i++ ) {
64
    var x = points[i].x*cos + points[i].z*sin;
65
    var y = points[i].y;
66
    points2d.push({ x: x, y: y });
67
  }
68
}
69
70
function lorenz() {
71
  var r = 5, o = 15, b = 1;
72
  var x0 = 0.1, y0 = 0.1, z0 = 0.1;
73
  var x1 = x0, y1 = y0, z1 = z0;
74
  var interval = 0.02;
75
  var zoom = 15;
76
          
77
  for( var i = 0; i < max_it; i++ ) {
78
    x1 = x0 + ( y0 - x0 )*r*interval;
79
    y1 = y0 + ( x0 * ( o - z0 ) - y0 )*interval;
80
    z1 = z0 + (( x0 * y0 ) - (b * z0) )*interval;    
81
    // z1-o -> centered
82
    points.push({ x: x1*zoom, y: y1*zoom, z: ( z1 - o )*zoom });        
83
    x0 = x1, y0 = y1, z0 = z1;
84
  }
85
}
86
    
87
function loop() {
88
  ++frame;
89
  rotate_and_project();
90
  draw();
91
  requestAnimFrame( loop );
92
}
93
94
lorenz();
95
loop();
 

3d Lorenz atractor

CSSDeck G+