图片涟漪水波效果
代码语言:html
所属分类:视觉差异
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Liquid image</title> <style> body { background: #000500; color: whitesmoke; font-family: sans-serif; text-align: center; } canvas { cursor: pointer; display: block; margin: 0 auto 10px; } button { cursor: pointer; padding: 5px 15px; } </style> </head> <body translate="no"> <p>用鼠标或手指拖动</p> <div class="wrapper"></div> <button class="grid">Toggle grid</button> <button class="jelly">Jellyfish</button> <button class="water">Water</button> <button class="boris">Boris</button> <script > let canvas, ctx, system, gridSize = 40, spacing = 10, width = height = (gridSize - 1) * spacing, mouseX = 262, // Positioning mouse values so they affect good portion of image at start :) mouseY = 182, imgSrc = new Image(), imgURL, drawVertices = false, first = true; const msqrt = Math.sqrt; let jelly = 'https://i0.nicepik.com/files/294/1007/621/abstract-biology-black-background-graphic.jpg'; let boris = 'https://upload.wikimedia.org/wikipedia/commons/2/25/Informal_meeting_of_foreign_affairs_ministers_%28Gymnich%29._Round_table_Boris_Johnson_%2836913612672%29_%28cropped%29.jpg'; let water = 'https://cdn.pixabay.com/photo/2015/11/02/18/32/water-1018808_960_720.jpg'; imgURL = jelly; const ParticleSystem = function () { this.friction = .98; // 1 MAX this.mouseRepelDist = 50; // Size of repel circle this.mouseForce = .02; // Strength of mouse influence this.springForce = .2; // speed of return to spring point. Tightness this.numParticles = gridSize * gridSize; this.particles = []; this.faces = []; }; ParticleSystem.prototype.generate = function () { for (let i = 0; i < this.numParticles; i++) { this.particles.push(new Vertices(i % gridSize * spacing, Math.floor(i / gridSize) * spacing, this)); } }; ParticleSystem.prototype.update = function () { for (let i = 0; i < this.numParticles; i++) { this.particles[i].update(); } }; const Vertices = function (x, y, parentSystem) { this.x = x; this.y = y; this.sx = this.x; this.sy = this.y; this.vx = 0;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0