diff --git a/src/circles.js b/src/circles.js
new file mode 100644
index 0000000..19b85db
--- /dev/null
+++ b/src/circles.js
@@ -0,0 +1,30 @@
+const VOLUME_THRESHOLD = 20;
+const CIRCLE_RADIUS = 100;
+const CIRCLE_POINTS = 256;
+const FFT_SIZE = CIRCLE_POINTS;
+const MAX_CIRCLES = 20;
+
+export function setup(sketch, analyser) {
+  sketch.createCanvas(window.innerWidth, window.innerHeight);
+  sketch.colorMode(sketch.HSL, 255);
+}
+
+export function draw(sketch) {
+  sketch.background(30);
+  sketch.noFill();
+  sketch.strokeWeight(2);
+  sketch.stroke(230);
+
+  for (let c = 0; c < circles.length; c++) {
+    const circle = circles[c];
+    sketch.beginShape();
+    for (let i = 0; i < circle.spectrum.length; i++) {
+      const p = circle.spectrum[i];
+      sketch.curveVertex(
+        Math.cos((i / CIRCLE_POINTS) * 2 * Math.PI) * (CIRCLE_RADIUS + c * 15) + baseWidth + (maxVolume / 2 - circle.volume) + p,
+        Math.sin((i / CIRCLE_POINTS) * 2 * Math.PI) * (CIRCLE_RADIUS + c * 15) + baseHeight + (maxPitch / 2 - circle.pitch) - p,
+      );
+    }
+    sketch.endShape(sketch.CLOSE);
+  }
+}
diff --git a/src/horizontal-lines.js b/src/horizontal-lines.js
new file mode 100644
index 0000000..1fc0b3b
--- /dev/null
+++ b/src/horizontal-lines.js
@@ -0,0 +1,35 @@
+const VOLUME_THRESHOLD = 20;
+const LINE_MARGIN = 20;
+const MAX_LINES = window.innerWidth / LINE_MARGIN;
+const FFT_SIZE = 256;
+
+export function setup(sketch, analyser) {
+  sketch.colorMode(sketch.HSL, 255);
+  sketch.background(0);
+  analyser.fftSize = FFT_SIZE;
+}
+
+export function draw(sketch) {
+  const image = sketch.drawingContext.getImageData(0, 0, (window.innerWidth - LINE_MARGIN) * 2, window.innerHeight * 2);
+  sketch.drawingContext.putImageData(image, LINE_MARGIN * 2, 0);
+  sketch.noStroke();
+  sketch.fill(0);
+  sketch.rect(0, 0, LINE_MARGIN, window.innerHeight);
+  
+  const lineBaseWidth = baseWidth;
+  sketch.fill(`rgba(255, 255, 255, 0.2)`);
+  sketch.stroke(((line.pitch - minPitch) / (maxPitch - minPitch)) * 255);
+  sketch.strokeWeight(1);
+  sketch.beginShape();
+  sketch.curveVertex(lineBaseWidth, -10);
+  sketch.curveVertex(lineBaseWidth, -10);
+  sketch.curveVertex(lineBaseWidth, 0);
+  for (let i = 1; i < line.spectrum.length - 1; i++) {
+    const point = line.spectrum[i];
+    sketch.curveVertex(lineBaseWidth + point, i * spectrumPointHeight);
+  }
+  sketch.curveVertex(lineBaseWidth, window.innerHeight);
+  sketch.curveVertex(lineBaseWidth, window.innerHeight + 10);
+  sketch.curveVertex(lineBaseWidth, window.innerHeight + 10);
+  sketch.endShape();
+}
diff --git a/src/index.js b/src/index.js
index a4bbffc..45a33a8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,46 +1,11 @@
 import p5 from 'p5';
 import './index.scss';
 
-const FFT_SIZE = 256;
-const VOLUME_THRESHOLD = 20;
-const LINE_MARGIN = 20;
-const MAX_LINES = window.innerWidth / LINE_MARGIN;
-
-function getRMS(spectrum) {
-  let rms = 0;
-  for (let i = 0; i < spectrum.length; i++) {
-    rms += spectrum[i] * spectrum[i];
-  }
-  rms /= spectrum.length;
-  rms = Math.sqrt(rms);
-  return rms;
-}
-
-function getPitch(spectrum) {
-  let cg = 0;
-  let weight = 0;
-  for (let i = 0; i < spectrum.length; i++) {
-    cg += spectrum[i] * i;
-    weight += spectrum[i]; 
-  }
-  return Math.floor(cg / weight);
-}
-
-function getRandomX() {
-  return Math.floor(Math.random() * window.innerWidth);
-}
-
-function getRandomY() {
-  return Math.floor(Math.random() * window.innerHeight);
-}
-
-
 async function main() {
   const audioCtx = new AudioContext();
   const microphone = await navigator.mediaDevices.getUserMedia({ audio: true });
   const analyser = new AnalyserNode(audioCtx);
   analyser.smoothingTimeConstant = 0.2;
-  analyser.fftSize = FFT_SIZE;
 
   let line;
   let fresh = false;
@@ -88,8 +53,6 @@ async function main() {
   const instance = new p5(( sketch ) => {
     sketch.setup = () => {
       sketch.createCanvas(window.innerWidth, window.innerHeight);
-      sketch.colorMode(sketch.HSL, 255);
-      sketch.background(0);
     };
 
     sketch.draw = () => {
@@ -99,34 +62,8 @@ async function main() {
 
       fresh = false;
 
-      const image = sketch.drawingContext.getImageData(0, 0, (window.innerWidth - LINE_MARGIN) * 2, window.innerHeight * 2);
-      sketch.drawingContext.putImageData(image, LINE_MARGIN * 2, 0);
-      sketch.noStroke();
-      sketch.fill(0);
-      sketch.rect(0, 0, LINE_MARGIN, window.innerHeight);
-      
-      const lineBaseWidth = baseWidth;
-      sketch.fill(`rgba(255, 255, 255, 0.2)`);
-      sketch.stroke(((line.pitch - minPitch) / (maxPitch - minPitch)) * 255);
-      sketch.strokeWeight(1);
-      sketch.beginShape();
-      sketch.curveVertex(lineBaseWidth, -10);
-      sketch.curveVertex(lineBaseWidth, -10);
-      sketch.curveVertex(lineBaseWidth, 0);
-      for (let i = 1; i < line.spectrum.length - 1; i++) {
-        const point = line.spectrum[i];
-        sketch.curveVertex(lineBaseWidth + point, i * spectrumPointHeight);
-      }
-      sketch.curveVertex(lineBaseWidth, window.innerHeight);
-      sketch.curveVertex(lineBaseWidth, window.innerHeight + 10);
-      sketch.curveVertex(lineBaseWidth, window.innerHeight + 10);
-      sketch.endShape();
     };
   });
-
-  setTimeout(() => {
-   // analyser.disconnect();
-  }, 5000);
 }
 
 main();
diff --git a/src/squares.js b/src/squares.js
new file mode 100644
index 0000000..97a8293
--- /dev/null
+++ b/src/squares.js
@@ -0,0 +1,37 @@
+const VOLUME_THRESHOLD = 20;
+const GRID_SIZE = 20;
+const MAX_WIDTH = 5;
+const MAX_HEIGHT = 8;
+const FFT_SIZE = 1024;
+
+export function setup(sketch, analyser) {
+  sketch.background('rgb(20, 30, 30)');
+  sketch.colorMode(sketch.HSB);
+  analyser.fftSize = FFT_SIZE;
+}
+
+export function draw(sketch) {
+  sketch.background('rgba(20, 30, 30, 0.01)');
+  if (!circle) {
+    return;
+  }
+
+  const color = ((circle.pitch - minPitch) / (maxPitch - minPitch)) * 360;
+  const brightness = ((circle.volume - minVolume) / (maxVolume - minVolume));
+  sketch.stroke(color, 100, 100, brightness);
+  for (let i = 0; i < circle.spectrum.length + 2; i++) {
+    const p = circle.spectrum[i - 2] * i * i * i * i / 2;
+    const x = getRandomBetween(0, Math.floor(window.innerWidth / GRID_SIZE)) * GRID_SIZE;
+    const y = getRandomBetween(0, Math.floor(window.innerHeight / GRID_SIZE)) * GRID_SIZE;
+    // const width = getRandomBetween(1, MAX_WIDTH) * GRID_SIZE;
+    // const height = getRandomBetween(1, MAX_HEIGHT) * GRID_SIZE;
+      sketch.fill(color, 100, 100, brightness * 0.5);
+    sketch.beginShape();
+    sketch.vertex(x, y);
+    sketch.vertex(x, y + GRID_SIZE);
+    sketch.vertex(x + GRID_SIZE, y + GRID_SIZE);
+    sketch.vertex(x + GRID_SIZE, y);
+    sketch.vertex(x, y);
+    sketch.endShape();
+  }
+}
diff --git a/src/util.js b/src/util.js
new file mode 100644
index 0000000..e3189e4
--- /dev/null
+++ b/src/util.js
@@ -0,0 +1,24 @@
+export function getRMS(spectrum) {
+  let rms = 0;
+  for (let i = 0; i < spectrum.length; i++) {
+    rms += spectrum[i] * spectrum[i];
+  }
+  rms /= spectrum.length;
+  rms = Math.sqrt(rms);
+  return rms;
+}
+
+export function getPitch(spectrum) {
+  let cg = 0;
+  let weight = 0;
+  for (let i = 0; i < spectrum.length; i++) {
+    cg += spectrum[i] * i;
+    weight += spectrum[i]; 
+  }
+  return Math.floor(cg / weight);
+}
+
+function getRandomBetween(min, max) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+