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> <script> DD= { running: false }; 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