Class 6 - Audiovisual Interaction

[BarakChamo]

Assignment

For next class, use your new Tone.js and incorporate sound and music into an interactive web project.

For your project, choose one of the following:

1. A sonic interface - Using Three.js, P5.js or any other tool, create an interface for playing sound and music using Tone.js, think of how to visualize different qualities of sound we discussed in class (pitch, timbre, duration) and how much creative freedom or formal constrains you'd like to give your users in playing or interacting with your interface (i.e., are you building a piano or a theremin?).

2. An audio-driven experience - Using Three.js, P5.js or any other tool, create an interactive interface, experiment or experience that changes or progresses in response to audio-based events (time, parts, loops, etc.).

For example, how could an audiovisual scene change every note or every beat to keep it interesting, how could elements of an interactive narrative project respond to musical events and data?

Use Tone.js Loop and Part to trigger events and call code in time with musical events and think of how best to visualize different elements of sound and music (pitch, timbre, duration).

You're of course welcome to incorporate both into a single project!

[yinyucheng0601]

Added sound to raycasting. Improved my work by randomly picking 3d models. https://yinyucheng0601.github.io/My-Creative-Web/class%203/examples/Paint%20and%20sound.html

[Gman9000]

Granville Jones here :D

• musical instrument is my chosen excercise
• music plays in the background
• you can interact through tapping the objects to play them
• issues encountered: after a VERY VERY VERY VERY long time of the background music looping, it will suddenly stop playing some notes in the background music
• this project has the ability to play music that i have downloaded from the web as well AND still allows you to play the C4 major scale on top of that music (which is entertaining to my ears if i do say so myself), however I don't know how to sync the objects changing color to the beat of the music i downloaded so i decided to comment out that functionality for now

here is my project: https://Gman9000.github.io/The-Creative-Web-Sound-HW/classes/class6/examples/index.html

[ChawaZhang]

Xueren Zhang https://chawazhang.github.io/XuerenCreativeWeb.github.io/XuerenCreativeWeb.github.io/XuerenZhangassignment6.html

Add sound when clicking on interface buttons, potentially a number pad for the phone? By far I have trouble to find united numbers online, so.. it's just an inspiration of using them as a number pad system

[flora233]

https://flora233.github.io/creativeWeb19/assignment/class6.html

[dpinna13]

https://dpinna13.github.io/The-Creative-Web/classes/class_06/index.html

Added sounds originating from planets. Depending on the position of the camera and the planets, different sounds are played. Planning to move the sound generating part from THREEjs to Tone.js, to have more control of the sound. The idea would be attempting to emulate Eno's Music For Airports execution / generative music

[Aparna-Ramakrishnan-3323]

This one is more like a musical experience combined with instrument. The user gets to play the keys while he travels through a space filled with notes. (Ideal in VR) Features:

Tiles playing note on hover or press Press effect on tiles Music notes playing note on mouse hover Effect of user travelling through a music space Sampled time so as to create overlapping music beats

https://aparna-ramakrishnan-3323.github.io/Assignment%205/examples/Travel%20through%20Music.html

Issue: No sound in Google Chrome, works in Explorer/ Edge.

[xtcEcho]

https://github.com/xtcEcho/echo_creative_web/blob/master/class%206/class6.html Trying to do an automatic music box system here by playing music whenever the 3d objects collide. I'm using Threex.Collider to detect the collisions but right now I'm having problems using it. Still work in progress

[Gman9000]

10/30/2019 (GRANVILLE JONES) Controls:

• up arrow: moves up the Z plane
• Down arrow: moves down the Z plane
• left arrow: move leftwards on the x plane
• right arrow: moves rightwards on the x plane
• shift key: moves up the y plane vertically
• ctrl key: moves down the y plane vertically -Muiscal interaction -you can move around in a 3d grid and listen to 4 different songs as they move about in the space -proof of concept: spatialization of songs in a 3d space -if you near an object that song will play more than the other songs in the other objects -things for next week: making sure i break apart ONE song into it's components and put those into objects instead of just having 4 separate songs in different objects. Here is the link to Homework #7 https://Gman9000.github.io/The-Creative-Web-Sound-HW2/classes/class7/examples/class7notes.html

[xtcEcho]

https://github.com/xtcEcho/echo_creative_web/blob/master/class%207/class%207.html This is the base of a music visualization project. Created a organic sphere using perlin noise that somewhat interacts with sound. To do:

1. make the sphere into a more organic object maybe use BufferGeometry;
2. implement the sound so that the interaction is more obvious and reasonable