component---src-pages-decal-homework-hw-2-js-d366e9a9128a201175e9.js

"use strict";(self.webpackChunkxr_b_website=self.webpackChunkxr_b_website||[]).push([[834],{46:function(e,t,a){a.r(t),a.d(t,{Head:function(){return y},default:function(){return w}});var l=a(7294),n=(a(1883),a(594)),r=a(1220),c=a(9686),i=a(8315),o=a(3307),s=a(6714),u=a(1899),m=a.p+"static/HW2-0-e55399fb0b79c7eb032ce0aa55060cc1.png",d=a.p+"static/HW2-1-3f4e4aff97022369104108aa13ec0651.png",h=a.p+"static/HW2-2-329b157f0dd97136268877c80007892d.png",b=a.p+"static/HW2-3-c4ff6958a0df059119f167b3909e4ee3.png",E=a.p+"static/HW2-4-ee5c2ede35c9e7b0db436c41ca32533c.png",p=a.p+"static/HW2-5-4d98f75ecede28299690a4af39ac8c6c.png",f=a.p+"static/HW2-6-02a523103b9e84894f44c41086e0ae40.png",g=a.p+"static/HW2-7-98b360b5be1f9b26d04d38a19eac35f5.png",v=a.p+"static/HW2-8-bca556d634410c19d2e83c4f193276cf.png";var w=()=>l.createElement("main",null,l.createElement("body",null,l.createElement(c.Z,{activePage:"decal"}),l.createElement("div",{className:r.Eu},l.createElement(i.Z,{activePage:"homework",open:"homework"}),l.createElement("div",{className:r.aS},l.createElement("h1",null,"Homework 2: Music Visualizer"),l.createElement("div",{className:r.d$},l.createElement("h2",null,"Table of Contents"),l.createElement("p",null,l.createElement("span",{className:r.Vd},l.createElement(o.Z,{text:"Introducing Spectrum Theory",color:"red",icon:s.Z,type:"underlineOut",link:"#introducing-spectrum-theory",alt:""}))),l.createElement("p",null,l.createElement("span",{className:r.Vd},l.createElement(o.Z,{text:"Extracting Spectrum Data",color:"red",icon:s.Z,type:"underlineOut",link:"#extracting-spectrum-data",alt:""}))),l.createElement("p",null,l.createElement("span",{className:r.Vd},l.createElement(o.Z,{text:"Visualizing Spectrum Data",color:"red",icon:s.Z,type:"underlineOut",link:"#visualizing-spectrum-data",alt:""}))),l.createElement("p",null,l.createElement("span",{className:r.Vd},l.createElement(o.Z,{text:"Introducing Frequency Bands",color:"red",icon:s.Z,type:"underlineOut",link:"#introducing-frequency-bands",alt:""}))),l.createElement("p",null,l.createElement("span",{className:r.Vd},l.createElement(o.Z,{text:"8 Bin Separation",color:"red",icon:s.Z,type:"underlineOut",link:"#8-bin-separation",alt:""}))),l.createElement("p",null,l.createElement("span",{className:r.Vd},l.createElement(o.Z,{text:"Visualizing 8 Bins",color:"red",icon:s.Z,type:"underlineOut",link:"#visualizing-8-bins",alt:""}))),l.createElement("p",null,l.createElement("span",{className:r.Vd},l.createElement(o.Z,{text:"Add Your Own Flair",color:"red",icon:s.Z,type:"underlineOut",link:"#add-your-own-flair",alt:""}))),l.createElement("p",null,l.createElement("span",{className:r.Vd},l.createElement(o.Z,{text:"Submission and Grading",color:"red",icon:s.Z,type:"underlineOut",link:"submission-and-grading",alt:""})))),l.createElement("p",null,"Your second assignment is to create your very own music visualizer! It will look something like this:",l.createElement("br",null),l.createElement("br",null),l.createElement("img",{src:m}),l.createElement("br",null),l.createElement("br",null),"This assignment will be a review of some of the Unity editor tools you have practiced in HW1, but more importantly, an introduction on using C# scripts to manipulate gameobjects.",l.createElement("br",null),l.createElement("br",null),"First off, download the skeleton asset package ",l.createElement("a",{href:"https://drive.google.com/file/d/1qcFEAebMHNdoy75RfwDyPCGzI1t7l23H/view?usp=sharing",target:"_blank",className:r.JA},"here")," and import it into a new project. Create a new scene called HW2 to work in.",l.createElement("br",null),l.createElement("br",null),"In the meantime, take a look at these amazing music visualizer examples created with Unity by other people. This homework only goes over the basics, but you could take it to another level by adding your own flair. Links: ",l.createElement("a",{href:"https://www.youtube.com/watch?v=tMzmHWekLaY",target:"_blank",className:r.JA},"1"),", ",l.createElement("a",{href:"https://www.youtube.com/watch?v=cBYx8Dm81tc",target:"_blank",className:r.JA},"2"),", ",l.createElement("a",{href:"https://www.youtube.com/watch?v=80tu2ZLKD-o",target:"_blank",className:r.JA},"3"),", ",l.createElement("a",{href:"https://www.youtube.com/watch?v=XbNhv2ylzKw",target:"_blank",className:r.JA},"4"),", ",l.createElement("a",{href:"https://www.youtube.com/watch?v=swb-8Azjz9Q",target:"_blank",className:r.JA},"5"),"."),l.createElement("div",{className:r.Xw},l.createElement("div",{className:r.BZ})),l.createElement("h2",{id:"introducing-spectrum-theory"},"Introducing Spectrum Theory"),l.createElement("p",null,"Every sound that enters your ear is actually a sum of different frequencies. Pure waveforms from various sources combine together into a single complex waveform. This complex waveform is then processed by your brain to create music, conversation, and everything else you hear.",l.createElement("br",null),l.createElement("br",null),"The ",l.createElement("a",{href:"https://en.wikipedia.org/wiki/Fast_Fourier_transform",target:"_blank",className:r.JA},"Fast Fourier Transform")," algorithm is the exact reverse - it takes a complex waveform and decomposes it into its base frequencies. Take the picture below as an example, which looks at a simple song from various perspectives.",l.createElement("br",null),l.createElement("br",null),l.createElement("img",{src:d}),l.createElement("br",null),l.createElement("br",null),"What you physically hear is the result, which is the sum of the pure bass, kick, synth, and harmonics waveforms.",l.createElement("br",null),l.createElement("br",null),"Performing FFT on the result returns an array of weights, which represent how much of each base frequency is being used in the result. You’ll notice there are 4 peaks, one for each of the pure waveforms. The leftmost peak represents the lowest frequency (the bass), and is the tallest because the bass has the greatest amplitude out of the four waveforms.",l.createElement("br",null),l.createElement("br",null),"You might have noticed the FFT graph looks a little bit like a music visualization - and in fact it is. Music visualizations are nothing more than visual representations of the FFT for a song and how it changes over time. In our case, we will be representing the values of the FFT with the heights of various cubes.",l.createElement("br",null),l.createElement("br",null),l.createElement("i",null,"If you’d like to learn more, EE16A covers this subject in much more detail.")),l.createElement("div",{className:r.Xw},l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ})),l.createElement("h2",{id:"extracting-spectrum-data"},"Extracting Spectrum Data"),l.createElement("p",null,"Let’s start off the homework by creating a script that allows you to extract spectrum data from any audio source.",l.createElement("br",null),l.createElement("br",null),"We will start by creating an empty gameobject named “SpectrumAnalyzer” and a C# script named “SpectrumAnalyzer”. Add both an Audio Source and the script to the gameobject. Then open the script in the text editor of your choice, which will likely be Visual Studio or Monodevelop.",l.createElement("br",null),l.createElement("br",null),"As a side tangent, you may change your script editor by going to ",l.createElement("i",null,"Edit > Preferences > External Tools"),".",l.createElement("br",null),l.createElement("br",null),l.createElement("img",{src:h}),l.createElement("br",null),l.createElement("br",null),"Start off by adding two variables to the script, above the Start() function.",l.createElement("br",null),l.createElement("br",null),l.createElement("div",{className:r.TU},"AudioSource audioSource;",l.createElement("br",null),"public static float[] samples = new float[512];",l.createElement(n.CopyToClipboard,{text:"AudioSource audioSource;\r public static float[] samples = new float[512];"},l.createElement(u.Z,{className:r.JG}))),l.createElement("br",null),l.createElement("br",null),"As you remember from roll-a-ball, the Start() function is called once, when the script is enabled. This makes it a good place to instantiate and/or initialize variables. We’ll initialize our audio source component here. Additionally, stub in a new function called GetSpectrumAudioSource().",l.createElement("br",null),l.createElement("br",null),l.createElement("div",{className:r.TU},"void Start () {",l.createElement("br",null),"  ","audioSource = GetComponent<AudioSource>();",l.createElement("br",null),"}",l.createElement("br",null),l.createElement("br",null),"void GetSpectrumAudioSource() {",l.createElement("br",null),l.createElement("br",null),"}",l.createElement(n.CopyToClipboard,{text:"void Start () {\r audioSource = GetComponent<AudioSource>();\r }\r void GetSpectrumAudioSource() {\r }"},l.createElement(u.Z,{className:r.JG}))),l.createElement("br",null),l.createElement("br",null),"We’ll use this function to analyze the spectrum data from audioSource and save it in variable samples every frame. Fortunately, Unity has a built in function that does this for us, ",l.createElement("a",{href:"https://docs.unity3d.com/ScriptReference/AudioSource.GetSpectrumData.html",target:"_blank",className:r.JA},"GetSpectrumData"),". We’ll use channel 0 since we’re only playing one thing at a time, and use Blackman for our spectrum analysis window due to its overall robust behaviour.",l.createElement("br",null),l.createElement("br",null),l.createElement("div",{className:r.TU},"void GetSpectrumAudioSource() {",l.createElement("br",null),"  ","audioSource.GetSpectrumData(samples, 0, FFTWindow.Blackman);",l.createElement("br",null),"}",l.createElement(n.CopyToClipboard,{text:"void GetSpectrumAudioSource() {\r audioSource.GetSpectrumData(samples, 0, FFTWindow.Blackman);\r }"},l.createElement(u.Z,{className:r.JG}))),l.createElement("br",null),l.createElement("br",null),"Since we’ll want to update our spectrum samples every frame, put GetSpectrumAudioSource() in the Update function.",l.createElement("br",null),l.createElement("br",null),l.createElement("div",{className:r.TU},"void Update () {",l.createElement("br",null),"  ","GetSpectrumAudioSource();",l.createElement("br",null),"}",l.createElement(n.CopyToClipboard,{text:"void Update () {\r GetSpectrumAudioSource();\r }"},l.createElement(u.Z,{className:r.JG}))),l.createElement("br",null),l.createElement("br",null),"Save your work and switch back to Unity. Select your SpectrumAnalyzer gameobject and set the AudioClip to whichever audio file you want to visualize. We have provided a sample audiofile in the Audio folder, in case you don’t have any. Here are some links to music if you’d like to download some: ",l.createElement("a",{href:"https://www.bensound.com/",target:"_blank",className:r.JA},"1"),", ",l.createElement("a",{href:"http://www.purple-planet.com/",target:"_blank",className:r.JA},"2"),", ",l.createElement("a",{href:"http://freemusicarchive.org/",target:"_blank",className:r.JA},"3"),", ",l.createElement("a",{href:"https://soundcloud.com/royalty-free-audio-loops",target:"_blank",className:r.JA},"4"),".",l.createElement("br",null),l.createElement("br",null),l.createElement("img",{src:b})),l.createElement("div",{className:r.Xw},l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ})),l.createElement("h2",{id:"visualizing-spectrum-data"},"Visualizing Spectrum Data"),l.createElement("p",null,"Next, we’re going to visualize each of the 512 spectrum samples using cubes.",l.createElement("br",null),l.createElement("br",null),"In ",l.createElement("i",null,"Assets > Scripts"),", find and open the script “Instantiate512cubes”. This script starts off by spawning 512 cubes in a circle such that they all face the center. It then takes the sample data every frame and represents it using the heights of the cubes. The effect will be something like this:",l.createElement("br",null),l.createElement("br",null),l.createElement("img",{src:E}),l.createElement("br",null),l.createElement("br",null),"There are two sections of this script for you to complete on your own. Read the comments for more details on what each section does and hints on how to do it.",l.createElement("br",null),l.createElement("br",null),"When you’re done, save your work and switch back to Unity. Create a gameobject called “InstantiateCubes” and attach the script to this object. You’ll notice the Cube Prefab isn’t assigned - you can find a prefab for it in ",l.createElement("i",null,"Assets > Prefabs"),".",l.createElement("br",null),l.createElement("br",null),"Press play! You’ll notice that the camera location isn’t great. Change the position and rotation so that the camera is showing the scene correctly. Remember that while you can edit anything while the game is playing by switching back to the scene view, none of it will save once the game stops playing.",l.createElement("br",null),l.createElement("br",null),"To work around this, move your camera to where you want it, then click the gear icon in the transform component’s top right to copy component. Then stop play mode (which will move your camera back), click the gear, and paste the component values you just copied.",l.createElement("br",null),l.createElement("br",null),"Congrats! You now have a working music visualizer."),l.createElement("div",{className:r.Xw},l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ})),l.createElement("h2",{id:"introducing-frequency-bands"},"Introducing Frequency Bands"),l.createElement("p",null,"After testing out your visualizer, you might have noticed that most of the movement happens in the first couple cubes (the lower frequencies) while most of the other cubes (higher frequencies) barely move.",l.createElement("br",null),l.createElement("br",null),"The reason for this is that the lower frequency sounds are much closer together, while the higher frequencies are much more spread out. This means all the low frequencies get shoved into a couple of cubes, while the high frequencies are spread out across a whole bunch of them.",l.createElement("br",null),l.createElement("br",null),"We’re now going to fix this issue by collating the 512 samples into just 8 bins, which will represent different frequency bands. Audio specialists have grouped the range of human detectable frequencies into 7 broad regions. They are as follows:",l.createElement("ul",null,l.createElement("li",null,"Sub Bass: 20 - 60 Hz"),l.createElement("li",null,"Bass: 60 - 250 Hz"),l.createElement("li",null,"Low Midrange: 250 - 500 Hz"),l.createElement("li",null,"Midrange: 500 - 2k Hz"),l.createElement("li",null,"Upper Midrange: 2k - 4k Hz"),l.createElement("li",null,"Presence: 4k - 6k Hz"),l.createElement("li",null,"Brilliance: 6k- 20k Hz")),l.createElement("img",{src:p}),l.createElement("br",null),l.createElement("br",null),"Notice how the regions roughly increase in size as they increase in frequency. Inspired by this, we’ll create 8 bins where higher frequency bins absorb more samples. We have a total range of 20k - 20 = 19980 Hz to cover, and with 512 samples each sample covers 19980 / 512 = 39 Hz. We’ll define the bins as follows:",l.createElement("br",null),l.createElement("br",null),l.createElement("img",{src:f}),l.createElement("br",null),l.createElement("br",null),l.createElement("i",null,"*We stick the two last samples into the final bin, hence why it’s 258 and not 256.")),l.createElement("div",{className:r.Xw},l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ})),l.createElement("h2",{id:"8-bin-separation"},"8 Bin Separation"),l.createElement("p",null,"Switch to editing SpectrumAnalyzer. Add a variable for array freqBand, which will contain the collated sample data bins. Also add a function called MakeFrequencyBands(). As filling out this function is rather tedious, we’ve done it for you.",l.createElement("br",null),l.createElement("br",null),l.createElement("div",{className:r.TU},"public static float[] freqBand = new float[8];",l.createElement("br",null),"void MakeFrequencyBands() {","  ","int count = 0;",l.createElement("br",null),l.createElement("br",null),"  ","// Iterate through the 8 bins.",l.createElement("br",null),"  ","float average = 0;",l.createElement("br",null),"  ","int sampleCount = (int)Mathf.Pow (2, i + 1);",l.createElement("br",null),l.createElement("br",null),"  ","// Adding the remaining two samples into the last bin.",l.createElement("br",null),"  ","if (i == 7) {",l.createElement("br",null),"    ","sampleCount += 2;",l.createElement("br",null),"  ","}",l.createElement("br",null),l.createElement("br",null),"  ","// Go through the number of samples for each bin, add the data to the average",l.createElement("br",null),"  ","for (int j = 0; j < sampleCount; j++) {",l.createElement("br",null),"    ","average += samples [count];",l.createElement("br",null),"    ","count++;",l.createElement("br",null),"  ","}",l.createElement("br",null),l.createElement("br",null),"  ","// Divide to create the average, and scale it appropriately.",l.createElement("br",null),"  ","average /= count;",l.createElement("br",null),"  ","freqBand[i] = (i+1) * 100 * average;",l.createElement("br",null),"  ","}","}",l.createElement(n.CopyToClipboard,{text:"public static float[] freqBand = new float[8];\r void MakeFrequencyBands() {\r int count = 0;\r // Iterate through the 8 bins.\r for (int i = 0; i < 8; i++)  {\r float average = 0;\r int sampleCount = (int)Mathf.Pow (2, i + 1);\r // Adding the remaining two samples into the last bin.\r if (i == 7) {\r sampleCount += 2;\r }\r // Go through the number of samples for each bin, add the data to the average\r for (int j = 0; j < sampleCount; j++) {\r average += samples [count];\r count++;\r }\r // Divide to create the average, and scale it appropriately.\r average /= count;\r freqBand[i] = (i+1) * 100 * average;\r }\r }"},l.createElement(u.Z,{className:r.JG}))),l.createElement("br",null),l.createElement("br",null),"Add a call to MakeFrequencyBands() to Update() so it gets called every frame.",l.createElement("br",null),l.createElement("br",null),"If you ran and debugged this updated script now, you’d find that the value range for each bin vary greatly. To make it easier to work with the values, we’ll scale each bin’s value into a number between 0 and 1.",l.createElement("br",null),l.createElement("br",null),"Add the following variables and function to SpectrumAnalyzer:",l.createElement("br",null),l.createElement("br",null),l.createElement("div",{className:r.TU},"float[] freqBandHighest = new float[8];",l.createElement("br",null),"public static float[] audioBands = new float[8];",l.createElement("br",null),l.createElement("br",null),"void CreateAudioBands() {",l.createElement("br",null),l.createElement("br",null),"}",l.createElement(n.CopyToClipboard,{text:"float[] freqBandHighest = new float[8];\r public static float[] audioBands = new float[8];\r void CreateAudioBands() {\r }"},l.createElement(u.Z,{className:r.JG}))),l.createElement("br",null),l.createElement("br",null),"Fill out CreateAudioBands() on your own. This function should first update freqBandHighest, which contains the highest-yet-seen values for each bin. Then it divides each current band value by the highest-yet-seen to get us a number between 0 and 1. This result is saved to array audioBands.",l.createElement("br",null),l.createElement("br",null),"Once you’ve completed CreateAudioBands(), add it to the end of Update() so it gets called each frame."),l.createElement("div",{className:r.Xw},l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ})),l.createElement("h2",{id:"visualizing-8-bins"},"Visualizing 8 Bins"),l.createElement("p",null,"Finally, let’s create cubes to visualize the calculated values for each bin.",l.createElement("br",null),l.createElement("br",null),"Let’s use the cube prefab again, and place eight of them in the middle of the scene. You can simply drag the prefab into the Hierarchy or the scene view. Scale them so they’re visible in the game view.",l.createElement("br",null),l.createElement("br",null),l.createElement("img",{src:g}),l.createElement("br",null),l.createElement("br",null),"We’ll need a script to read the values from audioBands in SpectrumAnalyzer and represent them as heights for each cube. Create a C# script named “Cube”, and add the following variables to it:",l.createElement("br",null),l.createElement("br",null),l.createElement("div",{className:r.TU},"public int band;",l.createElement("br",null),"public float startScale;",l.createElement("br",null),"public float scaleMultiplier;",l.createElement("br",null),l.createElement(n.CopyToClipboard,{text:"public int band;\r public float startScale;\r public float scaleMultiplier;"},l.createElement(u.Z,{className:r.JG}))),l.createElement("br",null),l.createElement("br",null),"The variable band represents which bin this cube represents. startScale represents the height of the cube when its audioBand value is 0, and scaleMultiplier is how much to multiply the audioBand value by.",l.createElement("br",null),l.createElement("br",null),"Fill out the needed functionality on your own. You can refer to Instantiate512cube for help, since the functionality is similar. When you’re done, attach the script to each of the cubes and set the editor values appropriately (remember, you can modify multiple objects at once via shift/ctrl select). You do not have to use the values shown below.",l.createElement("br",null),l.createElement("br",null),l.createElement("img",{src:v}),l.createElement("br",null),l.createElement("br",null),"Now try out your music visualizer!"),l.createElement("div",{className:r.Xw},l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ})),l.createElement("h2",{id:"add-your-own-flair"},"Add Your Own Flair"),l.createElement("p",null,"Your final task is to add your own feature to the music visualizer. This is completely open-ended - you may go as crazy as you’d like. We only request that you do not remove the functionality you’ve implemented thus far.",l.createElement("br",null),l.createElement("br",null),"Here are some suggestions on what you could add:",l.createElement("ul",null,l.createElement("li",null,l.createElement("a",{href:"https://docs.unity3d.com/ScriptReference/Light.html",target:"_blank",className:r.JA},"Lights")),l.createElement("li",null,l.createElement("a",{href:"https://docs.unity3d.com/ScriptReference/Material.html",target:"_blank",className:r.JA},"Colors")),l.createElement("li",null,"Different Kinds of Visualization (spheres, rotation, etc.)"),l.createElement("li",null,"Band Buffering (removing the choppy movement of the bands)"))),l.createElement("div",{className:r.Xw},l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ}),l.createElement("div",{className:r.BZ})),l.createElement("h2",{id:"submission-and-grading"},"Submission and Grading"),l.createElement("p",null,"Upload the project via Google Drive and submit the link to bCourses. (Instructions on Ed.) Completion of the functionality described in this homework will get you 4 points (out of 5), and adding your own improvements will get you the last point. There will be extra credit given to those whom we deemed went above and beyond with their improvements.",l.createElement("br",null),l.createElement("br",null),l.createElement("br",null),l.createElement("b",null,"CREDITS"),l.createElement("br",null),l.createElement("br",null),"This assignment was taken and adapted from Peter Olthof’s brilliant music visualizer tutorial on Youtube. You can find it on his channel, ",l.createElement("a",{href:"https://www.youtube.com/channel/UCBkub2TsbCFIfdhuxRr2Lrw",target:"_blank",className:r.JA},"Peer Play"),".")))));const y=()=>l.createElement("title",null,"Extended Reality @ Berkeley")}}]);
//# sourceMappingURL=component---src-pages-decal-homework-hw-2-js-d366e9a9128a201175e9.js.map