Fire JS Bin - Deep-Sea-Stress

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

// stats.js r4 - http://github.com/mrdoob/stats.js
var Stats=function(){var m,g="fps",q=0,s=new Date().getTime(),o=s,e=s,j=0,d=1000,f=0,l,b,c,p,h=0,t=1000,a=0,n,k,r,i;m=document.createElement("div");m.style.fontFamily="Helvetica, Arial, sans-serif";m.style.fontSize="9px";m.style.backgroundColor="#000020";m.style.opacity="0.9";m.style.width="80px";m.style.paddingTop="2px";m.style.cursor="pointer";m.addEventListener("click",u,false);l=document.createElement("div");l.innerHTML="<strong>FPS</strong>";l.style.color="#00ffff";l.style.marginLeft="3px";l.style.marginBottom="3px";m.appendChild(l);b=document.createElement("canvas");b.width=74;b.height=30;b.style.display="block";b.style.marginLeft="3px";b.style.marginBottom="3px";m.appendChild(b);c=b.getContext("2d");c.fillStyle="#101030";c.fillRect(0,0,b.width,b.height);p=c.getImageData(0,0,b.width,b.height);n=document.createElement("div");n.innerHTML="<strong>MS</strong>";n.style.color="#00ffff";n.style.marginLeft="3px";n.style.marginBottom="3px";n.style.display="none";m.appendChild(n);k=document.createElement("canvas");k.width=74;k.height=30;k.style.display="block";k.style.marginLeft="3px";k.style.marginBottom="3px";k.style.display="none";m.appendChild(k);r=k.getContext("2d");r.fillStyle="#101030";r.fillRect(0,0,k.width,k.height);i=r.getImageData(0,0,k.width,k.height);function v(B,A){var w,C,z;for(C=0;C<30;C++){for(w=0;w<73;w++){z=(w+C*74)*4;B[z]=B[z+4];B[z+1]=B[z+5];B[z+2]=B[z+6]}}for(C=0;C<30;C++){z=(73+C*74)*4;if(C<A){B[z]=16;B[z+1]=16;B[z+2]=48}else{B[z]=0;B[z+1]=255;B[z+2]=255}}}function u(){switch(g){case"fps":g="ms";l.style.display="none";b.style.display="none";n.style.display="block";k.style.display="block";break;case"ms":g="fps";l.style.display="block";b.style.display="block";n.style.display="none";k.style.display="none";break}}return{domElement:m,update:function(){q++;s=new Date().getTime();h=s-o;t=Math.min(t,h);a=Math.max(a,h);v(i.data,Math.min(30,30-(h/200)*30));n.innerHTML="<strong>"+h+" MS</strong> ("+t+"-"+a+")";r.putImageData(i,0,0);o=s;if(s>e+1000){j=Math.round((q*1000)/(s-e));d=Math.min(d,j);f=Math.max(f,j);v(p.data,Math.min(30,30-(j/100)*30));l.innerHTML="<strong>"+j+" FPS</strong> ("+d+"-"+f+")";c.putImageData(p,0,0);e=s;q=0}}}};

/* Deep Sea JS. Copyright (C) 2010 Monokai. */
var x={a:{}};window.deepSea=x;
x.a.f=function(I,J,C,D,K,L,M,E,p){function q(d,h){return Math.atan2(Math.sin(d-h),Math.cos(d-h))}function A(){if(l){l.b();l.c();F=Math.atan2(i-S,c-m);if(Math.abs(q(F,l.g()))<s/2)t+=q(F,t)*T;var d=t+s,h=l.b()+Math.cos(d)*N;d=l.c()+Math.sin(d)*N;e+=(h-c)*u;g+=(d-i)*u;c+=e*=O;i+=g*=O}if(Math.random()<0.01)t+=Math.random()*s/4-s/8}function r(){return t}function k(){return c}function v(){return i}function o(){return G}function n(d){t=d}function B(d,h){m=d;S=h}function w(d){c=d}function y(d){i=d}function z(){f.beginPath();
f.arc(c,i,H,0,a,false);f.closePath();f.fill()}var s=Math.PI,a=s*2,f,c,i,l,e=0,g=0,u,O,N,F=0,m=0,S=0,T,G,t=Math.random()*a,H=3;f=I;c=J||0;i=C||0;l=D;T=K||0;N=L||10;G=M||0;u=E||0;O=p||0;return{e:z,g:r,b:k,c:v,l:o,n:n,d:B,h:w,i:y,update:A}};
x.a.k=function(I,J,C,D,K,L,M){function E(){w.push(v);for(var e=v,g=s,u=1;u<n;u++){e=new r(o,v.b(),v.c(),e,B*u/n,g,u,i,l);g*=a;w.push(e);e=e}}function p(){for(var e=0;e<n;e++){var g=w[e];g.n(g.g()+Math.random()*k-k/2)}}function q(){var e;o.moveTo(v.b(),v.c());o.beginPath();for(var g=0;g<n;g++){e=w[g];e.d(y,z);e.update();o.lineWidth=c+(f-c)*(n-e.l())/n;o.lineTo(e.b(),e.c());o.stroke()}}function A(e,g){y=e;z=g}var r=x.a.f,k=Math.PI,v,o,n,B=0.025,w=[],y=0,z=0,s,a,f=8,c=2,i,l;o=I;v=J;n=C||8;s=L||50;a=
M||0.75;i=D;l=K;n++;E();return{e:q,d:A,stress:p}};
x.a.j=function(I,J,C,D,K,L,M,E,p){function q(){g=new s;for(var b=0;b<i;b++){G.push(new s(c,d,h));var j=new a(c,G[b],l,W,X,Y,Z);e.push(j)}r(d,h)}function A(b,j){t=b;H=j}function r(b,j){g.h(b);g.i(j);for(b=0;b<G.length;b++){G[b].h(g.b()+Math.cos(b/i*f)*u);G[b].i(g.c()+Math.sin(b/i*f)*u)}}function k(){F+=T;if(F>f)F-=f;m=Math.sin(F)*S;r(d,h+m);d+=P*=$;h+=Q*=$;if(Math.abs(P)<0.1&&Math.abs(Q)<0.1)R=false;Math.random()<0.0030&&!R&&o();Math.random()<0.0020&&!R&&n();var b=t-d,j=H-h-m;b*b+j*j<=aa*aa&&v();if(d<
0){P*=-0.5;d=0}if(d>U){P*=-0.5;d=U}if(h+m<100){Q*=-0.5;h=100-m}if(h+m>V){Q*=-0.5;h=V-m}}function v(){R=true;var b=Math.atan2(H-h-m,t-d)+Math.PI,j=Math.random()*10;P=Math.cos(b)*j;Q=Math.sin(b)*j;for(b=0;b<i;b++)Math.random()<0.65&&e[b].stress()}function o(){R=true;var b=Math.atan2(H-h-m,t-d),j=Math.sqrt(Math.pow(H-h-m,2)+Math.pow(t-d,2))/75;P=Math.cos(b)*j;Q=Math.sin(b)*j}function n(){R=true;var b=Math.random()*f,j=Math.random()*10;P=Math.cos(b)*j;Q=Math.sin(b)*j}function B(){c.fillStyle="#000";for(var b=
0;b<i;b++){var j=e[b];j.d(t,H);j.e()}c.beginPath();c.arc(d,h+m,N,0,f,false);c.closePath();c.fill();c.fillStyle="#fff";c.beginPath();c.arc(d,h+m,O,0,f,false);c.closePath();c.fill()}function w(){return d}function y(){return h+m}function z(){U=c.canvas.width;V=c.canvas.height}var s=x.a.f,a=x.a.k,f=Math.PI*2,c,i,l,e=[],g,u=10,O=8,N=15,F=0,m,S=25,T=0.015,G=[],t,H,d,h,P=0,Q=0,$=0.98,R=false,aa=25,U,V,W,X,Y,Z;c=I;d=J;h=C;i=D||8;l=K||8;W=L;X=M;Y=E;Z=p;z();q();return{b:w,c:y,e:B,m:z,d:A,update:k}};
x.a.o=function(){function I(a,f,c,i,l,e,g,u,O,N){B=f||false;z=c||true;p=i||1;A=document.getElementById(a);k=A.appendChild(document.createElement("canvas"));r=k.getContext("2d");B&&C();k.addEventListener("mousemove",K,false);if(B)window.onresize=C;else{k.width=A.offsetWidth;k.height=A.offsetHeight;D()}w=k.width;y=k.height;for(a=0;a<p;a++)q.push(new E(r,Math.random()*w,Math.random()*y,l,e,g,u,O,N));s=window.setInterval(L,1E3/v)}function J(a,f,c,i,l,e,g){p=a;q=[];for(a=0;a<p;a++)q.push(new E(r,Math.random()*
w,Math.random()*y,f,c,i,l,e,g))}function C(){k.width=window.innerWidth;k.height=window.innerHeight;for(var a=0;a<p;a++)q[a]&&q[a].m();D()}function D(){r.strokeStyle="#000";r.lineCap=r.lineJoin="round"}function K(a){if(a.layerX||a.layerX===0){o=a.layerX;n=a.layerY}else if(a.offsetX||a.offsetX===0){o=a.offsetX;n=a.offsetY}}function L(){r.clearRect(0,0,k.width,k.height);for(var a=0;a<p;a++){var f=q[a];if(z)f.d(o,n);else if(p==1)f.d(w/2,y/2);else{var c=q[(a+1)%p];f.d(c.b(),c.c())}f.update();f.e()}}function M(a){z=
a}var E=x.a.j,p,q=[],A,r,k,v=60,o=0,n=0,B,w,y,z,s;x.init=I;x.reload=J;x.setMouseInteraction=M}();                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
/*
try {
  var stats = new Stats();
  document.getElementById('stats').appendChild(stats.domElement);
  setInterval(function () {
    stats.update();
  }, 1000 / 60);
} catch(e) {
  log('error loading Stats:' + e);
}
*/

var mouseInteractionToggle = true;

function onKeyPressed(event, form) {
  var key = event.keyCode || event.which;
  if (key != 13) return;
  deepSea.reload(form.numCreatures.value, form.numTentacles.value, form.numJoints.value, form.springFactor.value, form.friction.value, form.partLength.value, form.growFactor.value);
}

function toggleMouseInteraction(form) {
  mouseInteractionToggle = !mouseInteractionToggle;
  form.toggle.value = mouseInteractionToggle ? "disable" : "enable";
  deepSea.setMouseInteraction(mouseInteractionToggle);
}

window.onload = function () {
  var form = document.getElementById("deepSeaForm");
  form.numCreatures.value = 1;
  form.numTentacles.value = 8;
  form.numJoints.value = 8;
  form.springFactor.value = 0.4;
  form.friction.value = 0.12;
  form.partLength.value = 50;
  form.growFactor.value = 0.75;

deepSea.init('deepSea', true, true, form.numCreatures.value, form.numTentacles.value, form.numJoints.value, form.springFactor.value, form.friction.value, form.partLength.value, form.growFactor.value);
};

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Deep Sea Stress JS</title> 
  </head> 
  <body> 
    <div id="stats"></div> 
    <div id="header"> 
      <form action="javascript:;" method="get" id="deepSeaForm"> 
        <label for="numCreatures" id="labelNumCreatures"># creatures</label> 
        <input type="text" name="numCreatures" id="numCreatures" class="valueBox" onkeypress="javascript:onKeyPressed(event, this.form);" value="" /> 
        <label for="numTentacles" id="labelNumTentacles"># tentacles</label> 
        <input type="text" name="numTentacles" id="numTentacles" class="valueBox" onkeypress="javascript:onKeyPressed(event, this.form);" value="" /> 
        <label for="numJoints" id="labelJoints"># joints</label> 
        <input type="text" name="numJoints" id="numJoints" class="valueBox" onkeypress="javascript:onKeyPressed(event, this.form);" value="" /> 
        <label for="springFactor" id="labelSpringFactor">spring factor (0–1)</label> 
        <input type="text" name="springFactor" id="springFactor" class="valueBox" onkeypress="javascript:onKeyPressed(event, this.form);" value="" /> 
        <label for="friction" id="labelFriction">friction (0–1)</label> 
        <input type="text" name="friction" id="friction" class="valueBox" onkeypress="javascript:onKeyPressed(event, this.form);" value="" />        
        <br /> 
        <label for="partLength" id="labelPartLength">part length</label> 
        <input type="text" name="partLength" id="partLength" class="valueBox" onkeypress="javascript:onKeyPressed(event, this.form);" value="" />        
        <label for="growFactor" id="labelGrowFactor">grow factor</label> 
        <input type="text" name="growFactor" id="growFactor" class="valueBox" onkeypress="javascript:onKeyPressed(event, this.form);" value="" />        
        <label for="toggle" id="labelToggle">mouse interaction</label> 
        <input type="button" name="toggle" id="toggle" onclick="javascript:toggleMouseInteraction(this.form);" value="disable" /> 
      </form> 
      <p>Deep Sea Stress — a strange javascript / canvas / html5 experiment, decrease browser size for smooth FPS — © 2010 <a href="http://www.monokai.nl">Monokai.</a></p> 
    </div> 
    <div id="deepSea"></div>

</body> 
</html>

body {margin: 0; padding: 0; overflow: hidden; background-color: #fff; color: #fff; overflow: hidden; font-family: arial, verdana, sans-serif;}

#stats {
  position: absolute;
}

#header {
  background-color: #fcfcfc;
  border-bottom: 1px solid #333;
  text-align: center;
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  height: 80px;
  min-width: 800px;
  position: absolute;
  width: 100%;
}

#header p {color: #ccc; font-size: 10px; padding: 0 0 5px 0; margin: 0;}
#header a {color: #999; font-weight: bold; text-decoration: none;}

#deepSeaForm {
  padding: 10px 0 5px 0;
  margin: 0 auto;
}

#deepSeaForm input {
  font-size: 10px;
  padding: 2px 2px;
  color: #666;
  margin: 0;
}

#deepSeaForm .valueBox {
  width: 40px;
  margin: 0 25px 5px 5px;
  border: 1px solid #ccc;
  background-color: #eee;
}

#deepSeaForm #labelToggle {
  font-size: 10px;
}

#deepSeaForm #toggle {
  font-size: 10px;
  font-weight: bold;
  color: #333;
  padding: 0;
  margin: 0;
  width: 60px;
  border: none;
  background-color: #fcfcfc;
  text-transform: uppercase;
}

Pop out