I did a quick port of a «graphic demo» called «metatunnel» (created by FRequency).
Paulo Falcão ported this to Javascript using canvas.
To make the set complete I ported Paulos JS version to Actionscript, just quick’n'dirty.
Click on it to start the animation:
Here’s the code:
package test { import flash.display.Bitmap; import flash.display.BitmapData; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; public class JSCanvasPort extends Sprite { public function JSCanvasPort() { super(); addChild( canvas = new Bitmap() ); canvas.smoothing = false; canvas.scaleX = canvas.scaleY = 2; draw(); addEventListener( MouseEvent.CLICK , handleClick ); } private var playing:Boolean = false; public function handleClick( e:Event = null ) : void { if ( playing ) removeEventListener( Event.ENTER_FRAME , enterframe ); else addEventListener( Event.ENTER_FRAME , enterframe ); playing = !playing; } public function enterframe( e:Event=null ) : void { draw(); } public var time:Number=0; public var maxr:Number=64.0; public var canvas:Bitmap; public function distance(ax:Number,ay:Number,az:Number,bx:Number,by:Number,bz:Number):Number{ var dx:Number=bx-ax , dy:Number=by-ay , dz:Number=bz-az; return Math.sqrt( dx*dx + dy*dy + dz*dz ); } public function obj(x:Number,y:Number,z:Number,t:Number):Number{ var f:Number=1.0; f*=distance(x,y,z,Math.cos(t)+Math.sin(t*0.2),0.3,2.0+Math.cos(t*0.5)*0.5); f*=distance(x,y,z,-Math.cos(t*0.7),0.3,2.0+Math.sin(t*0.5)); f*=distance(x,y,z,-Math.sin(t*0.2)*0.5,Math.sin(t),2.0); f*=Math.cos(y)*Math.cos(x)-0.1-Math.cos(z*7.0+t*7.0)*Math.cos(x*3.0)*Math.cos(y*4.0)*0.1; return f; } public function eval(x:Number,y:Number,t:Number):uint{ var vx:Number=x*2.0-1.0; var vy:Number=-y*2.0+1.0; var s:Number=0.4; var ox:Number=vx;var oy:Number=vy*1.25;var oz:Number=0.0; var dx:Number=(vx+Math.cos(t)*0.3)/64.0;var dy:Number=vy/64.0;var dz:Number=1.0/64.0; var tt:Number=0.0; var g:Number=1.0; while((g>s)&&(tt<375)){ g=obj(ox+dx*tt,oy+dy*tt,oz+dz*tt,t); tt+=g*4; }; var color:Number=0.0; var dxtt:Number=ox+dx*tt;var dytt:Number=oy+dy*tt;var dztt:Number=oz+dz*tt; var objd:Number=obj(dxtt,dytt,dztt,t); var nx:Number=objd-obj(dxtt+0.01,dytt,dztt,t); var ny:Number=objd-obj(dxtt,dytt+0.01,dztt,t); var nz:Number=objd-obj(dxtt,dytt,dztt+0.01,t); var d:Number=Math.sqrt(nx*nx+ny*ny+nz*nz);ny=ny/d;nz=nz/d; color+=Math.max(-0.5*nz,0.0)+Math.max(-0.5*ny+0.5*nz,0.0)*0.5; var r:Number=(color+0.1*tt*0.025); var g:Number=(color+0.2*tt*0.025); var b:Number=(color+0.5*tt*0.025); return getRGB(r,g,b); } public function getRGB(r:Number,g:Number,b:Number):uint{ if (r<0) r=0; else if (r>1) r=1; if (g<0) g=0; else if (g>1) g=1; if (b<0) b=0; else if (b>1) b=1; return ((r*255)&255) << 16 | ((g*255)&255) << 8 | ((b*255)&255); } public function draw():void{ if ( canvas.bitmapData == null ) { canvas.bitmapData = new BitmapData( maxr , maxr , false , 0xffffff ); } var t:BitmapData = canvas.bitmapData; time+=0.1; t.lock(); for(var x:Number=0;x<maxr;x++){ var px:Number=x/maxr; for(var y:Number=0;y<maxr;y++){ var py:Number=y/maxr; t.setPixel( x , y , eval(px,py,time) ); } } t.unlock(); }; } }
Update: A quickly optimized version (nothing advanced really).
(You can switch quality in this version with key up or down).
No Comments, Comment or Ping
Reply to “Metatunnel 1k Demo: AS vs. JS”