A4-azmcfann

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 `<input>` tags (the `range` type is useful to create sliders). You might also explore interaction by tracking mouse movement via the `window.onmousemove` event handler in tandem with the `event.clientX` and `event.clientY` properties. Consider using the [Pointer Events API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) to ensure that that both mouse and touch events will both be supported in your app.
-- Your application should display basic documentation for the user interface when the application first loads.
-
-The interactive experience should possess a reasonable level of complexity. Some examples:
-### Three.js
-- A generative algorithm creates simple agents that move through a virtual world. Your interface controls the behavior / appearance of these agents.
-- A simple 3D game... you really want this to be a simple as possible or it will be outside the scope of this assignment.
-- An 3D audio visualization of a song of your choosing. User interaction should control aspects of the visualization. 
-### Canvas
-- Implement a generative algorithm such as [Conway's Game of Life](https://bitstorm.org/gameoflife/) (or 1D cellular automata) and provide interactive controls. Note that the Game of Life has been created by 100s of people using <canvas>; 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

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"
+  }
+}

public/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<style>
+			body { margin: 0; }
+
+    </style>
+    <link href="https://fonts.googleapis.com/css2?family=Kanit" rel="stylesheet"/>
+    <link rel="stylesheet" href="style.css">
+	</head>
+	<body>
+    <script src="https://ajax.googleapis.com/ajax/libs/threejs/r84/three.min.js"></script>
+
+    <script src="/scripts.js"></script>
+    <h1>
+      Frequency Boxes
+    </h1>
+    <form>
+      <input type="checkbox" id="upperfr" name="upperfr" value="UpperFrequencies">
+      <label for="upperfr">Upper Frequencies</label>
+      <br>
+      <input type="checkbox" id="lowerfr" name="lowerfr" value="Lower Frequencies">
+      <label for="lowerfr">Lower Frequencies</label>
+      <br>
+      <button id="updatebtn">Update</button>
+    </form>
+	</body>
+</html>

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
+  }
+}

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;
+}

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)