Fractal Leaf (Barsley Furn)

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|508\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Snippet Home -> Graphical Effects

Pakz	Created : 16 February 2023 Language : Html/Javascript Fractal Leaf (Barsley Furn)
Francois Lionet Poster this code on his facebook. Very little code for a real good looking factal leaf. I converted it to HTML/Javascript. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <style> #myCanvas {touch-action: none; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0); } </style> </head> <body bgcolor="black"> <canvas id="myCanvas" width="320" height="240" style="border:0px solid #d3d3d3;"> Use different browser. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); myCanvas.width = window.innerWidth-32; myCanvas.height = window.innerHeight-32; ctx.fillStyle="#000000"; ctx.fillRect(0,0,myCanvas.width,myCanvas.height); var x = 0; var y = 0; var nextX = 0; var nextY = 0; var originX = myCanvas.width / 2; var s = Math.min( myCanvas.width,myCanvas.height ) / 10; ctx.scale(0.7,0.7); for(var i = 1;i<1000000;i++){ //a# = Rnd() a=Math.random(); if( a< 0.01){ nextX = 0; nextY = 0.16 * y; }else if( a >= 0.01 && a < 0.08){ nextX = 0.2 * x - 0.26 * y; nextY = 0.23 * x + 0.22 * y + 1.6; }else if( a >= 0.08 && a < 0.15){ nextX = -0.15 * x + 0.28 * y; nextY = 0.26 * x + 0.24 * y + 0.44; }else{ nextX = 0.85 * x + 0.04 * y; nextY = -0.04 * x + 0.85 * y + 1.6; } x = nextX; y = nextY; ctx.fillStyle="#ffffff"; ctx.fillRect(xs+originX,ys,1,1); } </script> </body> </html> --v

Comments
Thursday, 16 February 2023, 10:10
Jayenkai	Oooh, that's lovely!
Thursday, 16 February 2023, 10:17
rockford	That's really neat
Friday, 17 February 2023, 15:31
Jayenkai	Maybe it's just pure dumb luck that makes this work as well as it does, but I just can't fathom how the maths of this works! It's truly baffling code!!! Way above my head. > Reveal 🔎 // Fractal Leaf // Stealing Pakz' code Graphics 1920,1080,2 x=0;y=0;nextX=0;nextY=0;cx=ScreenWidth()/2 s=ScreenWidth()/10 if ScreenHeight()/10<s then s=ScreenHeight()/10 SetCol 255,255,255 for i = 1 to 1000000 a=Rnd() did=0 if a< 0.01 nextX = 0; nextY = 0.16 * y; did=1; endif if a >= 0.01 and a < 0.08 nextX = 0.2 * x - 0.26 * y; nextY = 0.23 * x + 0.22 * y + 1.6; did=1; endif if a >= 0.08 and a < 0.15 nextX = -0.15 * x + 0.28 * y; nextY = 0.26 * x + 0.24 * y + 0.44; did=1; endif if did==0 nextX = 0.85 * x + 0.04 * y; nextY = -0.04 * x + 0.85 * y + 1.6; endif x = nextX; y = nextY; d=Rnd(128,255) SetCol d0.3,d,d0.3 Rect xs+cx,ys,1,1 next --v ^^ JSE version. If anyone can explain the code, feel free to .. explain the code!
Friday, 17 February 2023, 21:54
Pakz	I think it might just be based on one leaf. And then repeat that leaf pattern in a pattern. I have no clue what so ever other than that.
Saturday, 18 February 2023, 01:30
AndyH	Well this bit does the centre stalk if a< 0.01 The rest is mathematical magic to me too.

Fractal Leaf (Barsley Furn)

Comments