diff --git a/README.md b/README.md
index 4ac8bbff..a08567c6 100644
--- a/README.md
+++ b/README.md
@@ -1,61 +1,15 @@
-Assignment 4 - Creative Coding: Interactive Multimedia Experiences
-===
-
-Due: October 4th, by 11:59 AM.
-
-For this assignment we will focus on client-side development using popular audio/graphics/visualization technologies. The goal of this assignment is to refine our JavaScript knowledge while exploring the multimedia capabilities of the browser.
-
-[WebAudio + Canvas Tutorial](https://github.com/cs4241-22a/cs4241-22a.github.io/blob/main/using_webaudio_canvas.md)
-[SVG + D3 tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_svg_and_d3.md)
-
-Baseline Requirements
----
-
-Your application is required to implement the following functionalities:
-
-- A server created using Express. This server can be as simple as needed.
-- A client-side interactive experience using at least one of the following web technologies frameworks.
- - [Three.js](https://threejs.org/): A library for 3D graphics / VR experiences
- - [D3.js](https://d3js.org): A library that is primarily used for interactive data visualizations
- - [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D raster drawing API included in all modern browsers
- - [SVG](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D vector drawing framework that enables shapes to be defined via XML.
- - [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API): An API for audio synthesis, analysis, processing, and file playback.
-- A user interface for interaction with your project, which must expose at least four parameters for user control. [tweakpane](https://cocopon.github.io/tweakpane/) is highly recommended for this, but you can also use regular HTML `; we'll be checking to ensure that your implementation is not a copy of these.
-- Design a 2D audio visualizer of a song of your choosing. User interaction should control visual aspects of the experience.
-### Web Audio API
-- Create a screen-based musical instrument using the Web Audio API. You can use projects such as [Interface.js](http://charlie-roberts.com/interface/) or [Nexus UI](https://nexus-js.github.io/ui/api/#Piano) to provide common musical interface elements, or use dat.GUI in combination with mouse/touch events (use the Pointer Events API). Your GUI should enable users to control aspects of sound synthesis. If you want to use higher-level instruments instead of the raw WebAudio API sounds, consider trying the instruments provided by [Tone.js]() or [Gibber](https://github.com/charlieroberts/gibber.audio.lib).
-### D3.js
-- Create visualizations using the datasets found at [Awesome JSON Datasets](https://github.com/jdorfman/Awesome-JSON-Datasets). Experiment with providing different visualizations of the same data set, and providing users interactive control over visualization parameters and/or data filtering. Alternatively, create a single visualization with using one of the more complicated techniques shown at [d3js.org](d3js.org) and provide meaningful points of interaction for users.
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly.
-4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below. *NOTE: If you don't use Glitch for hosting (where we can see the files) then you must include all project files that you author in your repo for this assignment*.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`.
Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
---
-## Your Web Application Title
-
-your hosting link e.g. http://a4-charlieroberts.glitch.me
+## Audio Visualizer with Threejs and WebAudio
-Include a very brief summary of your project here. Images are encouraged when needed, along with concise, high-level text. Be sure to include:
+your hosting link e.g. http://a4-alexandra-mcfann.glitch.me
-- the goal of the application
-- challenges you faced in realizing the application
-- the instructions you present in the website should be clear enough to use the application, but if you feel any need to provide additional instructions please do so here.
+- the goal was to create an audio visualizer, the cube sizes are controlled by
+ the averages of the frequencies
+- I couldn't figure out why the scene wouldn't show up on the screen,
+ I looked at so many things online, and the official Threejs site and followed
+ their setup instructions and it didn't work. I have commented the js code with
+ what I was expecting it to have done, had it shown on the screen
+- the form on the page should control what frequencies are displayed, via the boxes
diff --git a/assets/188 Lake Floria (Underwater).mp3 b/assets/188 Lake Floria (Underwater).mp3
new file mode 100644
index 00000000..3ffed40a
Binary files /dev/null and b/assets/188 Lake Floria (Underwater).mp3 differ
diff --git a/assets/213 Lanayru Sand Sea (Sailing).mp3 b/assets/213 Lanayru Sand Sea (Sailing).mp3
new file mode 100644
index 00000000..03240fd6
Binary files /dev/null and b/assets/213 Lanayru Sand Sea (Sailing).mp3 differ
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..85132198
--- /dev/null
+++ b/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "Audio visualizer",
+ "version": "0.1",
+ "description": "Visualize audio of different songs",
+ "author": "Alexandra McFann",
+ "scripts": {
+ "start": "node server.js"
+ },
+ "dependencies": {
+ "express": "^4.18.1",
+ "mime": "^3.0.0",
+ "three": "^0.145.0",
+ "webaudio": "^1.0.1"
+ },
+ "engines": {
+ "node": "12.x"
+ }
+}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 00000000..ce7943f7
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+ Frequency Boxes
+
+
+
+
diff --git a/public/scripts.js b/public/scripts.js
new file mode 100644
index 00000000..7b707d05
--- /dev/null
+++ b/public/scripts.js
@@ -0,0 +1,159 @@
+import * as THREE from 'three'
+const scene = new THREE.Scene()
+const camera = THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
+const renderer = new THREE.WebGLRenderer()
+renderer.setSize(window.innerWidth, window.innerHeight)
+document.body.appendChild(renderer.domElement)
+scene.background = new THREE.Color(0x0D1821)
+//boolean for what cubes are visible
+var uppercube = true
+var lowercube = true
+//the base size of the cube, and the variables
+// that are multiplying the sizes
+var defaultsize = 1
+var uppersize = 1
+var lowersize = 1
+
+//create box and make two meshes
+var box = new THREE.BoxGeometry(1, 1, 1)
+var basiccolor = new THREE.MeshBasicMaterial({color: 0xB4CDED})
+var cube1 = new THREE.Mesh(box, basiccolor)
+var cube2 = new THREE.Mesh(box, basiccolor)
+//create the audio and play it
+const context = new AudioContext()
+const audio = new Audio("./Assets/188 Lake Floria (Underwater).mp3")
+audio.load();
+audio.play();
+
+//webaudio gives us audio context
+const src = context.createMediaElementSource(audio)
+const analyser = context.createAnalyser()
+src.connect(analyser)
+//analyser to get the frequencies
+analyser.connect(context.destination)
+
+//frequency data array
+analyser.fftSize = 512
+var bufferLength = analyser.frequencyBinCount
+var dataArray = new Uint8Array(bufferLength)
+
+//place the boxes on the screen
+const placeobjs = function(){
+
+ cube2.position.x = 5
+
+ scene.add(cube1)
+ scene.add(cube2)
+
+ camera.position.z=5
+ camera.position.x = (cube1.position.x + cube2.position.x)/1
+
+}
+
+//animate the boxes to rotate constantly
+const animate = function(){
+ requestAnimationFrame(animate)
+
+ cube1.rotation.x += 0.01
+ cube1.rotation.y += 0.01
+ cube2.rotation.x += 0.01
+ cube2.rotation.y += 0.01
+
+ //also change the size of the cubes
+ // based on the average frequencies
+ cube1.scale.x = defaultsize * uppersize
+ cube1.scale.y = defaultsize * uppersize
+ cube1.scale.z = defaultsize * uppersize
+
+ cube1.scale.x = defaultsize * lowersize
+ cube1.scale.y = defaultsize * lowersize
+ cube1.scale.z = defaultsize * lowersize
+ //render the scene to the screen
+ renderer.render(scene, camera)
+}
+//call animate to constantly animate
+animate();
+//get the frequency data
+const render = function(){
+ //get the raw data
+ analyser.getByteFrequencyData(dataArray)
+
+ //slice it in half to get two frequency arrays
+ var lowerHalf = dataArray.slice(0, (dataArray.length/2) - 1)
+ var upperHalf = dataArray.slice((dataArray.length/2) - 1, dataArray.length -1)
+
+ //find max and averages
+ var lowerMax = findmax(lowerHalf)
+ var lowerAvg = findavg(lowerHalf)
+ var upperMax = findmax(upperHalf)
+ var upperAvg = findavg(upperHalf)
+
+ //set the multiplying variables to be the
+ // averages divided by 3 to get a smaller number
+ uppersize = upperAvg / 3
+ lowersize = lowerAvg / 3
+}
+//call render to constantly update data
+render();
+
+//function to find the maximum number in an array
+const findmax = function(array){
+ let max = 0
+ for(var x = 0; x < array.length; x++){
+ if(array[x] > max){
+ max = array[x]
+ }
+ }
+ return max
+}
+//function to find the average of an array
+const findavg = function(array){
+ let avg = 0
+ let numind = array.length
+ let total = 0
+ for(var x = 0; x < numind; x++){
+ total = total + array[x]
+ }
+ avg = total/numind
+ return avg
+}
+
+//on load call the object placement and animate
+window.onload = function(){
+ placeobjs()
+ animate()
+}
+//trigger changes with the update button hit
+const updatebtn = document.getElementById("updatebtn")
+const onClickUpdate = function(){
+ //remove the cubes so that we dont have duplicates
+ scene.remove(cube1)
+ uppercube = false
+ scene.remove(cube2)
+ lowercube = false
+
+ //get the boxes that are clicked
+ const upperfrq = document.querySelector("#upperfr")
+ const lowerfrq = document.querySelector("#lowerfr")
+
+ //spawn in cubes as selected
+ if(upperfrq == true){
+ scene.add(cube1)
+ uppercube = true
+ }else{}
+ if(lowerfrq == true){
+ scene.add(cube2)
+ cube2.position.x = 5
+ lowercube = true
+ }else{}
+
+ //change camera location according to cubes spawned in
+ if(uppercube == true || lowercube == true){
+ camera.position.z=5
+ camera.position.x = (cube1.position.x + cube2.position.x)/1
+ }else if(uppercube == true){
+ camera.position.x = cube1.position.x
+ }else if(lowercube == true){
+ camera.position.x = cube2.position.x
+ }
+}
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 00000000..188b3239
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,25 @@
+body{
+ background-color:#F0F4EF;
+ color: #0D1821;
+ text-align: center;
+ font-family: "Kanit", sans-serif;
+}
+h1{
+ font-size: 2.5em;
+}
+label{
+ font-size: 1.5em;
+}
+input[type=checkbox]{
+ padding: 5px, 15px;
+ cursor: pointer;
+}
+button{
+ padding: 5px, 15px;
+ cursor: pointer;
+ font-family: "Kanit", sans-serif;
+ background: #B4CDED;
+ border: 1;
+ border-radius: 6px;
+ font-size: 1em;
+}
diff --git a/server.js b/server.js
new file mode 100644
index 00000000..5576c41a
--- /dev/null
+++ b/server.js
@@ -0,0 +1,9 @@
+const express = require('express')
+const app = express()
+
+app.use(express.urlencoded({extended:true}))
+app.use(express.static(__dirname + '/public'))
+app.get('/', (req, res)=> {
+ res.render("index")
+})
+app.listen(3000)