Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Draw fractals based on Mandelbrot and Julia sets in Javascript. Could use some cleanup. Change line 149 by calling other functions to change the fractal drawn.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.