JSFiddle - React, Tailwind, and code Playground

by nveron

HTML

<canvas id="pwet" width=500 height=500></canvas>

JavaScript

http://flam3.com/flame.pdf

c = document.getElementById("pwet").getContext('2d');
c.fillStyle ="rgb(0,0,0)";
//c.fillRect(0,0 , 500, 500);

width = 500;
height = 500;
coords = {};
coords.x = 50;
coords.y = 80;

fcts = [
    function (p)
    {
        p.x = Math.sin(p.x);
        p.y = Math.sin(p.y);
        
    }
,
    function (p)
    {
        p.x = Math.sin(p.x);
        p.y = Math.sin(p.y);
    }
,
    function (p)
    {
        p.x  = 1 / rsqr * p.x;
        p.y  = 1 / rsqr * p.y;
    }
,    
    function (p)
    {
        p.x  = p.x * Math.sin(rsqr) - p.y * Math.cos(rsqr);
        p.y  = p.x * Math.cos(rsqr) + p.y * Math.sin(rsqr);
    }
,
    function (p)
    {
        p.x  = 1/r * (p.x - p.y) * (p.x + p.y);
        p.y  = 2 * p.x * p.y;
    }
];


var a = 0;
while(a <2000)
{    
    r = Math.sqrt(coords.x* coords.x + coords.y * coords.y);
    rsqr = r*r;
    var i = Math.round(Math.random() * (fcts.length -1)) ;
    
    fcts[i].call(this, coords);
    console.log(coords.x, coords.y);
    c.fillRect(coords.x* 50, coords.y * 50, 1, 1);
    a++;
}