diff --git a/.glitch-assets b/.glitch-assets
new file mode 100644
index 00000000..811a2706
--- /dev/null
+++ b/.glitch-assets
@@ -0,0 +1,4 @@
+{"name":"yt5s.com-Vivaldi's Four Seasons - Spring (Part 1)-(480p).mp4","date":"2021-10-04T08:32:01.813Z","url":"https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2Fyt5s.com-Vivaldi's%20Four%20Seasons%20-%20Spring%20(Part%201)-(480p).mp4","type":"video/mp4","size":16295738,"thumbnail":"https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2Fthumbnails%2Fyt5s.com-Vivaldi's%20Four%20Seasons%20-%20Spring%20(Part%201)-(480p).mp4","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"jAA2JDGHMSRsBrSb"}
+{"name":"yt5s.com-Billie Eilish - bad guy (Lyrics).mp4","date":"2021-10-04T08:32:12.663Z","url":"https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2Fyt5s.com-Billie%20Eilish%20-%20bad%20guy%20(Lyrics).mp4","type":"video/mp4","size":7323727,"thumbnail":"https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2Fthumbnails%2Fyt5s.com-Billie%20Eilish%20-%20bad%20guy%20(Lyrics).mp4","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"ORUhQTmfM4ro9Epg"}
+{"name":"e85856f2-81e9-4292-a461-fc18989ea503.image.png","date":"2021-10-04T08:47:31.876Z","url":"https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2Fe85856f2-81e9-4292-a461-fc18989ea503.image.png","type":"image/png","size":1239922,"imageWidth":3026,"imageHeight":1572,"thumbnail":"https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2Fthumbnails%2Fe85856f2-81e9-4292-a461-fc18989ea503.image.png","thumbnailWidth":330,"thumbnailHeight":172,"uuid":"YuC8pqqBksMDUG2Z"}
+{"name":"3457bda0-5f74-46fd-bbaf-7929e22e92e8.image.png","date":"2021-10-04T08:48:53.122Z","url":"https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2F3457bda0-5f74-46fd-bbaf-7929e22e92e8.image.png","type":"image/png","size":198631,"imageWidth":2813,"imageHeight":1540,"thumbnail":"https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2Fthumbnails%2F3457bda0-5f74-46fd-bbaf-7929e22e92e8.image.png","thumbnailWidth":330,"thumbnailHeight":181,"uuid":"pk0z10hJxHkMoUQm"}
diff --git a/README.md b/README.md
index 3ae10a92..81ae8747 100644
--- a/README.md
+++ b/README.md
@@ -1,61 +1,17 @@
Assignment 4 - Creative Coding: Interactive Multimedia Experiences
===
+https://a4-msacristanbenjet.glitch.me/
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.
+## Song Visualizer
-[WebAudio / Canvas / Three Tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/webaudio_canvas_three.md)
-[SVG + D3 tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_svg_and_d3.md)
+- I Designed a 2D audio visualizer for 2 songs(Billie Eilish bad guy and Vivaldi's spring). User interaction can control 4 visual aspects : Bar width, Barcolor, Background color and Rotation.
-Baseline Requirements
----
+ -rotate looks better with bar width set to min
-Your application is required to implement the following functionalities:
+Images of application:
-- 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
-
-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.
+ https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2Fe85856f2-81e9-4292-a461-fc18989ea503.image.png?v=1633337251876
+
+ https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2F3457bda0-5f74-46fd-bbaf-7929e22e92e8.image.png?v=1633337333122
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..82a3a585
--- /dev/null
+++ b/package.json
@@ -0,0 +1,17 @@
+{
+ "name": "Assigment4",
+ "version": "",
+ "description": "",
+ "author": "Maria del Carmen Sacristan Benjet",
+ "scripts": {
+ "start": "node server.js"
+ },
+ "engines": {
+ "node": ">=12.0.0"
+ },
+ "dependencies": {
+ "cors": "^2.8.5",
+ "express": "^4.17.1",
+ "mime": "^2.5.2"
+ }
+}
\ No newline at end of file
diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 00000000..165d4904
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,30 @@
+#canvasHolder{
+ grid-column-start:2;
+}
+
+#grid{
+ display: grid;
+ grid-template-columns: 35% 65%;
+ grid-template-rows: 100% ;
+}
+
+#left{
+ font-family: 'Staatliches', cursive;
+ grid-column-start:1;
+}
+
+#BillieEilish{
+ font-family: 'Sigmar One', cursive;
+ background-color: red;
+}
+
+#Vivaldi{
+ font-family: 'Ephesis', cursive;
+ font-size:25px;
+ background-color: lightgreen;
+}
+
+.song{
+
+ background-color: lightgreen
+}
\ No newline at end of file
diff --git a/public/js/scripts.js b/public/js/scripts.js
new file mode 100644
index 00000000..9c743dd2
--- /dev/null
+++ b/public/js/scripts.js
@@ -0,0 +1,116 @@
+const canvas = document.getElementById('canvas')
+const ctx = canvas.getContext('2d')
+const barWidth = 3;
+
+var slider = document.getElementById("barWidth");
+var output = document.getElementById("barWidthLable");
+
+var colorBackground = 'black';
+var colorBar = 'red';
+
+const audioCtx = new AudioContext()
+const audioElement = document.createElement('audio')
+document.body.appendChild(audioElement)
+
+const backgroundColorSelect = document.getElementById("BackgroundColor")
+
+backgroundColorSelect.addEventListener('change', (event) => {
+ colorBackground = document.querySelector('.result');
+ colorBackground = event.target.value;
+});
+
+const barColorSelect = document.getElementById("BarColor")
+
+barColorSelect.addEventListener('change', (event) => {
+ colorBar = document.querySelector('.result2');
+ colorBar = event.target.value;
+ //console.log(colorBar)
+});
+
+const rotateSwitch = document.getElementById("rotate")
+var rotate = 'off'
+ rotateSwitch.addEventListener('change', (event) => {
+ if(rotate === 'off'){
+ rotate = 'on'
+ }
+ else{
+ rotate ='off'
+ ctx.fillStyle = colorBackground;
+ ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+ ctx.fillStyle = color
+ }
+ console.log(rotate)
+});
+
+
+const badGuyBtn = document.getElementById('BillieEilish'),
+ vivaldiBtn = document.getElementById('Vivaldi')
+
+
+const badGuy = "https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2Fyt5s.com-Billie%20Eilish%20-%20bad%20guy%20(Lyrics).mp4?v=1633336332663"
+const vivaldi = "https://cdn.glitch.com/cf951236-0fd3-437f-af4a-b97d67cf90f6%2Fyt5s.com-Vivaldi's%20Four%20Seasons%20-%20Spring%20(Part%201)-(480p).mp4?v=1633336321813"
+
+const defaultColor = document.getElementById('default'),
+ red = document.getElementById('redGradient'),
+ green = document.getElementById('greenGradient'),
+ blue = document.getElementById('blueGradient'),
+ purple = document.getElementById('purpleGradient')
+
+ let color = 'white';
+
+const start = function () {
+ const analyser = audioCtx.createAnalyser()
+ analyser.fftSize = 1024
+ const player = audioCtx.createMediaElementSource(audioElement)
+ player.connect(audioCtx.destination)
+ player.connect(analyser)
+
+ audioElement.crossOrigin = "anonymous";
+
+ const results = new Uint8Array(analyser.frequencyBinCount)
+ var flag= true
+ const draw = function () {
+ window.requestAnimationFrame(draw)
+ ctx.fillStyle = colorBackground;
+ ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+ ctx.fillStyle = color
+
+ analyser.getByteFrequencyData(results)
+
+
+ for (let i = 0; i < analyser.frequencyBinCount; i++) {
+ if(flag){
+ ctx.save()
+ flag =false
+ }
+ ctx.fillStyle = colorBar;
+ ctx.fillRect(i, canvas.height,slider.value, -results[i])
+ if(rotate === 'on'){
+ ctx.rotate(i)
+ }else{
+ ctx.restore();
+
+ }
+
+ }
+ }
+ draw()
+}
+
+
+
+badGuyBtn.addEventListener('click', function () {
+ audioCtx.resume()
+ audioElement.src = badGuy
+ audioElement.play()
+ start()
+})
+
+vivaldiBtn.addEventListener('click', function () {
+ audioCtx.resume()
+ audioElement.src = vivaldi
+ audioElement.play()
+ start()
+})
diff --git a/public/views/index.html b/public/views/index.html
new file mode 100644
index 00000000..ea61f7ef
--- /dev/null
+++ b/public/views/index.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
+
Select song to play
+
+
+
+
+
+
+
+
Visual Aspects control
+
+ Bar Width
+
+
+
Choose Background color:
+
+ black
+ red
+ green
+ yellow
+
+
+
+
Choose Bar color:
+
+ red
+ black
+ green
+ yellow
+
+
+
+
+ Rotate On
+
+
+
+
+
+