facundoq/mandelbrot-julia-fractal-js

## 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>