JS implements Fern leaves, leaf fractal graphics

Fractal graphics are wonderful, showing the fractal shape of the leaves of fern plants.

Here we use canvas to draw the graph by the way of strokes, first of all, the principle:

Let's start with an equation:

Perhaps after reading this feel very confused force, here do not say how this equation calculation. 8 formulas can be obtained from this equation, and 221 groups have four groups

First set of functions:

f (x, y) = 0

f (x, y) = 0.16y

The second set of functions:

f (x, y) = 0.2x-0.26y

f (x, y) = 0.23x + 0.22y +1.6

Third set of functions:

f (x, y) = -0.15x +0.28y

f (x, y) = 0.26x +0.24y +0.44

The fourth set of functions:

f (x, y) = 0.85x +0.04y

f (x, y) = -0.04x + 0.85y +1.6

After getting these four sets of equations, we need to randomly extract a group (decimation probability for, the first group of 1% , the second group of 7% , the third group 7% The fourth group of 85%)

A random two random number x0 and y0 into this group, the first of each group of descendants into x0 and y0 into the resulting f (x, y) is the result, as X1,

The second type of descendant into x0 and y0 results in the resulting y1.

Get x1 and Y1 after the same as the above rules, in a random set of formulas, and the above, the X1 and Y1 respectively into the random group of which the first formula and the second formula to derive X2 and Y2,

This process repeats about 20 times to get x20 and Y20, and this x20 and y20 us as the coordinates of the point to be traced. This iterates over a point and repeats 20,000 times over 20,000 points (and the leaves are pretty much the same as so many points).

If you put the first group of X1 and Y1 into the following, there is no random set of formulas, the iteration 20 times will get the following graph

Of course, after the above practice will get what, you will see that you have nothing on the screen, or there is a little bit of

At this point we add 500 to the X-and y-coordinates of the last Ctx.fillrect (x, Y, 1, 1) and the x-coordinate moves the y-coordinate by 500. Then the picture is in the middle, but it's still invisible.

Ctx.fillrect (x*30+500, y*30+500, 1, 1) Zoom to *30

You'll find the TMD upside down. At this time change ctx.fillrect (x* +500,-y*+500, 1, 1) in front of y plus minus, also can Ctx.fillrect (-x*30+500,-y*30+500, 1, 1) Put a minus sign in front of X to see

You can try the tone numbers on the top of the red, some of them have special figures. Here I put the probability of the third set to 40.

You can also try to change the groups above, or add new ones to get some new, graphic. I don't have a test here.

Put the source code below

<! DOCTYPE html>"en">"UTF-8"> <meta name="Viewport"Content="Width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible"Content="Ie=edge"> <title>QAQ</title><style>body {padding:0; Margin:0} #mycanvas {margin:20px;}</style>"MyCanvas"Width="2048px"height="1266px"style="Background-color:black;"></canvas><script>varMyCanvas = document.getElementById ("MyCanvas"); Mycanvas.width=2048; Mycanvas.height=1266; varCTX = Mycanvas.getcontext ('2d'); Ctx.clearrect (0,0,2048,1266); Ctx.fillstyle="#0f0"; Pwowq={F1: [(function (x, y) {return 0; }), (function (x, y) {return 0.16*y; })], F2: [(function (x, y) {return 0.2* X-0.26*y; }), (function (x, y) {return 0.23* x +0.22* y +1.6; })], F3: [(function (x, y) {return-0.15* x +0.28*y; }), (function (x, y) {return 0.26* x +0.24* y +0.44; })], F4: [(function (x, y) {return 0.85* x +0.04*y; }), (function (x, y) {return-0.04* x +0.85* y +1.6; })            ],        }    varNEWARR = [] for(Let i =0; I <1; i++) {Newarr.push (pwowq. F1)} for(Let II =0;ii<7; ii++) {Newarr.push (pwowq. F2)} for(Let III =0;iii<7; iii++) {Newarr.push (pwowq. F3)} for(Let IIII =0; iiii< -; iiii++) {Newarr.push (pwowq. F4)}varCount =0; render=function () {varQaq; varF; varx =Math.random (); vary =Math.random (); //For (var i = 0;i<10000; i++) {       for(varJJ =0; JJ < -; jj++) {f= newarr[~~ (Math.random () * -)];//or F = parseint (Math.random () *100)Qaq = [f[0] (x, y), f[1] (x, y)]; X= qaq[0]; Y= qaq[1]; } ctx.fillrect (x* -+ -,-y* -+ -,1,1);/*Render Point*/        if(Count <10000) {window.requestanimationframe (render)//Window.requestanimationframe (render)//uncomment to render at twice the speedcount++     }   // }  };//render ()Window.requestanimationframe (render);</script> </body>
JS implements Fern leaves, leaf fractal graphics