a4-Ethan-Catania

README.md

@@ -1,61 +1,5 @@
-Assignment 4 - Creative Coding: Interactive Multimedia Experiences
-===
+## Black Hole Audio Visualizer
 
-Due: October 2nd, by 11:59 AM.
+your hosting link e.g. https://a4-ethan-catania.glitch.me/
 
-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/cs-4241-2023/cs4241-2023.github.io/blob/main/using.webaudio_and_canvas.md)  
-[SVG + D3 tutorial](https://github.com/cs-4241-2023/cs-4241-2023.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
-
-Include a very brief summary of your project here. Images are encouraged when needed, along with concise, high-level text. Be sure to include:
-
-- 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.
+This project is a 2d audio visualizer that uses a predetermined mp3 file to display a circular representation of the frequencies within my chosen song. The program uses the bin values to determine the height of the relative rectangles displayed tanget to the circumference of the circle. The implementation of this concept is started at the bottom of the displayed circle on the screen, with larger frequencies going clockwise around the circle. Rendering these rectangles gives a spinning illusion to the user. The user is allowed to "play" with the resultant visualizer with combinations of brightness, bar size, circle size, and line Width. Each of the sliders present on the page has instructios defined at the top of the webpage. A user may pause and play the song until it has finished, at which point the user may have to refresh the page in order to continue playing with the visualization. Note: Refreshing will not keep the visual on the screen and will instead revert back to the original settings. The goal for this project was to create an application that was able to visualize music and sounds with a song in a way that was appealing to the eye. It was somewhat challenging to implement the angled bars on the circle as they were staying vertical rather than adjusting according to an angle variable. It was also challenging to be sure if my program was working correctly as there is usually a larger portion of the frequencies in the bottom right of the screen. I reduced the bin size and also aquired a file with a very high frequency to see if there was still a lot of lower frequencies, and there was not. Overall I am happy with the results of my 2d visualizer and look forward to dynamically accept mp3 files and see how they compare to my small sample size. 

package.json

@@ -0,0 +1,12 @@
+{
+    "name": "A4 CC",
+    "version": "1.0.0",
+    "description": "2D Audio Visualizer",
+    "main": "server.js",
+    "scripts": {
+      "start": "node server.js"
+    },
+    "dependencies": {
+      "express": "^4.17.1"
+    }
+  }

public/index.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang = "en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport"> 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Gabarito:wght@600&family=Poppins:ital,wght@1,200&display=swap" rel="stylesheet">
+    <title>2D Audio Visualizer</title>
+
+    <style>
+      .flex {
+        display: flex;
+        height: 100vh;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+       }
+
+      .buttons {
+        justify-content: center;
+      }
+      body {
+        background-color: rgb(0, 0, 0);
+      }
+      label {
+        color: white;
+        font-family: 'Gabarito', sans-serif;
+      }
+      footer,h2,h3,li, h1 {
+        color: #ffffff;
+        text-align: center;
+        padding: 10px;
+        font-family: 'Gabarito', sans-serif;
+      }
+
+    </style>
+  </head>
+  <body>
+    <h1 >Black Hole Audio Visualizer </h1>
+
+  </br>
+
+  <h2>This is a 2d Audio Visualizer that uses a predetermined mp3 file as a proof of concept of the abilities of the visualizer.
+    This application has 5 points of interest to explore.
+  </h2>
+  </br>
+  <ol>
+    <h3>
+      <li>
+      The Play button is used to initially start the visualization and can also be used to pause the application once it is running.
+    </li>
+    <li>
+      The Brightness slider will change the intensity of the light escapeing from the visualizer.
+    </li>
+    <li>
+      The Bar Size slider will change the length of the bars within the visualizer.
+    </li>
+    <li>
+      The Circle Size slider will change the radius of the visualizer.
+    </li>
+    <li>
+      The Line Width slider will change the width of the bars protruding from the visualizer. 
+    </li>
+  </h3>
+  </ol>
+    </body>
+    </html>
+  </br>
+
+
+    <div class="flex">
+      <div id="controls">
+        <label for="colorSlider">Brightness:</label>
+        <input type="range" id="colorSlider" min="0" max="255" value="255">
+        <label for="amplitudeSlider">Bar Size: </label>
+        <input type="range" id="amplitudeSlider" min="0.5" max="3.5" value="1.5">
+        <label for="circleRadiusSlider">Circle Size: </label>
+        <input type="range" id="circleRadiusSlider" min="50" max="300" value="175">
+        <label for="lineWidthSlider">Line Width:</label>
+        <input type="range" id="lineWidthSlider" min="1" max="5" value="3">
+      </div>
+
+    </br>
+
+      <button id = 'playButton'> Play</button>
+      <canvas id="canvas" width="900" height="900"></canvas>
+
+    </div>
+  </br>
+    <script src="/js/main.js"></script>
+    <footer>
+      <p> 2023 A4 Creative Coding Audio Visualizer</p>
+      <p>Audio from Tiësto & KSHMR feat. Vassy - Secrets </p>
+    </footer>
+
+  </body>
+</html>

public/js/main.js

@@ -0,0 +1,192 @@
+//get Canvas
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+const canvasWidth = canvas.width;
+const canvasHeight = canvas.height;
+const centerX = canvasWidth / 2;
+const centerY = canvasHeight / 2;
+const BLACK = "#000";
+const fftSize = 2048;
+let WHITE = "#fff";
+let lineWidth = 3; // inital width
+let audioContext;
+let analyser;
+let audioElement;
+let ampFactor = 1; // inital amplitude
+let barAngle;
+let visualColor = WHITE;
+let circleRadius = Math.min(centerX, centerY) - 200;
+
+// draw initial screen background
+ctx.fillStyle = BLACK;
+ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+//create a white circle in the center with the radius
+ctx.fillStyle = WHITE;
+ctx.lineWidth = lineWidth;
+ctx.beginPath();
+ctx.arc(centerX, centerY, circleRadius, 0, 2 * Math.PI);
+ctx.fill();
+
+//make a blakc circle slightly smaller in the center
+ctx.fillStyle = BLACK;
+ctx.lineWidth = lineWidth;
+ctx.beginPath();
+ctx.arc(centerX, centerY, circleRadius - 20, 0, 2 * Math.PI);
+ctx.fill();
+
+
+
+
+
+const error = document.getElementById("error");
+const playButton = document.getElementById("playButton");
+const circleSize= document.getElementById("circleRadiusSlider");
+const lineThickness = document.getElementById("lineWidthSlider");
+const amplitude = document.getElementById("amplitudeSlider");
+const brightness = document.getElementById("colorSlider");
+
+
+
+brightness.addEventListener("input", () => {
+  const newColor = parseInt(brightness.value);
+  updateBrightness(newColor);
+});
+amplitude.addEventListener("input", () => {
+  const amplitudeFactor = parseFloat(amplitude.value);
+  updateAmplitude(amplitudeFactor);
+});
+circleSize.addEventListener("input", () => {
+  const newRadius = parseInt(circleSize.value);
+  updateCircleRadius(newRadius);
+});
+
+lineThickness.addEventListener("input", () => {
+  const newLineWidth = parseInt(lineThickness.value);
+  updateLineWidth(newLineWidth);
+});
+
+function updateBrightness(newColor) {
+  // Update the WHITE variable
+  const colorValue = newColor;
+  WHITE = `rgb(${colorValue}, ${colorValue}, ${colorValue})`;
+
+}
+
+function updateAmplitude(factor) {
+  // Update the amplitude factor
+  ampFactor = factor;
+
+}
+
+function updateCircleRadius(newRadius) {
+  // Update the circle radius
+  circleRadius = newRadius;
+
+}
+
+function updateLineWidth(newLineWidth) {
+  // Update the line width 
+  lineWidth = newLineWidth;
+
+}
+
+
+playButton.addEventListener('click', () => {
+  if (audioContext) {
+    if(audioContext.state === 'running'){
+      //playing audio => pause it & set play button to say play
+    audioContext.suspend().then(() => {
+      playButton.textContent = "Play";
+    });
+  } else if (audioContext.state === 'suspended') {
+    // paused audio => play it & set text to pause
+    audioContext.resume().then(() => {
+    playButton.textContent = "Pause";
+    });
+  }
+}else{ // if no audio context exists create one and an anaylser 
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    analyser = audioContext.createAnalyser();
+    analyser.fftSize = fftSize;
+
+     // Path to mp3
+    audioElement = new Audio('/audio/secrets.mp3');
+
+    // connect analyser
+    const audioSource = audioContext.createMediaElementSource(audioElement);
+    audioSource.connect(analyser);
+    audioSource.connect(audioContext.destination);
+
+    // try playing and set play text to pause
+    audioElement.play().catch((error) => {
+      console.error("Error playing audio: " + error);
+    });
+    playButton.textContent = "Pause";
+
+    //render
+    visualize();
+  }
+ }); 
+
+
+function visualize() {
+
+// Clear the canvas
+ctx.fillStyle = BLACK;
+ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+//draw white circle the size of the radius
+ctx.fillStyle = WHITE;
+ctx.lineWidth = lineWidth;
+ctx.beginPath();
+ctx.arc(centerX, centerY, circleRadius, 0, 2 * Math.PI);
+ctx.fill();
+
+//draw black circle slighty smaller
+ctx.fillStyle = BLACK;
+ctx.lineWidth = lineWidth;
+ctx.beginPath();
+ctx.arc(centerX, centerY, circleRadius - 20, 0, 2 * Math.PI);
+ctx.fill();
+
+// Get the frequency data from the analyser
+const bufferLength = analyser.frequencyBinCount;
+const dataArray = new Uint8Array(bufferLength);
+analyser.getByteFrequencyData(dataArray);
+
+// Draw the audio visualization along the circular path
+const angleIncrement = (2 * Math.PI) / bufferLength;
+let angle = -Math.PI/2;
+for (let i = 0; i < bufferLength; i++) {
+  const amplitude = dataArray[i]/255 ;
+
+  // Calculate the height and angle of a bar
+  const barHeight = amplitude * circleRadius * ampFactor;
+  const barAngle = angle + i * angleIncrement;
+
+  // var coords starting at bottom of circle and traveling clockwise
+  const barX = centerX  - circleRadius * Math.cos(barAngle);
+  const barY = centerY  - circleRadius * Math.sin(barAngle);
+
+  //bars are either white of a value from brightness slider
+  ctx.fillStyle = WHITE;
+  // Save the canvas state
+  ctx.save();
+  // Move canvas to bar position
+  ctx.translate(barX, barY); 
+  // Rotate canvas to bar's angle   
+  ctx.rotate(barAngle); 
+  // draw
+  ctx.fillRect(0, 0, lineWidth, barHeight);
+//returns to previous state
+  ctx.restore();
+
+  //update angle for bar
+  angle += angleIncrement;
+  }
+
+  // Render
+  requestAnimationFrame(visualize);
+}

server.js

@@ -0,0 +1,16 @@
+const express = require('express');
+const path = require('path');
+
+const app = express();
+const port = process.env.PORT || 3000;
+
+app.use(express.static(path.join(__dirname, 'public')));
+app.use('/audio', express.static(path.join(__dirname, 'audio'))); // Serve the audio directory
+
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});
+
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`);
+});