Fire JS Bin - PocketFull

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

Find

⟲

Replace

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 
  <meta charset="utf-8"> 
  <meta name="description" content="Music visualizations with JavaScript and HTML5 audio."> 
   
  <title>All this is done in HTML5 by the way.</title> 
   
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
  <script type="text/javascript" src="/attach/pocket/pocket.js"></script> 
  <script type="text/javascript" src="/attach/pocket/pocket.api.js"></script> 
  <script type="text/javascript" src="/attach/pocket/pocket.audio.js"></script> 
   
  <script type="text/javascript" src="/attach/pocket/pixastic.custom.js" type="text/javascript"></script> 
   
  <script type="text/javascript" src="/attach/pocket/pre3d.js"></script> 
  <script type="text/javascript" src="/attach/pocket/pre3d_path_utils.js"></script>  
  <script type="text/javascript" src="/attach/pocket/pre3d_shape_utils.js"></script>

</head> 
<body> 
 
   
  <div id="main"> 
   
    <div id="ctr"> 
      <div id="background"></div> 
     
      <div id="screen"> 
        <canvas id="processcanvas"></canvas> 
      </div> 
     
      <div id="output" class="page-elements"> 
        <h3>Pocket Full of HTML5</h3> 
        <em>Experiments with HTML5 <canvas> and <audio></em><br/><br/> 
        This is meant to run with an experimental build of Firefox. Links here (at the bottom): <a href="https://wiki.mozilla.org/Audio_Data_API">https://wiki.mozilla.org/Audio_Data_API</a><br/> 
        <br/> 
        Click the visualization area to toggle "fullscreen" mode.<br/><br/> 
     
        <div id="sm2-controls" class="sm2-fallback"> 
          Your browser does not support the experimental HTML5 Audio Data API, falling back to SoundManager2 (Flash) audio.<br/><br/> 
          <button class="start">Start</button> 
          <button class="stop">Stop</button> 
          <br/><br/> 
        </div> 
        <div id="audio-container"> 
          <audio controls="true" id="audio" src="/attach/pocket/liquid jazz.ogg"></audio><br /> 
        </div> 
     
        Status: <div id="status"></div> 
     
        <br/><br/> 
        <div id="log"></div> 
        <div id="presetlist"> 
          <ul> 
            <li><a href="#star.js">Star</a></li> 
            <li><a href="#web.js">Web</a></li> 
            <li><a href="#360.js">Three-sixty</a></li> 
            <li><a href="#circular.js">Circular</a></li> 
            <li><a href="#points.js">Points</a></li> 
            <li><a href="#xorflower.js">XOR Flower</a></li> 
            <li><a href="#struggle.js">Struggle</a></li> 
            <li><a href="#spectrum.js">Spectrum</a></li> 
            <li><a href="#void.js">Void</a></li> 
            <li><a href="#lhc.js">Collider</a></li> 
            <li><a href="#halftone.js">Halftone</a></li> 
            <li><a href="#colormunch.js">Color Munch</a></li> 
            <li><a href="#plasma2.js">Plasma</a></li> 
            <li><a href="#colorspiral.js">Color Spiral</a></li> 
            <li><a href="#tunnel.js">Tunnel</a></li> 
            <li><a href="#cranked.js">Cranked</a></li> 
            <li><a href="#waveform.js">Waveform</a></li> 
            <li><a href="#waveformdeform.js">Wave(de)form</a></li> 
            <li><a href="#fft.js">FFT</a></li> 
            <li><a href="#fft2.js">FFT2</a></li> 
            <li><a href="#mario.js">Mario</a></li> 
            <li><a href="#pre3d_spinring.js">Pre3D Spin Ring</a></li> 
            <li><a href="#pre3d_colorscube.js">Pre3D Colorscube</a></li> 
            <li><a href="#pre3d_eq.js">Pre3D EQ</a></li> 
          </ul> 
        </div> 
     
        <div id="links">[<a href="http://blog.nihilogic.dk/2010/03/pocket-full-of-html5.html">Read the blog</a>]    [<a href="http://feeds2.feedburner.com/nihilogic">Subscribe to the feed</a>]</div> 
      </div> 
     
      <div class="page-elements"> 
        <div id="code-controls"> 
          <button class="show">Show code</button> 
          <button class="hide">Hide code</button> 
          <button class="reload">Reload code</button> 
        </div> 
        <div id="presetctr"> 
          <textarea id="vizcode" nowrap wrap="off">

An experiment by Jacob Seidelin. Music by General Fuzz available under a Creative Commons BY-ND license

body, html {
  background-color : rgb(40,40,40);
}

#main {
  width : 800px;
}

h3 {
  margin-top : 0;
}
a {
 color : white;
}

#links {
  margin-top : 50px;
}

#links a {
  color : white;
  text-decoration : none;
}
#links a:hover {
  text-decoration : underline;
}
#credits, #credits a {
  font-family : arial;
  font-size : 10px;
  color : rgb(120,120,120);
}
#credits {
  margin-top : 10px;
}

#audio-container {
  height : 65px;
  margin-bottom : 10px;
}

#audio-container audio {
  height : 65px;
  width : 100%;
}

#presetlist ul {
  margin : 0;
  padding : 0;
  margin-left : 10px;
}

#presetlist ul a {
  color : white;
  text-decoration : none;
  display : inline-block;
  width : 100%;
}

#presetlist ul a:hover {
  background-color : #666;
}

#presetlist ul li {
  display : inline-block;
  width : 110px;
  height : 18px;
  vertical-align : top;
}

#presetlist a.active {
  background-color : rgb(60,60,60);
}

#presetctr {
  width : 892px;
  height : 360px;
  margin-top : 15px;
  border : 1px solid black;
  display : none;
  overflow : hidden;
  -moz-box-sizing : border-box;
  box-sizing : border-box;
  -webkit-box-sizing : border-box;
}

textarea#vizcode {
  width : 890px;
  height : 358px;
  border : none;
  margin : 0;
  padding : 5px;
  background-color : rgb(20,20,20);
  color : rgb(200,200,200);
  -moz-box-sizing : border-box;
  box-sizing : border-box;
  -webkit-box-sizing : border-box;

}

#sm2-controls {
  display : none;
  font-style : italic;
}

#sm2-controls button, #code-controls button {
  height : 25px;
  width : 100px;
  background-color : rgb(60,60,60);
  border : 1px solid rgb(120,120,120);
  margin-right : 10px;
  color : white;
}

#sm2-controls button:hover, #code-controls button:hover {
  background-color : rgb(80,80,80);
}

#sm2-controls button:active,#code-controls button:active {
  background-color : rgb(40,40,40);
}

#code-controls {
  margin-top : 10px;
}

#code-controls button.hide, #code-controls button.reload {
  display : none;
}

div#screen {
  width : 512px;
  height : 512px;
  border : 1px solid black;
  margin : 10px;
  background-color : black;
  float : left;
  overflow : hidden;
  -moz-box-sizing : border-box;
  box-sizing : border-box;
  -webkit-box-sizing : border-box;
  position : relative;
}

#background {
  position : absolute;
  left : 0px;
  top : 0px;
}

#screencanvas {
  width : 512px;
  height : 512px;
  position : absolute;
  z-index : 1;
}

#processcanvas {
  width : 512px;
  height : 512px;
  position : absolute;
  z-index : 1;
}

div#inputlayer {
  width : 512px;
  height : 512px;
  position : absolute;
  z-index : 3;
}

div#output {
  width : 360px;
  height : 512px;
  margin-left : 20px;
  display : inline-block;
  color : white;
  font-family : arial;
  font-size : 12px;
  padding : 5px;
  overflow : hidden;
  -moz-box-sizing : border-box;
  box-sizing : border-box;
  -webkit-box-sizing : border-box;
  /*
  border : 1px solid black;
  background-color : black;
  */
  border : 1px dashed rgb(60,60,60);
}

#status {
  display : inline;
}

.status-error {
  color : rgb(255,128,128);
}

.status-ok {
  color : rgb(128,255,128);
}

div#screen {
  margin : 0px;
}

body {
  margin : 0;
}

#main {
  width : 100%;
  text-align : center;
}

#ctr {
  width : 942px;
  top : 0;
  margin : 20px auto 0 auto;
  text-align : left;
}

#consolelog {
  position : absolute;
  margin : 10px;
  top : 0px;
  left : 0px;
  font-family : lucida console;
  color : lightgrey;
  font-size : 12px;
}

Pop out