facundoq · August 14, 2013 00:29
diff --git a/mandelbrot-julia-fractal-js b/mandelbrot-julia-fractal-js
 <!DOCTYPE html>
 <html>
 <head>
 <title>Mandelbrot</title>
 <style>
 html, body { width: 100%; height: 100%; margin: 0; padding: 0}
 #leap-overlay { position: fixed; top: 0; left: 0;}
 </style>

 </head>
 <body>
 <div>
 <canvas id="c" width="100px" height="100px"></canvas>
 </div>

 <script>
 var c = document.getElementById("c");
 //c.style.webkitFilter = "blur(1px)";
 // fullscreen
 c.width = document.body.clientWidth;
 c.height = document.body.clientHeight;

 // create a rendering context
 var s = c.getContext("2d");
 //s.translate(canvas.width/2,canvas.height);
 console.log(c.width);
 console.log(c.height);

 var i=0.7;
 f= function(){
    	s.clearRect(0,0,c.width,c.height);	
 			mu={x:i,y:0.83};
 			plot(mu);				
 			i+=0.03;
 			if(i<0.9){
 					setTimeout(f,10)
 			}
 }
 setTimeout(f,10);

 function mandelbrot3(p){
 		x0=p.x*(3)-1.5;
 		y0=p.y*(3)-1.5;
 		
 		var x = 0;
  var y = 0;

  var iteration = 0;
  var max_iteration = 50;

  while ( x*x + y*y < 9  &&  iteration < max_iteration )
  {
    var xtemp = x*x*x - 3*y*y*x + x0;
    y = 3*x*x*y-y*y*y + y0;
    x = xtemp;
    iteration = iteration + 1;
  }
 		var color=(iteration*255/50);
 		return color;
 }


 function juliacos(p,mu){
 		rx=3;
 		ry=3;
 		x=p.x*(2*rx)-rx;
 		y=p.y*(2*ry)-ry;
  var iteration = 0;
  var max_iteration = 50;

 		
  while ( x*x + y*y < 144  &&  iteration < max_iteration )
  {
 		  var ey=Math.pow(Math.E, y)/2;
    var emy= Math.pow(Math.E, -y) /2;
 				var cy= ey+emy;
 				var sy=ey-emy;
 				
 				var xtemp = Math.cos(x)+cy+mu.x;
    y = -(Math.sin(y)+sy)+mu.y;
    x = xtemp;
    iteration = iteration + 1;
  }
 		var color=iteration*255/max_iteration;
 		//var color= ( x*x + y*y < 12)?255:1;
 		
 		return color;
 }

 function julia(p,mu){
 		rx=1.5;
 		ry=1.5;
 		x=p.x*(2*rx)-rx;
 		y=p.y*(2*ry)-ry;
 		
 		var dx = 0.60;
  var dy = 0.49123;

  var iteration = 0;
  var max_iteration = 50;

 		
  while ( x*x + y*y < 4  &&  iteration < max_iteration )
  {
    var xtemp = x*x - y*y+mu.x;
    y = 2*x*y +mu.y;
    x = xtemp;
    iteration = iteration + 1;
  }
 		var color=iteration*255/max_iteration;
 		//color= ( x*x + y*y < 4)?255:1;
 		
 		return color;
 }


 function mandelbrot(p){
 		x0=p.x*(3.5)-2.5;
 		y0=p.y*(2)-1;
 		
 		var x = 0;
  var y = 0;

  var iteration = 0;
  var max_iteration = 50;

  while ( x*x + y*y < 4  &&  iteration < max_iteration )
  {
    var xtemp = x*x - y*y + x0;
    y = 2*x*y + y0;
    x = xtemp;
    iteration = iteration + 1;
  }
 		var m=1000;
 		var color=m-(iteration*m/50);
 		return color;
 }

 function plot(mu){

 	console.log("Started");
 	
 	//	s.fillStyle = "rgba(60,0,0,1)";
 	// s.fillRect(0,0,c.width,c.height);
 ;
 	for (var i=1;i<c.width;i++){
 		for (var j=1;j<c.height;j++){
 		p={x:i/c.width,y:j/c.height};
 			color = juliacos(p,mu);
 			//s.fillStyle = "hsl("+color+",90%,40%)";
 			s.fillStyle = "hsl(260,90%,"+color+"%)";			
 			s.fillRect(i,j,1,1);
 			
 			
 		}
 	}
 	console.log("Finished");
 }


 function RGBToHSL(r, g, b) {
 	var
 	min = Math.min(r, g, b),
 	max = Math.max(r, g, b),
 	diff = max - min,
 	h = 0, s = 0, l = (min + max) / 2;
 
 	if (diff != 0) {
 		s = l < 0.5 ? diff / (max + min) : diff / (2 - max - min);
 
 		h = (r == max ? (g - b) / diff : g == max ? 2 + (b - r) / diff : 4 + (r - g) / diff) * 60;
 	}
 
 	return [h, s, l];
 }

 function HSLToRGB(h, s, l) {
 	if (s == 0) {
 		return [l, l, l];
 	}
 
 	var temp2 = l < 0.5 ? l * (1 + s) : l + s - l * s;
 	var temp1 = 2 * l - temp2;
 
 	h /= 360;
 
 	var
 	rtemp = (h + 1 / 3) % 1,
 	gtemp = h,
 	btemp = (h + 2 / 3) % 1,
 	rgb = [rtemp, gtemp, btemp,1],
 	i = 0;
 
 	for (; i < 3; ++i) {
 		rgb[i] = rgb[i] < 1 / 6 ? temp1 + (temp2 - temp1) * 6 * rgb[i] : rgb[i] < 1 / 2 ? temp2 : rgb[i] < 2 / 3 ? temp1 + (temp2 - temp1) * 6 * (2 / 3 - rgb[i]) : temp1;
 	}
 
 	return rgb;
 }

 function sinh(aValue)
   {
   var myTerm1 = Math.pow(Math.E, aValue);
   var myTerm2 = Math.pow(Math.E, -aValue);
   
   return (myTerm1-myTerm2)/2;
   }
 </script>

 <body>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Mandelbrot</title>
	<style>
	html, body { width: 100%; height: 100%; margin: 0; padding: 0}
	#leap-overlay { position: fixed; top: 0; left: 0;}
	</style>

	</head>
	<body>
	<div>
	<canvas id="c" width="100px" height="100px"></canvas>
	</div>

	<script>
	var c = document.getElementById("c");
	//c.style.webkitFilter = "blur(1px)";
	// fullscreen
	c.width = document.body.clientWidth;
	c.height = document.body.clientHeight;

	// create a rendering context
	var s = c.getContext("2d");
	//s.translate(canvas.width/2,canvas.height);
	console.log(c.width);
	console.log(c.height);

	var i=0.7;
	f= function(){
	s.clearRect(0,0,c.width,c.height);
	mu={x:i,y:0.83};
	plot(mu);
	i+=0.03;
	if(i<0.9){
	setTimeout(f,10)
	}
	}
	setTimeout(f,10);

	function mandelbrot3(p){
	x0=p.x*(3)-1.5;
	y0=p.y*(3)-1.5;

	var x = 0;
	var y = 0;

	var iteration = 0;
	var max_iteration = 50;

	while ( xx + yy < 9 && iteration < max_iteration )
	{
	var xtemp = xxx - 3yy*x + x0;
	y = 3xxy-yy*y + y0;
	x = xtemp;
	iteration = iteration + 1;
	}
	var color=(iteration*255/50);
	return color;
	}


	function juliacos(p,mu){
	rx=3;
	ry=3;
	x=p.x(2rx)-rx;
	y=p.y(2ry)-ry;
	var iteration = 0;
	var max_iteration = 50;


	while ( xx + yy < 144 && iteration < max_iteration )
	{
	var ey=Math.pow(Math.E, y)/2;
	var emy= Math.pow(Math.E, -y) /2;
	var cy= ey+emy;
	var sy=ey-emy;

	var xtemp = Math.cos(x)+cy+mu.x;
	y = -(Math.sin(y)+sy)+mu.y;
	x = xtemp;
	iteration = iteration + 1;
	}
	var color=iteration*255/max_iteration;
	//var color= ( xx + yy < 12)?255:1;

	return color;
	}

	function julia(p,mu){
	rx=1.5;
	ry=1.5;
	x=p.x(2rx)-rx;
	y=p.y(2ry)-ry;

	var dx = 0.60;
	var dy = 0.49123;

	var iteration = 0;
	var max_iteration = 50;


	while ( xx + yy < 4 && iteration < max_iteration )
	{
	var xtemp = xx - yy+mu.x;
	y = 2xy +mu.y;
	x = xtemp;
	iteration = iteration + 1;
	}
	var color=iteration*255/max_iteration;
	//color= ( xx + yy < 4)?255:1;

	return color;
	}


	function mandelbrot(p){
	x0=p.x*(3.5)-2.5;
	y0=p.y*(2)-1;

	var x = 0;
	var y = 0;

	var iteration = 0;
	var max_iteration = 50;

	while ( xx + yy < 4 && iteration < max_iteration )
	{
	var xtemp = xx - yy + x0;
	y = 2xy + y0;
	x = xtemp;
	iteration = iteration + 1;
	}
	var m=1000;
	var color=m-(iteration*m/50);
	return color;
	}

	function plot(mu){

	console.log("Started");

	// s.fillStyle = "rgba(60,0,0,1)";
	// s.fillRect(0,0,c.width,c.height);
	;
	for (var i=1;i<c.width;i++){
	for (var j=1;j<c.height;j++){
	p={x:i/c.width,y:j/c.height};
	color = juliacos(p,mu);
	//s.fillStyle = "hsl("+color+",90%,40%)";
	s.fillStyle = "hsl(260,90%,"+color+"%)";
	s.fillRect(i,j,1,1);


	}
	}
	console.log("Finished");
	}


	function RGBToHSL(r, g, b) {
	var
	min = Math.min(r, g, b),
	max = Math.max(r, g, b),
	diff = max - min,
	h = 0, s = 0, l = (min + max) / 2;

	if (diff != 0) {
	s = l < 0.5 ? diff / (max + min) : diff / (2 - max - min);

	h = (r == max ? (g - b) / diff : g == max ? 2 + (b - r) / diff : 4 + (r - g) / diff) * 60;
	}

	return [h, s, l];
	}

	function HSLToRGB(h, s, l) {
	if (s == 0) {
	return [l, l, l];
	}

	var temp2 = l < 0.5 ? l * (1 + s) : l + s - l * s;
	var temp1 = 2 * l - temp2;

	h /= 360;

	var
	rtemp = (h + 1 / 3) % 1,
	gtemp = h,
	btemp = (h + 2 / 3) % 1,
	rgb = [rtemp, gtemp, btemp,1],
	i = 0;

	for (; i < 3; ++i) {
	rgb[i] = rgb[i] < 1 / 6 ? temp1 + (temp2 - temp1) * 6 * rgb[i] : rgb[i] < 1 / 2 ? temp2 : rgb[i] < 2 / 3 ? temp1 + (temp2 - temp1) * 6 * (2 / 3 - rgb[i]) : temp1;
	}

	return rgb;
	}

	function sinh(aValue)
	{
	var myTerm1 = Math.pow(Math.E, aValue);
	var myTerm2 = Math.pow(Math.E, -aValue);

	return (myTerm1-myTerm2)/2;
	}
	</script>

	<body>