3d mandelbrot 2

gibney.org : Technology : Javascript : Experiments : 3d mandelbrot 2

(Entry Nr. 2081, by user 1 | edit)

<canvas id=canvas width=300 height=300 style='border: 1px solid #ff0000'></canvas>
<a id=startstoplink href=# onClick='DD.draw()'>start</a>

DD.pixelIteration=function(x,y,cx,cy)
{
 var xt = x * x - y * y + cx;
 var yt = 2 * x * y + cy;
 return [xt,yt];
}

DD.pixelColor=function(cx,cy)
{
 var bq = 0; 
 var i  = 0;
 var x  = 0; 
 var y  = 0;
 
 while ( bq < 4 && i < 25 )
 {
  [x,y]=this.pixelIteration(x,y,cx,cy);
  i++;
  bq = x * x + y * y;
 }
 return i;
}

DD.voxelColor=function(cx,cy,cz)
{
 var bq = 0; 
 var i  = 0;
 var x  = 0; 
 var y  = 0;
 var z  = 0;

var x1,x2,y1,y2,z1,z2;

[x,y]=this.pixelIteration(x,y,cx,cy);
 bq = x * x  + y * y  + z * z ;

while ( bq < 4 && i < 25 )
 {
  [x,z]=this.pixelIteration(x,y,cx,cz);
  [x,y]=this.pixelIteration(x,z,cx,cy);
  i++;
  bq = x * x  + y * y  + z * z ;
 }
 return i;

}

DD.drawPoint=function(x,y,c)
{
 if (c<100) return;
 // this.ctx.fillStyle = "rgb("+c+", "+c+", "+c+")";
 this.ctx.fillStyle = "rgb(128, 128, 128)";
 this.ctx.fillRect (this.x,y,1,1);

this.ctx.fillStyle = "rgb(255,255,255)";
 this.ctx.fillRect (this.x,y-1,1,1);

this.ctx.fillStyle = "rgb(200,200,200)";
 this.ctx.fillRect (this.x-1,y,1,1);

this.ctx.fillStyle = "rgb(0,0,0)";
 this.ctx.fillRect (this.x,y+1,1,1);

this.ctx.fillStyle = "rgb(50,50,50)";
 this.ctx.fillRect (this.x+1,y,1,1);

}

DD.drawLine = function()
{
 for (var y=0;y<300;y+=1)
 {
  var i = 10*this.voxelColor(this.x/100-2.2,y/100-1.5,this.z/100-1.5);
  this.drawPoint(this.x,y,i);
 }
 this.x++;
 if (this.x<300)
 {
  if (this.running) setTimeout("DD.drawLine()",0);
 }
 else
 {
  this.x=0;
  this.z+=10;
  if (this.z<600) setTimeout("DD.drawLine()",0);
 }
}

DD.start = function()
{
 this.drawLine();
}

DD.draw = function()
{
 if (this.running==false)
 {
  document.getElementById("startstoplink").innerHTML="stop";
  this.running=true;
  this.start();
 }
 else
 {
  document.getElementById("startstoplink").innerHTML="start";
  this.running=false;
 }
}

DD.ini=function()
{
 this.canvas = document.getElementById("canvas");
 this.ctx = this.canvas.getContext("2d");
 this.ctx.fillStyle = "rgb(0, 0, 100)";
 this.x=0;
 this.z=0;
}

DD.ini();
</script>

Create a new entry at this position