![google chrome music lab google chrome music lab](https://ictevangelist.com/wp/wp-content/uploads/2016/03/chrome-music-lab.png)
When the user draws a circle or triangle, the program recognizes the shape and applies a unique sound and effect. Once back to the main thread, the geometry of the line is updated with new data - ready to draw on the next animation frame! Gesture recognition While it’s animating, the co-ordinates are all flattened into a Float32Array which is passed back to the main thread at lightning speed thanks to transferable objects in WebWorkers. When a shape plays a sound, the points are scaled up and snap back to their original position with a spring physics calculation. Inside the WebWorker, we maintain the state of each shape in the form of a Vector object with X and Y co-ordinates for each point that is drawn as part of the shape. We handled this by moving the physics math off of the main thread into a WebWorker.
GOOGLE CHROME MUSIC LAB SERIES
For Kandinsky however, each line is stored as a separate mesh, made up of a series of points and attached to a WebGL scene.īelow you can see a wireframe example of the resulting mesh.Ī big challenge in calculating a large number of interactive objects at once is trying to render the animations consistently at 60fps on every supported device.
![google chrome music lab google chrome music lab](https://nebulax8.files.wordpress.com/2018/03/chrome-music-lab-google.png)
In regular drawing applications, the canvas is stored as pixel data and the pixels are manipulated for every stroke. Our final build uses WebGL to draw lines that are calculated and rendered on the GPU, resulting in a very smooth, dynamic and addictive experience. The second iteration used WebGL and turned lines into geometry by triangulation, which worked and was fast but gave us limited control over the look of the line. We started using HTML5 canvas to draw lines every frame, which was too slow.
![google chrome music lab google chrome music lab](https://www.ubuntupit.com/wp-content/uploads/2019/07/Best-Linux-Emulators-for-Windows-System.jpg)
Check it out at Chrome Music Experiments. It was a collaboration with our friends at Google Creative Lab where we explored a bunch of different possibilities by sketching through code. This article describes the tech behind the experience. Some shapes even smile and sing back at you. Users doodle, scribble or draw on a web canvas and hit play to listen to their art work. If you have never experimented with the 13 experiments, I strongly encourage you to take a few minutes and just play around with it for a bit.Kandinsky lets you make music through art.
GOOGLE CHROME MUSIC LAB FREE
I've been working on including more opportunities for vocal exploration with my younger kids, and this is a great way to mix modalities to hopefully reach more of my students in order to help them discover their head voices.Īll in all, Chrome Music Lab is one of my favorite free resources to use with my students. It's a great way to show melodic contour, and I love that you are able to use the microphone on your device to have my students make their voices go high and low. I also absolutely love using the Spectogram experiment, especially with my younger kids.
GOOGLE CHROME MUSIC LAB CODE
Point a QR code reader (already installed on most devices) and each card brings up the appropriate web app! No set-up required! Just print and go! Let's be honest, if you've tried centers before, you've probably had at least one day where you ended up spending the entire class helping students in centers rather than working with groups individually.Īll students need is an iPad, Chromebook, or other web-enabled device.
![google chrome music lab google chrome music lab](https://4.bp.blogspot.com/-XTsquHE0mLQ/Wq1wyXZk2VI/AAAAAAAACto/SHEAhLPNf_Q1pXUrf3L-go4M6_cSAkhXgCEwYBhgL/s1600/Chrom%2Bmusic%2Blab.png)
I like being able to leave these task cards as a center because it allows my students to work through each card without them needing my help.