anchor.diff:  
       return;
     }
  -  
  +  //  type = "mind";
     // resize canvas to fit window
     dancer.canvas.width = canvasWidth();
     dancer.canvas.height = canvasHeight();
   
  -  var numBars = (canvasWidth() / SPACING).round();
     var freqByteData = new Uint8List(analyserNode.frequencyBinCount);
   
  -  analyserNode.getByteFrequencyData(freqByteData); 
  -
  -  dancer.clearRect(0, 0, canvasWidth(), canvasHeight());
  -  
  -  dancer.fillStyle = '#F6D565';
  -  dancer.lineCap = 'round';
  -  var multiplier = (analyserNode.frequencyBinCount / numBars).floor();
  +  analyserNode.getByteFrequencyData(freqByteData);
  +  
     var avg = 0;
  +  var numElements;
     
     var color = colors[rand.nextInt(colors.length)];
  -
  -  // Draw rectangle for each frequency bin.
  -  for (var i = 0; i < numBars; ++i) {
  -    var magnitude = 0;
  -    var offset = ( i * multiplier ).floor();
  -    // gotta sum/average the block, or we miss narrow-bandwidth spikes
  -    for (var j = 0; j< multiplier; j++)
  -      magnitude += freqByteData[offset + j];
  +  if (type == 'bars' || type == "circles") {
  +    var numElements = (canvasWidth() / SPACING).round();
  +    dancer.clearRect(0, 0, canvasWidth(), canvasHeight());
       
  -    magnitude = (magnitude / multiplier);
  +    dancer.fillStyle = '#F6D565';
  +    dancer.lineCap = 'round';
  +    var multiplier = (analyserNode.frequencyBinCount / numElements).floor();
  +    var avg = 0;
  +    // Draw rectangle for each frequency bin.
  +    for (var i = 0; i < numElements; ++i) {
  +      var magnitude = 0;
  +      var offset = ( i * multiplier ).floor();
  +      // gotta sum/average the block, or we miss narrow-bandwidth spikes
  +      for (var j = 0; j< multiplier; j++)
  +        magnitude += freqByteData[offset + j];
  +      
  +      magnitude = (magnitude / multiplier);
  +      
  +      avg += magnitude;
  +      
  +      // increase volatility of the bars
  +      if (magnitude > 0) {
  +        magnitude += magnitude * 1.5;
  +      }
  +      
  +      var magnitude2 = freqByteData[i * multiplier];
  +      
  +      dancer.fillStyle = "rgba($color,.75)";
  +      
  +      if (type == "bars") {
  +        dancer.fillRect(i * SPACING, canvasHeight(), BAR_WIDTH, -magnitude); 
  +      } else {
  +        var x = 10 + rand.nextInt(canvasWidth() - 10);
  +        
  +        dancer.beginPath();
  +        dancer.arc(x, canvasHeight() - i * 1.8, (magnitude / 15).round(), 0, PI * 2, true);
  +        dancer.closePath();
  +        dancer.fill(); 
  +      }
  +    }
  +  } else {
  +    var size;
  +    if (type == "circlegrid") {
  +      size = 8;
  +      numElements = size * size;
  +    } else if (type == "nucleus") {
  +      numElements = 256;
  +    } else if (type == "grid") {
  +      numElements = 32;
  +    } else {
  +      numElements = 16;
  +    }
       
  -    avg += magnitude;
  -    
  -    // increase volatility of the bars
  -    if (magnitude > 0) {
  -      magnitude += magnitude * 1.5;
  -    }
  -    
  -    var magnitude2 = freqByteData[i * multiplier];
  -    
  -    dancer.fillStyle = "rgba($color,.75)";
  -    
  -    if (type == "bars") {
  -      dancer.fillRect(i * SPACING, canvasHeight(), BAR_WIDTH, -magnitude); 
  -    } else {
  -      var x = 10 + rand.nextInt(canvasWidth() - 10);
  -      
  -      dancer.beginPath();
  -      dancer.arc(x, canvasHeight() - i * 1.4, (magnitude / 15).round(), 0, PI * 2, true);
  -      dancer.closePath();
  -      dancer.fill(); 
  +    if (type == "mind" || type == "spiralcircle") {
  +      dancer.lineWidth = 5;
  +    }
  +    dancer.clearRect(0, 0, canvasWidth(), canvasHeight());
  +        
  +    dancer.fillStyle = '#F6D565';
  +    dancer.lineCap = 'round';
  +    var multiplier = (analyserNode.frequencyBinCount / numElements).floor();
  +    freqByteData = freqByteData.sublist(0, (freqByteData.length/2).floor());
  +    for (var i = 0; i < freqByteData.length; i += (freqByteData.length/numElements).floor()) {
  +      dancer.fillStyle = "rgba($color,.75)";
  +      dancer.strokeStyle = "rgba($color,.75)";
  +      var magnitude = 0;
  +      // gotta sum/average the block, or we miss narrow-bandwidth spikes
  +      for (var j = 0; j< freqByteData.length/numElements; j++)
  +        magnitude += freqByteData[i + j];
  +            
  +      magnitude = (magnitude / multiplier);
  +            
  +      avg += magnitude;
  +      
  +      if (type == "circlegrid") {
  +        dancer.beginPath();
  +        var xR = ((rand.nextInt(magnitude.round()+1) - magnitude/2).round())/2;
  +        var yR = ((rand.nextInt(magnitude.round()+1) - magnitude/2).round())/2;
  +        var x = (i / (freqByteData.length/numElements) % size) * canvasWidth()/size + canvasWidth()/size/2;
  +        var y = canvasHeight() - (i / (freqByteData.length/numElements) / size).floor() * canvasHeight()/size + canvasWidth()/size/2;
  +        dancer.arc(x + xR, y + yR, (magnitude / 2 * log(i+1)/log(10)).round(), 0, 2 * PI, true);
  +        dancer.closePath();
  +        dancer.fill();
  +      } else if (type == 'nucleus'){
  +        var sX = (canvasWidth() / 2).round();
  +        var sY = (canvasHeight() / 2).round();
  +        dancer.moveTo(sX, sY);
  +        var degree = 360 * ((i+1) / freqByteData.length);
  +        var fX = sX + (cos(degree) * magnitude * 4);
  +        var fY = sY + (sin(degree) * magnitude * 4);
  +        dancer.lineTo(fX,fY);
  +        dancer.stroke(); 
  +        dancer.beginPath();
  +        dancer.arc(fX, fY, (magnitude / 10 * log(i+1)/log(10)).round(), 0, 2 * PI, true);
  +        dancer.closePath();
  +        dancer.stroke();
  +        //dancer.fill();
  +      } else if (type == "spiralcircle") {
  +        var xR = rand.nextInt(10) - 5;
  +        var yR = rand.nextInt(10) - 5;
  +        dancer.beginPath();
  +        dancer.arc(canvasWidth()/2 + xR, canvasHeight()/2 + yR, magnitude * 5, 0, 2 * PI, true);
  +        dancer.closePath();
  +        dancer.stroke();
  +      } else if (type == 'mind') {
  +        var xR = rand.nextInt(50) - 25;
  +        var yR = rand.nextInt(50) - 25;
  +        dancer.beginPath();
  +        dancer.arc(canvasWidth()/2 + xR, canvasHeight()/2 + yR, 200 + magnitude * 2, 0, 2 * PI, true);
  +        dancer.closePath();
  +        dancer.stroke();
  +      } else if (type == 'grid') {
  +        var sHX, sHY, sVX, sVY, fHX, fHY, fVX, fVY;
  +        sHX = 0;
  +        fHX = canvasWidth();
  +        sVY = 0;
  +        fVY = canvasHeight();
  +        sHY = magnitude * 3;
  +        fHY = magnitude * 3;
  +        sVX = magnitude * 3;
  +        fVX = magnitude * 3;
  +        if (i > freqByteData.length / 2) {
  +          dancer.moveTo(sHX, sHY);
  +          dancer.lineTo(fHX, fHY);
  +          dancer.moveTo(sHX, canvasHeight() - sHY);
  +          dancer.lineTo(fHX, canvasHeight() - fHY);
  +        } else {
  +          dancer.moveTo(sVX, sVY);
  +          dancer.lineTo(fVX, fVY);
  +          dancer.moveTo(canvasWidth() - sVX, sVY);
  +          dancer.lineTo(canvasWidth() - fVX, fVY);
  +        }
  +        dancer.stroke();
  +      } else {
  +        var sX, sY, cX1, cY1, cX2, cY2, fX, fY;
  +        if (i > freqByteData.length / 2) {
  +          sX = 0;
  +          sY = canvasHeight() / 2;
  +          dancer.moveTo(sX, sY);
  +          cX1 = canvasWidth() / 4 - magnitude / 32;
  +          cY1 = canvasHeight() / 2 - magnitude * 8;
  +          cX2 = canvasWidth() / 4 * 3 + magnitude / 32;
  +          cY2 = canvasHeight() / 2 + magnitude * 8;
  +          fX = canvasWidth();
  +          fY = canvasHeight() / 2;
  +          dancer.bezierCurveTo(cX1, cY1, cX2, cY2, fX, fY);
  +          dancer.moveTo(sX, sY);
  +          dancer.bezierCurveTo(cX1, cY2, cX2, cY1, fX, fY);
  +        } else {
  +          sX = canvasWidth() / 2;
  +          sY = canvasHeight() / 8;
  +          dancer.moveTo(sX, sY);
  +          cX1 = canvasWidth() / 2 - magnitude * 4;
  +          cY1 = canvasHeight() / 4;
  +          cX2 = canvasWidth() / 2 + magnitude * 4;
  +          cY2 = canvasHeight() / 4 * 3;
  +          fX = canvasWidth() / 2;
  +          fY = canvasHeight() / 8 * 7;
  +          dancer.bezierCurveTo(cX1, cY1, cX2, cY2, fX, fY);
  +          dancer.moveTo(sX, sY);
  +          dancer.bezierCurveTo(cX2, cY1, cX1, cY2, fX, fY);
  +        }
  +        dancer.stroke();
  +      }
       }
     }
     
  
positive.code:     if (time - lastTime > 450) {
        lastTime = time;
        
        avg = (avg / numBars);
        
        String msg;
        
        status = querySelector("h1");
        
        if (avg < 40) {
          status.style.color = 'rgba(255,255,255,.65)';
          msg = "Turn the music back on";
        } else if (avg < 100) {
          var color = colors[0];
          status.style.color = 'rgba($color,.65)';
          msg = "Aite now we bumpin'";
        } else if (avg < 150) {
          var color = colors[1];
          status.style.color = 'rgba($color, .65)';
          msg  = "Yeah let's fucking rage";
        } else {
          var color = colors[1];
          status.style.color = 'rgba($color, .65)';
          msg  = "OH SHIT DAWG";
        }
        
        status.text = msg; 
  
      }
    }
    
    window.requestAnimationFrame(renderAudio);
  }
  
  var WS_URL = "";
  
  void initSocket() {
    ws = new WebSocket('ws://' + WS_URL + '/ws');
  
negative.code: //names of things nucleus, grid, spiralcircle, mind, bars, circles, circlegrid
  
  import 'dart:typed_data';
  import 'dart:html';
  import 'dart:web_audio';
  