HTML5/Canvas可调整重力摩擦力和弹性的蜘蛛网

Spider Web, 鼠标移动上去会触发网的波动。

html5, net

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

class Settings {
    constructor() {
        this.gravity = 0.02;
        this.friction = 0.001;
        this.rigidness = 30;
    }
}

// Yea, yea, it's global
var settings = new Settings();

class World {
    constructor() {
        this.canvas = document.getElementById("canvas");
        this.ctx = canvas.getContext("2d");
        this.h = this.canvas.height = window.innerHeight;
        this.w = this.canvas.width = window.innerWidth;
        this.ctx.lineWidth = 1;
        this.ctx.strokeStyle = "beige";

this.bounce = 0.1;

this.points = [];
        this.sticks = [];
        this.setupPointsInGrid();

this.isDragging = false;
        this.dragPoints = [];
        this.setupEventListers();
    }

setupPointsInGrid() {
        var spokes = 10;
        var connections = 6;
        var radius = 300;
        var step = 10;

var spokeParts = radius / step;
        for (var i = 0; i < spokes; i++) {
            var angle = i / spokes * Math.PI * 2;
            var x = this.w / 2;
            var y = this.h / 2;
            this.addPoint(x, y, true);

for (var part = 1; part < spokeParts; part++) {
                x = this.w / 2 + Math.cos(angle) * step * part;
                y = this.h / 2 + Math.sin(angle) * step * part;
                this.addPoint(x, y);
                this.connectLastTwoPoints();
            }
            this.makeLastPointPinned();
        }

for (var connection = 0; connection < connections; connection++) {

for (var spoke = 0; spoke < spokes; spoke++) {
                var r = radius * connection / connections;
                var angle = spoke / spokes * Math.PI * 2;
                var angle2 = (spoke + 1) / spokes * Math.PI * 2;
                var start = {
                    x: this.w / 2 + Math.cos(angle) * r,
                    y: this.h / 2 + Math.sin(angle) * r
                };
                var end = {
                    x: this.w / 2 + Math.cos(angle2) * r,
                    y: this.h / 2 + Math.sin(angle2) * r
                };
                var len = this.distance(start, end);
                var connectionParts = Math.round(len / step);
                var p0 = this.getClosestPoint(start);

for (var part = 0; part < connectionParts; part++) {
                    var x = start.x + Math.cos(angle + 1.965) * step * part;
                    var y = start.y + Math.sin(angle + 1.965) * step * part;
                    var p1 = {
                        x: x,
                        y: y,
                        oldx: x,
                        oldy: y,
                    };
                    this.addPointObject(p1);
                    this.connectPoints(p0, p1);

if (part + 1 >= connectionParts) {
                        // Last point. We need to connect
                        // it with an existing point on 
                        // the spoke next to us.
                        var spokeIndex = (spoke + 1) % spokes;
                        var index = spokeIndex * spokeParts + connection * radius / step / connections;
                        var p2 = this.points[index];
                        this.connectPoints(p1, p2);
                    }
                    p0 = p1;
                }
            }
        }
    }

addPoint(x, y, pinned) {
        this.points.push({
            x: x,
            y: y,
            oldx: x,
            oldy: y,
            pinned: pinned
        });
    }

addPointObject(p) {
        this.points.push(p);
    }

makeLastPointPinned() {
        var last = this.points.length - 1;
        this.points[last].pinned = true;
    }

connectPoints(p0, p1) {
        this.sticks.push({
            p0: p0,
            p1: p1,
            length: this.distance(
                p0,
                p1),
        });
    }

connectLastTwoPoints() {
        var last = this.points.length - 1;
        var secondLast = last - 1;
        var p0 = this.points[secondLast];
        var p1 = this.points[last];
        this.connectPoints(p0, p1);
    }

connectWithLastPoint(p0) {
        var last = this.points.length - 1;
        var p1 = this.points[last];
        this.connectPoints(p0, p1);
    }

setupEventListers() {
        this.canvas.addEventListener(
            "mousedown",
            event => this.onMouseDown(event));
        this.onMouseMove = this.onMouseMove.bind(this);
        this.canvas.addEventListener("mousemove", this.onMouseMove);
        this.onMouseUp = this.onMouseUp.bind(this);
        this.canvas.addEventListener("mouseup", this.onMouseUp);
    }

onMouseDown(event) {
        var x = event.clientX;
        var y = event.clientY;
        var p0 = {
            x: x,
            y: y
        };
        var closePoints = this.getPointsCloseTo(p0, 30);
        if (closePoints.length > 0) {
            this.dragPoints = closePoints;
            this.dragPoints.forEach(p => {
                p.x = x;
                p.y = y;
                p.oldx = x;
                p.oldy = y;
                p.pinned = true;
            });
            this.isDragging = true;
        }
    }

onMouseMove(event) {
        var x = event.clientX;
        var y = event.clientY;
        if (this.isDragging) {
            this.dragPoints.forEach(p => {
                p.oldx = p.x;
                p.oldy = p.y;
                p.x = x;
                p.y = y;
            });
        } else {
            var p0 = {
                x: x,
                y: y
            };
            var closePoints = this.getPointsCloseTo(p0, 30);
            closePoints.forEach(p => {
                p.oldy += 1;
                p.oldx += 1;
            });
        }
    }

onMouseUp(event) {
        this.dragPoints.forEach(p => {
            p.pinned = false;
        });
        this.isDragging = false;
    }

getPointsCloseTo(p0, r) {
        return this.points.filter(p1 => this.distance(p0, p1) <= r && !p1.pinned);
    }

getClosestPoint(p0) {
        var index = 0;
        this.points
            .map(p1 => this.distance(p0, p1))
            .reduce((prev, curr, i) => {
                if (curr < prev) {
                    index = i;
                }
                return Math.min(curr, prev);
            });
        return this.points[index];
    }

distance(p0, p1) {
        var x = p1.x - p0.x;
        var y = p1.y - p0.y;
        return Math.sqrt(x * x + y * y);
    }

update() {
        this.ctx.clearRect(0, 0, this.w, this.h);
        this.updatePoints();
        var i = settings.rigidness;
        while (i--) {
            this.updateSticks();
            this.constrainPoints();
        }
        this.drawSticks();
    }

drawSticks() {
        this.ctx.beginPath();
        this.sticks.forEach(s => {
            this.ctx.moveTo(s.p0.x, s.p0.y);
            this.ctx.lineTo(s.p1.x, s.p1.y);
        });
        this.ctx.stroke();
    }

updatePoints() {
        this.points.forEach(p => {
            if (!p.pinned) {
                var vx = (p.x - p.oldx) * (1 - settings.friction);
                var vy = (p.y - p.oldy) * (1 - settings.friction);
                p.oldx = p.x;
                p.oldy = p.y;
                // High ground friction
                if (p.y > this.h - 1) {
                    vx *= 0.2;
                }
                p.x += vx;
                p.y += vy;
                p.y += settings.gravity;
            }
        });
    }

updateSticks() {
        this.sticks.forEach(s => {
            var dx = s.p1.x - s.p0.x;
            var dy = s.p1.y - s.p0.y;
            var dist = Math.sqrt(dx * dx + dy * dy);
            var diff = s.length - dist;
            var percent = diff / dist / 2;
            var offsetX = dx * percent;
            var offsetY = dy * percent;
            if (!s.p0.pinned) {
                s.p0.x -= offsetX;
                s.p0.y -= offsetY;
            }
            if (!s.p1.pinned) {
                s.p1.x += offsetX;
                s.p1.y += offsetY;
            }
        });
    }

constrainPoints() {
        this.points.forEach(p => {
            if (!p.pinned) {
                var vx = (p.x - p.oldx) * (1 - settings.friction);
                var vy = (p.y - p.oldy) * (1 - settings.friction);
                if (p.x > this.w) {
                    p.x = this.w;
                    p.oldx = p.x + vx * this.bounce;
                }
                if (p.x < 0) {
                    p.x = 0;
                    p.oldx = vx * this.bounce;
                }
                if (p.y > this.h) {
                    p.y = this.h;
                    p.oldy = p.y + vy * this.bounce;
                }
                if (p.y < 0) {
                    p.y = 0;
                    p.oldy = vy * this.bounce;
                }
            }
        });
    }
}

var world = new World();

function animate() {
    world.update();
    requestAnimationFrame(animate);
}

animate();

var gui = new dat.GUI();
gui.close();
gui.add(settings, "gravity")
    .min(0)
    .max(1)
    .step(0.01)
    .name("Gravity");
gui.add(settings, "friction")
    .min(0)
    .max(0.1)
    .step(0.001)
    .name("Friction");
gui.add(settings, "rigidness")
    .min(2)
    .max(100)
    .step(1)
    .name("Rigidness");

编译

CSS

HTML

Spider Web, 鼠标移动上去会触发网的波动。

html5, net

编辑器支持Emmet

快捷键

Spider Web, 鼠标移动上去会触发网的波动。

html5, net

HTML5 Canvas 红色弹性蜘蛛网

HTML5 Canvas弹性点阵和圆点拼装起来的文本

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：