BarnCamp 2011 Workshop Notes

Baby

Z ->Z^2 + C

<canvas id="mset_canvas" width="320" height="240" style="float:left"></canvas>

var canvas =     
      document.getElementById("mset_canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#000000";
ctx.fillRect(ix,iy,1,1);

ALGORITHM: MsetLevel (cx, cy, maxiter)

BEGIN
	x:=y:=x2:=y2:=0.0
	iter:=0
	WHILE (iter<maxiter) AND (x2 + y2 < 10000.0) DO
		temp:=x2 – y2 + cx
		y:= 2 * x * y + cy
 		x:=temp
		x2:=x * x
		y2:=y * y
		iter:=iter+1
	END WHILE
	RETURN (iter)
END 

function compute_point(x,y,cx,cy,maxiter,thresh) {
  var x2 = x * x; var y2 = y * y;
  var iter = 0;
  while ( (iter < maxiter) &&
          ( (x2 + y2) < thresh) ) {
     var temp = x2 - y2 + cx;
     y = 2 * x * y + cy;
     x = temp;
     x2 = x * x;
     y2 = y * y;
     iter++;
   }
   return iter;
}

function mandelbrot() {
  var canvas = document.getElementById("mset_canvas");
  var ctx = canvas.getContext("2d");
  for (var iy = 0; iy < res_y; iy++) {
    var cy = y_min + iy * y_prop;
    for (var ix = 0; ix < res_x; ix++) {
      var cx = x_min + ix * x_prop;
      var x = 0.0; var y = 0.0;
      var iter = compute_point(x,y,cx,cy,maxiter,thresh);
      if(iter == maxiter) {
        // if we didn't get to infinity by the time we
        // used up all the iterations, then we're in the set
        // colour it black
        ctx.fillStyle = "#000000";
      } else {
        // otherwise colour it according to the number
        // of iterations it took to get to infinity (thresh)
        ctx.fillStyle = pallette[iter % num_colours];
      }
      ctx.fillRect(ix,iy,1,1);
   }
  }
}

#!/usr/bin/perl
#
#
# $Id: mandelbrot.pl,v 1.3 2005-03-11 17:23:26 adelayde Exp $
# Revision: $Revision: 1.3 $
# Author  : $Author: adelayde $
# Date    : $Date: 2005-03-11 17:23:26 $
#
# $Log: mandelbrot.pl,v $
# Revision 1.3  2005-03-11 17:23:26  adelayde
# Lowered res again to 320x240
#
# Revision 1.2  2005/03/11 17:13:27  adelayde
# Fixed quadratic equations
#

use CGI;

# preparar p?gina web

my $cgi = new CGI;
print $cgi->header . $cgi->start_html(-title => 'Conjunt de Mandelbrot',
				      -style=>{-src=>['/fractals/styles.css']});

print '<table border="0" cellspacing="0" cellpadding="0">';

# colors
my @pallette = ("#000033","#000066","#000099","#0000CC","#0000FF","#330000","#330033","#330066","#330099","#3300CC","#660000","#660033","#660066","#660099","#6600CC","#6600FF","#990033","#990066","#990099","#9900CC","#9900FF","#CC0033","#CC0066","#CC00CC","#CC00FF","#FF00FF");
my $num_colours = scalar @pallette;

# M?todo MSetLSM
my $nx = 320; # resolucion en x
my $ny = 240; # resolucion en y

my $xmin = -2.5; # valor m?nimo en plano real
my $xmax = 0.8; # valor m?ximo en plano real
my $ymin = -1.25; # valor m?nimo en plano imaginario
my $ymax = 1.25; # valor m?ximo en plano imaginario
my $maxiter = 60; # n?mero m?ximo de iteraciones
my $limite = 10000.00; # l?mite considerado y valor tiende a infinidad

my $xprop = ($xmax - $xmin) / ($nx - 1);
my $yprop = ($ymax - $ymin) / ($ny - 1);

for(my $iy = 0; $iy < $ny; $iy++) {

    my $cy = $ymin + $iy * $yprop;

    print '<tr style="height: 1px;">';

    for(my $ix = 0; $ix < $nx; $ix++) {

	my $cx = $xmin + $ix * $xprop;

	# iteraci?n
	# formula es z -> z^2 + c

	my ($x, $y, $x2, $y2) = (0.0, 0.0, 0.0, 0.0);
	my $iter = 0;

	while( ($iter < $maxiter) && (($x2 + $y2) < $limite)) {

	    my $temp = $x2 - $y2 + $cx;
	    $y = 2 * $x * $y + $cy;
	    $x = $temp;
	    $x2 = $x * $x;
	    $y2 = $y * $y;

	    $iter++;
	}
	
	if ($iter == $maxiter) {
	    print '<td> </td>';
	} else {
	    print '<td style="background:' . $pallette[$iter % $num_colours] . '"> </td>';
	}
    }

    print '</tr>';

}

print '</table>' . $cgi->end_html;

exit(0);

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 5 Mandelbrot set and Julia set explorer</title>
    <script type="application/x-javascript" src="fractal.js"></script>
    <style>
      h1 {
      font-size:1.2em;
      }
      
      h2 {
      font-size:1.0em;
      }
      
      p {
      font-size:0.8em;
      }
      
      address {
      font-size:0.6em;
      }
    </style>
  </head>
  <body onload="mandelbrot()" onkeypress=keycommandprocessor()>
    <h1>Mandelbrot Set > Julia Set Explorer</h1>
    <h2>written by Mike Harris, based on algorithms in The Science of Fractal Images</h2>
    <p>Click on any point in the Mandelbrot set on left to see the corresponding Julia set on the right and the co-ordinates below.</p>
    <p>colouring method: 
      <select id="method" name="method">
	<option value="lsm" selected="selected">Level Set Method (LSM)</option>
	<option value="bdm">Binary Decomposition Method (BDM)</option>
      </select>
      <button onclick="mandelbrot()">reload</button>
    </p>
    <canvas id="mset_canvas" width="480" height="320" style="float:left" onclick="setcoords(event,this);julia(event,this)"></canvas> 
    <canvas id="jset_canvas" width="480" height="320"></canvas>
    <br/>
    cx: <input type="text" value="" name="cx" id="cx" value="0.0" />
    cy: <input type="text" value="" name="cy" id="cy" value="0.0" /> <button onclick="julia(event,this)">redraw julia set</button>
   <p>There's also an archive of old Fractal work I did with Dan Grace back in the Eighties on the <a href="/fe3">Fractal Engine archive site</a>.</p>
   <hr/>
   <address>(c) 2009-2011 Mike Harris.  Free software released under GNU Public Licence.  Feel free to view the source, <a href="fractal.js">download and hack this code</a>.  Also there's a <a href="mandelbrot.pl">Perl verion that'll render the MSet using HTML table tags (run this on your own machine)</a>.</address>
  </body>
</html>

//
// JavaScript methods to draw Mandelbrot and Julia Sets
//
// Written by mike@mbharris.co.uk
//
// version 1.1 - featuring LSM and BDM methods
//
// (c) 2009-2011 Mike Harris.  
// Free software released under GNU Public Licence.
//

// set up a colour pallette for colouring the levels outside the set itself
var pallette = new Array("#000033","#000066","#000099","#0000CC","#0000FF","#330000","#330033","#330066","#330099","#3300CC","#660000","#660033","#660066","#660099","#6600CC","#6600FF","#990033","#990066","#990099","#9900CC","#9900FF","#CC0033","#CC0066","#CC00CC","#CC00FF","#FF00FF");

var num_colours = pallette.length;

// set up of 'screen' resolution, the size of our <canvas>
var res_x = 480; // resolution in pixels of x axis
var res_y = 320; // resolution in pixels of y axis

// set up the size of our real and imaginary planes      
var x_min = -2.5;  // minimum value in real plane
var x_max = 0.8;   // maximum value in real plane
var y_min = -1.25; // minimum value in imaginary plane
var y_max = 1.25;  // maximum value in imaginary plane

// calculate the proportion in the difference between the points
// on the mathematical plane and the actual screen resolution	
var x_prop = (x_max - x_min) / (res_x -1);
var y_prop = (y_max - y_min) / (res_y -1);

var maxiter = 60;      // maximum number of iterations
var thresh = 10000.00; // threashold above which value is considered to tend to infinity
                       // the coloured bands on the outside of our Mandelbrot Set are
                       // a measure of how soon the values become unstable and hence the
                       // point on the plane is not within the set itself, not bounded by the set

function compute_point(point,cx,cy,maxiter,thresh) {
    var x2 = point.x * point.x; var y2 = point.y * point.y;
    var iter = 0;
    
    while ( (iter < maxiter) && ( (x2 + y2) < thresh) ) {
	var temp = x2 - y2 + cx;
	point.y = 2 * point.x * point.y + cy;
	point.x = temp;
	x2 = point.x * point.x;
	y2 = point.y * point.y;
	iter++;
    }
    return iter;
}

function mandelbrot() {
    var method = document.getElementById('method').value;
    switch(method) {
    case 'bdm':
	mandelbrot_bdm();
	break;
    case 'lsm':
    default:
	mandelbrot_lsm();
	break;
    }
}

// draw the mandelbrot set using the Level Set Method
function mandelbrot_lsm() {
    var canvas = document.getElementById("mset_canvas");
    var ctx = canvas.getContext("2d");
    
    for (var iy = 0; iy < res_y; iy++) {
	
	var cy = y_min + iy * y_prop;
	
	for (var ix = 0; ix < res_x; ix++) {
	    
	    var cx = x_min + ix * x_prop;
	    var point = {x:0.0,y:0.0};
	    var iter = compute_point(point,cx,cy,maxiter,thresh);
	    
	    if(iter == maxiter) {
		// if we didn't get to infinity by the time we
		// used up all the iterations, then we're in the set
		// colour it bloack
		ctx.fillStyle = "#000000";
	    } else {
		// otherwise colour it according to the number
		// of iterations it took to get to infinity (thresh)
		ctx.fillStyle = pallette[iter % num_colours];
	    }
	    ctx.fillRect(ix,iy,1,1);
	}
    }
}

// draw the mandelbrot set using the Binary Decomposition Method
function mandelbrot_bdm() {
    var canvas = document.getElementById("mset_canvas");
    var ctx = canvas.getContext("2d");
    
    for (var iy = 0; iy < res_y; iy++) {
	
	var cy = y_min + iy * y_prop;
	
	for (var ix = 0; ix < res_x; ix++) {
	    
	    var cx = x_min + ix * x_prop;
	    var point = {x:0.0,y:0.0};
	    var iter = compute_point(point,cx,cy,maxiter,thresh);
	    
	    if(iter == maxiter) {
		// if we didn't get to infinity by the time we
		// used up all the iterations, then we're in the set
		// colour it bloack
		ctx.fillStyle = "#000000";
	    } else {
		// color it depending on the angle of alpha
		var alpha = Math.atan(point.y);
		if ((alpha >= 0) && (alpha <=3)) {
		    ctx.fillStyle = "#fff";
		} else {
		    ctx.fillStyle = "#000";
		}
	    }
	    ctx.fillRect(ix,iy,1,1);
	}
    }
}

function julia() {
    var method = document.getElementById("method").value;
    switch(method) {
    case 'bdm':
	julia_bdm();
	break;
    case 'lsm':
    default:
	julia_lsm();
	break;
    }
}

function julia_lsm() {
    var canvas = document.getElementById("jset_canvas");
    var ctx = canvas.getContext("2d");
    var color_method = "lsm";

    var x_min = -2.25;
    var x_max = 2.25;
    var y_min = -1.8;
    var y_max = 1.8;
    
    var x_prop = (x_max - x_min) / (res_x -1);
    var y_prop = (y_max - y_min) / (res_y -1);
    
    // note these must use the Number object to 'cast' the
    // values to numbers (rather than strings)
    var cx = new Number(document.getElementById('cx').value);
    var cy = new Number(document.getElementById('cy').value);
    
    for (var iy = 0; iy < res_y; iy++) {
	
	var y = y_min + iy * y_prop;
	for (var ix = 0; ix < res_x; ix++) {
	    
	    var point = {x:x_min + ix * x_prop,y:y};
	    var iter = compute_point(point,cx,cy,maxiter,thresh);
	    
	    if(iter == maxiter) {
		// if we didn't get to infinity by the time we
		// used up all the iterations, then we're in the set
		// colour it bloack
		ctx.fillStyle = "#000000";
	    } else {
		// otherwise colour it according to the number
		// of iterations it took to get to infinity (thresh)
		ctx.fillStyle = pallette[iter % num_colours];
	    }
	    
	    ctx.fillRect(ix,iy,1,1);
	}
    }
}

function julia_bdm() {
    var canvas = document.getElementById("jset_canvas");
    var ctx = canvas.getContext("2d");

    var x_min = -2.25;
    var x_max = 2.25;
    var y_min = -1.8;
    var y_max = 1.8;
    
    var x_prop = (x_max - x_min) / (res_x -1);
    var y_prop = (y_max - y_min) / (res_y -1);
    
    // note these must use the Number object to 'cast' the
    // values to numbers (rather than strings)
    var cx = new Number(document.getElementById('cx').value);
    var cy = new Number(document.getElementById('cy').value);
    
    for (var iy = 0; iy < res_y; iy++) {
	
	var y = y_min + iy * y_prop;
	for (var ix = 0; ix < res_x; ix++) {
	    
	    var point = {x:x_min + ix * x_prop,y:y};
	    var iter = compute_point(point,cx,cy,maxiter,thresh);
	    	    
	    if(iter == maxiter) {
		// if we didn't get to infinity by the time we
		// used up all the iterations, then we're in the set
		// colour it bloack
		ctx.fillStyle = "#000000";
	    } else {
		// color it depending on the angle of alpha
		var alpha = Math.atan(point.y);
		if ((alpha >= 0) && (alpha <=3)) {
		    ctx.fillStyle = "#fff";
		} else {
		    ctx.fillStyle = "#000";
		}
	    }
	    
	    ctx.fillRect(ix,iy,1,1);
	}
    }
}

function setcoords(evt, obj) {
    
  var x_pos = evt.clientX - obj.offsetLeft;
  var y_pos = evt.clientY - obj.offsetTop;
  
  var cx = x_min + x_pos * x_prop;
  var cy = y_min + y_pos * y_prop;
  
  document.getElementById('cx').value = cx;
  document.getElementById('cy').value = cy;
  
}

BarnCamp 2011 Workshop Notes

Contents

Encrypted email using Thunderbird

Why & how to set up an non-corporate anonymous blogging hosting service

Why set up this type of blog services?

Why WP network instead of separate installs?

How it was done

Features

Server resources required

How to make a Network 23 site

Limitations for Network 23

Ways forward

Luddites and Technology

The HTML 5 <canvas> element as seen through a fractal eye: a brief introduction

What is a fractal?

Types of fractals

The people behind the fractals

Gaston Juila

Benôit Mandelbrot

HTML 5

The <canvas> element

The Mandelbrot Set - Mandelbrot's Baby

Some hard sums

Coding the Mandelbrot set

An algorithm

The algorithm in JavaScript

Plotting our shape

Appendix

A Perl script to produce it using tags

Full coding example in HTML and JavaScript

Navigation menu

Search