{"id":1514,"date":"2011-09-19T16:00:06","date_gmt":"2011-09-19T23:00:06","guid":{"rendered":"https:\/\/www.reenigne.org\/blog\/?p=1514"},"modified":"2011-08-28T21:40:04","modified_gmt":"2011-08-29T04:40:04","slug":"interactive-ifs","status":"publish","type":"post","link":"https:\/\/www.reenigne.org\/blog\/interactive-ifs\/","title":{"rendered":"Interactive IFS"},"content":{"rendered":"<p>I want to write a program that allows you to explore Iterated Function System (IFS) fractals interactively by moving points around with the mouse.<\/p>\n<p>There's a few different ways to do this, depending on what set of transformations you use.<\/p>\n<p>IFS fractals usually use affine transformations, which encompass translations, rotations, dilations and shears. This can be done with 3 points per transformation - if one considers the points as complex numbers we have the transformation <img src='https:\/\/s0.wp.com\/latex.php?latex=f%28x%29%3Dax+%2B+b%5Coverline%7Bx%7D+%2B+c&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='f(x)=ax + b\\overline{x} + c' title='f(x)=ax + b\\overline{x} + c' class='latex' \/>. However, rather than controlling <img src='https:\/\/s0.wp.com\/latex.php?latex=a&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='a' title='a' class='latex' \/>, <img src='https:\/\/s0.wp.com\/latex.php?latex=b&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='b' title='b' class='latex' \/> and <img src='https:\/\/s0.wp.com\/latex.php?latex=c&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='c' title='c' class='latex' \/> directly I think it would work better to move the images of some interesting points like <img src='https:\/\/s0.wp.com\/latex.php?latex=0&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='0' title='0' class='latex' \/>, <img src='https:\/\/s0.wp.com\/latex.php?latex=1&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='1' title='1' class='latex' \/> and <img src='https:\/\/s0.wp.com\/latex.php?latex=i&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='i' title='i' class='latex' \/> (i.e. move <img src='https:\/\/s0.wp.com\/latex.php?latex=c&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='c' title='c' class='latex' \/>, <img src='https:\/\/s0.wp.com\/latex.php?latex=a%2Bb%2Bc&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='a+b+c' title='a+b+c' class='latex' \/> and <img src='https:\/\/s0.wp.com\/latex.php?latex=%28a-b%29i%2Bc&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='(a-b)i+c' title='(a-b)i+c' class='latex' \/>). Then the geometric interpretation of the control points would be easy to understand - they would just be the corners of a transformed rectangle.<\/p>\n<p>However, there are other possible transformations. We could reduce the number of control points to 2 and disallow non-orthogonal transformations, giving <img src='https:\/\/s0.wp.com\/latex.php?latex=f%28x%29%3Dax+%2B+b&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='f(x)=ax + b' title='f(x)=ax + b' class='latex' \/> and control points <img src='https:\/\/s0.wp.com\/latex.php?latex=0&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='0' title='0' class='latex' \/> and <img src='https:\/\/s0.wp.com\/latex.php?latex=1&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='1' title='1' class='latex' \/> mapping to <img src='https:\/\/s0.wp.com\/latex.php?latex=a&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='a' title='a' class='latex' \/> and <img src='https:\/\/s0.wp.com\/latex.php?latex=a%2Bb&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='a+b' title='a+b' class='latex' \/>.<\/p>\n<p>We could move to quadratics <img src='https:\/\/s0.wp.com\/latex.php?latex=f%28x%29+%3D+ax%5E2+%2B+bx+%2B+c&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='f(x) = ax^2 + bx + c' title='f(x) = ax^2 + bx + c' class='latex' \/> and move <img src='https:\/\/s0.wp.com\/latex.php?latex=c&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='c' title='c' class='latex' \/>, <img src='https:\/\/s0.wp.com\/latex.php?latex=a%2Bb%2Bc&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='a+b+c' title='a+b+c' class='latex' \/> and <img src='https:\/\/s0.wp.com\/latex.php?latex=c%2Bib-a&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='c+ib-a' title='c+ib-a' class='latex' \/>, and with 4 points we can do cubics <img src='https:\/\/s0.wp.com\/latex.php?latex=f%28x%29+%3D+ax%5E3+%2B+bx%5E2%2Bcx%2Bd&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='f(x) = ax^3 + bx^2+cx+d' title='f(x) = ax^3 + bx^2+cx+d' class='latex' \/> (in which case we would probably use control points <img src='https:\/\/s0.wp.com\/latex.php?latex=f%280%29&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='f(0)' title='f(0)' class='latex' \/>, <img src='https:\/\/s0.wp.com\/latex.php?latex=f%281%29&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='f(1)' title='f(1)' class='latex' \/>, <img src='https:\/\/s0.wp.com\/latex.php?latex=f%28i%29&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='f(i)' title='f(i)' class='latex' \/> and <img src='https:\/\/s0.wp.com\/latex.php?latex=f%281%2Bi%29&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='f(1+i)' title='f(1+i)' class='latex' \/>).<\/p>\n<p>We can even go all the way to <img src='https:\/\/s0.wp.com\/latex.php?latex=f%28x%29+%3D+ax%5E2+%2B+b%5Coverline%7Bx%7D%5E2+%2B+c%7Cx%7C%5E2+%2B+dx+%2B+e%5Coverline%7Bx%7D+%2B+g&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='f(x) = ax^2 + b\\overline{x}^2 + c|x|^2 + dx + e\\overline{x} + g' title='f(x) = ax^2 + b\\overline{x}^2 + c|x|^2 + dx + e\\overline{x} + g' class='latex' \/> (6 control points) if we wanted to go really crazy - that might be a bit unwieldy though.<\/p>\n<p>I'd also like to be able to associate a colour with each transformation so that the colour of a point in the final image depends on the sequence of transformations that led to that point. Perhaps <img src='https:\/\/s0.wp.com\/latex.php?latex=C+%3D+%5Calpha+C_%7Bprev%7D+%2B+%281-%5Calpha%29C_%7Btransform%7D&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='C = \\alpha C_{prev} + (1-\\alpha)C_{transform}' title='C = \\alpha C_{prev} + (1-\\alpha)C_{transform}' class='latex' \/> for some <img src='https:\/\/s0.wp.com\/latex.php?latex=%5Calpha&#038;bg=ffffff&#038;fg=000000&#038;s=0' alt='\\alpha' title='\\alpha' class='latex' \/>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I want to write a program that allows you to explore Iterated Function System (IFS) fractals interactively by moving points around with the mouse. There's a few different ways to do this, depending on what set of transformations you use. IFS fractals usually use affine transformations, which encompass translations, rotations, dilations and shears. This can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-1514","post","type-post","status-publish","format-standard","hentry","category-fractals"],"_links":{"self":[{"href":"https:\/\/www.reenigne.org\/blog\/wp-json\/wp\/v2\/posts\/1514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.reenigne.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.reenigne.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.reenigne.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.reenigne.org\/blog\/wp-json\/wp\/v2\/comments?post=1514"}],"version-history":[{"count":11,"href":"https:\/\/www.reenigne.org\/blog\/wp-json\/wp\/v2\/posts\/1514\/revisions"}],"predecessor-version":[{"id":1523,"href":"https:\/\/www.reenigne.org\/blog\/wp-json\/wp\/v2\/posts\/1514\/revisions\/1523"}],"wp:attachment":[{"href":"https:\/\/www.reenigne.org\/blog\/wp-json\/wp\/v2\/media?parent=1514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.reenigne.org\/blog\/wp-json\/wp\/v2\/categories?post=1514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.reenigne.org\/blog\/wp-json\/wp\/v2\/tags?post=1514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}