Vector2与perlin打造粒子流动效果
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="UTF-8"> <script src="http://repo.bfw.wiki/bfwrepo/js/Vector2.min.js"></script> <script src="http://repo.bfw.wiki/bfwrepo/js/perlin.js"></script> <style> body { background-color: black; } .canvas { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; } .codepen-link { position: absolute; bottom: 30px; right: 30px; height: 40px; width: 40px; z-index: 10; border-radius: 50%; box-sizing: border-box; background-position: center center; background-size: cover; opacity: 0.5; -webkit-transition: all 0.25s; transition: all 0.25s; } .codepen-link:hover { opacity: 0.8; box-shadow: 0 0 6px #efefef; } .instructions { position: absolute; bottom: 30px; left: 30px; color: #cfcfff; font-family: "Poppins", sans-serif; font-size: 1em; line-height: 1.25em; pointer-events: none; } </style> </head> <body> <canvas class="mycanvas" width="745" height="706"></canvas> <div class="instructions"> <p> Hover to repel particles </p> <p> Mouse x / y position changes noise frequency </p> <p> Mouse down to attract particles </p> <p> Double-click to add an attractor </p> <p> Double-click attractors to remove </p> </div> <script> /* jshint esversion: 6 */ ((main) => { main(this, document, { v2: Vector2, noise: noise }); })((window, document, lib, undefined) => { 'use strict'; const PI = Math.PI, TAU = PI * 2, ABS = Math.abs, RAND = Math.random, ROUND = Math.round, SIN = Math.sin, COS = Math.cos; class Config { constructor(opts) { for (let opt in opts) { this.set(opt, opts[opt]); } } set(key, value) { if (!key || !value) return; else this[key] = value; } } class Canvas { constructor(selector, context, dimensions) { let self = this; window.requestAnimationFrame = (() => { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); if (selector) { this.el = document.querySelector(selector); } else { this.el = document.createElement('canvas'); document.body.appendChild(this.el); } this.ctx = this.el.getContext(context) || this.el.getContext('2d'); this.dimensions = dimensions || { x: 0, y: 0 }; this.resize(); window.addEventListener('resize', self.resize.bind(self)); } hsla(h, s, l, a) { return 'hsla(' + h + ',' + s + ',' + l + ',' + a + ')'; } fill(x, y, width, height, fill) { this.ctx.fillStyle = fill || 'rgba(0,0,0,1)'; this.ctx.fillRect(x, y, width, height); } drawLine(x1, y1, x2, y2, stroke, strokeWidth) { this.ctx.beginPath(); this.ctx.moveTo(x1, y1); this.ctx.lineTo(x2, y2); this.ctx.strokeStyle = stroke || 'rgba(255,255,255,1)'; this.ctx.lineWidth = strokeWidth || '2'; this.ctx.stroke(); this.ctx.closePath(); } drawArc(x, y, r, fill, stroke, strokeWidth) { this.ctx.beginPath(); this.ctx.arc(x, y, r, 0, TAU); this.ctx.fillStyle = fill || 'rgba(200,0,0,1)'; this.ctx.fill(); if (stroke) { this.ctx.strokeStyle = stroke; this.ctx.lineWidth = strokeWidth || '2'; this.ctx.stroke(); } this.ctx.closePath(); } resize() { this.el.width = this.dimensions.x = window.innerWidth; this.el.height = this.dimensions.y = window.innerHeight; this.center = { x: this.dimensions.x * 0.5, y: this.dimensions.y * 0.5 }; } } class Particle { constructor(x, y) { this.lastPosition = { x: 0, y: 0 }; this.position = new lib.v2(x, y); this.velocity = new lib.v2(); } } class Attractor { constructor(x, y) { this.size = 0; this.position = new lib.v2(x, y); } } class Mouse { constructor() { let self = this, evts = ['mouseenter', 'mousemove', 'mouseout', 'mousedown', 'mouseup', 'dblclick']; this.hover = false; this.mousedown = false; this.dblClick = false; this.position = new lib.v2(); for (let evt of evts) { window.addEventListener(evt, self.handler.bind(self)); } } handler(e) { switch (e.type) { case 'mousedown': this.mousedown = true; break; case 'mouseup': this.mousedown = false; break; case 'mouseenter': this.hover = true; break; case 'mousemove': this.hover = true; break; case 'mouseout': .........完整代码请登录后点击上方下载按钮下载查看
网友评论0