Module 2 Formstorming

Weekly Activity Template

Renyin Xu

Project 2

Module 2

In activity 1, I walk around the school and record 25 sounds
In activity 2, I explored different online resources to learn more about p5.js project with sound
Visualizing Music with p5.js. https://therewasaguy.github.io/p5-music-viz/.

Activity 1

The sound of closing door The dound of water tap The sound of a hand dryer The sound of a heater The sound of a water fountain The sound of flipping book The sound of hallway The sound of footsteps The sound of wet footsteps The sound of pressing auto door button The sound of dancing class <br>Eric. Dancing.Adobe. (n.d.). Stock photos, royalty-free images, graphics, vectors & videos.https://as1.ftcdn.net/jpg/02/45/42/95/240_F_245429579_Hdxc9ODgFNcLTBh4Eir5KEjNBmYtdwMl.jpg. The sound of a vending machine The sound in Tim Hortons The sound of a speaker The sound of a gaming machine The sound of moving chair The sound of typing on a keyboard The sound of clicking mouse The sound of key The sound of water fountain The sound of writing with a pencil <br>Vitalyzorkin. Pencil isolated on white background.Adobe. (n.d.). Stock photos, royalty-free images, graphics, vectors & videos.https://stock.adobe.com/v1/pics/placeholders/spacer.gif. The sound of closing locker <br>Nargiz.Row of closed blue school lockers with one open, empty interior visible, symbol of student life, education system, storage, high school, organization, security, and daily academic routine.Adobe. (n.d.). Stock photos, royalty-free images, graphics, vectors & videos.https://as1.ftcdn.net/jpg/16/72/64/67/240_F_1672646749_kgPEcyUiXy07kBhpYT4zqr0lr1WAaCh1.jpg. The sound of car passing <br>Cla78.Lateral red sport car isolated on a white background.Adobe. (n.d.). Stock photos, royalty-free images, graphics, vectors & videos.https://as1.ftcdn.net/jpg/01/59/17/57/240_F_159175757_1xinWHXfN2tfNNc5d4Dzf5C1hoJK12Es.jpg. The sound of fan moving <br> vxnaghiyev.Detailed View of a Contemporary Three-Blade Ceiling Fan.Adobe. (n.d.). Stock photos, royalty-free images, graphics, vectors & videos.https://stock.adobe.com/v1/pics/placeholders/spacer.gif. The sound of car honking <br> Dmitriy.Angry driver is honking and is yelling by sitting of a steering wheel. Road aggression concept. Traffic jam.Adobe. (n.d.). Stock photos, royalty-free images, graphics, vectors & videos.https://as1.ftcdn.net/jpg/02/52/77/70/240_F_252777052_tBq2IkOmyztN2b5ljZtchYDYC8z4E21x.jpg.

Activity 2

Here is the link, it might required some time to load: https://editor.p5js.org/talia-xu0017/full/jADt5g3qC Here is the link, it might required some time to load: https://editor.p5js.org/talia-xu0017/full/HAAnsiQi1 I found an intreseting project of P5.js. This one I can't really put my own sound in it but I'm playing around to learn what does each code means and will trigger. <br> ex. osc.amp(); is controlling the volumne. env = new p5.Envelope(); is conrolling the delay <br> Here is the link: https://editor.p5js.org/talia-xu0017/full/ELy_f9w2v Here is the link, it might required some time to load: https://editor.p5js.org/talia-xu0017/full/pyHDLlrjc Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/34kMFMAun Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/T1aZg28R19 Here is the link, it might required some time to load: https://editor.p5js.org/talia-xu0017/full/wiUKhnKEJ Found an intreseting melody coding from P5.JS https://p5js.org/tutorials/simple-melody-app/. <br> Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/COjDCz0fL Found an intreseting P5.JS example from Youtube. I go through the video while she teaches us step by step. Here is the link, it might required some time to load: I did my own coding try to see if I understand the mousClick play auido and pause auido. Here is the link, it might required some time to load: https://editor.p5js.org/talia-xu0017/full/cEwENcAs5 I followed an tutorial video of audio visualized coding, https://www.youtube.com/watch?v=uk96O7N1Yo0&t=1084s. <br> Here is the link, it might required some time to load: https://editor.p5js.org/talia-xu0017/full/pwccUBvh7 Audio visualized 2, I add beginShape() and endShape(). Adding vertex(x, y) for the var and adding noFill() for the storke. Here is the link: https://editor.p5js.org/talia-xu0017/full/Ad9d4Iaq5 Audio visualized 3, making it into a cicle. Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/wupskxL6Q Audio visualized 4, adding particels effect. Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/JmWosweEP found a tutorial video on Youtube, go through it and put my own auido in it https://www.youtube.com/watch?v=9huAqf7lEao. <br> Here is the link, it might required some time to load: https://editor.p5js.org/talia-xu0017/full/GkawLDFtd This might be the direction I will be going to do in my final project, that when I press one key on my keyboard, sound will trigger. I'm making a simple one to test it out. <br> Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/P-o3wZd-W I'm trying add some visual effect <br> Here is the link, it might required some time to load: https://editor.p5js.org/talia-xu0017/full/5wAVNiOtI I'm trying to add more visual effect <br> Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/q8a6iutnQ Adding more visual effect. <br> Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/q8a6iutnQ Allow two visual effects are able to be happened at the same time. <br> Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/UR9d3YXYq More about the visual effects with colour https://www.youtube.com/watch?v=Iep6ZWtf4o8&t=1376s. Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/VQPVbUf7v About fft wave. Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/jgragO4sC This example will be useful for me to understand the animation effect in P5.JS code for aduio visualized. Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/zw4zSqoKU Learning from tutorial video: https://www.youtube.com/watch?v=8O5aCwdopLo. <br> Here is the link, it might required some time to load:https://editor.p5js.org/talia-xu0017/full/1CfoY7lbS Learning from tutorial video: https://www.youtube.com/watch?v=8O5aCwdopLo. <br> Here is the link, it might required some time to load: https://editor.p5js.org/talia-xu0017/full/6xG_wKDfB.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

In this project, I designed an interactive web page header called "Focus Plant" that responds to sound input from the user's environment. The concept is simple yet meaningful. A yellow flower grows taller and blooms through four stages when the user is focus and maintains a quiet environment, but shakes and withered when there is sudden noises.

Click here to see it working on my server

test2Lorem ipsum dolor sit amet, consectetur adipiscing elit

×

Powered by w3.css