JSFiddle - React, Tailwind, and code Playground

by halflling

JavaScript

// bezier snow


// i - номер вершины, n - количество вершин, t - положение кривой (от 0 до 1)
function getBezierBasis(i, n, t) {
    // Факториал
    function f(n) {
        return (n <= 1) ? 1 : n * f(n - 1);
    }
    
    // считаем i-й элемент полинома Берштейна
    return (f(n)/(f(i)*f(n - i)))* Math.pow(t, i)*Math.pow(1 - t, n - i);
}

// arr - массив опорных точек. Точка - двухэлементный массив, (x = arr[0], y = arr[1])
// step - шаг при расчете кривой (0 < step < 1), по умолчанию 0.01. Чем больше шаг - тем грубее кривая
function getBezierCurve(arr, step) {
    if (step === undefined) {
        step = 0.01;
    }
    
    var res = [];
    
    step = step / arr.length;
    
    for (var t = 0.0; t < 1 + step; t += step) {
        if (t > 1) {
            t = 1;
        }
        
        var ind = res.length;
        
        res[ind] = new Array(0, 0);
        
        for (var i = 0; i < arr.length; i++) {
            var b = getBezierBasis(i, arr.length - 1, t);
            
            res[ind][0] += arr[i][0] * b;
            res[ind][1] += arr[i][1] * b;
        }
    }
    
    return res;
}

const REV=6,USER_AGENT=navigator.userAgent.toLowerCase();

function longfur(a){
	this.init(a)
}
longfur.prototype={
	context:null,
	points:null,
	count:null,
	init:function(a){
		this.context=a;
		this.context.globalCompositeOperation="source-over";
		this.points=new Array();
		this.count=0
	},
	destroy:function(){},
	strokeStart:function(b,a){},
	stroke:function(g,c){
		var f,e,b,a,h;
		this.points.push([g,c]);
		this.context.lineWidth=BRUSH_SIZE;
		this.context.strokeStyle="rgba("+COLOR[0]+", "+COLOR[1]+", "+COLOR[2]+",...