Fractals Through Sub Division Start with 0 1 keep splitting 0 0 5 1 0 0 25 0 5 0 75 1 Instead of just lengths you can use angles and lengths build up a circular shape Circle fractal through recursive subdivision mix in some randomness to create circular fun shapes See how you go from a single line to a circle Note Inner sum of the angles for a closed shape is 360 2PI e g square document body background color white document body color 333333 let displayCanvas document createElement canvas document body appendChild displayCanvas displayCanvas id displayCanvas var displayWidth displayCanvas width 500 var displayHeight displayCanvas height 500 var context displayCanvas getContext 2d const TWO_PI 2 Math PI var iterations 3 var bgColor FFFFFF var urlColor EEEEEE var lineWidth 2 var circle centerX displayWidth 2 centerY displayHeight 2 rad 200 how big your shape should be scale factor color 000000 can set a gradient or solid color here fillColor dddddd draw function draw context setTransform 1 0 0 1 0 0 clear screen context clearRect 0 0 displayWidth displayHeight context strokeStyle circle color context lineWidth lineWidth context fillStyle circle fillColor context beginPath linked list of points circle pointList buildPointList iterations let point circle pointList const rad circle rad size of your shape while point next null point point next let angle TWO_PI point x 10 x0 circle centerX rad Math cos angle 1 0 Math sin point y 6 0 3 0 5 y0 circle centerY rad Math sin angle 1 0 Math sin point y 6 0 3 0 5 context lineTo x0 y0 context closePath context fill context stroke This is the fractal magic part function buildPointList iterations const pointList x 0 y 1 pointList next x 1 y 1 var minY 1 var maxY 1 for var i 0 i iterations i let point pointList while point next null let nextPoint point next let dx point x nextPoint x let dy point y nextPoint y let newX point x 0 5 dx dy Math random 2 1 0 2 let newY point y 0 5 dy dx Math random 2 1 Try Circle let newX point x 0 5 dx let newY point y 0 5 dy Mix in other trig random functions sin cos var newPoint x newX y newY minY Math min newY minY maxY Math max newY maxY add linklist between points newPoint next nextPoint point next newPoint point nextPoint normalize to values between 0 and 1 let yRange maxY minY if Math abs yRange 0 001 minY 0 yRange 1 0 var normalizeRate 1 yRange point pointList while point null point y normalizeRate point y minY point point next return pointList Add a gui bar let link document createElement link link href https code jquery com ui 1 10 4 themes ui lightness jquery ui css link rel stylesheet link async false document body appendChild link let script1 document createElement script script1 src https code jquery com jquery 1 10 2 js script1 type text javascript script1 async false document body appendChild script1 let script2 document createElement script script2 src https code jquery com ui 1 10 4 jquery ui js script2 type text javascript script2 async false document body appendChild script2 script2 onload function let var1 document createElement div document body appendChild var1 var1 id var1 var1 style position absolute var1 style left 10px var1 style top 10px var1 style width 200px var1 slider values iterations min 1 0 max 10 0 step 1 0 slide function event ui ui handle text ui value iterations parseFloat ui value draw ui slider handle each function this text this parent slider values 0 console log ready Parameter variance document body background color white document body color 333333 let displayCanvas document createElement canvas document body appendChild displayCanvas displayCanvas id displayCanvas var displayWidth displayCanvas width 500 var displayHeight displayCanvas height 500 var context displayCanvas getContext 2d const TWO_PI 2 Math PI var iterations 3 var bgColor FFFFFF var urlColor EEEEEE var lineWidth 2 var const1 1 0 var const2 0 0 var phase 0 0 var rand1 0 0 var rand2 0 0 var circle center x displayWidth 2 y displayHeight 2 size 100 color 000000 fillColor dddddd draw function draw context setTransform 1 0 0 1 0 0 clear screen context clearRect 0 0 displayWidth displayHeight context strokeStyle circle color context lineWidth lineWidth context fillStyle circle fillColor context beginPath linked list of points circle pointList buildPointList iterations let point circle pointList const size circle size size of your shape while point next null point point next x0 circle center x size Math cos point ang phase point len y0 circle center y size Math sin point ang phase point len context lineTo x0 y0 context closePath context fill context stroke function buildPointList iterations const pointList ang 0 len 1 pointList next ang TWO_PI len 1 var minLen 1 var maxLen 1 var count 0 for var i 0 i iterations i let point pointList while point next null let nextPoint point next let dang point ang nextPoint ang let dlen point len nextPoint len let newAng point ang 0 5 dang const1 Math random rand1 let newLen point len 0 5 const2 Math random rand2 Try Circle let newAng point ang 0 5 dang let newLen point len 0 5 dlen Mix in other trig random functions sin cos var newPoint ang newAng len newLen minLen Math min newLen minLen maxLen Math max newLen maxLen add linklist between points newPoint next nextPoint point next newPoint point nextPoint normalize to values between 0 and 1 let lenRange maxLen minLen if Math abs lenRange 0 001 minLen 0 lenRange 1 0 var normalizeRate 1 lenRange point pointList while point null point y normalizeRate point len minLen point point next return pointList Add a gui bar let link document createElement link link href https code jquery com ui 1 10 4 themes ui lightness jquery ui css link rel stylesheet link async false document body appendChild link let script1 document createElement script script1 src https code jquery com jquery 1 10 2 js script1 type text javascript script1 async false document body appendChild script1 let script2 document createElement script script2 src https code jquery com ui 1 10 4 jquery ui js script2 type text javascript script2 async false document body appendChild script2 script2 onload function let controls document createElement div document body appendChild controls controls style position absolute controls style left 10px controls style top 10px controls style width 200px let var1 document createElement div controls appendChild var1 var1 id var1 var1 name iterations var1 style width 200px var1 style margin 10px var1 slider values iterations min 1 0 max 10 0 step 1 0 slide function event ui ui handle text ui value iterations parseFloat ui value draw let var2 document createElement div controls appendChild var2 var2 id var2 var2 name const1 var2 style width 200px var2 style margin 10px var2 slider values const1 min 0 2 max 3 0 step 0 01 slide function event ui ui handle text ui value const1 parseFloat ui value draw let var3 document createElement div controls appendChild var3 var3 name const2 var3 id var3 var3 style width 200px var3 style margin 10px var3 slider values const2 min 0 5 max 2 0 step 0 01 slide function event ui ui handle text ui value const2 parseFloat ui value draw let var4 document createElement div controls appendChild var4 var4 name phase var4 id var4 var4 style width 200px var4 style margin 10px var4 slider values phase min 3 14 max 3 14 step 0 01 slide function event ui ui handle text ui value phase parseFloat ui value draw let var5 document createElement div controls appendChild var5 var5 name rand1 var5 id var5 var5 style width 200px var5 style margin 10px var5 slider values rand1 min 0 max 1 0 step 0 001 slide function event ui ui handle text ui value rand1 parseFloat ui value draw let var6 document createElement div controls appendChild var6 var6 name rand2 var6 id var6 var6 style width 200px var6 style margin 10px var6 slider values rand2 min 0 max 1 0 step 0 001 slide function event ui ui handle text ui value rand2 parseFloat ui value draw ui slider handle each function this text this parent slider values 0 let id this parent attr id let name document getElementById id name this parent append div style font size 7pt position absolute top 13px name div console log ready
displayHeight context strokeStyle circle color context lineWidth lineWidth context fillStyle circle fillColor context beginPath linked list of points circle pointList buildPointList iterations let point circle pointList const size circle size size of your shape while point next null point point next x0 circle center x size Math cos point ang phase point len y0 circle center y size Math sin point ang phase point len context lineTo x0 y0 context closePath context fill context stroke function buildPointList iterations const pointList ang 0 len 1 pointList next ang TWO_PI len 1 var minLen 1 var maxLen 1 var count 0 for var i 0 i iterations i let point pointList while point next null let nextPoint point next let dang point ang nextPoint ang let dlen point len nextPoint len let newAng point ang 0 5 dang const1 Math random rand1 let newLen point len 0 5 const2 Math random rand2 Try Circle let newAng point ang 0 5 dang let newLen point len 0 5 dlen Mix in other trig random functions sin cos var newPoint ang newAng len newLen minLen Math min newLen minLen maxLen Math max newLen maxLen add linklist between points newPoint next nextPoint point next newPoint point nextPoint normalize to values between 0 and 1 let lenRange maxLen minLen if Math abs lenRange 0 001 minLen 0 lenRange 1 0 var normalizeRate 1 lenRange point pointList while point null point y normalizeRate point len minLen point point next return pointList Add a gui bar let link document createElement link link href https code jquery com ui 1 10 4 themes ui lightness jquery ui css link rel stylesheet link async false document body appendChild link let script1 document createElement script script1 src https code jquery com jquery 1 10 2 js script1 type text javascript script1 async false document body appendChild script1 let script2 document createElement script script2 src https code jquery com ui 1 10 4 jquery ui js script2 type text javascript script2 async false document body appendChild script2 script2 onload function let controls document createElement div document body appendChild controls controls style position absolute controls style left 10px controls style top 10px controls style width 200px let var1 document createElement div controls appendChild var1 var1 id var1 var1 name iterations var1 style width 200px var1 style margin 10px var1 slider values iterations min 1 0 max 10 0 step 1 0 slide function event ui ui handle text ui value iterations parseFloat ui value draw let var2 document createElement div controls appendChild var2 var2 id var2 var2 name const1 var2 style width 200px var2 style margin 10px var2 slider values const1 min 0 2 max 3 0 step 0 01 slide function event ui ui handle text ui value const1 parseFloat ui value draw let var3 document createElement div controls appendChild var3 var3 name const2 var3 id var3 var3 style width 200px var3 style margin 10px var3 slider values const2 min 0 5 max 2 0 step 0 01 slide function event ui ui handle text ui value const2 parseFloat ui value draw let var4 document createElement div controls appendChild var4 var4 name phase var4 id var4 var4 style width 200px var4 style margin 10px var4 slider values phase min 3 14 max 3 14 step 0 01 slide function event ui ui handle text ui value phase parseFloat ui value draw let var5 document createElement div controls appendChild var5 var5 name rand1 var5 id var5 var5 style width 200px var5 style margin 10px var5 slider values rand1 min 0 max 1 0 step 0 001 slide function event ui ui handle text ui value rand1 parseFloat ui value draw let var6 document createElement div controls appendChild var6 var6 name rand2 var6 id var6 var6 style width 200px var6 style margin 10px var6 slider values rand2 min 0 max 1 0 step 0 001 slide function event ui ui handle text ui value rand2 parseFloat ui value draw ui slider handle each function this text this parent slider values 0 let id this parent attr id let name document getElementById id name this parent append div style font size 7pt position absolute top 13px name div console log ready