"use strict";(self.webpackChunkspeice_io=self.webpackChunkspeice_io||[]).push([["3589"],{58722:function(s,e,a){a.r(e),a.d(e,{metadata:()=>n,contentTitle:()=>C,default:()=>L,assets:()=>B,toc:()=>F,frontMatter:()=>A});var n=a("86131"),l=a("85893"),i=a("50065"),t=a("67"),m=a("87320"),r=a("67294"),c=a("1905"),h=a("42974"),d=a("37955"),x=a("5886");function*p(s){let{width:e,height:a,transforms:n,final:l}=s,i=new ImageData(e,a),[t,m]=[(0,h.J)(),(0,h.J)()],r=e*a*.5;for(let s=0;s<r;s++){let[e,a]=(0,d.m)(n);[t,m]=a(t,m);let[r,c]=l(t,m);s>20&&!function(s,e,a){let[n,l]=(0,x.n)(s,e,a.width);if(n<0||n>=a.width||l<0||l>=a.height)return;let i=(0,x.j)(n,l,a.width,4);a.data[i]=0,a.data[i+1]=0,a.data[i+2]=0,a.data[i+3]=255}(r,c,i),s%1e3==0&&(yield i)}yield i}var j=a("57037");let o=s=>{let{title:e,variations:a,setVariations:n,resetVariations:i}=s,t=(0,l.jsx)("button",{className:j.Z.inputReset,onClick:i,children:"Reset"});return(0,l.jsxs)("div",{className:j.Z.inputGroup,style:{display:"grid",gridTemplateColumns:"1fr 1fr"},children:[(0,l.jsxs)("p",{className:j.Z.inputTitle,style:{gridColumn:"1/-1"},children:[e," ",t]}),(0,l.jsxs)("div",{className:j.Z.inputElement,children:[(0,l.jsxs)("span",{children:["Linear: ",a.linear]}),(0,l.jsx)("input",{type:"range",min:0,max:1,step:.01,style:{width:"100%"},value:a.linear,onInput:s=>n({...a,linear:Number(s.currentTarget.value)})})]}),(0,l.jsxs)("div",{className:j.Z.inputElement,children:[(0,l.jsxs)("span",{children:["Julia: ",a.julia]}),(0,l.jsx)("input",{type:"range",min:0,max:1,step:.01,style:{width:"100%"},value:a.julia,onInput:s=>n({...a,julia:Number(s.currentTarget.value)})})]}),(0,l.jsxs)("div",{className:j.Z.inputElement,children:[(0,l.jsxs)("span",{children:["Popcorn: ",a.popcorn]}),(0,l.jsx)("input",{type:"range",min:0,max:1,step:.01,style:{width:"100%"},value:a.popcorn,onInput:s=>n({...a,popcorn:Number(s.currentTarget.value)})})]}),(0,l.jsxs)("div",{className:j.Z.inputElement,children:[(0,l.jsxs)("span",{children:["PDJ: ",a.pdj]}),(0,l.jsx)("input",{type:"range",min:0,max:1,step:.01,style:{width:"100%"},value:a.pdj,onInput:s=>n({...a,pdj:Number(s.currentTarget.value)})})]})]})};var N=a("58611"),g=a("27729"),y=a("64814"),u=a("62025"),v=a("56089");function f(s,e){return[[e.linear,g.G],[e.julia,y.e],[e.popcorn,(0,u.X)(s)],[e.pdj,(0,v.i)(c.fm)]]}function b(){let{width:s,height:e,setPainter:a}=(0,r.useContext)(m.wn),n={linear:0,julia:1,popcorn:0,pdj:0},[i,t]=(0,r.useState)(n),h={linear:1,julia:0,popcorn:1,pdj:0},[d,x]=(0,r.useState)(h),j={linear:0,julia:0,popcorn:0,pdj:1},[g,y]=(0,r.useState)(j),u=(s,e)=>[s,e];return(0,r.useEffect)(()=>{let n=[[c.aI,(0,N.N)(c.xN,f(c.xN,i))],[c.DO,(0,N.N)(c.v$,f(c.v$,d))],[c.qR,(0,N.N)(c.d3,f(c.d3,g))]];a(p({width:s,height:e,transforms:n,final:u}))},[i,d,g]),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(o,{title:"Transform 1",variations:i,setVariations:t,resetVariations:()=>t(n)}),(0,l.jsx)(o,{title:"Transform 2",variations:d,setVariations:x,resetVariations:()=>x(h)}),(0,l.jsx)(o,{title:"Transform 3",variations:g,setVariations:y,resetVariations:()=>y(j)})]})}var w=a("22237");let R=s=>{let{title:e,isPost:a,coefs:n,setCoefs:i,resetCoefs:t}=s,m=(0,l.jsx)("button",{className:j.Z.inputReset,onClick:t,children:"Reset"});return(0,l.jsxs)("div",{className:j.Z.inputGroup,style:{display:"grid",gridTemplateColumns:"1fr 1fr 1fr"},children:[(0,l.jsxs)("p",{className:j.Z.inputTitle,style:{gridColumn:"1/-1"},children:[e," ",m]}),(0,l.jsxs)("div",{className:j.Z.inputElement,children:[(0,l.jsxs)("p",{children:[a?(0,l.jsx)(w.Z,{children:"\\alpha"}):"a",": ",n.a]}),(0,l.jsx)("input",{type:"range",min:-2,max:2,step:.01,value:n.a,onInput:s=>i({...n,a:Number(s.currentTarget.value)})})]}),(0,l.jsxs)("div",{className:j.Z.inputElement,children:[(0,l.jsxs)("p",{children:[a?(0,l.jsx)(w.Z,{children:"\\beta"}):"b",": ",n.b]}),(0,l.jsx)("input",{type:"range",min:-2,max:2,step:.01,value:n.b,onInput:s=>i({...n,b:Number(s.currentTarget.value)})})]}),(0,l.jsxs)("div",{className:j.Z.inputElement,children:[(0,l.jsxs)("p",{children:[a?(0,l.jsx)(w.Z,{children:"\\gamma"}):"c",": ",n.c]}),(0,l.jsx)("input",{type:"range",min:-2,max:2,step:.01,value:n.c,onInput:s=>i({...n,c:Number(s.currentTarget.value)})})]}),(0,l.jsxs)("div",{className:j.Z.inputElement,children:[(0,l.jsxs)("p",{children:[a?(0,l.jsx)(w.Z,{children:"\\delta"}):"d",": ",n.d]}),(0,l.jsx)("input",{type:"range",min:-2,max:2,step:.01,value:n.d,onInput:s=>i({...n,d:Number(s.currentTarget.value)})})]}),(0,l.jsxs)("div",{className:j.Z.inputElement,children:[(0,l.jsxs)("p",{children:[a?(0,l.jsx)(w.Z,{children:"\\epsilon"}):"e",": ",n.e]}),(0,l.jsx)("input",{type:"range",min:-2,max:2,step:.01,value:n.e,onInput:s=>i({...n,e:Number(s.currentTarget.value)})})]}),(0,l.jsxs)("div",{className:j.Z.inputElement,children:[(0,l.jsxs)("p",{children:[a?(0,l.jsx)(w.Z,{children:"\\zeta"}):"f",": ",n.f]}),(0,l.jsx)("input",{type:"range",min:-2,max:2,step:.01,value:n.f,onInput:s=>i({...n,f:Number(s.currentTarget.value)})})]})]})};var z=a("86861");let k=(s,e)=>(a,n)=>([a,n]=s(a,n),(0,z.z)(a,n,e));function E(){let{width:s,height:e,setPainter:a}=(0,r.useContext)(m.wn),[n,i]=(0,r.useState)(c.Ue),[t,h]=(0,r.useState)(c.Qt),[d,x]=(0,r.useState)(c.EW),j={width:s,height:e,transforms:[[c.aI,k((0,N.N)(c.xN,c.rK),n)],[c.DO,k((0,N.N)(c.v$,c.kO),t)],[c.qR,k((0,N.N)(c.d3,c.ZU),d)]],final:(s,e)=>[s,e]};return(0,r.useEffect)(()=>a(p(j)),[n,t,d]),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(R,{title:"Transform 1 Post",isPost:!0,coefs:n,setCoefs:i,resetCoefs:()=>i(c.Ue)}),(0,l.jsx)(R,{title:"Transform 2 Post",isPost:!0,coefs:t,setCoefs:h,resetCoefs:()=>h(c.Qt)}),(0,l.jsx)(R,{title:"Transform 3 Post",isPost:!0,coefs:d,setCoefs:x,resetCoefs:()=>x(c.EW)})]})}function M(){let{width:s,height:e,setPainter:a}=(0,r.useContext)(m.wn),[n,i]=(0,r.useState)(c.Ux),t={linear:0,julia:1,popcorn:0,pdj:0},[h,d]=(0,r.useState)(t),[x,j]=(0,r.useState)(c.L4);return(0,r.useEffect)(()=>{let l=f(n,h),i=(0,N.g)(x,(0,N.N)(n,l));a(p({width:s,height:e,transforms:c.y7,final:i}))},[n,h,x]),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(R,{title:"Final Transform",isPost:!1,coefs:n,setCoefs:i,resetCoefs:()=>i(c.Ux)}),(0,l.jsx)(o,{title:"Final Transform Variations",variations:h,setVariations:d,resetVariations:()=>d(t)}),(0,l.jsx)(R,{title:"Final Transform Post",isPost:!0,coefs:x,setCoefs:j,resetCoefs:()=>j(c.L4)})]})}let A={slug:"2024/11/playing-with-fire-transforms",title:"Playing with fire: Transforms and variations",date:new Date("2024-12-16T21:31:00.000Z"),authors:["bspeice"],tags:[]},C=void 0,B={authorsImageUrls:[void 0]},F=[{value:"Variations",id:"variations",level:2},{value:"Linear (variation 0)",id:"linear-variation-0",level:3},{value:"Julia (variation 13)",id:"julia-variation-13",level:3},{value:"Popcorn (variation 17)",id:"popcorn-variation-17",level:3},{value:"PDJ (variation 24)",id:"pdj-variation-24",level:3},{value:"Blending",id:"blending",level:2},{value:"Post transforms",id:"post-transforms",level:2},{value:"Final transforms",id:"final-transforms",level:2},{value:"Summary",id:"summary",level:2}];function D(s){let e={a:"a",admonition:"admonition",annotation:"annotation",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",math:"math",mi:"mi",mn:"mn",mo:"mo",mrow:"mrow",mspace:"mspace",msqrt:"msqrt",mstyle:"mstyle",msub:"msub",msup:"msup",mtable:"mtable",mtd:"mtd",mtext:"mtext",mtr:"mtr",munder:"munder",p:"p",path:"path",semantics:"semantics",span:"span",svg:"svg",ul:"ul",...(0,i.a)(),...s.components},{Details:n}=e;return!n&&function(s,e){throw Error("Expected "+(e?"component":"object")+" `"+s+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.p,{children:"Now that we've learned about the chaos game, it's time to spice things up. Variations create the\nshapes and patterns that fractal flames are known for."}),"\n",(0,l.jsx)(e.admonition,{type:"info",children:(0,l.jsxs)(e.p,{children:["This post uses ",(0,l.jsx)(e.a,{target:"_blank","data-noBrokenLinkCheck":!0,href:a(83335).Z+"",children:"reference parameters"})," to demonstrate the fractal flame algorithm.\nIf you're interested in tweaking the parameters, or creating your own, ",(0,l.jsx)(e.a,{href:"https://sourceforge.net/projects/apophysis/",children:"Apophysis"}),"\ncan load that file."]})}),"\n",(0,l.jsx)(e.h2,{id:"variations",children:"Variations"}),"\n",(0,l.jsx)(e.admonition,{type:"note",children:(0,l.jsx)(e.p,{children:"This post covers section 3 of the Fractal Flame Algorithm paper"})}),"\n","\n",(0,l.jsx)(e.p,{children:'We previously introduced transforms as the "functions" of an "iterated function system," and showed how\nplaying the chaos game gives us an image of Sierpinski\'s Gasket. Even though we used simple functions,\nthe image it generates is intriguing. But what would happen if we used something more complex?'}),"\n",(0,l.jsx)(e.p,{children:'This leads us to the first big innovation of the fractal flame algorithm: adding non-linear functions\nafter the affine transform. These functions are called "variations":'}),"\n",(0,l.jsx)(e.span,{className:"katex-display",children:(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",display:"block",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsxs)(e.mrow,{children:[(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"F"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"V"}),(0,l.jsx)(e.mi,{children:"j"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"a"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"b"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"c"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"d"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"e"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"f"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"F_i(x, y) = V_j(a_i x + b_i y + c_i, d_i x + e_i y + f_i)"})]})})}),(0,l.jsxs)(e.span,{className:"katex-html","aria-hidden":"true",children:[(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.13889em"},children:"F"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.1389em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1.0361em",verticalAlign:"-0.2861em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.22222em"},children:"V"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.2222em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.05724em"},children:"j"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"a"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.8889em",verticalAlign:"-0.1944em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"b"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.8889em",verticalAlign:"-0.1944em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"c"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"d"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.7778em",verticalAlign:"-0.1944em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"e"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.10764em"},children:"f"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.1076em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})]})]})}),"\n","\n",(0,l.jsx)(t.Z,{language:"typescript",children:"export type Variation = (\n  x: number,\n  y: number\n) => [number, number];"}),"\n",(0,l.jsxs)(e.p,{children:["Just like transforms, variations (",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"V"}),(0,l.jsx)(e.mi,{children:"j"})]})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"V_j"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.9694em",verticalAlign:"-0.2861em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.22222em"},children:"V"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.2222em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.05724em"},children:"j"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]})]})})]}),") are functions that take in ",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"(x, y)"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})})]})," coordinates\nand give back new ",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"(x, y)"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})})]})," coordinates.\nHowever, the sky is the limit for what happens between input and output.\nThe Fractal Flame paper lists 49 variation functions,\nand the official ",(0,l.jsx)(e.code,{children:"flam3"})," implementation supports ",(0,l.jsx)(e.a,{href:"https://github.com/scottdraves/flam3/blob/7fb50c82e90e051f00efcc3123d0e06de26594b2/variations.c",children:"98 different variations"}),"."]}),"\n",(0,l.jsx)(e.p,{children:"To draw our reference image, we'll focus on just four:"}),"\n",(0,l.jsx)(e.h3,{id:"linear-variation-0",children:"Linear (variation 0)"}),"\n",(0,l.jsxs)(e.p,{children:["This variation is dead simple: return the ",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsx)(e.mi,{children:"x"})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"x"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.4306em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"})]})})]})," and ",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsx)(e.mi,{children:"y"})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"y"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.625em",verticalAlign:"-0.1944em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"})]})})]})," coordinates as-is."]}),"\n",(0,l.jsx)(e.span,{className:"katex-display",children:(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",display:"block",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsxs)(e.mrow,{children:[(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"V"}),(0,l.jsx)(e.mn,{children:"0"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"V_0(x,y) = (x,y)"})]})})}),(0,l.jsxs)(e.span,{className:"katex-html","aria-hidden":"true",children:[(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.22222em"},children:"V"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.2222em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"0"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})]})]})}),"\n","\n",(0,l.jsx)(t.Z,{language:"typescript",children:'// hidden-start\nimport {Variation} from "./variation"\n//hidden-end\nexport const linear: Variation =\n  (x, y) => [x, y];'}),"\n",(0,l.jsx)(e.admonition,{type:"tip",children:(0,l.jsx)(e.p,{children:"In a way, we've already been using this variation! The transforms that define Sierpinski's Gasket\napply the affine coefficients to the input point and use that as the output."})}),"\n",(0,l.jsx)(e.h3,{id:"julia-variation-13",children:"Julia (variation 13)"}),"\n",(0,l.jsx)(e.p,{children:"This variation is a good example of a non-linear function. It uses both trigonometry\nand probability to produce interesting shapes:"}),"\n",(0,l.jsx)(e.span,{className:"katex-display",children:(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",display:"block",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsxs)(e.mtable,{rowspacing:"0.25em",columnalign:"right left",columnspacing:"0em",children:[(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsx)(e.mi,{children:"r"})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.msqrt,{children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsxs)(e.msup,{children:[(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mn,{children:"2"})]}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsxs)(e.msup,{children:[(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mn,{children:"2"})]})]})})]})})})]}),(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsx)(e.mi,{children:"\u03B8"})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.mtext,{children:"arctan"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mi,{mathvariant:"normal",children:"/"}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]})})})]}),(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsx)(e.mi,{mathvariant:"normal",children:"\u03A9"})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mo,{fence:"true",children:"{"}),(0,l.jsxs)(e.mtable,{rowspacing:"0.16em",columnalign:"left right",columnspacing:"1em",children:[(0,l.jsx)(e.mtr,{children:(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"false",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mn,{children:"0"}),(0,l.jsx)(e.mspace,{width:"1.1381em"}),(0,l.jsx)(e.mtext,{children:"w.p.\xa0"}),(0,l.jsx)(e.mn,{children:"0.5"})]})})})}),(0,l.jsx)(e.mtr,{children:(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"false",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mi,{children:"\u03C0"}),(0,l.jsx)(e.mspace,{width:"1.1381em"}),(0,l.jsx)(e.mtext,{children:"w.p.\xa0"}),(0,l.jsx)(e.mn,{children:"0.5"})]})})})})]}),(0,l.jsx)(e.mo,{fence:"true",children:"}"})]})]})})})]}),(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"V"}),(0,l.jsx)(e.mn,{children:"13"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.msqrt,{children:(0,l.jsx)(e.mi,{children:"r"})}),(0,l.jsx)(e.mo,{children:"\u22C5"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mtext,{children:"cos"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"\u03B8"}),(0,l.jsx)(e.mi,{mathvariant:"normal",children:"/"}),(0,l.jsx)(e.mn,{children:"2"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsx)(e.mi,{mathvariant:"normal",children:"\u03A9"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mtext,{children:"sin"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"\u03B8"}),(0,l.jsx)(e.mi,{mathvariant:"normal",children:"/"}),(0,l.jsx)(e.mn,{children:"2"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsx)(e.mi,{mathvariant:"normal",children:"\u03A9"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]})})})]})]}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"\\begin{align*}\nr &= \\sqrt{x^2 + y^2} \\\\\n\\theta &= \\text{arctan}(x / y) \\\\\n\\Omega &= \\left\\{\n\\begin{array}{lr}\n0 \\hspace{0.4cm} \\text{w.p. } 0.5 \\\\\n\\pi \\hspace{0.4cm} \\text{w.p. } 0.5 \\\\\n\\end{array}\n\\right\\} \\\\\n\nV_{13}(x, y) &= \\sqrt{r} \\cdot (\\text{cos} ( \\theta / 2 + \\Omega ), \\text{sin} ( \\theta / 2 + \\Omega ))\n\\end{align*}"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"7.3759em",verticalAlign:"-3.4379em"}}),(0,l.jsx)(e.span,{className:"mord",children:(0,l.jsxs)(e.span,{className:"mtable",children:[(0,l.jsx)(e.span,{className:"col-align-r",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsxs)(e.span,{className:"vlist",style:{height:"3.9379em"},children:[(0,l.jsxs)(e.span,{style:{top:"-6.3812em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.45em"}}),(0,l.jsx)(e.span,{className:"mord",children:(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"r"})})]}),(0,l.jsxs)(e.span,{style:{top:"-4.8812em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.45em"}}),(0,l.jsx)(e.span,{className:"mord",children:(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"\u03B8"})})]}),(0,l.jsxs)(e.span,{style:{top:"-2.7712em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.45em"}}),(0,l.jsx)(e.span,{className:"mord",children:(0,l.jsx)(e.span,{className:"mord",children:"\u03A9"})})]}),(0,l.jsxs)(e.span,{style:{top:"-0.6721em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.45em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.22222em"},children:"V"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.2222em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"13"})})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})]})]}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"3.4379em"},children:(0,l.jsx)(e.span,{})})})]})}),(0,l.jsx)(e.span,{className:"col-align-l",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsxs)(e.span,{className:"vlist",style:{height:"3.9379em"},children:[(0,l.jsxs)(e.span,{style:{top:"-6.3812em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.45em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mord sqrt",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsxs)(e.span,{className:"vlist",style:{height:"1.0067em"},children:[(0,l.jsxs)(e.span,{className:"svg-align",style:{top:"-3.2em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.2em"}}),(0,l.jsxs)(e.span,{className:"mord",style:{paddingLeft:"1em"},children:[(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsx)(e.span,{className:"vlist-t",children:(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.7401em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.989em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"2"})})]})})})})})]}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsx)(e.span,{className:"vlist-t",children:(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.7401em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.989em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"2"})})]})})})})})]})]})]}),(0,l.jsxs)(e.span,{style:{top:"-2.9667em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.2em"}}),(0,l.jsx)(e.span,{className:"hide-tail",style:{minWidth:"1.02em",height:"1.28em"},children:(0,l.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",width:"400em",height:"1.28em",viewBox:"0 0 400000 1296",preserveAspectRatio:"xMinYMin slice",children:(0,l.jsx)(e.path,{d:"M263,681c0.7,0,18,39.7,52,119\nc34,79.3,68.167,158.7,102.5,238c34.3,79.3,51.8,119.3,52.5,120\nc340,-704.7,510.7,-1060.3,512,-1067\nl0 -0\nc4.7,-7.3,11,-11,19,-11\nH40000v40H1012.3\ns-271.3,567,-271.3,567c-38.7,80.7,-84,175,-136,283c-52,108,-89.167,185.3,-111.5,232\nc-22.3,46.7,-33.8,70.3,-34.5,71c-4.7,4.7,-12.3,7,-23,7s-12,-1,-12,-1\ns-109,-253,-109,-253c-72.7,-168,-109.3,-252,-110,-252c-10.7,8,-22,16.7,-34,26\nc-22,17.3,-33.3,26,-34,26s-26,-26,-26,-26s76,-59,76,-59s76,-60,76,-60z\nM1001 80h400000v40h-400000z"})})})]})]}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2333em"},children:(0,l.jsx)(e.span,{})})})]})})]})]}),(0,l.jsxs)(e.span,{style:{top:"-4.8812em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.45em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"arctan"})}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mord",children:"/"}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})]}),(0,l.jsxs)(e.span,{style:{top:"-2.7712em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.45em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsxs)(e.span,{className:"minner",children:[(0,l.jsx)(e.span,{className:"mopen delimcenter",style:{top:"0em"},children:(0,l.jsx)(e.span,{className:"delimsizing size3",children:"{"})}),(0,l.jsx)(e.span,{className:"mord",children:(0,l.jsxs)(e.span,{className:"mtable",children:[(0,l.jsx)(e.span,{className:"arraycolsep",style:{width:"0.5em"}}),(0,l.jsx)(e.span,{className:"col-align-l",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsxs)(e.span,{className:"vlist",style:{height:"1.45em"},children:[(0,l.jsxs)(e.span,{style:{top:"-3.61em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord",children:"0"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"1.1381em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"w.p.\xa0"})}),(0,l.jsx)(e.span,{className:"mord",children:"0.5"})]})]}),(0,l.jsxs)(e.span,{style:{top:"-2.41em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"\u03C0"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"1.1381em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"w.p.\xa0"})}),(0,l.jsx)(e.span,{className:"mord",children:"0.5"})]})]})]}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.95em"},children:(0,l.jsx)(e.span,{})})})]})}),(0,l.jsx)(e.span,{className:"arraycolsep",style:{width:"0.5em"}})]})}),(0,l.jsx)(e.span,{className:"mclose delimcenter",style:{top:"0em"},children:(0,l.jsx)(e.span,{className:"delimsizing size3",children:"}"})})]})]})]}),(0,l.jsxs)(e.span,{style:{top:"-0.6721em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.45em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mord sqrt",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsxs)(e.span,{className:"vlist",style:{height:"0.8492em"},children:[(0,l.jsxs)(e.span,{className:"svg-align",style:{top:"-3em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsx)(e.span,{className:"mord",style:{paddingLeft:"0.833em"},children:(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"r"})})]}),(0,l.jsxs)(e.span,{style:{top:"-2.8092em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsx)(e.span,{className:"hide-tail",style:{minWidth:"0.853em",height:"1.08em"},children:(0,l.jsx)(e.svg,{xmlns:"http://www.w3.org/2000/svg",width:"400em",height:"1.08em",viewBox:"0 0 400000 1080",preserveAspectRatio:"xMinYMin slice",children:(0,l.jsx)(e.path,{d:"M95,702\nc-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14\nc0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54\nc44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10\ns173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429\nc69,-144,104.5,-217.7,106.5,-221\nl0 -0\nc5.3,-9.3,12,-14,20,-14\nH400000v40H845.2724\ns-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7\nc-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z\nM834 80h400000v40h-400000z"})})})]})]}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.1908em"},children:(0,l.jsx)(e.span,{})})})]})}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"\u22C5"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"cos"})}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"\u03B8"}),(0,l.jsx)(e.span,{className:"mord",children:"/2"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mord",children:"\u03A9"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"sin"})}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.02778em"},children:"\u03B8"}),(0,l.jsx)(e.span,{className:"mord",children:"/2"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mord",children:"\u03A9"}),(0,l.jsx)(e.span,{className:"mclose",children:"))"})]})]})]}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"3.4379em"},children:(0,l.jsx)(e.span,{})})})]})})]})})]})})]})}),"\n","\n",(0,l.jsx)(t.Z,{language:"typescript",children:'// hidden-start\nimport { Variation } from "./variation";\n// hidden-end\nconst omega =\n  () => Math.random() > 0.5 ? 0 : Math.PI;\n\nexport const julia: Variation =\n  (x, y) => {\n    const x2 = Math.pow(x, 2);\n    const y2 = Math.pow(y, 2);\n    const r = Math.sqrt(x2 + y2);\n\n    const theta = Math.atan2(x, y);\n\n    const sqrtR = Math.sqrt(r);\n    const thetaVal = theta / 2 + omega();\n    return [\n      sqrtR * Math.cos(thetaVal),\n      sqrtR * Math.sin(thetaVal)\n    ];\n  };'}),"\n",(0,l.jsx)(e.h3,{id:"popcorn-variation-17",children:"Popcorn (variation 17)"}),"\n",(0,l.jsxs)(e.p,{children:["Some variations rely on knowing the transform's affine coefficients; they're called \"dependent variations.\"\nFor this variation, we use ",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsx)(e.mi,{children:"c"})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"c"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.4306em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"c"})]})})]})," and ",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsx)(e.mi,{children:"f"})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"f"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.8889em",verticalAlign:"-0.1944em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.10764em"},children:"f"})]})})]}),":"]}),"\n",(0,l.jsx)(e.span,{className:"katex-display",children:(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",display:"block",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsxs)(e.mrow,{children:[(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"V"}),(0,l.jsx)(e.mn,{children:"17"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsx)(e.mi,{children:"c"}),(0,l.jsx)(e.mtext,{children:"\xa0sin"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mtext,{children:"tan\xa0"}),(0,l.jsx)(e.mn,{children:"3"}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsx)(e.mi,{children:"f"}),(0,l.jsx)(e.mtext,{children:"\xa0sin"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mtext,{children:"tan\xa0"}),(0,l.jsx)(e.mn,{children:"3"}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"V_{17}(x,y) = (x + c\\ \\text{sin}(\\text{tan }3y), y + f\\ \\text{sin}(\\text{tan }3x))"})]})})}),(0,l.jsxs)(e.span,{className:"katex-html","aria-hidden":"true",children:[(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.22222em"},children:"V"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.2222em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"17"})})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"c"}),(0,l.jsx)(e.span,{className:"mspace",children:"\xa0"}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"sin"})}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"tan\xa0"})}),(0,l.jsx)(e.span,{className:"mord",children:"3"}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.10764em"},children:"f"}),(0,l.jsx)(e.span,{className:"mspace",children:"\xa0"}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"sin"})}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"tan\xa0"})}),(0,l.jsx)(e.span,{className:"mord",children:"3"}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mclose",children:"))"})]})]})]})}),"\n","\n",(0,l.jsx)(t.Z,{language:"typescript",children:'// hidden-start\nimport { Coefs } from "./transform";\nimport { Variation } from "./variation";\n// hidden-end\nexport const popcorn =\n  ({ c, f }: Coefs): Variation =>\n    (x, y) => [\n      x + c * Math.sin(Math.tan(3 * y)),\n      y + f * Math.sin(Math.tan(3 * x))\n    ];'}),"\n",(0,l.jsx)(e.h3,{id:"pdj-variation-24",children:"PDJ (variation 24)"}),"\n",(0,l.jsx)(e.p,{children:'Some variations have extra parameters we can choose; they\'re called "parametric variations."\nFor the PDJ variation, there are four extra parameters:'}),"\n",(0,l.jsx)(e.span,{className:"katex-display",children:(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",display:"block",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsxs)(e.mrow,{children:[(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"p"}),(0,l.jsx)(e.mn,{children:"1"})]}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.mtext,{children:"pdj.a"}),(0,l.jsx)(e.mspace,{width:"0.2845em"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"p"}),(0,l.jsx)(e.mn,{children:"2"})]}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.mtext,{children:"pdj.b"}),(0,l.jsx)(e.mspace,{width:"0.2845em"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"p"}),(0,l.jsx)(e.mn,{children:"3"})]}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.mtext,{children:"pdj.c"}),(0,l.jsx)(e.mspace,{width:"0.2845em"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"p"}),(0,l.jsx)(e.mn,{children:"4"})]}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.mtext,{children:"pdj.d"}),(0,l.jsx)(e.mspace,{linebreak:"newline"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"V"}),(0,l.jsx)(e.mn,{children:"24"})]}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mtext,{children:"sin"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"p"}),(0,l.jsx)(e.mn,{children:"1"})]}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{children:"\u2212"}),(0,l.jsx)(e.mtext,{children:"cos"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"p"}),(0,l.jsx)(e.mn,{children:"2"})]}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mtext,{children:"sin"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"p"}),(0,l.jsx)(e.mn,{children:"3"})]}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{children:"\u2212"}),(0,l.jsx)(e.mtext,{children:"cos"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"p"}),(0,l.jsx)(e.mn,{children:"4"})]}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"p_1 = \\text{pdj.a} \\hspace{0.1cm} p_2 = \\text{pdj.b} \\hspace{0.1cm} p_3 = \\text{pdj.c} \\hspace{0.1cm} p_4 = \\text{pdj.d} \\\\\nV_{24} = (\\text{sin}(p_1 y) - \\text{cos}(p_2 x), \\text{sin}(p_3 x) - \\text{cos}(p_4 y))"})]})})}),(0,l.jsxs)(e.span,{className:"katex-html","aria-hidden":"true",children:[(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.625em",verticalAlign:"-0.1944em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"p"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"1"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.8889em",verticalAlign:"-0.1944em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"pdj.a"})}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2845em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"p"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"2"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.8889em",verticalAlign:"-0.1944em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"pdj.b"})}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2845em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"p"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"3"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.8889em",verticalAlign:"-0.1944em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"pdj.c"})}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2845em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"p"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"4"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.8889em",verticalAlign:"-0.1944em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"pdj.d"})})]}),(0,l.jsx)(e.span,{className:"mspace newline"}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.8333em",verticalAlign:"-0.15em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.22222em"},children:"V"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.2222em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"24"})})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"sin"})}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"p"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"1"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"\u2212"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"cos"})}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"p"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"2"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"sin"})}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"p"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"3"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"\u2212"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"cos"})}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"p"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3011em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:"4"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:"))"})]})]})]})}),"\n","\n",(0,l.jsx)(t.Z,{language:"typescript",children:"// hidden-start\nimport { Variation } from './variation'\n//hidden-end\nexport type PdjParams = {\n    a: number,\n    b: number,\n    c: number,\n    d: number\n};\nexport const pdj =\n  ({a, b, c, d}: PdjParams): Variation =>\n    (x, y) => [\n        Math.sin(a * y) - Math.cos(b * x),\n        Math.sin(c * x) - Math.cos(d * y)\n    ]"}),"\n",(0,l.jsx)(e.h2,{id:"blending",children:"Blending"}),"\n",(0,l.jsxs)(e.p,{children:['Now, one variation is fun, but we can also combine variations in a process called "blending."\nEach variation receives the same ',(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsx)(e.mi,{children:"x"})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"x"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.4306em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"})]})})]})," and ",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsx)(e.mi,{children:"y"})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"y"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.625em",verticalAlign:"-0.1944em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"})]})})]})," inputs, and we add together each variation's ",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsx)(e.mi,{children:"x"})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"x"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.4306em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"})]})})]})," and ",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsx)(e.mi,{children:"y"})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"y"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.625em",verticalAlign:"-0.1944em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"})]})})]})," outputs.\nWe'll also give each variation a weight (",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"v"}),(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mi,{children:"i"}),(0,l.jsx)(e.mi,{children:"j"})]})]})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"v_{ij}"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.7167em",verticalAlign:"-0.2861em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"v"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.0359em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.05724em"},children:"ij"})})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]})]})})]}),") that changes how much it contributes to the result:"]}),"\n",(0,l.jsx)(e.span,{className:"katex-display",children:(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",display:"block",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsxs)(e.mrow,{children:[(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"F"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsxs)(e.munder,{children:[(0,l.jsx)(e.mo,{children:"\u2211"}),(0,l.jsx)(e.mi,{children:"j"})]}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"v"}),(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mi,{children:"i"}),(0,l.jsx)(e.mi,{children:"j"})]})]}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"V"}),(0,l.jsx)(e.mi,{children:"j"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"F_i(x,y) = \\sum_{j} v_{ij} V_j(x, y)"})]})})}),(0,l.jsxs)(e.span,{className:"katex-html","aria-hidden":"true",children:[(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"1em",verticalAlign:"-0.25em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.13889em"},children:"F"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.1389em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}})]}),(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"2.4638em",verticalAlign:"-1.4138em"}}),(0,l.jsx)(e.span,{className:"mop op-limits",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsxs)(e.span,{className:"vlist",style:{height:"1.05em"},children:[(0,l.jsxs)(e.span,{style:{top:"-1.8723em",marginLeft:"0em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.05em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.05724em"},children:"j"})})})]}),(0,l.jsxs)(e.span,{style:{top:"-3.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.05em"}}),(0,l.jsx)(e.span,{children:(0,l.jsx)(e.span,{className:"mop op-symbol large-op",children:"\u2211"})})]})]}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"1.4138em"},children:(0,l.jsx)(e.span,{})})})]})}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"v"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.0359em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.05724em"},children:"ij"})})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.22222em"},children:"V"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.2222em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.05724em"},children:"j"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})]})]})}),"\n",(0,l.jsx)(e.p,{children:"The formula looks intimidating, but it's not hard to implement:"}),"\n","\n",(0,l.jsx)(t.Z,{language:"typescript",children:'// hidden-start\nimport { Variation } from "./variation";\n// hidden-end\nexport type Blend = [number, Variation][];\n\nexport function blend(\n  x: number,\n  y: number,\n  varFns: Blend\n): [number, number] {\n  let [outX, outY] = [0, 0];\n\n  for (const [weight, varFn] of varFns) {\n    const [varX, varY] = varFn(x, y);\n    outX += weight * varX;\n    outY += weight * varY;\n  }\n\n  return [outX, outY];\n}'}),"\n",(0,l.jsx)(e.p,{children:"With that in place, we have enough to render a fractal flame. We'll use the same\nchaos game as before, but the new transforms and variations produce a dramatically different image:"}),"\n",(0,l.jsx)(e.admonition,{type:"tip",children:(0,l.jsx)(e.p,{children:"Try using the variation weights to figure out which parts of the image each transform controls."})}),"\n","\n",(0,l.jsx)(m.ke,{name:"flame_blend",children:(0,l.jsx)(b,{})}),"\n",(0,l.jsx)(e.h2,{id:"post-transforms",children:"Post transforms"}),"\n",(0,l.jsxs)(e.p,{children:["Next, we'll introduce a second affine transform applied ",(0,l.jsx)(e.em,{children:"after"}),' variation blending. This is called a "post transform."']}),"\n",(0,l.jsx)(e.p,{children:"We'll use some new variables, but the post transform should look familiar:"}),"\n",(0,l.jsx)(e.span,{className:"katex-display",children:(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",display:"block",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsxs)(e.mtable,{rowspacing:"0.25em",columnalign:"right left",columnspacing:"0em",children:[(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"P"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"\u03B1"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"\u03B2"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"\u03B3"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"\u03B4"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"\u03F5"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{children:"+"}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"\u03B6"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]})})})]}),(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"F"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"P"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mo,{fence:"true",children:"("}),(0,l.jsxs)(e.munder,{children:[(0,l.jsx)(e.mo,{children:"\u2211"}),(0,l.jsx)(e.mi,{children:"j"})]}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"v"}),(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mi,{children:"i"}),(0,l.jsx)(e.mi,{children:"j"})]})]}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"V"}),(0,l.jsx)(e.mi,{children:"j"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{fence:"true",children:")"})]})]})})})]})]}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"\\begin{align*}\nP_i(x, y) &= (\\alpha_i x + \\beta_i y + \\gamma_i, \\delta_i x + \\epsilon_i y + \\zeta_i) \\\\\nF_i(x, y) &= P_i\\left(\\sum_{j} v_{ij} V_j(x, y)\\right)\n\\end{align*}"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"4.9638em",verticalAlign:"-2.2319em"}}),(0,l.jsx)(e.span,{className:"mord",children:(0,l.jsxs)(e.span,{className:"mtable",children:[(0,l.jsx)(e.span,{className:"col-align-r",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsxs)(e.span,{className:"vlist",style:{height:"2.7319em"},children:[(0,l.jsxs)(e.span,{style:{top:"-5.6419em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.75em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.13889em"},children:"P"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.1389em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})]}),(0,l.jsxs)(e.span,{style:{top:"-3.2319em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.75em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.13889em"},children:"F"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.1389em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})]})]}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"2.2319em"},children:(0,l.jsx)(e.span,{})})})]})}),(0,l.jsx)(e.span,{className:"col-align-l",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsxs)(e.span,{className:"vlist",style:{height:"2.7319em"},children:[(0,l.jsxs)(e.span,{style:{top:"-5.6419em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.75em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.0037em"},children:"\u03B1"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.0037em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.05278em"},children:"\u03B2"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.0528em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.05556em"},children:"\u03B3"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.0556em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03785em"},children:"\u03B4"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.0379em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"\u03F5"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"+"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.07378em"},children:"\u03B6"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.0738em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})]}),(0,l.jsxs)(e.span,{style:{top:"-3.2319em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.75em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.13889em"},children:"P"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.1389em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsxs)(e.span,{className:"minner",children:[(0,l.jsx)(e.span,{className:"mopen delimcenter",style:{top:"0em"},children:(0,l.jsx)(e.span,{className:"delimsizing size4",children:"("})}),(0,l.jsx)(e.span,{className:"mop op-limits",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsxs)(e.span,{className:"vlist",style:{height:"1.05em"},children:[(0,l.jsxs)(e.span,{style:{top:"-1.8723em",marginLeft:"0em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.05em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.05724em"},children:"j"})})})]}),(0,l.jsxs)(e.span,{style:{top:"-3.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3.05em"}}),(0,l.jsx)(e.span,{children:(0,l.jsx)(e.span,{className:"mop op-symbol large-op",children:"\u2211"})})]})]}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"1.4138em"},children:(0,l.jsx)(e.span,{})})})]})}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"v"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.0359em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.05724em"},children:"ij"})})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.22222em"},children:"V"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.2222em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.05724em"},children:"j"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mclose delimcenter",style:{top:"0em"},children:(0,l.jsx)(e.span,{className:"delimsizing size4",children:")"})})]})]})]})]}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"2.2319em"},children:(0,l.jsx)(e.span,{})})})]})})]})})]})})]})}),"\n","\n",(0,l.jsx)(t.Z,{language:"typescript",children:'// hidden-start\nimport { applyCoefs, Coefs, Transform } from "../src/transform";\n// hidden-end\nexport const transformPost = (\n  transform: Transform,\n  coefs: Coefs\n): Transform =>\n  (x, y) => {\n    [x, y] = transform(x, y);\n    return applyCoefs(x, y, coefs);\n  }'}),"\n",(0,l.jsx)(e.p,{children:"The image below uses the same transforms/variations as the previous fractal flame,\nbut allows changing the post-transform coefficients:"}),"\n",(0,l.jsxs)(n,{children:[(0,l.jsx)("summary",{children:"If you want to test your understanding..."}),(0,l.jsxs)(e.ul,{children:["\n",(0,l.jsx)(e.li,{children:"What post-transform coefficients will give us the previous image?"}),"\n",(0,l.jsxs)(e.li,{children:["What post-transform coefficients will give us a ",(0,l.jsx)(e.em,{children:"mirrored"})," image?"]}),"\n"]})]}),"\n","\n",(0,l.jsx)(m.ke,{name:"flame_post",children:(0,l.jsx)(E,{})}),"\n",(0,l.jsx)(e.h2,{id:"final-transforms",children:"Final transforms"}),"\n",(0,l.jsxs)(e.p,{children:['The last step is to introduce a "final transform" (',(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"F"}),(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mi,{children:"f"}),(0,l.jsx)(e.mi,{children:"i"}),(0,l.jsx)(e.mi,{children:"n"}),(0,l.jsx)(e.mi,{children:"a"}),(0,l.jsx)(e.mi,{children:"l"})]})]})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"F_{final}"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.9694em",verticalAlign:"-0.2861em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.13889em"},children:"F"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3361em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.1389em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsxs)(e.span,{className:"mord mtight",children:[(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.10764em"},children:"f"}),(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"ina"}),(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.01968em"},children:"l"})]})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]})]})})]}),") that is applied\nregardless of which regular transform (",(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsx)(e.mrow,{children:(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"F"}),(0,l.jsx)(e.mi,{children:"i"})]})}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"F_i"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"0.8333em",verticalAlign:"-0.15em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.13889em"},children:"F"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.1389em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]})]})})]}),") the chaos game selects.\nIt's just like a normal transform (composition of affine transform, variation blend, and post transform),\nbut it doesn't affect the chaos game state."]}),"\n",(0,l.jsx)(e.p,{children:"After adding the final transform, our chaos game algorithm looks like this:"}),"\n",(0,l.jsx)(e.span,{className:"katex-display",children:(0,l.jsxs)(e.span,{className:"katex",children:[(0,l.jsx)(e.span,{className:"katex-mathml",children:(0,l.jsx)(e.math,{xmlns:"http://www.w3.org/1998/Math/MathML",display:"block",children:(0,l.jsxs)(e.semantics,{children:[(0,l.jsxs)(e.mtable,{rowspacing:"0.25em",columnalign:"right left",columnspacing:"0em",children:[(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsx)(e.mrow,{})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.mtext,{children:"random\xa0point\xa0in\xa0the\xa0bi-unit\xa0square"})]})})})]}),(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsx)(e.mrow,{})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mtext,{children:"iterate\xa0"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"{"})]})})})]}),(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsx)(e.mrow,{})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mspace,{width:"2.8453em"}),(0,l.jsx)(e.mi,{children:"i"}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsx)(e.mtext,{children:"random\xa0integer\xa0from\xa00\xa0to\xa0"}),(0,l.jsx)(e.mi,{children:"n"}),(0,l.jsx)(e.mo,{children:"\u2212"}),(0,l.jsx)(e.mn,{children:"1"})]})})})]}),(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsx)(e.mrow,{})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mspace,{width:"2.8453em"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"F"}),(0,l.jsx)(e.mi,{children:"i"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]})})})]}),(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsx)(e.mrow,{})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mspace,{width:"2.8453em"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mi,{children:"f"})]}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mi,{children:"f"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mo,{children:"="}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"F"}),(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mi,{children:"f"}),(0,l.jsx)(e.mi,{children:"i"}),(0,l.jsx)(e.mi,{children:"n"}),(0,l.jsx)(e.mi,{children:"a"}),(0,l.jsx)(e.mi,{children:"l"})]})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"})]})})})]}),(0,l.jsxs)(e.mtr,{children:[(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsx)(e.mrow,{})})}),(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsxs)(e.mrow,{children:[(0,l.jsx)(e.mrow,{}),(0,l.jsx)(e.mspace,{width:"2.8453em"}),(0,l.jsx)(e.mtext,{children:"plot"}),(0,l.jsx)(e.mo,{stretchy:"false",children:"("}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"x"}),(0,l.jsx)(e.mi,{children:"f"})]}),(0,l.jsx)(e.mo,{separator:"true",children:","}),(0,l.jsxs)(e.msub,{children:[(0,l.jsx)(e.mi,{children:"y"}),(0,l.jsx)(e.mi,{children:"f"})]}),(0,l.jsx)(e.mo,{stretchy:"false",children:")"}),(0,l.jsx)(e.mtext,{children:"\xa0if\xa0iterations"}),(0,l.jsx)(e.mo,{children:">"}),(0,l.jsx)(e.mn,{children:"20"})]})})})]}),(0,l.jsx)(e.mtr,{children:(0,l.jsx)(e.mtd,{children:(0,l.jsx)(e.mstyle,{scriptlevel:"0",displaystyle:"true",children:(0,l.jsx)(e.mo,{stretchy:"false",lspace:"0em",rspace:"0em",children:"}"})})})})]}),(0,l.jsx)(e.annotation,{encoding:"application/x-tex",children:"\\begin{align*}\n&(x, y) = \\text{random point in the bi-unit square} \\\\\n&\\text{iterate } \\{ \\\\\n&\\hspace{1cm} i = \\text{random integer from 0 to } n - 1 \\\\\n&\\hspace{1cm} (x,y) = F_i(x,y) \\\\\n&\\hspace{1cm} (x_f,y_f) = F_{final}(x,y) \\\\\n&\\hspace{1cm} \\text{plot}(x_f,y_f) \\text{ if iterations} > 20 \\\\\n\\}\n\\end{align*}"})]})})}),(0,l.jsx)(e.span,{className:"katex-html","aria-hidden":"true",children:(0,l.jsxs)(e.span,{className:"base",children:[(0,l.jsx)(e.span,{className:"strut",style:{height:"10.5em",verticalAlign:"-5em"}}),(0,l.jsx)(e.span,{className:"mord",children:(0,l.jsxs)(e.span,{className:"mtable",children:[(0,l.jsx)(e.span,{className:"col-align-r",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsxs)(e.span,{className:"vlist",style:{height:"5.5em"},children:[(0,l.jsxs)(e.span,{style:{top:"-7.66em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsx)(e.span,{className:"mord"})]}),(0,l.jsxs)(e.span,{style:{top:"-6.16em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsx)(e.span,{className:"mord"})]}),(0,l.jsxs)(e.span,{style:{top:"-4.66em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsx)(e.span,{className:"mord"})]}),(0,l.jsxs)(e.span,{style:{top:"-3.16em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsx)(e.span,{className:"mord"})]}),(0,l.jsxs)(e.span,{style:{top:"-1.66em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsx)(e.span,{className:"mord"})]}),(0,l.jsxs)(e.span,{style:{top:"-0.16em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsx)(e.span,{className:"mord"})]}),(0,l.jsxs)(e.span,{style:{top:"1.34em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsx)(e.span,{className:"mord",children:(0,l.jsx)(e.span,{className:"mclose",children:"}"})})]})]}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"5em"},children:(0,l.jsx)(e.span,{})})})]})}),(0,l.jsx)(e.span,{className:"col-align-l",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsxs)(e.span,{className:"vlist",style:{height:"5.5em"},children:[(0,l.jsxs)(e.span,{style:{top:"-7.66em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"random\xa0point\xa0in\xa0the\xa0bi-unit\xa0square"})})]})]}),(0,l.jsxs)(e.span,{style:{top:"-6.16em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"iterate\xa0"})}),(0,l.jsx)(e.span,{className:"mopen",children:"{"})]})]}),(0,l.jsxs)(e.span,{style:{top:"-4.66em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"2.8453em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"i"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"random\xa0integer\xa0from\xa00\xa0to\xa0"})}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"n"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mbin",children:"\u2212"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2222em"}}),(0,l.jsx)(e.span,{className:"mord",children:"1"})]})]}),(0,l.jsxs)(e.span,{style:{top:"-3.16em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"2.8453em"}}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.13889em"},children:"F"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3117em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.1389em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"i"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.15em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})]}),(0,l.jsxs)(e.span,{style:{top:"-1.66em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"2.8453em"}}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3361em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.10764em"},children:"f"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3361em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.0359em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.10764em"},children:"f"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:"="}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.13889em"},children:"F"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3361em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.1389em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsxs)(e.span,{className:"mord mtight",children:[(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.10764em"},children:"f"}),(0,l.jsx)(e.span,{className:"mord mathnormal mtight",children:"ina"}),(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.01968em"},children:"l"})]})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"mclose",children:")"})]})]}),(0,l.jsxs)(e.span,{style:{top:"-0.16em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"3em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"2.8453em"}}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"plot"})}),(0,l.jsx)(e.span,{className:"mopen",children:"("}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",children:"x"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3361em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"0em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.10764em"},children:"f"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mpunct",children:","}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.1667em"}}),(0,l.jsxs)(e.span,{className:"mord",children:[(0,l.jsx)(e.span,{className:"mord mathnormal",style:{marginRight:"0.03588em"},children:"y"}),(0,l.jsx)(e.span,{className:"msupsub",children:(0,l.jsxs)(e.span,{className:"vlist-t vlist-t2",children:[(0,l.jsxs)(e.span,{className:"vlist-r",children:[(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.3361em"},children:(0,l.jsxs)(e.span,{style:{top:"-2.55em",marginLeft:"-0.0359em",marginRight:"0.05em"},children:[(0,l.jsx)(e.span,{className:"pstrut",style:{height:"2.7em"}}),(0,l.jsx)(e.span,{className:"sizing reset-size6 size3 mtight",children:(0,l.jsx)(e.span,{className:"mord mathnormal mtight",style:{marginRight:"0.10764em"},children:"f"})})]})}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"0.2861em"},children:(0,l.jsx)(e.span,{})})})]})})]}),(0,l.jsx)(e.span,{className:"mclose",children:")"}),(0,l.jsx)(e.span,{className:"mord text",children:(0,l.jsx)(e.span,{className:"mord",children:"\xa0if\xa0iterations"})}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mrel",children:">"}),(0,l.jsx)(e.span,{className:"mspace",style:{marginRight:"0.2778em"}}),(0,l.jsx)(e.span,{className:"mord",children:"20"})]})]})]}),(0,l.jsx)(e.span,{className:"vlist-s",children:"\u200B"})]}),(0,l.jsx)(e.span,{className:"vlist-r",children:(0,l.jsx)(e.span,{className:"vlist",style:{height:"3.5em"},children:(0,l.jsx)(e.span,{})})})]})})]})})]})})]})}),"\n","\n",(0,l.jsx)(t.Z,{language:"typescript",children:'// hidden-start\nimport { randomBiUnit } from "../src/randomBiUnit";\nimport { randomChoice } from "../src/randomChoice";\nimport { plotBinary as plot } from "../src/plotBinary";\nimport { Transform } from "../src/transform";\nimport { Props as WeightedProps } from "../1-introduction/chaosGameWeighted";\n\nconst quality = 0.5;\nconst step = 1000;\n// hidden-end\nexport type Props = WeightedProps & {\n  final: Transform,\n}\n\nexport function* chaosGameFinal(\n  {\n    width,\n    height,\n    transforms,\n    final\n  }: Props\n) {\n  let img =\n    new ImageData(width, height);\n  let [x, y] = [\n    randomBiUnit(),\n    randomBiUnit()\n  ];\n\n  const pixels = width * height;\n  const iterations = quality * pixels;\n  for (let i = 0; i < iterations; i++) {\n    const [_, transform] =\n      randomChoice(transforms);\n    [x, y] = transform(x, y);\n\n    // highlight-start\n    const [finalX, finalY] = final(x, y);\n    // highlight-end\n\n    if (i > 20)\n      // highlight-start\n      plot(finalX, finalY, img);\n    // highlight-end\n\n    if (i % step === 0)\n      yield img;\n  }\n\n  yield img;\n}'}),"\n",(0,l.jsx)(e.p,{children:"This image uses the same normal/post transforms as above, but allows modifying\nthe coefficients and variations of the final transform:"}),"\n","\n",(0,l.jsx)(m.ke,{name:"flame_final",children:(0,l.jsx)(M,{})}),"\n",(0,l.jsx)(e.h2,{id:"summary",children:"Summary"}),"\n",(0,l.jsx)(e.p,{children:"Variations are the fractal flame algorithm's first major innovation.\nBy blending variation functions and post/final transforms, we generate unique images."}),"\n",(0,l.jsx)(e.p,{children:"However, these images are grainy and unappealing. In the next post, we'll clean up\nthe image quality and add some color."})]})}function L(s={}){let{wrapper:e}={...(0,i.a)(),...s.components};return e?(0,l.jsx)(e,{...s,children:(0,l.jsx)(D,{...s})}):D(s)}},57037:function(s,e,a){a.d(e,{Z:function(){return n}});let n={inputGroup:"inputGroup_aXxM",inputTitle:"inputTitle_L5pB",inputElement:"inputElement_lfVV",inputReset:"inputReset_vh8n"}},83335:function(s,e,a){a.d(e,{Z:function(){return n}});let n=a.p+"assets/files/params-79404da2c6b544cbaf223f19db41fabf.flame"},87320:function(s,e,a){a.d(e,{ke:function(){return c},wn:function(){return t}});var n=a(85893),l=a(67294),i=a(84239);let t=(0,l.createContext)(null),m=s=>e=>{let a=document.createElement("a");a.download=`${s}.png`,a.href=e.target.toDataURL("image/png"),a.click()},r=s=>{let{name:e,style:a,children:r}=s,c=(0,l.useRef)(null),[h,d]=(0,l.useState)(0),[x,p]=(0,l.useState)(0);(0,l.useEffect)(()=>{c.current&&(d(c.current.offsetWidth),p(c.current.offsetHeight))},[c]);let j=(0,l.useRef)(null),[o,N]=(0,l.useState)(!1);(0,l.useEffect)(()=>{if(!j.current)return;let s=new IntersectionObserver(s=>{let[e]=s;e.isIntersecting&&N(!0)});return s.observe(j.current),()=>{j.current&&s.unobserve(j.current)}},[j.current]);let[g,y]=(0,l.useState)(null);(0,l.useEffect)(()=>{j.current&&g&&j.current.getContext("2d").putImageData(g[0],0,0)},[j,g]);let[u,v]=(0,l.useState)(null);(0,l.useEffect)(()=>{if(!o||!u)return;let s=u[0],e=s.next().value;e?(y([e]),v([s])):v(null)},[o,u]);let[f,b]=(0,l.useState)(null);(0,l.useEffect)(()=>{f&&v([f])},[f]);let w={ref:j,width:h,height:x,style:{filter:"dark"===(0,i.I)().colorMode?"invert(1)":""}};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("center",{children:(0,n.jsx)("div",{ref:c,style:a,children:h>0?(0,n.jsx)("canvas",{...w,onDoubleClick:m(e)}):null})}),(0,n.jsx)(t.Provider,{value:{width:h,height:x,setPainter:b},children:h>0?r:null})]})},c=s=>{let{name:e,style:a,children:l}=s;return(0,n.jsx)("center",{children:(0,n.jsx)(r,{name:e,style:{width:"75%",aspectRatio:"1/1",...a},children:l})})}},58611:function(s,e,a){a.d(e,{g:()=>i,N:()=>l});var n=a("86861");let l=(s,e)=>(a,l)=>(function(s,e,a){let[n,l]=[0,0];for(let[i,t]of a){let[a,m]=t(s,e);n+=i*a,l+=i*m}return[n,l]})(...(0,n.z)(a,l,s),e),i=(s,e)=>(a,l)=>(0,n.z)(...e(a,l),s)},5886:function(s,e,a){function n(s,e,a){return[Math.floor((s+2)*a/4),Math.floor((e+2)*a/4)]}function l(s,e,a,n){return a*n*e+s*n}a.d(e,{j:function(){return l},n:function(){return n}})},64814:function(s,e,a){a.d(e,{e:function(){return l}});let n=()=>Math.random()>.5?0:Math.PI,l=(s,e)=>{let a=Math.sqrt(Math.sqrt(Math.pow(s,2)+Math.pow(e,2))),l=Math.atan2(s,e)/2+n();return[a*Math.cos(l),a*Math.sin(l)]}},27729:function(s,e,a){a.d(e,{G:function(){return n}});let n=(s,e)=>[s,e]},1905:function(s,e,a){a.d(e,{DG:function(){return B},DO:function(){return o},EW:function(){return b},L4:function(){return k},N3:function(){return j},Qt:function(){return g},SV:function(){return C},Ue:function(){return x},Ux:function(){return z},ZU:function(){return w},aI:function(){return h},d3:function(){return f},fm:function(){return c},iD:function(){return R},kO:function(){return y},qR:function(){return v},rK:function(){return p},sB:function(){return M},v$:function(){return N},xN:function(){return d},y7:function(){return A},yV:function(){return u}});var n=a(27729),l=a(64814),i=a(62025),t=a(56089),m=a(58611);let r={a:1,b:0,c:0,d:0,e:1,f:0},c={a:1.09358,b:2.13048,c:2.54127,d:2.37267},h=.56453495,d={a:-1.381068,b:-1.381068,c:0,d:1.381068,e:-1.381068,f:0},x=r,p=[[1,l.e]],j=0,o=.013135,N={a:.031393,b:.031367,c:0,d:-.031367,e:.031393,f:0},g={a:1,b:0,c:.24,d:0,e:1,f:.27},y=[[1,n.G],[1,(0,i.X)(N)]],u=.844,v=.42233,f={a:1.51523,b:-3.048677,c:.724135,d:.740356,e:-1.455964,f:-.362059},b=r,w=[[1,(0,t.i)(c)]],R=.349,z={a:2,b:0,c:0,d:0,e:2,f:0},k=r,E=[[1,l.e]],M=0,A=[[h,(0,m.g)(x,(0,m.N)(d,p))],[o,(0,m.g)(g,(0,m.N)(N,y))],[v,(0,m.g)(b,(0,m.N)(f,w))]],C=(0,m.g)(k,(0,m.N)(z,E)),B=(function(s){let e=[];for(let a=0;a<s.length;a+=2)e.push(parseInt(s.substring(a,a+2),16));return e})("3130323635383B3A3D403F424644484B494D504E525653585B585D605D626562686B676D706C737571787B767D807B838580888A858D908A93958F989A949DA099A3A59EA8AAA3ADAFA8B3B5ADB8BAB2BEBFB7C3C5BCC8CAC1CECFC6D3D4CBD8DAD0DEDFD5E3DFD2E0DFCEDDE0CBDAE0C8D7E0C4D3E0C1D0E1BECDE1BBCAE1B7C7E1B4C4E1B1C1E2ADBEE2AABAE2A7B7E2A3B4E2A0B1E39DAEE399ABE396A8E393A5E490A1E48C9EE4899BE48698E48295E57F92E57C8FE5788CE57589E57285E66E82E66B7FE6687CE66479E76176E75E73E75B70E7576CE75469E85166E84D63E84A60E4495EE0485CDC475BD84659D44557D04455CB4353C74252C34150BF404EBB3F4CB73E4BB33D49AF3C47AB3B45A73A43A339429F38409B373E97363C92353A8E34398A33378632358231337E30327A2F30762E2E722D2C6E2C2A6A2B29662A276229255E282359272155262051251E4D241C49231A4522194121173D20153C1F153A1F14391E14381E14361D14351C13341C13321B13311B132F1A122E19122D19122B18122A181129171127161126161125151023151022141021140F1F130F1E120F1C120F1B110E1A110E18100E170F0E160F0D140E0D130E0D120D0D100C0C0F0C0C0E0B0C0C0B0C0B0A0B09090B08090B07080B05080A04070A0606090804090A03088C46728A457087446D85436B8243698042667D41647B4061793F5F763E5D743D5A713D586F3C566C3B536A3A5168394F65384C63374A6037485E36455B354359344057333E54323C5231394F31374D30354A2F32482E30462D2E432C2B412B293E2B273C2A2439292237281F35271D32261B3025182D25162B241428231126220F25210F24210E23200E221F0E221E0D211E0D201D0D1F1C0D1E1B0C1D1B0C1C1A0C1B190B1B180B1A180B19170A18160A17150A1615091514091413091413081312081211081110081010070F0F070E0E070D0D060C0D060C0C060B0B050A0A05090A050809040708040607040507040506030405030304030204020103020608070C0D0D1112121617171B1C1D2121222626272B2B2D").map(s=>s/255)},56089:function(s,e,a){a.d(e,{i:function(){return n}});let n=s=>{let{a:e,b:a,c:n,d:l}=s;return(s,i)=>[Math.sin(e*i)-Math.cos(a*s),Math.sin(n*s)-Math.cos(l*i)]}},62025:function(s,e,a){a.d(e,{X:function(){return n}});let n=s=>{let{c:e,f:a}=s;return(s,n)=>[s+e*Math.sin(Math.tan(3*n)),n+a*Math.sin(Math.tan(3*s))]}},42974:function(s,e,a){a.d(e,{J:function(){return n}});function n(){return 2*Math.random()-1}},37955:function(s,e,a){a.d(e,{m:function(){return n}});function n(s){let e=Math.random()*s.reduce((s,e)=>{let[a,n]=e;return s+a},0);for(let a of s.entries()){let[s,n]=a,[l,i]=n;if(e<l)return[s,i];e-=l}let a=s.length-1;return[a,s[a][1]]}},86861:function(s,e,a){a.d(e,{z:function(){return n}});function n(s,e,a){return[s*a.a+e*a.b+a.c,s*a.d+e*a.e+a.f]}},40653:function(s,e,a){a.d(e,{Z:()=>R});var n=a("85893");a("67294");var l=a("67026"),i=a("7227"),t=a("34550"),m=a("96025"),r=a("2933"),c=a("70144"),h=a("78720"),d=a("66856"),x=a("16893");let p="playgroundContainer_TGbA",j="playgroundHeader_qwyd",o="playgroundEditor_PvJ1",N="playgroundPreview_bb8I";function g(s){let{children:e}=s;return(0,n.jsx)("div",{className:(0,l.Z)(j),children:e})}function y(){return(0,n.jsx)("div",{children:"Loading..."})}function u(){return(0,n.jsx)(c.Z,{fallback:(0,n.jsx)(y,{}),children:()=>(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(x.Z,{fallback:s=>(0,n.jsx)(h.Ac,{...s}),children:(0,n.jsx)(t.i5,{})}),(0,n.jsx)(t.IF,{})]})})}function v(){return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(g,{children:(0,n.jsx)(m.Z,{id:"theme.Playground.result",description:"The result label of the live codeblocks",children:"Result"})}),(0,n.jsx)("div",{className:N,children:(0,n.jsx)(u,{})})]})}function f(){let s=(0,i.Z)();return(0,n.jsx)(t.uz,{className:o},String(s))}function b(){return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(g,{children:(0,n.jsx)(m.Z,{id:"theme.Playground.liveEditor",description:"The live editor label of the live codeblocks",children:"Live Editor"})}),(0,n.jsx)(f,{})]})}let w=s=>`${s};`;function R(s){let{children:e,transformCode:a,...l}=s,{siteConfig:{themeConfig:i}}=(0,r.Z)(),{liveCodeBlock:{playgroundPosition:m}}=i,c=(0,d.p)(),h=l.metastring?.includes("noInline")??!1;return(0,n.jsx)("div",{className:p,children:(0,n.jsx)(t.nu,{code:e?.replace(/\n$/,""),noInline:h,transformCode:a??w,theme:c,...l,children:"top"===m?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(v,{}),(0,n.jsx)(b,{})]}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(b,{}),(0,n.jsx)(v,{})]})})})}},86131:function(s){s.exports=JSON.parse('{"permalink":"/2024/11/playing-with-fire-transforms","source":"@site/blog/2024-11-15-playing-with-fire/2-transforms/index.mdx","title":"Playing with fire: Transforms and variations","description":"Now that we\'ve learned about the chaos game, it\'s time to spice things up. Variations create the","date":"2024-12-16T21:31:00.000Z","tags":[],"readingTime":4.64,"hasTruncateMarker":true,"authors":[{"name":"Bradlee Speice","socials":{"github":"https://github.com/bspeice"},"key":"bspeice","page":null}],"frontMatter":{"slug":"2024/11/playing-with-fire-transforms","title":"Playing with fire: Transforms and variations","date":"2024-12-16T21:31:00.000Z","authors":["bspeice"],"tags":[]},"unlisted":false,"lastUpdatedAt":1734402605000,"prevItem":{"title":"Playing with fire: Tone mapping and color","permalink":"/2024/11/playing-with-fire-log-density"},"nextItem":{"title":"Playing with fire: The fractal flame algorithm","permalink":"/2024/11/playing-with-fire"}}')}}]);