2025-01-04 11:23:58 -05:00
<!doctype html> < html lang = en dir = ltr class = "blog-wrapper blog-post-page plugin-blog plugin-id-default" data-has-hydrated = false > < meta charset = UTF-8 > < meta name = generator content = "Docusaurus v3.7.0" > < title data-rh = true > Playing with fire: The fractal flame algorithm | The Old Speice Guy< / title > < meta data-rh = true name = viewport content = "width=device-width, initial-scale=1.0" > < meta data-rh = true name = twitter:card content = summary_large_image > < meta data-rh = true property = og:url content = https://speice.io/2024/11/playing-with-fire/ > < meta data-rh = true property = og:locale content = en > < meta data-rh = true name = docusaurus_locale content = en > < meta data-rh = true name = docusaurus_tag content = default > < meta data-rh = true name = docsearch:language content = en > < meta data-rh = true name = docsearch:docusaurus_tag content = default > < meta data-rh = true property = og:title content = "Playing with fire: The fractal flame algorithm | The Old Speice Guy" > < meta data-rh = true name = description content = "Wikipedia describes fractal flames as:" > < meta data-rh = true property = og:description content = "Wikipedia describes fractal flames as:" > < meta data-rh = true property = og:type content = article > < meta data-rh = true property = article:published_time content = 2024-12-16T21:30:00.000Z > < link data-rh = true rel = icon href = /img/favicon.ico > < link data-rh = true rel = canonical href = https://speice.io/2024/11/playing-with-fire/ > < link data-rh = true rel = alternate href = https://speice.io/2024/11/playing-with-fire/ hreflang = en > < link data-rh = true rel = alternate href = https://speice.io/2024/11/playing-with-fire/ hreflang = x-default > < script data-rh = true type = application/ld+json > { "@context" : "https://schema.org" , "@id" : "https://speice.io/2024/11/playing-with-fire" , "@type" : "BlogPosting" , "author" : { "@type" : "Person" , "name" : "Bradlee Speice" } , "dateModified" : "2024-12-17T02:30:05.000Z" , "datePublished" : "2024-12-16T21:30:00.000Z" , "description" : "Wikipedia describes fractal flames as:" , "headline" : "Playing with fire: The fractal flame algorithm" , "isPartOf" : { "@id" : "https://speice.io/" , "@type" : "Blog" , "name" : "Blog" } , "keywords" : [ ] , "mainEntityOfPage" : "https://speice.io/2024/11/playing-with-fire" , "name" : "Playing with fire: The fractal flame algorithm" , "url" : "https://speice.io/2024/11/playing-with-fire" } < / script > < link rel = alternate type = application/rss+xml href = /rss.xml title = "The Old Speice Guy RSS Feed" > < link rel = alternate type = application/atom+xml href = /atom.xml title = "The Old Speice Guy Atom Feed" > < link rel = stylesheet href = /katex/katex.min.css type = text/css > < link rel = stylesheet href = /assets/css/styles.24ac2c37.css > < script src = /assets/js/runtime~main.75ada3c5.js defer > < / script > < script src = /assets/js/main.d0bb06d2.js defer > < / script > < body class = navigation-with-keyboard > < script > ! function ( ) { var t , e = function ( ) { try { return new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } } ( ) || function ( ) { try { return window . localStorage . getItem ( "theme" ) } catch ( t ) { } } ( ) ; t = null !== e ? e : "light" , document . documentElement . setAttribute ( "data-theme" , t ) } ( ) , function ( ) { try { for ( var [ t , e ] of new URLSearchParams ( window . location . search ) . entries ( ) ) if ( t . startsWith ( "docusaurus-data-" ) ) { var a = t . replace ( "docusaurus-data-" , "data-" ) ; document . documentElement . setAttribute ( a , e ) } } catch ( t ) { } } ( ) < / script > < div id = __docusaurus > < div role = region aria-label = "Skip to main content" > < a class = skipToContent_fXgn href = #__docusaurus_skipToContent_fallback > Skip to main content< / a > < / div > < nav aria-label = Main class = "navbar navbar--fixed-top" > < div class = navbar__inner > < div class = navbar__items > < button aria-label = "Toggle navigation bar" aria-expanded = false class = "navbar__toggle clean-btn" type = button > < svg width = 30 height = 30 viewBox = "0 0 30 30" aria-hidden = true > < path stroke = currentColor stroke-linecap = round stroke-miterlimit = 10 stroke-width = 2 d = "M4 7h22M4 15h22M4 23h22" / > < / svg > < / button > < a class = navbar__brand href = / > < div class = navbar__logo > < img src = /img/logo.svg alt = "Sierpinski Gasket" class = "themedComponent_mlkZ themedComponent--light_NVdE" > < img src = /img/logo-dark.svg alt = "Sierpinski Gasket" class = "themedComponent_mlkZ themedComponent--dark_xIcU" > < / div > < b class = "navbar__title text--truncate" >
2024-12-16 21:34:48 -05:00
< blockquote >
< p > a member of the iterated function system class of fractals< / p >
< / blockquote >
< p > It's tedious, but technically correct. I choose to think of them a different way: beauty in mathematics.< / p >
<!-- -->
< center > < img src = /assets/images/banner-506be1e2d2e720d32f10924e117435d5.png style = filter:invert(1) > < / center >
< p > I don't remember when exactly I first learned about fractal flames, but I do remember being entranced by the images they created.
I also remember their unique appeal to my young engineering mind; this was an art form I could participate in.< / p >
< p > The < a href = https://flam3.com/flame_draves.pdf target = _blank rel = "noopener noreferrer" > Fractal Flame Algorithm paper< / a > describing their structure was too much
for me to handle at the time (I was ~12 years old), so I was content to play around and enjoy the pictures.
But the desire to understand it stuck around. Now, with a graduate degree under my belt, I wanted to revisit it.< / p >
< p > This guide is my attempt to explain how fractal flames work so that younger me — and others interested in the art —
can understand without too much prior knowledge.< / p >
< hr >
< h2 class = "anchor anchorWithStickyNavbar_LWe7" id = iterated-function-systems > Iterated function systems< a href = #iterated-function-systems class = hash-link aria-label = "Direct link to Iterated function systems" title = "Direct link to Iterated function systems" > < / a > < / h2 >
< div class = "theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary" > < div class = admonitionHeading_Gvgb > < span class = admonitionIcon_Rf37 > < svg viewBox = "0 0 14 16" > < path fill-rule = evenodd d = "M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" / > < / svg > < / span > note< / div > < div class = admonitionContent_BuS1 > < p > This post covers section 2 of the Fractal Flame Algorithm paper< / div > < / div >
< p > As mentioned, fractal flames are a type of "< a href = https://en.wikipedia.org/wiki/Iterated_function_system target = _blank rel = "noopener noreferrer" > iterated function system< / a > ,"
or IFS. The formula for an IFS is short, but takes some time to work through:< / p >
2025-01-04 11:22:55 -05:00
< span class = katex-display > < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML display = block > < semantics > < mrow > < mi > S< / mi > < mo > =< / mo > < munderover > < mo > ⋃ < / mo > < mrow > < mi > i< / mi > < mo > =< / mo > < mn > 0< / mn > < / mrow > < mrow > < mi > n< / mi > < mo > − < / mo > < mn > 1< / mn > < / mrow > < / munderover > < msub > < mi > F< / mi > < mi > i< / mi > < / msub > < mo stretchy = false > (< / mo > < mi > S< / mi > < mo stretchy = false > )< / mo > < / mrow > < annotation encoding = application/x-tex > S = \bigcup_{i=0}^{n-1} F_i(S)< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < / span > < span class = base > < span class = strut style = height:3.0788em;vertical-align:-1.2777em > < / span > < span class = "mop op-limits" > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:1.8011em > < span style = top:-1.8723em;margin-left:0em > < span class = pstrut style = height:3.05em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > i< / span > < span class = "mrel mtight" > =< / span > < span class = "mord mtight" > 0< / span > < / span > < / span > < / span > < span style = top:-3.05em > < span class = pstrut style = height:3.05em > < / span > < span > < span class = "mop op-symbol large-op" > ⋃ < / span > < / span > < / span > < span style = top:-4.3em;margin-left:0em > < span class = pstrut style = height:3.05em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > n< / span > < span class = "mbin mtight" > − < / span > < span class = "mord mtight" > 1< / span > < / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:1.2777em > < span > < / span > < / span > < / span > < / span > < / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = mopen > (< / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < span class = mclose > )< / span > < / span > < / span > < / span > < / span >
2024-12-16 21:34:48 -05:00
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = solution-set > Solution set< a href = #solution-set class = hash-link aria-label = "Direct link to Solution set" title = "Direct link to Solution set" > < / a > < / h3 >
2025-01-04 11:22:55 -05:00
< p > First, < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > S< / mi > < / mrow > < annotation encoding = application/x-tex > S< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < / span > < / span > < / span > . < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > S< / mi > < / mrow > < annotation encoding = application/x-tex > S< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < / span > < / span > < / span > is the set of points in two dimensions (in math terms, < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > S< / mi > < mo > ∈< / mo > < msup > < mi mathvariant = double-struck > R< / mi > < mn > 2< / mn > < / msup > < / mrow > < annotation encoding = application/x-tex > S \in \mathbb{R}^2< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.7224em;vertical-align:-0.0391em > < / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > ∈< / span > < span class = mspace style = margin-right:0.2778em > < / span > < / span > < span class = base > < span class = strut style = height:0.8141em > < / span > < span class = mord > < span class = "mord mathbb" > R< / span > < span class = msupsub > < span class = vlist-t > < span class = vlist-r > < span class = vlist style = height:0.8141em > < span style = top:-3.063em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > 2< / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > )
2024-12-16 21:34:48 -05:00
that represent a "solution" of some kind to our equation.
2025-01-04 11:22:55 -05:00
Our goal is to find all the points in < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > S< / mi > < / mrow > < annotation encoding = application/x-tex > S< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < / span > < / span > < / span > , plot them, and display that image.< / p >
< p > For example, if we say < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > S< / mi > < mo > =< / mo > < mo stretchy = false > {< / mo > < mo stretchy = false > (< / mo > < mn > 0< / mn > < mo separator = true > ,< / mo > < mn > 0< / mn > < mo stretchy = false > )< / mo > < mo separator = true > ,< / mo > < mo stretchy = false > (< / mo > < mn > 1< / mn > < mo separator = true > ,< / mo > < mn > 1< / mn > < mo stretchy = false > )< / mo > < mo separator = true > ,< / mo > < mo stretchy = false > (< / mo > < mn > 2< / mn > < mo separator = true > ,< / mo > < mn > 2< / mn > < mo stretchy = false > )< / mo > < mo stretchy = false > }< / mo > < / mrow > < annotation encoding = application/x-tex > S = \{(0,0), (1, 1), (2, 2)\}< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < / span > < span class = base > < span class = strut style = height:1em;vertical-align:-0.25em > < / span > < span class = mopen > {(< / span > < span class = mord > 0< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = mord > 0< / span > < span class = mclose > )< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = mopen > (< / span > < span class = mord > 1< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = mord > 1< / span > < span class = mclose > )< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = mopen > (< / span > < span class = mord > 2< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = mord > 2< / span > < span class = mclose > )}< / span > < / span > < / span > < / span > , there are three points to plot:< / p >
2024-12-16 21:34:48 -05:00
<!-- -->
2025-01-04 11:22:55 -05:00
< div class = VictoryContainer style = height:100%;width:100%;user-select:none;pointer-events:none;touch-action:none;position:relative > < svg width = 450 height = 300 role = img viewBox = "0 0 450 300" style = width:100%;height:100%;pointer-events:all > < g > < path d = "M 60 , 240
m -5, 0
a 5, 5 0 1,0 10,0
a 5, 5 0 1,0 -10,0" style=fill:blue;opacity:1;stroke:transparent;stroke-width:0 role=presentation shape-rendering=auto />< path d = "M 225 , 150
m -5, 0
a 5, 5 0 1,0 10,0
a 5, 5 0 1,0 -10,0" style=fill:blue;opacity:1;stroke:transparent;stroke-width:0 role=presentation shape-rendering=auto />< path d = "M 390 , 60
m -5, 0
a 5, 5 0 1,0 10,0
a 5, 5 0 1,0 -10,0" style=fill:blue;opacity:1;stroke:transparent;stroke-width:0 role=presentation shape-rendering=auto />< / g > < g role = presentation > < line vector-effect = non-scaling-stroke style = stroke:#757575;fill:transparent;stroke-width:1;stroke-linecap:round;stroke-linejoin:round role = presentation shape-rendering = auto x1 = 60 x2 = 390 y1 = 240 y2 = 240 / > < g role = presentation > < text id = chart-axis-1-tickLabels-0 direction = inherit dx = 0 x = 142.5 y = 263.26 > < tspan x = 142.5 dx = 0 dy = 0 text-anchor = middle style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 0.5< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-1-tickLabels-1 direction = inherit dx = 0 x = 225 y = 263.26 > < tspan x = 225 dx = 0 dy = 0 text-anchor = middle style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 1.0< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-1-tickLabels-2 direction = inherit dx = 0 x = 307.5 y = 263.26 > < tspan x = 307.5 dx = 0 dy = 0 text-anchor = middle style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 1.5< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-1-tickLabels-3 direction = inherit dx = 0 x = 390 y = 263.26 > < tspan x = 390 dx = 0 dy = 0 text-anchor = middle style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 2.0< / tspan > < / text > < / g > < / g > < g role = presentation > < line vector-effect = non-scaling-stroke style = stroke:#757575;fill:transparent;stroke-width:1;stroke-linecap:round;stroke-linejoin:round role = presentation shape-rendering = auto x1 = 60 x2 = 60 y1 = 60 y2 = 240 / > < g role = presentation > < text id = chart-axis-2-tickLabels-0 direction = inherit dx = 0 x = 47 y = 199.26 > < tspan x = 47 dx = 0 dy = 0 text-anchor = end style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 0.5< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-2-tickLabels-1 direction = inherit dx = 0 x = 47 y = 154.26 > < tspan x = 47 dx = 0 dy = 0 text-anchor = end style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 1.0< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-2-tickLabels-2 direction = inherit dx = 0 x = 47 y = 109.26 > < tspan x = 47 dx = 0 dy = 0 text-anchor = end style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 1.5< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-2-tickLabels-3 direction = inherit dx = 0 x = 47 y = 64.26 > < tspan x = 47 dx = 0 dy = 0 text-anchor = end style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 2.0< / tspan > < / text > < / g > < / g > < / svg > < div style = width:100%;height:100%;z-index:99;position:absolute;top:0;left:0 > < svg width = 450 height = 300 viewBox = "0 0 450 300" style = width:100%;height:100%;overflow:visible / > < / div > < / div >
2024-12-16 21:34:48 -05:00
< p > With fractal flames, rather than listing individual points, we use functions to describe the solution.
This means there are an infinite number of points, but if we find < em > enough< / em > points to plot, we get a nice picture.
And if the functions change, the solution also changes, and we get something new.< / p >
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = transform-functions > Transform functions< a href = #transform-functions class = hash-link aria-label = "Direct link to Transform functions" title = "Direct link to Transform functions" > < / a > < / h3 >
2025-01-04 11:22:55 -05:00
< p > Second, the < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msub > < mi > F< / mi > < mi > i< / mi > < / msub > < mo stretchy = false > (< / mo > < mi > S< / mi > < mo stretchy = false > )< / mo > < / mrow > < annotation encoding = application/x-tex > F_i(S)< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:1em;vertical-align:-0.25em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = mopen > (< / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < span class = mclose > )< / span > < / span > < / span > < / span > functions, also known as "transforms."
2024-12-16 21:34:48 -05:00
Each transform takes in a 2-dimensional point and gives a new point back
2025-01-04 11:22:55 -05:00
(in math terms, < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msub > < mi > F< / mi > < mi > i< / mi > < / msub > < mo > ∈< / mo > < msup > < mi mathvariant = double-struck > R< / mi > < mn > 2< / mn > < / msup > < mo > →< / mo > < msup > < mi mathvariant = double-struck > R< / mi > < mn > 2< / mn > < / msup > < / mrow > < annotation encoding = application/x-tex > F_i \in \mathbb{R}^2 \rightarrow \mathbb{R}^2< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.8333em;vertical-align:-0.15em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > ∈< / span > < span class = mspace style = margin-right:0.2778em > < / span > < / span > < span class = base > < span class = strut style = height:0.8141em > < / span > < span class = mord > < span class = "mord mathbb" > R< / span > < span class = msupsub > < span class = vlist-t > < span class = vlist-r > < span class = vlist style = height:0.8141em > < span style = top:-3.063em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > 2< / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > →< / span > < span class = mspace style = margin-right:0.2778em > < / span > < / span > < span class = base > < span class = strut style = height:0.8141em > < / span > < span class = mord > < span class = "mord mathbb" > R< / span > < span class = msupsub > < span class = vlist-t > < span class = vlist-r > < span class = vlist style = height:0.8141em > < span style = top:-3.063em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > 2< / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > ).
2024-12-16 21:34:48 -05:00
While you could theoretically use any function, we'll focus on a specific kind of function
called an "< a href = https://en.wikipedia.org/wiki/Affine_transformation target = _blank rel = "noopener noreferrer" > affine transformation< / a > ." Every transform uses the same formula:< / p >
2025-01-04 11:22:55 -05:00
< span class = katex-display > < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML display = block > < semantics > < mrow > < msub > < mi > F< / mi > < mi > i< / mi > < / msub > < mo stretchy = false > (< / mo > < msub > < mi > a< / mi > < mi > i< / mi > < / msub > < mi > x< / mi > < mo > +< / mo > < msub > < mi > b< / mi > < mi > i< / mi > < / msub > < mi > y< / mi > < mo > +< / mo > < msub > < mi > c< / mi > < mi > i< / mi > < / msub > < mo separator = true > ,< / mo > < msub > < mi > d< / mi > < mi > i< / mi > < / msub > < mi > x< / mi > < mo > +< / mo > < msub > < mi > e< / mi > < mi > i< / mi > < / msub > < mi > y< / mi > < mo > +< / mo > < msub > < mi > f< / mi > < mi > i< / mi > < / msub > < mo stretchy = false > )< / mo > < / mrow > < annotation encoding = application/x-tex > F_i(a_i x + b_i y + c_i, d_i x + e_i y + f_i)< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:1em;vertical-align:-0.25em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = mopen > (< / span > < span class = mord > < span class = "mord mathnormal" > a< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:0em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "mord mathnormal" > x< / span > < span class = mspace style = margin-right:0.2222em > < / span > < span class = mbin > +< / span > < span class = mspace style = margin-right:0.2222em > < / span > < / span > < span class = base > < span class = strut style = height:0.8889em;vertical-align:-0.1944em > < / span > < span class = mord > < span class = "mord mathnormal" > b< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:0em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "mord mathnormal" style = margin-right:0.03588em > y< / span > < span class = mspace style = margin-right:0.2222em > < / span > < span class = mbin > +< / span > < span class = mspace style = margin-right:0.2222em > < / span > < / span > < span class = base > < span class = strut style = height:0.8889em;vertical-align:-0.1944em > < / span > < span class = mord > < span class = "mord mathnormal" > c< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:0em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = mord > < span class = "mord mathnormal" > d< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:0em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < /s
2024-12-16 21:34:48 -05:00
<!-- -->
< div class = "language-typescript codeBlockContainer_Ckt0 theme-code-block" style = "--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)" > < div class = codeBlockContent_biex > < pre tabindex = 0 class = "prism-code language-typescript codeBlock_bY9V thin-scrollbar" style = "background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)" > < code class = codeBlockLines_e6Vv > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > type< / span > < span class = "token plain" > < / span > < span class = "token class-name" style = "color:hsl(35, 99%, 36%)" > Transform< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > x< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > y< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =>< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" style = display:inline-block > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > interface< / span > < span class = "token plain" > < / span > < span class = "token class-name" style = "color:hsl(35, 99%, 36%)" > Coefs< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > a< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > b< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > c< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation"
2025-01-04 11:22:55 -05:00
< p > The parameters (< span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msub > < mi > a< / mi > < mi > i< / mi > < / msub > < / mrow > < annotation encoding = application/x-tex > a_i< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.5806em;vertical-align:-0.15em > < / span > < span class = mord > < span class = "mord mathnormal" > a< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:0em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > , < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msub > < mi > b< / mi > < mi > i< / mi > < / msub > < / mrow > < annotation encoding = application/x-tex > b_i< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.8444em;vertical-align:-0.15em > < / span > < span class = mord > < span class = "mord mathnormal" > b< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:0em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > , etc.) are values we choose.
2024-12-16 21:34:48 -05:00
For example, we can define a "shift" function like this:< / p >
2025-01-04 11:22:55 -05:00
< span class = katex-display > < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML display = block > < semantics > < mtable rowspacing = 0.25em columnalign = "right left" columnspacing = 0em > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mi > a< / mi > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mo > =< / mo > < mn > 1< / mn > < / mrow > < / mstyle > < / mtd > < / mtr > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mi > b< / mi > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mo > =< / mo > < mn > 0< / mn > < / mrow > < / mstyle > < / mtd > < / mtr > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mi > c< / mi > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mo > =< / mo > < mn > 0.5< / mn > < / mrow > < / mstyle > < / mtd > < / mtr > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mi > d< / mi > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mo > =< / mo > < mn > 0< / mn > < / mrow > < / mstyle > < / mtd > < / mtr > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mi > e< / mi > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mo > =< / mo > < mn > 1< / mn > < / mrow > < / mstyle > < / mtd > < / mtr > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mi > f< / mi > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mo > =< / mo > < mn > 1.5< / mn > < / mrow > < / mstyle > < / mtd > < / mtr > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < msub > < mi > F< / mi > < mrow > < mi > s< / mi > < mi > h< / mi > < mi > i< / mi > < mi > f< / mi > < mi > t< / mi > < / mrow > < / msub > < mo stretchy = false > (< / mo > < mi > x< / mi > < mo separator = true > ,< / mo > < mi > y< / mi > < mo stretchy = false > )< / mo > < / mrow > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mo > =< / mo > < mo stretchy = false > (< / mo > < mn > 1< / mn > < mo > ⋅< / mo > < mi > x< / mi > < mo > +< / mo > < mn > 0.5< / mn > < mo separator = true > ,< / mo > < mn > 1< / mn > < mo > ⋅< / mo > < mi > y< / mi > < mo > +< / mo > < mn > 1.5< / mn > < mo stretchy = false > )< / mo > < / mrow > < / mstyle > < / mtd > < / mtr > < / mtable > < annotation encoding = application/x-tex > \begin{align*}
2024-12-16 21:34:48 -05:00
a & = 1 \\
b & = 0 \\
c & = 0.5 \\
d & = 0 \\
e & = 1 \\
f & = 1.5 \\
F_{shift}(x, y) & = (1 \cdot x + 0.5, 1 \cdot y + 1.5)
\end{align*}< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:10.5em;vertical-align:-5em > < / span > < span class = mord > < span class = mtable > < span class = col-align-r > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:5.5em > < span style = top:-7.66em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = "mord mathnormal" > a< / span > < / span > < / span > < span style = top:-6.16em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = "mord mathnormal" > b< / span > < / span > < / span > < span style = top:-4.66em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = "mord mathnormal" > c< / span > < / span > < / span > < span style = top:-3.16em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = "mord mathnormal" > d< / span > < / span > < / span > < span style = top:-1.66em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = "mord mathnormal" > e< / span > < / span > < / span > < span style = top:-0.16em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.10764em > f< / span > < / span > < / span > < span style = top:1.34em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3361em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > s< / span > < span class = "mord mathnormal mtight" > hi< / span > < span class = "mord mathnormal mtight" style = margin-right:0.10764em > f< / span > < span class = "mord mathnormal mtight" > t< / span > < / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.2861em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = mopen > (< / span > < span class = "mord mathnormal" > x< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = "mord mathnormal" style = margin-right:0.03588em > y< / span > < span class = mclose > )< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:5em > < span > < / span > < / span > < / span > < / span > < / span > < span class = col-align-l > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:5.5em > < span style = top:-7.66em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mord > 1< / span > < / span > < / span > < span style = top:-6.16em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mord > 0< / span > < / span > < / span > < span style = top:-4.66em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mord > 0.5< / span > < / span > < / span > < span style = top:-3.16em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mord > 0< / span > < / span > < / span > < span style = top:-1.66em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mord > 1< / span > < / span > < / span > < span style = top:-0.16em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel
< p > Applying this transform to the original points gives us a new set of points:< / p >
<!-- -->
<!-- -->
<!-- -->
2025-01-04 11:22:55 -05:00
< div class = VictoryContainer style = height:100%;width:100%;user-select:none;pointer-events:none;touch-action:none;position:relative > < svg width = 450 height = 300 role = img viewBox = "0 0 450 300" style = width:100%;height:100%;pointer-events:all > < g > < path d = "M 60 , 240
m -5, 0
a 5, 5 0 1,0 10,0
a 5, 5 0 1,0 -10,0" style=fill:blue;opacity:1;stroke:transparent;stroke-width:0 role=presentation shape-rendering=auto />< path d = "M 192 , 188 . 57142857142858
m -5, 0
a 5, 5 0 1,0 10,0
a 5, 5 0 1,0 -10,0" style=fill:blue;opacity:1;stroke:transparent;stroke-width:0 role=presentation shape-rendering=auto />< path d = "M 324 , 137 . 14285714285714
m -5, 0
a 5, 5 0 1,0 10,0
a 5, 5 0 1,0 -10,0" style=fill:blue;opacity:1;stroke:transparent;stroke-width:0 role=presentation shape-rendering=auto />< / g > < g > < path d = "M 126 , 162 . 85714285714286
m -5, 0
a 5, 5 0 1,0 10,0
a 5, 5 0 1,0 -10,0" style=fill:orange;opacity:1;stroke:transparent;stroke-width:0 role=presentation shape-rendering=auto />< path d = "M 258 , 111 . 42857142857143
m -5, 0
a 5, 5 0 1,0 10,0
a 5, 5 0 1,0 -10,0" style=fill:orange;opacity:1;stroke:transparent;stroke-width:0 role=presentation shape-rendering=auto />< path d = "M 390 , 60
m -5, 0
a 5, 5 0 1,0 10,0
a 5, 5 0 1,0 -10,0" style=fill:orange;opacity:1;stroke:transparent;stroke-width:0 role=presentation shape-rendering=auto />< / g > < g > < rect vector-effect = non-scaling-stroke style = fill:none;stroke:#E8E8E8;stroke-width:2;padding:16px role = presentation shape-rendering = auto x = 75 y = 10 width = 93.44375 height = 72.98 / > < path d = "M 97 , 32
m -4.8, 0
a 4.8, 4.8 0 1,0 9.6,0
a 4.8, 4.8 0 1,0 -9.6,0" style=fill:blue;type:circle role=presentation shape-rendering=auto />< path d = "M 97 , 58 . 49
m -4.8, 0
a 4.8, 4.8 0 1,0 9.6,0
a 4.8, 4.8 0 1,0 -9.6,0" style=fill:orange;type:circle role=presentation shape-rendering=auto />< text id = chart-legend-2-labels-0 direction = inherit dx = 0 x = 111.4 y = 36.26 > < tspan x = 111.4 dx = 0 dy = 0 text-anchor = start style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > (x,y)< / tspan > < / text > < text id = chart-legend-2-labels-1 direction = inherit dx = 0 x = 111.4 y = 62.75 > < tspan x = 111.4 dx = 0 dy = 0 text-anchor = start style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > F(x,y)< / tspan > < / text > < / g > < g role = presentation > < line vector-effect = non-scaling-stroke style = stroke:#757575;fill:transparent;stroke-width:1;stroke-linecap:round;stroke-linejoin:round role = presentation shape-rendering = auto x1 = 60 x2 = 390 y1 = 240 y2 = 240 / > < g role = presentation > < text id = chart-axis-3-tickLabels-0 direction = inherit dx = 0 x = 126 y = 263.26 > < tspan x = 126 dx = 0 dy = 0 text-anchor = middle style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 0.5< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-3-tickLabels-1 direction = inherit dx = 0 x = 192 y = 263.26 > < tspan x = 192 dx = 0 dy = 0 text-anchor = middle style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 1.0< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-3-tickLabels-2 direction = inherit dx = 0 x = 258 y = 263.26 > < tspan x = 258 dx = 0 dy = 0 text-anchor = middle style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 1.5< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-3-tickLabels-3 direction = inherit dx = 0 x = 324 y = 263.26 > < tspan x = 324 dx = 0 dy = 0 text-anchor = middle style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 2.0< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-3-tickLabels-4 direction = inherit dx = 0 x = 390 y = 263.26 > < tspan x = 390 dx = 0 dy = 0 text-anchor = middle style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 2.5< / tspan > < / text > < / g > < / g > < g role = presentation > < line vector-effect = non-scaling-stroke style = stroke:#757575;fill:transparent;stroke-width:1;stroke-linecap:round;stroke-linejoin:round role = presentation shape-rendering = auto x1 = 60 x2 = 60 y1 = 60 y2 = 240 / > < g role = presentation > < text id = chart-axis-4-tickLabels-0 direction = inherit dx = 0 x = 47 y = 218.5457142857143 > < tspan x = 47 dx = 0 dy = 0 text-anchor = end style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 0.5< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-4-tickLabels-1 direction = inherit dx = 0 x = 47 y = 192.83142857142857 > < tspan x = 47 dx = 0 dy = 0 text-anchor = end style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 1.0< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-4-tickLabels-2 direction = inherit dx = 0 x = 47 y = 167.11714285714285 > < tspan x = 47 dx = 0 dy = 0 text-anchor = end style = "font-family:'Inter', 'Helvetica Neue', 'Seravek', 'Helvetica', sans-serif;font-size:12px;font-weight:300;letter-spacing:normal;padding:8px;fill:#292929;stroke:transparent" > 1.5< / tspan > < / text > < / g > < g role = presentation > < text id = chart-axis-4-tickLabels-3 direction = inherit dx = 0 x = 47 y = 141.40285714285713 > < tspan x = 47 dx = 0 dy = 0 text-anchor = end style = "font-family:'Inter', ' Helvetica Neue ' , ' Sera
2024-12-16 21:34:48 -05:00
< p > Fractal flames use more complex functions, but they all start with this structure.< / p >
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = fixed-set > Fixed set< a href = #fixed-set class = hash-link aria-label = "Direct link to Fixed set" title = "Direct link to Fixed set" > < / a > < / h3 >
< p > With those definitions in place, let's revisit the initial problem:< / p >
2025-01-04 11:22:55 -05:00
< span class = katex-display > < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML display = block > < semantics > < mrow > < mi > S< / mi > < mo > =< / mo > < munderover > < mo > ⋃ < / mo > < mrow > < mi > i< / mi > < mo > =< / mo > < mn > 0< / mn > < / mrow > < mrow > < mi > n< / mi > < mo > − < / mo > < mn > 1< / mn > < / mrow > < / munderover > < msub > < mi > F< / mi > < mi > i< / mi > < / msub > < mo stretchy = false > (< / mo > < mi > S< / mi > < mo stretchy = false > )< / mo > < / mrow > < annotation encoding = application/x-tex > S = \bigcup_{i=0}^{n-1} F_i(S)< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < / span > < span class = base > < span class = strut style = height:3.0788em;vertical-align:-1.2777em > < / span > < span class = "mop op-limits" > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:1.8011em > < span style = top:-1.8723em;margin-left:0em > < span class = pstrut style = height:3.05em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > i< / span > < span class = "mrel mtight" > =< / span > < span class = "mord mtight" > 0< / span > < / span > < / span > < / span > < span style = top:-3.05em > < span class = pstrut style = height:3.05em > < / span > < span > < span class = "mop op-symbol large-op" > ⋃ < / span > < / span > < / span > < span style = top:-4.3em;margin-left:0em > < span class = pstrut style = height:3.05em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > n< / span > < span class = "mbin mtight" > − < / span > < span class = "mord mtight" > 1< / span > < / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:1.2777em > < span > < / span > < / span > < / span > < / span > < / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = mopen > (< / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < span class = mclose > )< / span > < / span > < / span > < / span > < / span >
2024-12-16 21:34:48 -05:00
< p > Or, in English, we might say:< / p >
< blockquote >
2025-01-04 11:22:55 -05:00
< p > Our solution, < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > S< / mi > < / mrow > < annotation encoding = application/x-tex > S< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < / span > < / span > < / span > , is the union of all sets produced by applying each function, < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msub > < mi > F< / mi > < mi > i< / mi > < / msub > < / mrow > < annotation encoding = application/x-tex > F_i< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.8333em;vertical-align:-0.15em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > ,
2024-12-16 21:34:48 -05:00
to points in the solution.< / p >
< / blockquote >
< p > There's just one small problem: to find the solution, we must already know which points are in the solution.
What?< / p >
< p > John E. Hutchinson provides an explanation in the < a href = https://maths-people.anu.edu.au/~john/Assets/Research%20Papers/fractals_self-similarity.pdf target = _blank rel = "noopener noreferrer" > original paper< / a >
defining the mathematics of iterated function systems:< / p >
< blockquote >
2025-01-04 11:22:55 -05:00
< p > Furthermore, < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > S< / mi > < / mrow > < annotation encoding = application/x-tex > S< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < / span > < / span > < / span > is compact and is the closure of the set of fixed points < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msub > < mi > s< / mi > < mrow > < msub > < mi > i< / mi > < mn > 1< / mn > < / msub > < mi mathvariant = normal > .< / mi > < mi mathvariant = normal > .< / mi > < mi mathvariant = normal > .< / mi > < msub > < mi > i< / mi > < mi > p< / mi > < / msub > < / mrow > < / msub > < / mrow > < annotation encoding = application/x-tex > s_{i_1...i_p}< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.7779em;vertical-align:-0.3473em > < / span > < span class = mord > < span class = "mord mathnormal" > s< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:0em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > i< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3173em > < span style = top:-2.357em;margin-left:0em;margin-right:0.0714em > < span class = pstrut style = height:2.5em > < / span > < span class = "sizing reset-size3 size1 mtight" > < span class = "mord mtight" > 1< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.143em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "mord mtight" > ...< / span > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > i< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.1645em > < span style = top:-2.357em;margin-left:0em;margin-right:0.0714em > < span class = pstrut style = height:2.5em > < / span > < span class = "sizing reset-size3 size1 mtight" > < span class = "mord mathnormal mtight" > p< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.2819em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.3473em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span >
of finite compositions < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msub > < mi > F< / mi > < mrow > < msub > < mi > i< / mi > < mn > 1< / mn > < / msub > < mi mathvariant = normal > .< / mi > < mi mathvariant = normal > .< / mi > < mi mathvariant = normal > .< / mi > < msub > < mi > i< / mi > < mi > p< / mi > < / msub > < / mrow > < / msub > < / mrow > < annotation encoding = application/x-tex > F_{i_1...i_p}< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:1.0307em;vertical-align:-0.3473em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > i< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3173em > < span style = top:-2.357em;margin-left:0em;margin-right:0.0714em > < span class = pstrut style = height:2.5em > < / span > < span class = "sizing reset-size3 size1 mtight" > < span class = "mord mtight" > 1< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.143em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "mord mtight" > ...< / span > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > i< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.1645em > < span style = top:-2.357em;margin-left:0em;margin-right:0.0714em > < span class = pstrut style = height:2.5em > < / span > < span class = "sizing reset-size3 size1 mtight" > < span class = "mord mathnormal mtight" > p< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.2819em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.3473em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > of members of < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > F< / mi > < / mrow > < annotation encoding = application/x-tex > F< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < / span > < / span > < / span > .< / p >
2024-12-16 21:34:48 -05:00
< / blockquote >
< p > Before your eyes glaze over, let's unpack this:< / p >
< ul >
2025-01-04 11:22:55 -05:00
< li > < strong > Furthermore, < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > S< / mi > < / mrow > < annotation encoding = application/x-tex > S< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < / span > < / span > < / span > is < a href = https://en.wikipedia.org/wiki/Compact_space target = _blank rel = "noopener noreferrer" > compact< / a > ...< / strong > : All points in our solution will be in a finite range< / li >
2024-12-16 21:34:48 -05:00
< li > < strong > ...and is the < a href = https://en.wikipedia.org/wiki/Closure_(mathematics) target = _blank rel = "noopener noreferrer" > closure< / a > of the set of < a href = https://en.wikipedia.org/wiki/Fixed_point_(mathematics) target = _blank rel = "noopener noreferrer" > fixed points< / a > < / strong > :
Applying our functions to points in the solution will give us other points that are in the solution< / li >
2025-01-04 11:22:55 -05:00
< li > < strong > ...of finite compositions < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msub > < mi > F< / mi > < mrow > < msub > < mi > i< / mi > < mn > 1< / mn > < / msub > < mi mathvariant = normal > .< / mi > < mi mathvariant = normal > .< / mi > < mi mathvariant = normal > .< / mi > < msub > < mi > i< / mi > < mi > p< / mi > < / msub > < / mrow > < / msub > < / mrow > < annotation encoding = application/x-tex > F_{i_1...i_p}< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:1.0307em;vertical-align:-0.3473em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > i< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3173em > < span style = top:-2.357em;margin-left:0em;margin-right:0.0714em > < span class = pstrut style = height:2.5em > < / span > < span class = "sizing reset-size3 size1 mtight" > < span class = "mord mtight" > 1< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.143em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "mord mtight" > ...< / span > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > i< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.1645em > < span style = top:-2.357em;margin-left:0em;margin-right:0.0714em > < span class = pstrut style = height:2.5em > < / span > < span class = "sizing reset-size3 size1 mtight" > < span class = "mord mathnormal mtight" > p< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.2819em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.3473em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > of members of < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > F< / mi > < / mrow > < annotation encoding = application/x-tex > F< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < / span > < / span > < / span > < / strong > : By composing our functions (that is,
2024-12-16 21:34:48 -05:00
using the output of one function as input to the next), we will arrive at the points in the solution< / li >
< / ul >
< p > Thus, by applying the functions to fixed points of our system, we will find the other points we care about.< / p >
2025-01-04 11:22:55 -05:00
< details class = "details_lb9f alert alert--info details_b_Ee" data-collapsed = true > < summary > If you want a bit more math...< / summary > < div > < div class = collapsibleContent_i85q > < p > ...then there are some extra details I've glossed over so far.< p > First, the Hutchinson paper requires that the functions < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msub > < mi > F< / mi > < mi > i< / mi > < / msub > < / mrow > < annotation encoding = application/x-tex > F_i< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.8333em;vertical-align:-0.15em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > be < em > contractive< / em > for the solution set to exist.
2024-12-16 21:34:48 -05:00
That is, applying the function to a point must bring it closer to other points. However, as the fractal flame
algorithm demonstrates, we only need functions to be contractive < em > on average< / em > . At worst, the system will
2025-01-04 11:22:55 -05:00
degenerate and produce a bad image.< p > Second, we're focused on < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msup > < mi mathvariant = double-struck > R< / mi > < mn > 2< / mn > < / msup > < / mrow > < annotation encoding = application/x-tex > \mathbb{R}^2< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.8141em > < / span > < span class = mord > < span class = "mord mathbb" > R< / span > < span class = msupsub > < span class = vlist-t > < span class = vlist-r > < span class = vlist style = height:0.8141em > < span style = top:-3.063em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > 2< / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > because we're generating images, but the math
2024-12-16 21:34:48 -05:00
allows for arbitrary dimensions; you could also have 3-dimensional fractal flames.< p > Finally, there's a close relationship between fractal flames and < a href = https://en.wikipedia.org/wiki/Attractor target = _blank rel = "noopener noreferrer" > attractors< / a > .
2025-01-04 11:22:55 -05:00
Specifically, the fixed points of < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > S< / mi > < / mrow > < annotation encoding = application/x-tex > S< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6833em > < / span > < span class = "mord mathnormal" style = margin-right:0.05764em > S< / span > < / span > < / span > < / span > act as attractors for the chaos game (explained below).< / div > < / div > < / details >
2024-12-16 21:34:48 -05:00
< p > This is still a bit vague, so let's work through an example.< / p >
< h2 class = "anchor anchorWithStickyNavbar_LWe7" id = sierpinskis-gasket > < a href = https://www.britannica.com/biography/Waclaw-Sierpinski target = _blank rel = "noopener noreferrer" > Sierpinski's gasket< / a > < a href = #sierpinskis-gasket class = hash-link aria-label = "Direct link to sierpinskis-gasket" title = "Direct link to sierpinskis-gasket" > < / a > < / h2 >
< p > The Fractal Flame paper gives three functions to use for a first IFS:< / p >
2025-01-04 11:22:55 -05:00
< span class = katex-display > < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML display = block > < semantics > < mrow > < msub > < mi > F< / mi > < mn > 0< / mn > < / msub > < mo stretchy = false > (< / mo > < mi > x< / mi > < mo separator = true > ,< / mo > < mi > y< / mi > < mo stretchy = false > )< / mo > < mo > =< / mo > < mrow > < mo fence = true > (< / mo > < mfrac > < mi > x< / mi > < mn > 2< / mn > < / mfrac > < mo separator = true > ,< / mo > < mfrac > < mi > y< / mi > < mn > 2< / mn > < / mfrac > < mo fence = true > )< / mo > < / mrow > < mspace linebreak = newline / > < mtext > < / mtext > < mspace linebreak = newline / > < msub > < mi > F< / mi > < mn > 1< / mn > < / msub > < mo stretchy = false > (< / mo > < mi > x< / mi > < mo separator = true > ,< / mo > < mi > y< / mi > < mo stretchy = false > )< / mo > < mo > =< / mo > < mrow > < mo fence = true > (< / mo > < mfrac > < mrow > < mi > x< / mi > < mo > +< / mo > < mn > 1< / mn > < / mrow > < mn > 2< / mn > < / mfrac > < mo separator = true > ,< / mo > < mfrac > < mi > y< / mi > < mn > 2< / mn > < / mfrac > < mo fence = true > )< / mo > < / mrow > < mspace linebreak = newline / > < mtext > < / mtext > < mspace linebreak = newline / > < msub > < mi > F< / mi > < mn > 2< / mn > < / msub > < mo stretchy = false > (< / mo > < mi > x< / mi > < mo separator = true > ,< / mo > < mi > y< / mi > < mo stretchy = false > )< / mo > < mo > =< / mo > < mrow > < mo fence = true > (< / mo > < mfrac > < mi > x< / mi > < mn > 2< / mn > < / mfrac > < mo separator = true > ,< / mo > < mfrac > < mrow > < mi > y< / mi > < mo > +< / mo > < mn > 1< / mn > < / mrow > < mn > 2< / mn > < / mfrac > < mo fence = true > )< / mo > < / mrow > < / mrow > < annotation encoding = application/x-tex > F_0(x, y) = \left({x \over 2}, {y \over 2} \right) \\
2024-12-16 21:34:48 -05:00
~\\
F_1(x, y) = \left({{x + 1} \over 2}, {y \over 2} \right) \\
~\\
F_2(x, y) = \left({x \over 2}, {{y + 1} \over 2} \right)< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:1em;vertical-align:-0.25em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3011em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > 0< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = mopen > (< / span > < span class = "mord mathnormal" > x< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = "mord mathnormal" style = margin-right:0.03588em > y< / span > < span class = mclose > )< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < / span > < span class = base > < span class = strut style = height:1.836em;vertical-align:-0.686em > < / span > < span class = minner > < span class = "mopen delimcenter" style = top:0em > < span class = "delimsizing size2" > (< / span > < / span > < span class = mord > < span class = mord > < span class = "mopen nulldelimiter" > < / span > < span class = mfrac > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:1.1076em > < span style = top:-2.314em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > 2< / span > < / span > < / span > < span style = top:-3.23em > < span class = pstrut style = height:3em > < / span > < span class = frac-line style = border-bottom-width:0.04em > < / span > < / span > < span style = top:-3.677em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = "mord mathnormal" > x< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.686em > < span > < / span > < / span > < / span > < / span > < / span > < span class = "mclose nulldelimiter" > < / span > < / span > < / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = mord > < span class = mord > < span class = "mopen nulldelimiter" > < / span > < span class = mfrac > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:1.1076em > < span style = top:-2.314em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > 2< / span > < / span > < / span > < span style = top:-3.23em > < span class = pstrut style = height:3em > < / span > < span class = frac-line style = border-bottom-width:0.04em > < / span > < / span > < span style = top:-3.677em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.03588em > y< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.686em > < span > < / span > < / span > < / span > < / span > < / span > < span class = "mclose nulldelimiter" > < / span > < / span > < / span > < span class = "mclose delimcenter" style = top:0em > < span class = "delimsizing size2" > )< / span > < / span > < / span > < / span > < span class = "mspace newline" > < / span > < span class = base > < span class = strut style = height:0em > < / span > < span class = "mspace nobreak" > < / span > < / span > < span class = "mspace newline" > < / span > < span class = base > < span class = strut style = height:1em;vertical-align:-0.25em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3011em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > 1< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = mopen > (< / span > < span class = "mord mathnormal" > x< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = "mord
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = the-chaos-game > The chaos game< a href = #the-chaos-game class = hash-link aria-label = "Direct link to The chaos game" title = "Direct link to The chaos game" > < / a > < / h3 >
< p > Now, how do we find the "fixed points" mentioned earlier? The paper lays out an algorithm called the "< a href = https://en.wikipedia.org/wiki/Chaos_game target = _blank rel = "noopener noreferrer" > chaos game< / a > "
that gives us points in the solution:< / p >
2025-01-04 11:22:55 -05:00
< span class = katex-display > < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML display = block > < semantics > < mtable rowspacing = 0.25em columnalign = "right left" columnspacing = 0em > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow / > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mo stretchy = false > (< / mo > < mi > x< / mi > < mo separator = true > ,< / mo > < mi > y< / mi > < mo stretchy = false > )< / mo > < mo > =< / mo > < mtext > random < / mtext > < / mrow > < / mstyle > < / mtd > < / mtr > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow / > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mtext > iterate < / mtext > < mo stretchy = false > {< / mo > < / mrow > < / mstyle > < / mtd > < / mtr > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow / > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mspace width = 2.8453em / > < mi > i< / mi > < mo > =< / mo > < mtext > random < / mtext > < mi > n< / mi > < mo > − < / mo > < mn > 1< / mn > < / mrow > < / mstyle > < / mtd > < / mtr > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow / > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mspace width = 2.8453em / > < mo stretchy = false > (< / mo > < mi > x< / mi > < mo separator = true > ,< / mo > < mi > y< / mi > < mo stretchy = false > )< / mo > < mo > =< / mo > < msub > < mi > F< / mi > < mi > i< / mi > < / msub > < mo stretchy = false > (< / mo > < mi > x< / mi > < mo separator = true > ,< / mo > < mi > y< / mi > < mo stretchy = false > )< / mo > < / mrow > < / mstyle > < / mtd > < / mtr > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow / > < / mstyle > < / mtd > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mrow > < mrow / > < mspace width = 2.8453em / > < mtext > plot< / mtext > < mo stretchy = false > (< / mo > < mi > x< / mi > < mo separator = true > ,< / mo > < mi > y< / mi > < mo stretchy = false > )< / mo > < mtext > < / mtext > < mo > >< / mo > < mn > 20< / mn > < / mrow > < / mstyle > < / mtd > < / mtr > < mtr > < mtd > < mstyle scriptlevel = 0 displaystyle = true > < mo stretchy = false lspace = 0em rspace = 0em > }< / mo > < / mstyle > < / mtd > < / mtr > < / mtable > < annotation encoding = application/x-tex > \begin{align*}
2024-12-16 21:34:48 -05:00
& (x, y) = \text{random point in the bi-unit square} \\
& \text{iterate } \{ \\
& \hspace{1cm} i = \text{random integer from 0 to } n - 1 \\
& \hspace{1cm} (x,y) = F_i(x,y) \\
& \hspace{1cm} \text{plot}(x,y) \text{ if iterations} > 20 \\
\}
\end{align*}< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:9em;vertical-align:-4.25em > < / span > < span class = mord > < span class = mtable > < span class = col-align-r > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:4.75em > < span style = top:-6.91em > < span class = pstrut style = height:3em > < / span > < span class = mord > < / span > < / span > < span style = top:-5.41em > < span class = pstrut style = height:3em > < / span > < span class = mord > < / span > < / span > < span style = top:-3.91em > < span class = pstrut style = height:3em > < / span > < span class = mord > < / span > < / span > < span style = top:-2.41em > < span class = pstrut style = height:3em > < / span > < span class = mord > < / span > < / span > < span style = top:-0.91em > < span class = pstrut style = height:3em > < / span > < span class = mord > < / span > < / span > < span style = top:0.59em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mclose > }< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:4.25em > < span > < / span > < / span > < / span > < / span > < / span > < span class = col-align-l > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:4.75em > < span style = top:-6.91em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < / span > < span class = mopen > (< / span > < span class = "mord mathnormal" > x< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = "mord mathnormal" style = margin-right:0.03588em > y< / span > < span class = mclose > )< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = "mord text" > < span class = mord > random < / span > < / span > < / span > < / span > < span style = top:-5.41em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < / span > < span class = "mord text" > < span class = mord > iterate < / span > < / span > < span class = mopen > {< / span > < / span > < / span > < span style = top:-3.91em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < / span > < span class = mspace style = margin-right:2.8453em > < / span > < span class = "mord mathnormal" > i< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = "mord text" > < span class = mord > random < / span > < / span > < span class = "mord mathnormal" > n< / span > < span class = mspace style = margin-right:0.2222em > < / span > < span class = mbin > − < / span > < span class = mspace style = margin-right:0.2222em > < / span > < span class = mord > 1< / span > < / span > < / span > < span style = top:-2.41em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < / span > < span class = mspace style = margin-right:2.8453em > < / span > < span class = mopen > (< / span > < span class = "mord mathnormal" > x< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = "mord mathnormal" style = margin-right:0.03588em > y< / span > < span class = mclose > )< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mrel > =< / span > < span class = mspace style = margin-right:0.2778em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = mopen > (< / span > < span class = "mord mathnormal" > x< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = "mord mathnormal" style = margin-right:0.03588em > y< / span > < span class = mclose > )< / span > < / span > < / span > < span style = top:-0.91em > < span class = pstrut style = height:3em > < / span > < span class = mord > < span class = mord > < / span > < span class = mspac
2025-01-04 11:22:55 -05:00
< div class = "theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary" > < div class = admonitionHeading_Gvgb > < span class = admonitionIcon_Rf37 > < svg viewBox = "0 0 14 16" > < path fill-rule = evenodd d = "M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" / > < / svg > < / span > note< / div > < div class = admonitionContent_BuS1 > < p > The chaos game algorithm is effectively the "finite compositions of < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msub > < mi > F< / mi > < mrow > < msub > < mi > i< / mi > < mn > 1< / mn > < / msub > < mi mathvariant = normal > .< / mi > < mi mathvariant = normal > .< / mi > < msub > < mi > i< / mi > < mi > p< / mi > < / msub > < / mrow > < / msub > < / mrow > < annotation encoding = application/x-tex > F_{i_1..i_p}< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:1.0307em;vertical-align:-0.3473em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.13889em > F< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.1389em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mtight" > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > i< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3173em > < span style = top:-2.357em;margin-left:0em;margin-right:0.0714em > < span class = pstrut style = height:2.5em > < / span > < span class = "sizing reset-size3 size1 mtight" > < span class = "mord mtight" > 1< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.143em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = "mord mtight" > ..< / span > < span class = "mord mtight" > < span class = "mord mathnormal mtight" > i< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.1645em > < span style = top:-2.357em;margin-left:0em;margin-right:0.0714em > < span class = pstrut style = height:2.5em > < / span > < span class = "sizing reset-size3 size1 mtight" > < span class = "mord mathnormal mtight" > p< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.2819em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.3473em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > " mentioned earlier.< / div > < / div >
2024-12-16 21:34:48 -05:00
< p > Let's turn this into code, one piece at a time.< / p >
2025-01-04 11:22:55 -05:00
< p > To start, we need to generate some random numbers. The "bi-unit square" is the range < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mo stretchy = false > [< / mo > < mo > − < / mo > < mn > 1< / mn > < mo separator = true > ,< / mo > < mn > 1< / mn > < mo stretchy = false > ]< / mo > < / mrow > < annotation encoding = application/x-tex > [-1, 1]< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:1em;vertical-align:-0.25em > < / span > < span class = mopen > [< / span > < span class = mord > − < / span > < span class = mord > 1< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = mord > 1< / span > < span class = mclose > ]< / span > < / span > < / span > < / span > ,
2024-12-16 21:34:48 -05:00
and we can do this using an existing API:< / p >
<!-- -->
< div class = "language-typescript codeBlockContainer_Ckt0 theme-code-block" style = "--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)" > < div class = codeBlockContent_biex > < pre tabindex = 0 class = "prism-code language-typescript codeBlock_bY9V thin-scrollbar" style = "background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)" > < code class = codeBlockLines_e6Vv > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > function< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > randomBiUnit< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > return< / span > < span class = "token plain" > Math< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > .< / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > random< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > *< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 2< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > -< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 1< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > }< / span > < br > < / span > < / code > < / pre > < div class = buttonGroup__atx > < button type = button aria-label = "Copy code to clipboard" title = Copy class = clean-btn > < span class = copyButtonIcons_eSgA aria-hidden = true > < svg viewBox = "0 0 24 24" class = copyButtonIcon_y97N > < path fill = currentColor d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" / > < / svg > < svg viewBox = "0 0 24 24" class = copyButtonSuccessIcon_LjdS > < path fill = currentColor d = M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z / > < / svg > < / span > < / button > < / div > < / div > < / div >
2025-01-04 11:22:55 -05:00
< p > Next, we need to choose a random integer from < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mn > 0< / mn > < / mrow > < annotation encoding = application/x-tex > 0< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6444em > < / span > < span class = mord > 0< / span > < / span > < / span > < / span > to < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > n< / mi > < mo > − < / mo > < mn > 1< / mn > < / mrow > < annotation encoding = application/x-tex > n - 1< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.6667em;vertical-align:-0.0833em > < / span > < span class = "mord mathnormal" > n< / span > < span class = mspace style = margin-right:0.2222em > < / span > < span class = mbin > − < / span > < span class = mspace style = margin-right:0.2222em > < / span > < / span > < span class = base > < span class = strut style = height:0.6444em > < / span > < span class = mord > 1< / span > < / span > < / span > < / span > :< / p >
2024-12-16 21:34:48 -05:00
<!-- -->
< div class = "language-typescript codeBlockContainer_Ckt0 theme-code-block" style = "--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)" > < div class = codeBlockContent_biex > < pre tabindex = 0 class = "prism-code language-typescript codeBlock_bY9V thin-scrollbar" style = "background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)" > < code class = codeBlockLines_e6Vv > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > function< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > randomInteger< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > min< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > max< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > let< / span > < span class = "token plain" > v < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =< / span > < span class = "token plain" > Math< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > .< / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > random< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > *< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > max < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > -< / span > < span class = "token plain" > min< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > return< / span > < span class = "token plain" > Math< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > .< / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > floor< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > v< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > +< / span > < span class = "token plain" > min< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > }< / span > < br > < / span > < / code > < / pre > < div class = buttonGroup__atx > < button type = button aria-label = "Copy code to clipboard" title = Copy class = clean-btn
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = plotting > Plotting< a href = #plotting class = hash-link aria-label = "Direct link to Plotting" title = "Direct link to Plotting" > < / a > < / h3 >
< p > Finally, implementing the < code > plot< / code > function. This blog series is interactive,
so everything displays directly in the browser. As an alternative,
software like < code > flam3< / code > and Apophysis can "plot" by saving an image to disk.< / p >
< p > To see the results, we'll use the < a href = https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API target = _blank rel = "noopener noreferrer" > Canvas API< / a > .
This allows us to manipulate individual pixels in an image and show it on screen.< / p >
< p > First, we need to convert from fractal flame coordinates to pixel coordinates.
To simplify things, we'll assume that we're plotting a square image
2025-01-04 11:22:55 -05:00
with range < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mo stretchy = false > [< / mo > < mn > 0< / mn > < mo separator = true > ,< / mo > < mn > 1< / mn > < mo stretchy = false > ]< / mo > < / mrow > < annotation encoding = application/x-tex > [0, 1]< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:1em;vertical-align:-0.25em > < / span > < span class = mopen > [< / span > < span class = mord > 0< / span > < span class = mpunct > ,< / span > < span class = mspace style = margin-right:0.1667em > < / span > < span class = mord > 1< / span > < span class = mclose > ]< / span > < / span > < / span > < / span > for both < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > x< / mi > < / mrow > < annotation encoding = application/x-tex > x< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.4306em > < / span > < span class = "mord mathnormal" > x< / span > < / span > < / span > < / span > and < span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < mi > y< / mi > < / mrow > < annotation encoding = application/x-tex > y< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.625em;vertical-align:-0.1944em > < / span > < span class = "mord mathnormal" style = margin-right:0.03588em > y< / span > < / span > < / span > < / span > :< / p >
2024-12-16 21:34:48 -05:00
<!-- -->
< div class = "language-typescript codeBlockContainer_Ckt0 theme-code-block" style = "--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)" > < div class = codeBlockContent_biex > < pre tabindex = 0 class = "prism-code language-typescript codeBlock_bY9V thin-scrollbar" style = "background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)" > < code class = codeBlockLines_e6Vv > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > function< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > camera< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > x< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > y< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > size< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > return< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > Math< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > .< / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > floor< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > x < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > *< / span > < span class = "token plain" > size< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > Math< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > .< / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > floor< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > y < / span > < span class = "token operator" style = "
< p > Next, we'll store the pixel data in an < a href = https://developer.mozilla.org/en-US/docs/Web/API/ImageData target = _blank rel = "noopener noreferrer" > < code > ImageData< / code > object< / a > .
Each pixel on screen has a corresponding index in the < code > data< / code > array.
To plot a point, we set that pixel to be black:< / p >
<!-- -->
< div class = "language-typescript codeBlockContainer_Ckt0 theme-code-block" style = "--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)" > < div class = codeBlockContent_biex > < pre tabindex = 0 class = "prism-code language-typescript codeBlock_bY9V thin-scrollbar" style = "background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)" > < code class = codeBlockLines_e6Vv > < span class = "token-line code-block-hidden" style = "color:hsl(230, 8%, 24%)" > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > import< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > camera < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:hsl(119, 34%, 47%)" > "./cameraGasket"< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line code-block-hidden" style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" style = display:inline-block > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > function< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > imageIndex< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > x< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > y< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > width< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > return< / span > < span class = "token plain" > y < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > *< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > width < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > *< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 4< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > +< / span > < span class = "token plain" > x < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > *< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 4< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" >
< p > Putting it all together, we have our first image:< / p >
<!-- -->
<!-- -->
< div class = playgroundContainer_TGbA > < div class = playgroundHeader_qwyd > Live Editor< / div > < div class = playgroundEditor_PvJ1 > < pre class = "prism-code language-tsx" style = "margin:0;outline:none;padding:10px;font-family:inherit;background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)" spellcheck = false > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token comment" style = "color:hsl(230, 4%, 64%)" > // Hint: try changing the iteration count< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > const< / span > < span class = "token plain" > iterations < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 100000< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:hsl(230, 4%, 64%)" > // Hint: negating `x` and `y` creates some cool images< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > const< / span > < span class = "token plain" > xforms < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > x< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > y< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token arrow operator" style = "color:hsl(221, 87%, 60%)" > =>< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token plain" > x < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > /< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 2< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > y < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > /< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 2< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > x< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > y< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token arrow operator" style = "color:hsl(221, 87%, 60%)" > =>< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > x < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > +< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 1< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > /< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 2< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > y < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > /< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 2< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > x< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > y< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token arrow operator" style = "color:hsl(221, 87%, 60%)" > =>< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token plain" > x < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > /< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 2< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > y < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > +< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 1< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > /< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 2< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > function< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > *< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > chaosGame< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > width< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > height < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > }< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > let< / span > < span class = "token plain" > img < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > new< / span > < span class = "token plain" > < / span > < span class = "token class-name" style = "color:hsl(35, 99%, 36%)" > ImageData< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > width< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > height< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > let< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token plain" > x< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > y< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > randomBiUnit< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > randomBiUnit< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > for< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > let< / span > < span class = "token plain" > i < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 0< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > i < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > < < / span > < span class = "token plain" > iterations< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > i< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > ++< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > const< / span > < span class = "token plain" > index < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > randomInteger< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 0< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > xforms< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > .< / span > < span class = "token property-access" > length< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token plain" > x< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > y< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =< / span > < span class = "token plain" > xforms< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token plain" > index< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > x< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > y< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > if< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > i < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > >< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 20< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > plot< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > x< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > y< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > img< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > if< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > i < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > %< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 1000< / span > < span class = "token plain" > < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > ===< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 0< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > yield< / span > < span class = "token plain" > img< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > }< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > yield< / span > < span class = "token plain" > img< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > }< / span > < span class = "token plain" > < / span >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" >
< / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > render< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token tag punctuation" style = "color:hsl(119, 34%, 47%)" > < < / span > < span class = "token tag class-name" style = "color:hsl(35, 99%, 36%)" > Gasket< / span > < span class = "token tag" style = "color:hsl(5, 74%, 59%)" > < / span > < span class = "token tag attr-name" style = "color:hsl(35, 99%, 36%)" > f< / span > < span class = "token tag script language-javascript script-punctuation punctuation" style = "color:hsl(119, 34%, 47%)" > =< / span > < span class = "token tag script language-javascript punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token tag script language-javascript" style = "color:hsl(5, 74%, 59%)" > chaosGame< / span > < span class = "token tag script language-javascript punctuation" style = "color:hsl(119, 34%, 47%)" > }< / span > < span class = "token tag" style = "color:hsl(5, 74%, 59%)" > < / span > < span class = "token tag punctuation" style = "color:hsl(119, 34%, 47%)" > />< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span >
< / span > < / pre > < / div > < div class = playgroundHeader_qwyd > Result< / div > < div class = playgroundPreview_bb8I > < div > Loading...< / div > < / div > < / div >
< hr >
< small > < p > The image here is slightly different than in the paper.
I think the paper has an error, so I'm plotting the image
like the < a href = https://github.com/scottdraves/flam3/blob/7fb50c82e90e051f00efcc3123d0e06de26594b2/rect.c#L440-L441 target = _blank rel = "noopener noreferrer" > reference implementation< / a > .< / small >
< h3 class = "anchor anchorWithStickyNavbar_LWe7" id = weights > Weights< a href = #weights class = hash-link aria-label = "Direct link to Weights" title = "Direct link to Weights" > < / a > < / h3 >
< p > There's one last step before we finish the introduction. So far, each transform has
the same chance of being picked in the chaos game.
2025-01-04 11:22:55 -05:00
We can change that by giving them a "weight" (< span class = katex > < span class = katex-mathml > < math xmlns = http://www.w3.org/1998/Math/MathML > < semantics > < mrow > < msub > < mi > w< / mi > < mi > i< / mi > < / msub > < / mrow > < annotation encoding = application/x-tex > w_i< / annotation > < / semantics > < / math > < / span > < span class = katex-html aria-hidden = true > < span class = base > < span class = strut style = height:0.5806em;vertical-align:-0.15em > < / span > < span class = mord > < span class = "mord mathnormal" style = margin-right:0.02691em > w< / span > < span class = msupsub > < span class = "vlist-t vlist-t2" > < span class = vlist-r > < span class = vlist style = height:0.3117em > < span style = top:-2.55em;margin-left:-0.0269em;margin-right:0.05em > < span class = pstrut style = height:2.7em > < / span > < span class = "sizing reset-size6 size3 mtight" > < span class = "mord mathnormal mtight" > i< / span > < / span > < / span > < / span > < span class = vlist-s > < / span > < / span > < span class = vlist-r > < span class = vlist style = height:0.15em > < span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > < / span > ) instead:< / p >
2024-12-16 21:34:48 -05:00
<!-- -->
< div class = "language-typescript codeBlockContainer_Ckt0 theme-code-block" style = "--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)" > < div class = codeBlockContent_biex > < pre tabindex = 0 class = "prism-code language-typescript codeBlock_bY9V thin-scrollbar" style = "background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)" > < code class = codeBlockLines_e6Vv > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > function< / span > < span class = "token plain" > < / span > < span class = "token generic-function function" style = "color:hsl(221, 87%, 60%)" > randomChoice< / span > < span class = "token generic-function generic class-name operator" style = "color:hsl(221, 87%, 60%)" > < < / span > < span class = "token generic-function generic class-name constant" style = "color:hsl(35, 99%, 36%)" > T< / span > < span class = "token generic-function generic class-name operator" style = "color:hsl(221, 87%, 60%)" > >< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > choices< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < span class = "token constant" style = "color:hsl(35, 99%, 36%)" > T< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token builtin" style = "color:hsl(119, 34%, 47%)" > number< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < span class = "token constant" style = "color:hsl(35, 99%, 36%)" > T< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > const< / span > < span class = "token plain" > weightSum < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =< / span > < span class = "token plain" > choices< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > .< / span > < span class = "token function" style = "color:hsl(221, 87%, 60%)" > reduce< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > < / span > < br > < / span > < span class = token-line style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > (< / span > < span class = "token plain" > sum< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > [< / span > < span class = "token plain" > weight< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ,< / span > < span class = "token plain" > _< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ]< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > )< / span > < span class = "token plain" > < / span > < span class = "token op
< p > If we let the chaos game run forever, these weights wouldn't matter.
But because the iteration count is limited, changing the weights
means we don't plot some parts of the image:< / p >
<!-- -->
< div class = "language-typescript codeBlockContainer_Ckt0 theme-code-block" style = "--prism-background-color:hsl(230, 1%, 98%);--prism-color:hsl(230, 8%, 24%)" > < div class = codeBlockContent_biex > < pre tabindex = 0 class = "prism-code language-typescript codeBlock_bY9V thin-scrollbar" style = "background-color:hsl(230, 1%, 98%);color:hsl(230, 8%, 24%)" > < code class = codeBlockLines_e6Vv > < span class = "token-line code-block-hidden" style = "color:hsl(230, 8%, 24%)" > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > import< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > randomBiUnit < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:hsl(119, 34%, 47%)" > "../src/randomBiUnit"< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line code-block-hidden" style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > import< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > randomChoice < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:hsl(119, 34%, 47%)" > "../src/randomChoice"< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line code-block-hidden" style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > import< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > plot < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:hsl(119, 34%, 47%)" > "./plot"< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line code-block-hidden" style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > import< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > {< / span > < span class = "token plain" > Transform < / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:hsl(119, 34%, 47%)" > "../src/transform"< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line code-block-hidden" style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" style = display:inline-block > < / span > < br > < / span > < span class = "token-line code-block-hidden" style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:hsl(301, 63%, 40%)" > const< / span > < span class = "token plain" > quality < / span > < span class = "token operator" style = "color:hsl(221, 87%, 60%)" > =< / span > < span class = "token plain" > < / span > < span class = "token number" style = "color:hsl(35, 99%, 36%)" > 0.5< / span > < span class = "token punctuation" style = "color:hsl(119, 34%, 47%)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line code-block-hidden" style = "color:hsl(230, 8%, 24%)" > < span class = "token plain" > < /spa
< div class = "theme-admonition theme-admonition-tip admonition_xJq3 alert alert--success" > < div class = admonitionHeading_Gvgb > < span class = admonitionIcon_Rf37 > < svg viewBox = "0 0 12 16" > < path fill-rule = evenodd d = "M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z" / > < / svg > < / span > tip< / div > < div class = admonitionContent_BuS1 > < p > Double-click the image if you want to save a copy!< / div > < / div >
<!-- -->
< center > < center > < div style = width:75%;aspect-ratio:1/1 > < / div > < / center > < / center >
< h2 class = "anchor anchorWithStickyNavbar_LWe7" id = summary > Summary< a href = #summary class = hash-link aria-label = "Direct link to Summary" title = "Direct link to Summary" > < / a > < / h2 >
< p > Studying the foundations of fractal flames is challenging,
but we now have an understanding of the mathematics
and the implementation of iterated function systems.< / p >
2025-01-04 11:23:58 -05:00
< p > In the next post, we'll look at the first innovation of fractal flame algorithm: variations.< / div > < / article > < nav class = "pagination-nav docusaurus-mt-lg" aria-label = "Blog post page navigation" > < a class = "pagination-nav__link pagination-nav__link--prev" href = /2011/11/webpack-industrial-complex/ > < div class = pagination-nav__sublabel > Older post< / div > < div class = pagination-nav__label > The webpack industrial complex< / div > < / a > < a class = "pagination-nav__link pagination-nav__link--next" href = /2024/11/playing-with-fire-transforms/ > < div class = pagination-nav__sublabel > Newer post< / div > < div class = pagination-nav__label > Playing with fire: Transforms and variations< / div > < / a > < / nav > < / main > < div class = "col col--2" > < div class = "tableOfContents_bqdL thin-scrollbar" > < ul class = "table-of-contents table-of-contents__left-border" > < li > < a href = #iterated-function-systems class = "table-of-contents__link toc-highlight" > Iterated function systems< / a > < ul > < li > < a href = #solution-set class = "table-of-contents__link toc-highlight" > Solution set< / a > < li > < a href = #transform-functions class = "table-of-contents__link toc-highlight" > Transform functions< / a > < li > < a href = #fixed-set class = "table-of-contents__link toc-highlight" > Fixed set< / a > < / ul > < li > < a href = #sierpinskis-gasket class = "table-of-contents__link toc-highlight" > Sierpinski's gasket< / a > < ul > < li > < a href = #the-chaos-game class = "table-of-contents__link toc-highlight" > The chaos game< / a > < li > < a href = #plotting class = "table-of-contents__link toc-highlight" > Plotting< / a > < li > < a href = #weights class = "table-of-contents__link toc-highlight" > Weights< / a > < / ul > < li > < a href = #summary class = "table-of-contents__link toc-highlight" > Summary< / a > < / ul > < / div > < / div > < / div > < / div > < / div > < footer class = footer > < div class = "container container-fluid" > < div class = "footer__bottom text--center" > < div class = footer__copyright > Copyright © 2025 Bradlee Speice< / div > < / div > < / div > < / footer > < / div >
