a4-yasmine-aoua

README.md

@@ -1,61 +1,9 @@
-Assignment 4 - Creative Coding: Interactive Multimedia Experiences
-===
+## Song Visualizer
 
-Due: October 4th, by 11:59 AM.
+https://a4-yasmine-aoua.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.
+The goal of this application was to make a music visualizer that a user could change the color of the visualization, the song, and be able to stop and start the application. 
 
-[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)  
+![Menu](https://user-images.githubusercontent.com/74080772/193856071-f786b887-6395-483e-9544-933a3f3103e5.png)
 
-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.
+I faced a couple challenges when creating this project. The first challenge I faced was creating the song picker using tweakpane. I had an error that broke the song picker and buttons after it that took a while to find. A bigger challenge I faced was changing the shape of the visualization. I wanted to try something different then just rectangles so I replaced them with circles but drawing non-rectangle shapes is a lot more complicated because there isn't just one method you can call like fillRect(). I was not able to fill the inside of the circles I drew for some reason that I still haven't figured out but I actually like the way it looks better with just the outline of the circle so I decided to keep it that way.

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "a4-creative-coding",
+  "version": "1.0.0",
+  "description": "Assignment 4 - Creative Coding: Interactive Multimedia Experiences ===",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YasmineFA/a4-creative-coding.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/YasmineFA/a4-creative-coding/issues"
+  },
+  "homepage": "https://github.com/YasmineFA/a4-creative-coding#readme",
+  "devDependencies": {
+    "@tweakpane/core": "^1.1.0"
+  }
+}

server.js

@@ -0,0 +1,41 @@
+// server.js
+// where your node app starts
+
+// we've started you off with Express (https://expressjs.com/)
+// but feel free to use whatever libraries or frameworks you'd like through `package.json`.
+const express = require('express'),
+      app     = express(),
+      cors    = require('cors')
+
+app.use( cors() )
+app.use( express.static('./') )
+
+// our default array of dreams
+const dreams = [
+  "Find and count some sheep",
+  "Climb a really tall mountain",
+  "Wash the dishes"
+];
+
+// make all the files in 'public' available
+// https://expressjs.com/en/starter/static-files.html
+app.use(express.static("public"));
+
+// https://expressjs.com/en/starter/basic-routing.html
+app.get("/", (request, response) => {
+  response.sendFile(__dirname + "/views/index.html");
+});
+
+
+// send the default array of dreams to the webpage
+app.get("/dreams", (request, response) => {
+  // express helps us take JS objects and send them as JSON
+  response.json(dreams);
+});
+
+// listen for requests :)
+// const listener = app.listen(process.env.PORT, () => {
+//   console.log("Your app is listening on port " + listener.address().port);
+// });
+
+app.listen(3000);

views/index.html

@@ -0,0 +1,150 @@
+<!doctype html>
+<html lang="en">
+  <head></head>
+  <body>
+    <div id="visualization">
+
+    </div>
+    <div id="instructions">
+      <h1>
+        Song Visualizer!
+      </h1>
+      <p>
+        Select a song from the dropdown and hit play to <br> 
+        start. Click the color picker to change the color <br>
+        of the visualization of the song at any time. <br>
+        Click stop to end the visualization and song.
+      </p>
+    </div>
+  </body>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.min.js"></script>
+  <script>
+    const pane = new Tweakpane.Pane();
+    const visualization = document.getElementById("visualization");
+
+    const songs = ['./SalmonLikeTheFish - Glacier.mp3', './Il Sogno Del Marinaio - Skinny Cat.mp3', 
+    'Blue Dot Sessions - Winter Theme.mp3', 'Dave Nelson - Whale Lines.mp3', 'Doctor Turtle - Two Hat Rag.mp3',
+    'Portron Portron Lopez - De Tout Le Corps Je Ris.mp3']
+
+    let currColor = '#ffffff'
+    let currSong = 0
+
+    const SETTINGS = {
+        song: 0,
+        color: '#ffffff'
+    };g
+
+    const colorPicker = pane.addInput(
+        SETTINGS, "color"
+    )
+    colorPicker.on('change', (val) => {
+        currColor = val.value
+    });
+
+    const songPicker = pane.addInput(
+        SETTINGS, 'song',
+        {options: {
+            Glacier: 0,
+            SkinnyCat: 1,
+            WinterTheme: 2,
+            WhaleLines: 3,
+            TwoHatRag: 4,
+            DeToutLeCorpsJeRis: 5
+        }
+        }
+    )
+    songPicker.on('change', (val) => {
+        currSong = val.value 
+    });
+
+    let playing = false;
+
+    const playBtn = pane.addButton({
+        title: 'PLAY',
+    });
+
+    playBtn.on('click', () => {
+        if(!playing){
+            playing = true;
+            start('play')
+            console.log("playing");
+        } 
+    });
+
+    const pauseBtn = pane.addButton({
+        title: 'STOP',
+    });
+
+    pauseBtn.on('click', () => {
+        playing = false;
+        location.reload()
+        console.log("pause song");
+    });
+
+    const start = function(state) {
+    // document.body.innerHTML = ''
+    if(playing){
+        const canvas = document.createElement( 'canvas' )
+        document.body.appendChild( canvas )
+        canvas.width = window.innerWidth
+        canvas.height = window.innerHeight
+        canvas.style.zIndex = "-1"
+        const ctx = canvas.getContext( '2d' )
+
+        // audio init
+        const audioCtx = new AudioContext()
+        const audioElement = document.createElement( 'audio' )
+        document.body.appendChild( audioElement )
+
+        // audio graph setup
+        const analyser = audioCtx.createAnalyser()
+        analyser.fftSize = 1024 // 512 bins
+        const player = audioCtx.createMediaElementSource( audioElement )
+        player.connect( audioCtx.destination )
+        player.connect( analyser )
+
+        // make sure, for this example, that your audiofle is accesssible
+        // from your server's root directory... here we assume the file is
+        // in the ssame location as our index.html file
+
+
+        audioElement.src = songs[currSong]
+        audioElement.play()
+
+
+        const results = new Uint8Array( analyser.frequencyBinCount )
+
+        draw = function() {
+        // temporal recursion, call tthe function in the future
+        window.requestAnimationFrame( draw )
+
+        // fill our canvas with a black box
+        // by doing this every frame we 'clear' the canvas
+        ctx.fillStyle = 'black' 
+        ctx.fillRect( 0,0,canvas.width,canvas.height )
+
+        // set the color to the selected color for drawing our visuaization
+        ctx.fillStyle = currColor 
+
+        analyser.getByteFrequencyData( results )
+
+        for( let i = 0; i < analyser.frequencyBinCount; i++ ) {
+            // ctx.fillRect( i, 0, 1, results[i] ) // upside down!
+            ctx.beginPath()
+            let centerX = Math.floor(Math.random() * canvas.width);
+            let centerY = Math.floor(Math.random() * canvas.height);
+            ctx.fillStyle = currColor 
+            ctx.fill();
+            ctx.arc(centerX, centerY, results[i], 0, 2 * Math.PI, false)
+            ctx.strokeStyle = currColor          
+            ctx.stroke()
+        }
+        }
+        draw()
+    }
+
+  }
+
+//   window.onload = ()=> document.querySelector('button').onclick = start
+  </script>
+</html>