diff --git a/README.md b/README.md index 4ac8bbff..f06133c6 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,9 @@ -Assignment 4 - Creative Coding: Interactive Multimedia Experiences -=== +Jordan's Audio Visualizer - Assignment #4 -Due: October 4th, by 11:59 AM. +http://a4-jrwecler.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. +In this creative coding assignment, I created an audio visualizer using Canvas and the WebAudioAPI. Three songs can be played on my webpage while watching the waveform react to the music being played. -[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 `` 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 ; 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. +- The goal of this application was to display the waveform in a less traditional way, by using dots instead of a full bar to show the height of the waveform at a specific point. Another goal was for the visualizer to be customizable in terms of color of the waveform. +- Challenges included finding how to make the waveform start from the bottom, and understanding the fundamentals of how the WebAudio API worked. +- Use the color slider to change the color of the dots that make up the waveform. Use the drop-down menu to select a song. Use the start and stop buttons to start and stop the selected song. diff --git a/package.json b/package.json new file mode 100644 index 00000000..b0a32b77 --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "//1": "describes your app and its dependencies", + "//2": "https://docs.npmjs.com/files/package.json", + "//3": "updating this file will download and update your packages", + "name": "hello-express", + "version": "0.0.1", + "description": "A simple Node app built on Express, instantly up and running.", + "main": "server.js", + "scripts": { + "start": "node server.js" + }, + "dependencies": { + "cors": "^2.8.5", + "express": "^4.17.1", + "tweakpane": "^3.0.5" + }, + "engines": { + "node": "12.x" + }, + "repository": { + "url": "https://glitch.com/edit/#!/hello-express" + }, + "license": "MIT", + "keywords": [ + "node", + "glitch", + "express" + ] + } + \ No newline at end of file diff --git a/public/script.js b/public/script.js new file mode 100644 index 00000000..f187f317 --- /dev/null +++ b/public/script.js @@ -0,0 +1,256 @@ +const songLinks = [ + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20Dance%20Yrself%20Clean.mp3?v=1633374360038', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20Drunk%20Girls.mp3?v=1633317846421', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20One%20Touch.mp3?v=1633318109921', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20All%20I%20want.mp3?v=1633374473209', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20I%20Can%20Change.mp3?v=1633374593273', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20You%20Wanted%20A%20Hit.mp3?v=1633318269710', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20Pow%20Pow.mp3?v=1633374694749', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20Somebodys%20Calling%20Me.mp3?v=1633319397722', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20Home.mp3?v=1633319523229', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20Throw.mp3?v=1633319968993', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20Throw.mp3?v=1633319968993', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2FLCD%20Soundsystem%20%20Oh%20You%20Christmas%20Blue%20%20Greenberg%20OST.mp3?v=1633320040427', + 'https://cdn.glitch.me/06019493-2b52-4cce-be59-521412d0410c%2Fytmp3free.cc_1-second-of-silence-the-beginning-youtubemp3free.org.mp3?v=1633324076418' + ] + let currentSong = 0; + let currentColor = '#dddddd'; + let startingColor = "#ff0000"; + let endingColor = "#00ff00"; + let partyColors = []; + + const pane = new Tweakpane.Pane(); + const songSection = document.getElementById("songSection"); + + const PARAMS = { + song: 0, + color: '#dddddd', + color_a: "#ff0000", + color_b: "#00ff00" + }; + + const colorSelector = pane.addInput( + PARAMS, "color" + ) + + colorSelector.on('change', (val) => { + currentColor = val.value + }); + + // `options`: list + pane.addInput( + PARAMS, 'song', + {options: { + Dnce_Yrself_Clean: 0, + Drunk_Girls: 1, + One_Touch: 2, + All_I_Want: 3, + I_Can_Change: 4, + You_Wanted_a_Hit: 5, + Pow_Pow: 6, + Somebodys_Calling_Me: 7, + Home: 8, + Throw: 9, + Oh_You_Christmas_Blues: 10 + } + } + ).on('change', (val) => { + currentSong = val.value + + }); + + const startbtn = pane.addButton({ + title: 'START', + }); + + startbtn.on('click', () => { + start() + console.log("started"); + }); + + const restartbtn = pane.addButton({ + title: 'RESTART', + }); + + restartbtn.on('click', () => { + start() + console.log("restarted"); + }); + + const stopbtn = pane.addButton({ + title: 'STOP', + }); + + stopbtn.on('click', () => { + currentSong = 12 + start() + console.log("stopped"); + }); + /** + const sColorSelector = pane.addInput( + PARAMS, "color_a" + ) + + sColorSelector.on('change', (val) => { + startingColor = val.value + }); + + const eColorSelector = pane.addInput( + PARAMS, "color_b" + ) + + eColorSelector.on('change', (val) => { + endingColor = val.value + }); + + const partyBtn = pane.addButton({ + title: 'PARTY MODE', + }); + + partyBtn.on('click', () => { + partyColors = gradient(startingColor, endingColor, 100) + partyStart() + console.log("party"); + }); + + **/ + const start = function() { + songSection.innerHTML = '' + const canvas = document.createElement( 'canvas' ) + songSection.appendChild( canvas ) + canvas.width = canvas.height = 512 + const ctx = canvas.getContext( '2d' ) + + // audio init + const audioCtx = new AudioContext() + const audioElement = document.createElement( 'audio' ) + audioElement.crossOrigin = "anonymous"; + console.log(audioElement.crossOrigin) + songSection.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 = songLinks[currentSong] + audioElement.play() + const results = new Uint8Array( analyser.frequencyBinCount ) + + const 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 = '#25C0CC' + ctx.fillRect( 0,0,canvas.width,canvas.height*2 ) + + // set the color to white for drawing our visuaization + ctx.fillStyle = currentColor + + analyser.getByteFrequencyData( results ) + + for( let i = 0; i < analyser.frequencyBinCount; i++ ) { + ctx.fillRect( 0, 2*i, results[i], 2) // upside down! + } + } + draw() + } + /** + const partyStart = function() { + let partyColorIndex = 0; + songSection.innerHTML = '' + const canvas = document.createElement( 'canvas' ) + songSection.appendChild( canvas ) + canvas.width = canvas.height = 512 + const ctx = canvas.getContext( '2d' ) + + // audio init + const audioCtx = new AudioContext() + const audioElement = document.createElement( 'audio' ) + audioElement.crossOrigin = "anonymous"; + songSection.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 = songLinks[currentSong] + audioElement.play() + const results = new Uint8Array( analyser.frequencyBinCount ) + + const partyDraw = 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 = '#25C0CC' + ctx.fillRect( 0,0,canvas.width,canvas.height ) + + // set the color to white for drawing our visuaization + partyColorIndex += 1 + if (partyColorIndex >= partyColors.length) { + partyColorIndex = 0 + partyColors = gradient(endingColor, startingColor, 100) + } + //ctx.fillStyle = partyColors[partyColorIndex] + currentColor = partyColors[partyColorIndex] + ctx.fillStyle = partyColors[0] + //console.log(partyColors[partyColorIndex]) + //console.log(ctx.fillStyle) + console.log(partyColors[0]) + analyser.getByteFrequencyData( results ) + + for( let i = 0; i < analyser.frequencyBinCount; i++ ) { + ctx.fillRect( i, 0, 1, results[i]) // upside down! + //console.log(results[i]) + } + } + partyDraw() + } + + function gradient(startColor, endColor, steps) { + var start = { + 'Hex' : startColor, + 'R' : parseInt(startColor.slice(1,3), 16), + 'G' : parseInt(startColor.slice(3,5), 16), + 'B' : parseInt(startColor.slice(5,7), 16) + } + var end = { + 'Hex' : endColor, + 'R' : parseInt(endColor.slice(1,3), 16), + 'G' : parseInt(endColor.slice(3,5), 16), + 'B' : parseInt(endColor.slice(5,7), 16) + } + var diffR = end['R'] - start['R']; + var diffG = end['G'] - start['G']; + var diffB = end['B'] - start['B']; + + var stepsHex = new Array(); + var stepsR = new Array(); + var stepsG = new Array(); + var stepsB = new Array(); + + for(var i = 0; i <= steps; i++) { + stepsR[i] = start['R'] + ((diffR / steps) * i); + stepsG[i] = start['G'] + ((diffG / steps) * i); + stepsB[i] = start['B'] + ((diffB / steps) * i); + stepsHex[i] = '#' + Math.round(stepsR[i]).toString(16) + '' + Math.round(stepsG[i]).toString(16) + '' + Math.round(stepsB[i]).toString(16); + } + return stepsHex; + + } + **/ \ No newline at end of file diff --git a/public/style.css b/public/style.css new file mode 100644 index 00000000..544b6e67 --- /dev/null +++ b/public/style.css @@ -0,0 +1,29 @@ +body { + background-color: #25C0CC; + font-family: Montserrat, sans-serif; + } + + #infoSection { + position:absolute; + display:inline-block; + text-align: right; + top: 8em; + right: 1em; + } + + #songSection { + position:absolute; + display:inline-block; + top: 0px; + left: 0px; + } + + h3 { + color: blue; + } + + img { + box-shadow: 0 30px 40px rgba(0,0,0,.5); + } + + \ No newline at end of file diff --git a/server.js b/server.js new file mode 100644 index 00000000..86848517 --- /dev/null +++ b/server.js @@ -0,0 +1,40 @@ +// 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('./') ) +app.listen( 4000 ) + +// 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); +}); diff --git a/views/index.html b/views/index.html new file mode 100644 index 00000000..2f5126d0 --- /dev/null +++ b/views/index.html @@ -0,0 +1,30 @@ + + + + + + + +
+ +
+
+

+ LCD Soundsystem Visualizer! +

+

+ Welcome to the LCD Soundsystem visualizer,
+ where you can select any song from the
+ classic album "This is Happening" and
+ see a visualization of the audio file!
+ To use the app, select a song from the
+ drop down menu in the top right. Feel
+ free to restart or stop a song with the
+ given buttons or switch the color of the wave +

+ +
+ + + + \ No newline at end of file