Module 2 Formstorming

Weekly Activity Template

Cunpu Zhang's project 2 Hear: Time and Data

Project 2

Module 2

For this project, I selected 25 items that could produce sounds. Then, I learned p5 code following the tutorials and finally created only one dynamic website based on sound interaction.

Activity 1

description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/1.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/2.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/3.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/4.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/5.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/6.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/7.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/8.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/9.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/10.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/11.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/12.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/13.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/14.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/15.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/16.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/17.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/18.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/19.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/20.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/21.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/22.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/23.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/24.m4a'></audio> description:This is one of the sounds from the twenty-five items I was looking for.<br><audio controls src='audio/25.m4a'></audio>

Activity 2

This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code. This is my process of learning p5 code.

Project 2

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio

This is an interactive sound website I created. When the computer detects sound, the sound waves on the website begin to change. As the sound waves change, the balls on my website also change according to the volume of the sound.

Click here to see it working on my server



×

Powered by w3.css