DIR : /home/kozerus/public_html/cropex/fun/index_neave_pi_best.html /home/kozerus/public_html/cropex/fun <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>index_konabus.html 20180505_2400</title> <style> body { // background-color: lightblue; // background-color: black; background-color: darkslategrey; background-color: linen; // color: black; color: white; // font-size:62.5%; font-size:48px; // font-family: yokkmokkOT; font-size: 38pt; } // h1 { font-size: 2.4em; } /* =24px */ h1 { font-size: 58pt; } /* =24px */ h2 { font-size: 12pt; } /* =24px */ p { font-size: 10pt; } /* =14px */ li { font-size: 20pt; } /* =14px? */ } </style> <script name="neave_pixeldust2_js" > (function(){window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){setTimeout(callback,1000/60);}; function FluidField(){ var iterations=4,dt=0.05,damp=0.99,dens,dens_prev,u,u_prev,v,v_prev,width,height,rowSize,size;function Field(dens,u,v){this.getDensity=function(x,y){return dens[(x+1)+(y+1)*rowSize];};this.setDensity=function(x,y,d){dens[(x+1)+(y+1)*rowSize]=d;};this.setVelocity=function(x,y,xv,yv){u[(x+1)+(y+1)*rowSize]=xv;v[(x+1)+(y+1)*rowSize]=yv;};} function addFields(x,s){ for(var i=size;i--;)x[i]+=s[i]*dt;} function setBoundary(b,x){if(b===1){ for( var i=1;i<=width;i++){x[i]=x[i+rowSize];x[i+(height+1)*rowSize]=x[i+height*rowSize];} for(var j=1;i<=height;i++){x[j*rowSize]=-x[1+j*rowSize];x[(width+1)+j*rowSize]=-x[width+j*rowSize];}}else if(b===2){ for(var i=1;i<=width;i++){x[i]=-x[i+rowSize];x[i+(height+1)*rowSize]=-x[i+height*rowSize];} for(var j=1;j<=height;j++){x[j*rowSize]=x[1+j*rowSize];x[(width+1)+j*rowSize]=x[width+j*rowSize];}}else{ for(var i=1;i<=width;i++){x[i]=x[i+rowSize];x[i+(height+1)*rowSize]=x[i+height*rowSize];} for(var j=1;j<=height;j++){x[j*rowSize]=x[1+j*rowSize];x[(width+1)+j*rowSize]=x[width+j*rowSize];}} var maxEdge=(height+1)*rowSize;x[0]=0.5*(x[1]+x[rowSize]);x[maxEdge]=0.5*(x[1+maxEdge]+x[height*rowSize]);x[(width+1)]=0.5*(x[width]+x[(width+1)+rowSize]);x[(width+1)+maxEdge]=0.5*(x[width+maxEdge]+x[(width+1)+height*rowSize]);} function diffuse(b,x,x0){ var a=0;solveLinear(b,x,x0,a,1+4*a);} function diffuse2(x,x0,y,y0){ var a=0;solveLinear2(x,x0,y,y0,a,4*a+1);} function solveLinear(b,x,x0,a,c){if(a===0&&c===1){ for(var j=1;j<=height;j++){var currentRow=j*rowSize;currentRow++; for(var i=0;i<width;i++){x[currentRow]=x0[currentRow];currentRow++;}} setBoundary(b,x);} else{var invC=1/c; for(var k=0;k<iterations;k++){ for(var j=1;j<=height;j++){var lastRow=(j-1)*rowSize;var currentRow=j*rowSize;var nextRow=(j+1)*rowSize;var lastX=x[currentRow];currentRow++; for(var i=1;i<=width;i++){lastX=x[currentRow]=(x0[currentRow]+a*(lastX+x[++currentRow]+x[++lastRow]+x[++nextRow]))*invC;}} setBoundary(b,x);}}} function solveLinear2(x,x0,y,y0,a,c){if(a===0&&c===1){ for(var j=1;j<=height;j++){var currentRow=j*rowSize;currentRow++; for(var i=0;i<width;i++){x[currentRow]=x0[currentRow];y[currentRow]=y0[currentRow];currentRow++;}} setBoundary(1,x);setBoundary(2,y);} else{var invC=1/c; for(var k=0;k<iterations;k++){ for(var j=1;j<=height;j++){var lastRow=(j-1)*rowSize;var currentRow=j*rowSize;var nextRow=(j+1)*rowSize;var lastX=x[currentRow];var lastY=y[currentRow];currentRow++; for(var i=1;i<=width;i++){lastX=x[currentRow]=(x0[currentRow]+a*(lastX+x[currentRow]+x[lastRow]+x[nextRow]))*invC;lastY=y[currentRow]=(y0[currentRow]+a*(lastY+y[++currentRow]+y[++lastRow]+y[++nextRow]))*invC;}} setBoundary(1,x);setBoundary(2,y);}}} function advect(b,d,d0,u,v){var wdt0=width*dt,hdt0=height*dt,wp5=width+0.5,hp5=height+0.5; for(var j=1;j<=height;j++){var pos=j*rowSize; for(var i=1;i<=width;i++){var x=i-wdt0*u[++pos],y=j-hdt0*v[pos];if(x<0.5)x=0.5;else if(x>wp5)x=wp5;var i0=x|0,i1=i0+1;if(y<0.5)y=0.5;else if(y>hp5)y=hp5;var j0=y|0,j1=j0+1,s1=x-i0,s0=1-s1,t1=y-j0,t0=1-t1,row1=j0*rowSize,row2=j1*rowSize;d[pos]=s0*(t0*d0[i0+row1]+t1*d0[i0+row2])+s1*(t0*d0[i1+row1]+t1*d0[i1+row2]);}} setBoundary(b,d);} function project(u,v,p,div){var h=-0.5/Math.sqrt(width*height); for(var j=1;j<=height;j++){var row=j*rowSize,prevRow=(j-1)*rowSize,prevValue=row-1,currentRow=row,nextValue=row+1,nextRow=(j+1)*rowSize; for(var i=1;i<=width;i++){div[++currentRow]=h*(u[++nextValue]-u[++prevValue]+v[++nextRow]-v[++prevRow]);p[currentRow]=0;}} setBoundary(0,div);setBoundary(0,p);solveLinear(0,p,div,1,4);var wScale=0.5*width,hScale=0.5*height; for(var j=1;j<=height;j++){var prevPos=j*rowSize-1,currentPos=j*rowSize,nextPos=j*rowSize+1,prevRow=(j-1)*rowSize,currentRow=j*rowSize,nextRow=(j+1)*rowSize; for(var i=1;i<=width;i++){u[++currentPos]-=wScale*(p[++nextPos]-p[++prevPos]);v[currentPos]-=hScale*(p[++nextRow]-p[++prevRow]);}} setBoundary(1,u);setBoundary(2,v);} function densityStep(x,x0,u,v){addFields(x,x0);diffuse(0,x0,x);advect(0,x,x0,u,v);} function velocityStep(u,v,u0,v0){addFields(u,u0);addFields(v,v0);var temp=u0;u0=u;u=temp;temp=v0;v0=v;v=temp;diffuse2(u,u0,v,v0);project(u,v,u0,v0);temp=u0;u0=u;u=temp;temp=v0;v0=v;v=temp;advect(1,u,u0,u0,v0);advect(2,v,v0,u0,v0);project(u,v,u0,v0);} this.update=function(){ for(var i=size;i--;){u_prev[i]=v_prev[i]=dens_prev[i]=0;dens[i]*=damp;} updateFrame(new Field(dens_prev,u_prev,v_prev));velocityStep(u,v,u_prev,v_prev);densityStep(dens,dens_prev,u,v);drawFrame(new Field(dens,u,v));};this.reset=function(){rowSize=width+2;size=(width+2)*(height+2);dens=new Array(size);dens_prev=new Array(size);u=new Array(size);u_prev=new Array(size);v=new Array(size);v_prev=new Array(size); for(var i=size;i--;){dens_prev[i]=u_prev[i]=v_prev[i]=dens[i]=u[i]=v[i]=0;}}; this.setResolution=function(w,h){width=w;height=h;this.reset();};} var get=document.querySelector.bind(document),on=document.addEventListener.bind(document), canvas,context,scale,displayWidth,displayHeight,fieldSize=4,fieldWidth,fieldHeight,omx=0,omy=0,mx=0,my=0,density=200,drawing=false,buffer,bufferData,fluid;function initBuffer(){} function updateFrame(field){if(drawing){ var dx=mx-omx,dy=my-omy,length=(Math.sqrt(dx*dx+dy*dy)+0.5)|0;if(length<1)length=1; for(var i=length;i--;){ var x=((omx+dx*i/length)/displayWidth*fieldWidth)|0,y=((omy+dy*i/length)/displayHeight*fieldHeight)|0;field.setVelocity(x,y,dx,dy);field.setDensity(x,y,density);} omx=mx;omy=my;}} function drawFrame(field){ for( var x=fieldWidth;x--;){ for(var y=fieldHeight;y--;){bufferData[(y*fieldWidth+x)*4+Math.floor(Math.random()*3)]=field.getDensity(x,y)*0xff;}} context.putImageData(buffer,0,0);} function updateFluid(){updateID=requestAnimationFrame(updateFluid);fluid.update();} function getNormHeight(){return innerHeight/fieldHeight/fieldSize;} function getNormWidth(){return innerWidth/fieldWidth/fieldSize;} function setSize(){ displayWidth=Math.round(innerWidth)+500; displayHeight=Math.round(innerHeight); omx=displayWidth/2; omy=displayHeight/2; mx=omx+(Math.random()-0.5)*4; my=omy+(Math.random()-0.5)*4; fieldWidth=Math.round(displayWidth/fieldSize); fieldHeight=Math.round(displayHeight/fieldSize); canvas.width=fieldWidth; canvas.height=fieldHeight; } function init(){ canvas=get('canvas');try{context=canvas.getContext('2d');}catch(e){get('.alt').style.display='block';return; } setSize(); var bufferCanvas=document.createElement('canvas'); bufferCanvas.width=fieldWidth; bufferCanvas.height=fieldHeight; try{buffer=bufferCanvas.getContext('2d').createImageData(fieldWidth,fieldHeight); bufferData=buffer.data; var size=fieldWidth*fieldHeight*4; for(var i=3;i<size;i+=4){bufferData[i]=0xff;}}catch(e){get('.alt').style.display='block';return;} canvas.style.display='block'; if(get('body.mobile')){ canvas.ontouchstart=function(event){drawing=true;omx=mx=event.changedTouches[0].clientX/getNormWidth();omy=my=event.changedTouches[0].clientY/getNormHeight();event.preventDefault();}; canvas.ontouchmove=function(event){mx=event.changedTouches[0].clientX/getNormWidth();my=event.changedTouches[0].clientY/getNormHeight();}; canvas.ontouchend=function(){drawing=false;};}else{ canvas.onmousemove=function(event){mx=event.clientX/getNormWidth();my=event.clientY/getNormHeight();};} fluid=new FluidField();fluid.setResolution( canvas.width,canvas.height);drawing=true;updateFluid();} on('DOMContentLoaded',init);}()); </script id=neave_pixeldust2_js_end>     </head> <body bgcolor=linen>     <canvas width=1200 height=800" style="display: block;"></canvas> </body> </html>

Drag mouse to navigate.

Navigation

Left/Right Mouse drag: Changes camera heading.
Up/Sown Mouse drag: Changes camera pitch.
Scroll wheel: Changes camera field of view.
I-Key: Displays Info panel with canvas size, image size and FPS.

17.Aug.2010, Martin Wengenmayer

koh5_pano

Navigation