HTML5 Canvas交互式液体表面波动动画

Interactive Fluid，可用来制作交互式水平面波动类的动画特效。

html5, water

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4148
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Resolution of simulation
const NUM_POINTS = 50;
// Spring constant for forces applied by adjacent points
const SPRING_CONSTANT = 0.009;
// Sprint constant for force applied to baseline
const SPRING_CONSTANT_BASELINE = 0.005;
// Damping to apply to speed changes
const DAMPING = 0.985;
// Mass of each point
const POINT_MASS = 1;
// Draw points
const SHOW_VERTS = false;
// Draw radius for wave points
const POINT_RADIUS = 4;
// Number of points to affect when interacting
const INTERACTIVE_SPREAD = Math.ceil(NUM_POINTS / 4);
// Mouse Interactive Power
const MOUSE_POW = 0.002;

/*------------------------------*\
|* Main Canvas
\*------------------------------*/

class Canvas {
    constructor() {
        // setup a canvas
        this.canvas = document.getElementById('canvas');
        this.dpr = window.devicePixelRatio || 1;
        
        this.ctx = this.canvas.getContext('2d');
        this.ctx.scale(this.dpr, this.dpr);
    
        this.mouse = {
            x: this.canvas.width / 2,
            y: this.canvas.height / 2,
            mousedown: false,
            power: 15, // initial wave power for demo purpose, resets to 1 in loop
        };
        
        this.setCanvasSize = this.setCanvasSize.bind(this);
        this.handleMousedown = this.handleMousedown.bind(this);
        this.handleMouseup = this.handleMouseup.bind(this);
        this.handleMouse = this.handleMouse.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.render = this.render.bind(this);
        
        this.setCanvasSize();
        this.setupListeners();
        
        this.constructWave();
        
        this.triggerWave(this.canvas.width, this.canvas.height * 1.4);
        this.triggerWave(this.canvas.width / 8, 0);
        
        this.tick = 0;
        this.render();   
    }
    
    constructWave() {
        const padding = 60 * this.dpr;
        const points = NUM_POINTS;

const y = this.canvas.height / 2;

const p1 = new Point(
            0,
            y
        );

const p2 = new Point(
            this.canvas.width,
            y,
        );

this.wave = new Wave(points, p1, p2);    
    }
    
    setupListeners() {
        window.addEventListener('resize', this.setCanvasSize);
        window.addEventListener('mousedown', this.handleMousedown);
        window.addEventListener('mouseup', this.handleMouseup);
        window.addEventListener('mousemove', this.handleMouse);
        window.addEventListener('click', this.handleClick);
    }
    
    handleClick(event) {
        // const x = event.clientX * this.dpr;
        // const y = event.clientY * this.dpr;
        // this.mouse.x = x;
        // this.mouse.y = y;
    }
    
    handleMousedown(event) {
        this.mouse.mousedown = true;
    }
    
    handleMouseup(event) {
        this.mouse.mousedown= false;
    }
    
    handleMouse(event) {
        const x = event.clientX * this.dpr;
        const y = event.clientY * this.dpr;
        this.mouse.x = x;
        this.mouse.y = y;
    }
    
    updateWavePower() {
        const max = 10;
        const mouse = this.mouse;
        
        if (mouse.mousedown && mouse.power > max) {
            mouse.power = max;
            console.log(max)
        } else if (mouse.mousedown) {
            mouse.power += 0.1;
        } else {
            mouse.power = 1;
        }
    }
    
    triggerWave(x, y) {
        
        let closestPoint = {};
        let closestDistance = -1;
        
        const points = this.wave.points;
        let idx = 0;
        
        // Gets the closest point to the x coordinates
        for (var n = 0; n < points.length; n++) {
            const p = points[n];
            const distance = Math.abs(x - p.x);
            
            if (closestDistance === -1) {
                closestPoint = p;
                closestDistance = distance;
                idx = n;
            } else if (distance <= closestDistance) {
                closestPoint = p;
                closestDistance = distance;
                idx = n;
            }
        }
    
        const halfHeight = this.canvas.height / 2;        
        const dy = y - halfHeight; // delta y from baseline
        
        const spread = INTERACTIVE_SPREAD; // number of points to affect from closest point
        const mod = (idx - spread) % points.length; // modulus
        const start = mod < 0 ? points.length + mod : mod; // starting idx accounting for negatives
        const length = spread * 2 + 1; // number of points total

this.ctx.beginPath();
        this.ctx.moveTo(
            this.wave.points[0].x,
            this.wave.points[0].y
        );

for (let n = 0; n < this.wave.points.length - 1; n++) {

const p1 = this.wave.points[n];
            const p2 = this.wave.points[n + 1];

const cpx = (p1.x + p2.x) / 2;
            const cpy = (p1.y + p2.y) / 2;

if (n === this.wave.points.length - 2) {
                this.ctx.quadraticCurveTo(
                    p1.x,
                    p1.y,
                    p2.x,
                    p2.y
                );
            } else {
                this.ctx.quadraticCurveTo(
                    p1.x,
                    p1.y,
                    cpx,
                    cpy
                );
            }

}
        
        this.ctx.lineTo(
            this.canvas.width,
            this.canvas.height
        );
        
        this.ctx.lineTo(
            0,
            this.canvas.height
        );
        
        this.ctx.closePath();
        this.ctx.fill();
    }
    
    drawVerts() {
        this.ctx.lineWidth = 2 * this.dpr;
        this.ctx.strokeStyle = '#009efd';

this.wave.points.forEach(p => {
            this.ctx.beginPath();
            this.ctx.arc(p.x, p.y, POINT_RADIUS * this.dpr, 0, Math.PI * 2, true);
            this.ctx.closePath();
            this.ctx.fill();     
            this.ctx.stroke();
        });
    }
    
    drawMouse() {
        this.ctx.lineWidth = 2 * this.dpr;
        
        if (this.mouse.mousedown) {
            this.ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
            this.ctx.strokeStyle = '#537895';
            this.ctx.beginPath();
            this.ctx.arc(this.mouse.x, this.mouse.y, 16 * this.dpr * this.mouse.power, 0, Math.PI * 2, true);
            this.ctx.closePath();  
            this.ctx.stroke();
            this.ctx.fill();
        }
        
        this.ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
        this.ctx.strokeStyle = this.mouse.mousedown ? '#ed6ea0' : '#537895';

this.ctx.beginPath();
        this.ctx.arc(this.mouse.x, this.mouse.y, 16 * this.dpr, 0, Math.PI * 2, true);
        this.ctx.closePath();
        this.mouse.mousedown && this.ctx.fill();
        this.ctx.stroke();
    }

updateWave() {
        // http://jsfiddle.net/phil_mcc/sXmpD/8/#run
        // https://gamedev.stackexchange.com/a/45247
        
        const points = this.wave.points;
        
		for (var n = 0; n < points.length; n++) {
			const p = points[n];
            
            // force to apply to this point
			let force = 0;

// forces caused by the point immediately to the left or the right
			let forceFromLeft;
            let forceFromRight;

if (n === 0) { // wrap to left-to-right
				let dy = points[points.length - 1].y - p.y;
				forceFromLeft = SPRING_CONSTANT * dy;
			} else { // normally
				let dy = points[n - 1].y - p.y;
				forceFromLeft = SPRING_CONSTANT * dy;
			}
			if (n === points.length - 1) { // wrap to right-to-left
				let dy = points[0].y - p.y;
				forceFromRight = SPRING_CONSTANT * dy;
			} else { // normally
				let dy = points[n + 1].y - p.y;
				forceFromRight = SPRING_CONSTANT * dy;
			}

// Also apply force toward the baseline
			let dy = this.canvas.height / 2 - p.y;
			const forceToBaseline = SPRING_CONSTANT_BASELINE * dy;
            
			// Sum up forces
			force = force + forceFromLeft;
			force = force + forceFromRight;
			force = force + forceToBaseline;

// Calculate acceleration
			const acceleration = force / p.mass;

// Apply acceleration (with damping)
			p.vy = DAMPING * p.vy + acceleration;

// Apply speed
			p.y = p.y + p.vy;
        }
    }
    
    render() {
        this.drawBackground();
        this.drawText();
        this.drawCurve();
        SHOW_VERTS && this.drawVerts();
        this.drawMouse();
        
        // Trigger on mousedown
        if (this.mouse.mousedown) {
            const { x, y } = this.mouse;
            this.triggerWave(x, y);
        }
        
        this.updateWavePower();
        this.updateWave();
        
        
        this.tick++;

window.requestAnimationFrame(this.render);
    }
}

/*------------------------------*\
|* Wave
\*------------------------------*/

class Wave {
    constructor(points, p1, p2) {
        this.p1 = p1;
        this.p2 = p2;
        
        const dx = p2.x - p1.x;
        const dy = p2.y - p1.y;
        
        const vx = dx / (points - 1);
        const vy = dy / (points - 1);

this.points = new Array(points)
            .fill(null)
            .map((p, i) => new Point(
                p1.x + vx * i,
                p1.y + vy * i
            )
        );
    }  
}

/*------------------------------*\
|* Point
\*------------------------------*/

class Point {
    constructor(x = 0, y = 0) {
        this.x = x;
        this.y = y;
        
        this.vy = 0;
        this.vx = 0;

this.mass = POINT_MASS;
    }
    
    get position() {
        return {
            x: this.x,
            y: this.y,
        };
    }
    
    moveTo(...args) {
        this.x = args[0];
        this.y = args[1];
    }
}

new Canvas();

编译

CSS

HTML

Interactive Fluid，可用来制作交互式水平面波动类的动画特效。

html5, water

编辑器支持Emmet

快捷键

Interactive Fluid，可用来制作交互式水平面波动类的动画特效。

html5, water

HTML5 Canvas交互式星辰网页动画背景

HTML5/Canvas 仿3D水面波动动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：