Rendering Fractals

Rendering fractals using iterated function system

by Gabriel Ambrósio Archanjo

HTML

by <a href="https://www.marvinj.org">www.marvinj.org</a></br>
<script src="https://www.marvinj.org/releases/marvinj-1.0.js"></script>
<div style="display:flex; margin-top:5px;">
  <div class="panelL">
    <button onclick="itfFractal(ITF_DRAGON)">Dragon</button><br/>
    <button onclick="itfFractal(ITF_TREE)">Tree</button><br/>
    <button onclick="itfFractal(ITF_BARNSLEY_LEAF)">Barnsley Leaf</button><br/>
    <button onclick="itfFractal(ITF_MAPPLE_LEAF)">Mapple Leaf</button><br/>
  </div>
  <div class="panelR">
    <canvas id="canvas" width="600" height="400"></canvas><br/>
  </div>
</div>

CSS

body { font-size: 12px; }

button {
  margin-bottom: 8px;
  width: 150px;
}

.panelL {
  width: 150px;
  height: 400px;
  display: inline-block;
  border: 1px solid #dedede;
}

.panelR {
  width: 600px;
  height: 400px;
  display: inline-block;
  border: 1px solid #dedede;
}

JavaScript

var canvas = document.getElementById("canvas");
var image = new MarvinImage(600,400);

function itfFractal(rules){
  console.log("render");
	image.clear();
	Marvin.iteratedFunctionSystem(image.clone(), image, rules[0], rules[1]);
	image.draw(canvas);
  
}

// FRACTAL RULES
// Barnsley Leaf
var ITF_BARNSLEY_LEAF = [	"0,0,0,0.16,0,0,0.01\n"+
				"0.85,0.04,-0.04,0.85,0,1.6,0.85\n"+
				"0.2,-0.26,0.23,0.22,0,1.6,0.07\n"+
				"-0.15,0.28,0.26,0.24,0,0.44,0.07", 1000000];

// Mapple Leaf - by Paul Bourke (2002)			
var ITF_MAPPLE_LEAF = ["0.14, 0.01, 0, 0.51, -0.08, -1.31, 0.25\n" + 
			 "0.43, 0.52, -0.45, 0.5, 1.49, -0.75, 0.25\n" +
			 "0.45, -0.49, 0.47, 0.47, -1.62, -0.74, 0.25\n" +
			 "0.49, 0, 0, 0.51, 0.02, 1.62, 0.25", 5000000];
			 
// Dragon - by Paul Bourke (2002)
var ITF_DRAGON = [	"0.824074, 0.281428, -0.212346, 0.864198, -1.882290, -0.110607, 0.8\n"+
				"0.088272, 0.520988, -0.463889, -0.377778, 0.785360, 8.095795, 0.2", 1000000];

// Tree - by Paul Bourke (1999)				
var ITF_TREE = [	"0.0500, 0.0000, 0.0000, 0.4000, -0.0600, -0.4700, 0.1428\n"+
				"-0.0500, 0.0000, 0.0000, -0.4000, -0.0600, -0.4700, 0.1428\n"+
				"0.0300, -0.1400, 0.0000, 0.2600, -0.1600, -0.0100, 0.1428\n"+
				"-0.0300, 0.1400, 0.0000, -0.2600, -0.1600, -0.0100, 0.1428\n"+
				"0.5600, 0.4400, -0.3700, 0.5100, 0.3000, 0.1500, 0.1428\n"+
				"0.1900, 0.0700, -0.1000, 0.1500, -0.2000, 0.2800, 0.1428\n"+
				"-0.3300, -0.3400, -0.3300, 0.3400, -0.5400, 0.3900, 0.1428", 1000000];
        
itfFractal(ITF_DRAGON);