曲线球体变化效果代码
代码语言:html
所属分类:动画
代码描述:曲线球体变化效果代码
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> #c { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <canvas id="c"></canvas> <script> var opts = { radius: 150, segCount: 400, endAngle: -Math.PI * 18, baseRotSpeed: 5, transformedRotSpeed: 1, transSpeed: 2, transEasing: function (t) {return t < .5 ? 4 * t * t * t : 1 - 4 * (t = 1 - t) * t * t;}, randMinSegSize: 10, randMaxSegSize: 40 }; var c = document.getElementById('c'), ctx = c.getContext('2d'); function resize() { c.width = c.offsetWidth; c.height = c.offsetHeight; ctx.translate(c.width * .5, c.height * .5); ctx.strokeStyle = 'black'; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; } window.addEventListener('resize', resize); resize(); function rotateX(p, a) { var d = Math.sqrt(p[2] * p[2] + p[1] * p[1]), na = Math.atan2(p[1], p[2]) + a; return [p[0], d * Math.sin(na), d * Math.cos(na)]; } function rotateY(p, a) { var d = Math.sqrt(p[2] * p[2] + p[0] * p[0]), na = Math.atan2(p[2], p[0]) + a; return [d * Math.cos(na), p[1], d * Math.sin(na)]; } function loxo(radius, angle, segments) { var r = []; for (var i = 0; i < segments; i++) { var a = Math.PI * i / segments, c = Math.cos(a), s = Math.sin(a); var progress = (c + 1) * .5; var ay = progress * angle; r.push([radius * s * Math.cos(ay), radius * c, radius * s * Math.sin(ay)]); } return r; } function random(a, b) {return a + Math.random() * (b - a);} function between(n, m, M) {return n >= m && n <= M;} function randomPath(n, limit, minDist, maxDist) { var r = []; var previous = [random(-limit, limit), random(-limit, limit), random(-limit, limit)]; for (var i = 0; i < n; i++) { var p; do { var dist = random(minDist, maxDist); var angleA = random(0, Math.PI * 2); var angleB = random(0, Math.PI * 2); var tmp = dist * Math.sin(angleA); p = [previous[0] + dist *.........完整代码请登录后点击上方下载按钮下载查看
网友评论0