HTML5 Canvas火山口动画模拟

Avernus，火山熔岩动画模拟

canvas, fluid

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

var SIZE = 0.5,
    initial_color = "rgba(255,0,0,0.5)",
    exploded_color = "rgba(255,255,255,0.5)",
    explosion_amount = 20;

var clamp = function clamp(min) {
    return function(max) {
        return function(n) {
            return Math.max(min, Math.min(max, n));
        };
    };
};

function Vector2D(x, y) {
    function add(v) {
        return Vector2D(x + v.x / 2, y + v.y / 2);
    }
    return {
        x: x,
        y: y,
        add: add
    };
}

function Node(position, velocity, color, lifespan, onDeath) {
    return {
        position: position,
        velocity: velocity,
        color: color,
        lifespan: lifespan,
        onDeath: onDeath
    };
}

function nrand() {
    return Math.random() - 0.5;
}

function explode(n) {
    var ns = [];
    for (var r = 0; r < explosion_amount; r++) {
        ns.push(Node(n.position, Vector2D(n.velocity.x + nrand(), n.velocity.y * nrand()), exploded_color, parseInt(10000 * Math.random() + 100)));
    }
    return ns;
}

function velo() {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        nodes = [];

document.body.appendChild(canvas);
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

canvas.addEventListener('click', reset);

var canvasClampX = clamp(0)(canvas.width),
        canvasClampY = clamp(0)(canvas.height);

function reset() {
        nodes = [];
        for (var i = 0; i < canvas.width; i += SIZE) {
            var angle = i / (Math.PI * 2),
                x = Math.cos(angle) * canvas.height / 4,
                y = Math.sin(angle) * canvas.height / 4;
            nodes.push(Node(Vector2D(x + canvas.width / 2, y + canvas.height / 2), Vector2D(0, 0), initial_color, 100000 * Math.random(), explode));
        }
    }

ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

function shuffle(node) {
        var newX = node.velocity.x + (Math.random() - 0.5) * SIZE,
            newY = node.velocity.y + (Math.random() - 0.5) * SIZE;
        return Node(node.position, Vector2D(newX, newY), node.lifespan, node.onDeath);
    }

function draw() {
        for (var _iterator = nodes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
            var _ref;

if (_isArray) {
                if (_i >= _iterator.length) break;
                _ref = _iterator[_i++];
            } else {
                _i = _iterator.next();
                if (_i.done) break;
                _ref = _i.value;
            }

var node = _ref;

ctx.fillStyle = node.color;
            ctx.fillRect(node.position.x, node.position.y, SIZE, SIZE);
        }
    }

function update() {
        var result = [];
        for (var _iterator2 = nodes, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
            var _ref2;

if (_isArray2) {
                if (_i2 >= _iterator2.length) break;
                _ref2 = _iterator2[_i2++];
            } else {
                _i2 = _iterator2.next();
                if (_i2.done) break;
                _ref2 = _i2.value;
            }

var node = _ref2;

reset();

return {
        update: update,
        draw: draw
    };
}
var v = velo();

function go() {
    requestAnimationFrame(go);
    v.update();
    v.draw();
}
go();

编译

CSS

HTML

Avernus，火山熔岩动画模拟

canvas, fluid

编辑器支持Emmet

快捷键

Avernus，火山熔岩动画模拟

canvas, fluid

HTML5 Canvas 逼真的3D水体模拟动画

HTML5 Canvas使用粒子模拟液体物理特性和运动动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：