victor实现六边形窝峰激光线条运动动画效果代码
代码语言:html
所属分类:动画
代码描述:victor实现六边形窝峰激光线条运动动画效果代码
代码标签: victor 六边形 窝峰 激光 线条 运动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <style> html, body { overflow: hidden; } canvas { background: radial-gradient(#2A2A2A, #111); } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/victor.1.1.0.js"></script> <script > /** * JS for Hexocet * * @author Alexandre Andrieux * @since 2017-01-05 */ var Hexocet = { seeds: [], stepCount: 0, birthPeriod: 1, hexSize: 25, targetBounceChance: 0.15, springStiffness: 0.1, viscosity: 0.7, particleOpacity: 0.8, fade: true, fadeLayerOpacity: 0.15 }; Hexocet.setupCanvas = function() { // Initialize own canvas var canvas = document.createElement('canvas'); canvas.id = 'hexocet'; canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); // Get and store canvas context this.canvas = document.getElementById(canvas.id); this.ctx = this.canvas.getContext('2d'); // Scale parameter this.canvasBase = Math.min(this.canvas.width, this.canvas.height); // Central point coordinates this.xC = this.canvas.width / 2; this.yC = this.canvas.height / 2; }; Hexocet.hexCoordsToXY = function(Hx, Hy) { // Hx and Hy are integers corresponding to vertices coordinates in Hex space var xPrime, yPrime, XYprime, X, Y, XY; var isSumEven = ( (parseInt(Hx) + parseInt(Hy)) % 2 == 0 ? 1 : 0); xPrime = 1 * Hx; yPrime = 1 /Math.sqrt(3) * (3*Hy + 1 + isSumEven); XYprime = new Victor(xPrime * this.hexSize, yPrime * this.hexSize); XY = XYprime.clone().rotateDeg(30); return { x: XY.x, y: XY.y }; }; Hexocet.XYtoHexCoords = function(x, y) { // Approximate var XYprime = new Victor(x / this.hexSize, y / this.hexSize).rotateDeg(-30); var Hx = XYprime.x, Hy = Math.sqrt(3) * XYprime.y/3; return { Hx: Math.floor(Hx), Hy: Math.floor(Hy) }; }; Hexocet.update = function() { this.stepCount++; // Birthrate management if (this.stepCount % this.birthPeriod == 0 && this.stepCount < 60000) { this.birth(); } this.move(); this.draw(); }; Hexocet.birth = function(xBirth, yBirth, seed) { // Give birth around the canvas center var targetH = this.XYtoHexCoords(xBirth || this.xC, yBirth || this.yC); // I said AROUND var spreadArea = 1; targetH.Hx += Math.floor(spreadArea * (-0.5 + Math.random())); targetH.Hy += Math.floor(spreadArea * (-0.5 + Math.random())); // Convert in Cartesian coords var targetXY = this.hexCoordsToXY(targetH.Hx, targetH.Hy); var seed = seed || { xLast: targetXY.x, x: targetXY.x, xSpeed: 0, yLast: targetXY.y, y: targetXY.y, ySpeed: 0, targetHx: targetH.Hx, targetHy: targetH.Hy, age: 0, hue: 120 + 50 * Math.sin(this.stepCount / 50) }; this.seeds.push(seed); }; Hexocet.move = function() { // Move all particles for (var i = 0; i < this.seeds.length; i++) { var seed = this.seeds[i]; // Get older seed.age++; // Save last position seed.xLast = seed.x; seed.yLast = seed.y; // Randomly change target if (Math.random() < this.targetBounceChance) { // Either move Hx or Hy, twice more likely to change Hx if (Math.random() > 0.33) { // Move Hx seed.targetHx += (Math.random() > 0.5 ? 1 : -1); } else { // Increase Hy + Hx is even if ((seed.targetHx + seed.targetHy) % 2 == 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0