HTML5使用柏林噪音算法实现的泼油漆动画

Spilled Paint，也可以用来模拟泼墨水动画。

html5, noise

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$('#expand').click(function() {
    $('#display').toggleClass('full');

setTimeout(function() {
        setSize();
        updateData();
    }, 700);
});

var size = {
    x: $('#display').width(),
    y: $('#display').height()
};

var res = Math.ceil(size.y / size.y / 2);
var w = Math.ceil(size.x / res);
var h = Math.ceil(size.y / res);

var calch = (h * 1.5),
    calcw = (w * 1.5);

var canvas = $('<canvas/>').attr({
        width: size.x,
        height: size.y
    }).appendTo('#display'),
    context = canvas.get(0).getContext("2d");

function setSize() {
    size = {
        x: $('#display').width(),
        y: $('#display').height()
    };

res = Math.ceil(size.y / size.y / 2);
    w = Math.ceil(size.x / res);
    h = Math.ceil(size.y / res);
    calch = (h * 1.5),
        calcw = (w * 1.5);
    canvas.attr({
        width: size.x,
        height: size.y
    });
}

var startTime = new Date().getTime();
var currentTime = 0;

noise.seed(8);
//noise.seed(Math.random());

var color;

var imagedata = context.createImageData(size.x, size.y);

function updateData() {
    imagedata = context.createImageData(size.x, size.y);
}

function draw() {
    var now = new Date().getTime();
    currentTime = (now - startTime) / 10000;

for (var y = 0; y < size.y; y++) {
        for (var x = 0; x < size.x; x++) {
            var index = (x + y * size.x) * 4;
            var r = noise.simplex3((currentTime + x) / calcw, currentTime + y / calch, currentTime);

if (r >= -2 && r < -0.6) {
                color = {
                    r: 234,
                    g: 242,
                    b: 227
                }
            } else if (r >= -0.6 && r < -0.2) {
                color = {
                    r: 97,
                    g: 232,
                    b: 225
                }
            } else if (r >= -0.2 && r < 0.2) {
                color = {
                    r: 242,
                    g: 87,
                    b: 87
                }
            } else if (r >= 0.2 && r < 0.6) {
                color = {
                    r: 242,
                    g: 232,
                    b: 99
                }
            } else if (r >= 0.6 && r <= 2) {
                color = {
                    r: 242,
                    g: 205,
                    b: 96
                }
            } else {
                color = {
                    r: 255 / 2,
                    g: 255 / 2,
                    b: 255 / 2
                };
            }

imagedata.data[index + 0] = color.r;
            imagedata.data[index + 1] = color.g;
            imagedata.data[index + 2] = color.b;
            imagedata.data[index + 3] = 255;
        }
    }

context.putImageData(imagedata, 0, 0);

requestFrame(draw);
}

window.requestFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

draw();
$('#display').addEventListener('resize', setSize);

编译

CSS

HTML

Spilled Paint，也可以用来模拟泼墨水动画。

html5, noise

编辑器支持Emmet

快捷键

Spilled Paint，也可以用来模拟泼墨水动画。

html5, noise

HTML5柏林噪音算法实现的墨汁浸染背景图片过渡动画特效

HTML5/Canvas使用单纯形噪音算法实现的粒子乱流动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：