lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download
Transcript of lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download
![Page 1: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/1.jpg)
CS247L Lab3Wednesday April 16, 2014
https://github.com/bwang29/cs247l_lab3.gitPlease Download
![Page 2: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/2.jpg)
Today Web-audio + Three.js
Can be particularly useful for you P4. 25 min intro + 75 min pair programming
![Page 3: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/3.jpg)
https://github.com/bwang29/cs247l_lab3.git
Please Download
![Page 4: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/4.jpg)
http://mudcu.be/midi-js/MIDI.noteOn(0, note, velocity, delay);
http://www.stanford.edu/~borui/temp/176p1/
![Page 5: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/5.jpg)
http://www.html5rocks.com/en/tutorials/webaudio/intro/
http://www.stanford.edu/~borui/offshore/gesture/
![Page 6: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/6.jpg)
The basic idea of web audio
![Page 8: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/8.jpg)
Three.js (WebGL, Canvas, CSS 3d, SVG)
Scene, Camera, Objects, Renderer
![Page 9: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/9.jpg)
http://threejs.org/
![Page 10: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/10.jpg)
Scene, Camera, Objects, Renderer
Let’s get started
![Page 11: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/11.jpg)
80 lines of code
![Page 12: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/12.jpg)
30 lines of code
![Page 13: lab3 - Stanford University€¦ · CS247L Lab3 Wednesday April 16, 2014 Please Download](https://reader035.fdocuments.net/reader035/viewer/2022062603/5f06c7317e708231d419afc2/html5/thumbnails/13.jpg)
Your task 1) figure out what
cs247_lab3_rotating_canvas does. !2) do a chat application leveraging the cs247_lab3_rotating_canvas and sound (sound files under the sound folder).
Find a pair !