React.js+SVG 柏林噪音算法构造粒子动画

Perlin noise animation

react，算法，噪音

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

第三方库
作品简介 2313
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

(function() {
    'use strict';
    var lines = [];
    var w;
    var h;
    var count = 900;
    var size;
    var z = 0;

function resize() {
        w = window.innerWidth;
        h = window.innerHeight;
        size = Math.sqrt(w * w + h * h) / Math.sqrt(count);
        if (lines.length) place();
    }
    resize();
    window.addEventListener('resize', resize);
    var svg = document.querySelector('svg');

function place() {
        var now = Date.now();
        var sin1 = Math.sin(now / 1111);
        var cos1 = Math.cos(now / 1111);
        now /= 3000;
        for (var i = 0; i < count; i++) {
            var l = lines[i];
            var line = l.line;
            var x = l.x;
            var y = l.y;

line.setAttribute('x1', x * w + cos * size);
            line.setAttribute('y1', y * h + sin * size);
            line.setAttribute('x2', x * w - cos * size);
            line.setAttribute('y2', y * h - sin * size);
        }
    }

function loop() {
        requestAnimationFrame(loop);
        place();
    }
    loop();
})();

编译

CSS

HTML

Perlin noise animation

react，算法，噪音

编辑器支持Emmet

快捷键

Perlin noise animation

react，算法，噪音

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：