sketch实现宇宙绚丽流星旋转效果
代码语言:html
所属分类:动画
代码描述:sketch实现宇宙绚丽流星旋转效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <style type="text/css"> body { background: #000; } canvas { display: block; } #gui { left: 0; position: fixed; top: 0; } </style> <!--[if IE]> <script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div class="htmleaf-container"> <div id="gui"></div> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/sketch.min.js"></script> <script> var sketch = Sketch.create(), center = { x: sketch.width / 2, y: sketch.height / 2 }, orbs = [], dt = 1, opt = { total: 0, count: 100, spacing: 2, speed: 65, scale: 1, jitterRadius: 0, jitterHue: 0, clearAlpha: 10, toggleOrbitals: true, orbitalAlpha: 100, toggleLight: true, lightAlpha: 5, clear: function () { sketch.clearRect(0, 0, sketch.width, sketch.height), orbs.length = 0; } }; var Orb = function (x, y) { var dx = x / opt.scale - center.x / opt.scale, dy = y / opt.scale - center.y / opt.scale; this.angle = atan2(dy, dx); this.lastAngle = this.angle; this.radius = sqrt(dx * dx + dy * dy); this.size = this.radius / 300 + 1; this.speed = random(1, 10) / 300000 * this.radius + 0.015; }; Orb.prototype.update = function () { this.lastAngle = this.angle; this.angle += this.speed * (opt.speed / 50) * dt; this.x = this.radius * cos(this.angle); this.y = this.radius * sin(this.angle); }; Orb.prototype.render = function () { if (opt.toggleOrbitals) { var radius = opt.jitterRadius === 0 ? this.radius: this.radius + random(-opt.jitterRadius, opt.jitterRadius); radius = opt.jitterRadius != 0 && radius < 0 ? 0.001: radius; sketch.strokeStyle = 'hsla( ' + ((this.angle + 90) / (PI / 180) + random(-opt.jitterHue, opt.jitterHue)) + ', 100%, 50%, ' + opt.orbitalAlpha / 100 + ' )'; sketch.lineWidth = this.size; sketch.beginPath(); if (opt.speed >= 0) { sketch.arc(0, 0, radius, this.lastAngle, this.angle + 0.001, false); } else { sketch.arc(0, 0, radius, this.angle, this.lastAngle + 0.001, false); }; sketch.stroke(); sketch.closePath(); }; if (opt.toggleLight) { sketch.lineWidth = 0.5; sketch.strokeStyle = 'hsla( ' + ((this.angle + 90) / (PI / 180) + random(-opt.jitterHue, opt.jitterHue)) + ', 100%,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0