3d洛伦茨吸引力

下载代码

html

css

js

分享到微信朋友圈

X

html

css

JavaScript

var canvas       = document.getElementById('canvas');
var canvasWidth  = canvas.width;
var canvasHeight = canvas.height;
var cw2          = canvas.width/2;
var ch2          = canvas.height/2;
var ctx          = canvas.getContext("2d");
var points2d     = [];
var points       = [];
var max_it       = 20000;
var frame        = 0;
    
window.requestAnimFrame = ( function() {
  return window.requestAnimationFrame || 
  window.webkitRequestAnimationFrame  || 
  window.mozRequestAnimationFrame     || 
  window.oRequestAnimationFrame       || 
  window.msRequestAnimationFrame  
})();
  
// FF only. 
if( ctx.setStrokeColor == null ) {
  ctx.setStrokeColor = function setStrokeColor( r, g, b, a ) {
    var rgba = [
      Math.floor( r*255 ),
      Math.floor( g*255 ),
      Math.floor( b*255 ),
      a
    ];
    this.strokeStyle = 'rgba(' + rgba.join(',') + ')';
  }
}  
          
function draw( ) {
  var grad         = 255;
  var color_change = Math.floor( max_it/grad );
  var red_grad     = 1/( 6*grad );
  var green_grad   = 3*red_grad;
  var p            = 0;
                                                  
  ctx.fillRect( 0, 0, canvasWidth, canvasHeight );
  
  for( var i = 0; i < grad; i++ ) {
    ctx.beginPath();
    ctx.setStrokeColor( 1 - i*red_grad, 1 - i*green_grad, 0, 0.8 ); 
    ctx.moveTo( cw2 + points2d[p].x, ch2 + points2d[p].y );
    
    for( var j = 0; j < color_change; j++ ) {
      if( ++p < frame*3) {
        ctx.lineTo( cw2 + points2d[p].x, ch2 + points2d[p].y );
      }
    }
    
    ctx.stroke();
    ctx.closePath();
  }
}
    
function rotate_and_project() {
  points2d.length = 0;
  var alfa        = 0.015*frame;
  var sin         = Math.sin( alfa );
  var cos         = Math.cos( alfa );
  for( var i = 0; i < max_it; i++ ) {
    var x = points[i].x*cos + points[i].z*sin;
    var y = points[i].y;
    points2d.push({ x: x, y: y });
  }
}
  
function lorenz() {
  var r = 5, o = 15, b = 1;
  var x0 = 0.1, y0 = 0.1, z0 = 0.1;
  var x1 = x0, y1 = y0, z1 = z0;
  var interval = 0.02;
  var zoom = 15;
            
  for( var i = 0; i < max_it; i++ ) {
    x1 = x0 + ( y0 - x0 )*r*interval;
    y1 = y0 + ( x0 * ( o - z0 ) - y0 )*interval; 
    z1 = z0 + (( x0 * y0 ) - (b * z0) )*interval;     
    // z1-o -> centered
    points.push({ x: x1*zoom, y: y1*zoom, z: ( z1 - o )*zoom });         
    x0 = x1, y0 = y1, z0 = z1;
  }
}
      
function loop() {
  ++frame;
  rotate_and_project();
  draw();
	requestAnimFrame( loop );
}
  
lorenz();
loop();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>3d洛伦茨吸引力-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号