Week5-9

This is a Processing exercise completed in class. Using the draw() function of p5.js, it enables the background colour to change based on the mouse position, the circle to follow the cursor movement, and the text to rotate with the mouse. Later, I added an animation effect of particles appearing when the mouse moves on the homepage.

The core logic of p5.js is that the setup() function runs only once to initialise the canvas, while the draw() function is executed continuously in each frame. Therefore, by placing the changing content within the draw() function, animation effects can be achieved. mouseX and mouseY are built-in variables in p5.js that record the mouse coordinates in real time. By passing them into the colour or position parameters, the image will move along with the mouse.

Different colour and size combinations attempt.

In week 6, we came into contact with the components of Arduino. For the first time, I got a close-up look at these electronic components. Here, I will make some guesses about the functions and names of each component.

This slide is about learning the names and functions of each component. Each component has its own function and needs to be connected through circuits and code to operate. This is completely different from the previous purely software-based programming experience. In class, we also attempted to assemble a simple circuit: connecting the button and LED to the Arduino. When the button is pressed, the light turns on, and when it is released, it goes off.

In week 7, I continued to build a new small device using Arduino. Here is the wiring diagram provided. I followed the instructions step by step to connect the sensors and the buzzer to the breadboard, and then uploaded the code to the Arduino.

This is a semi-finished product.

This is the final assembled state.

The final effect is as follows: When there is nothing in front, it remains silent. As soon as your hand is extended and brought close to the sensor, it starts to make a sound. The closer the distance, the more pronounced the reaction. The video on the right shows the effect.

This is the installation we made this week: several wires are connected to the Arduino, each wire corresponding to a different pitch. When your fingers touch them, they will produce the sounds of do, re, mi, like a mini electronic piano.

The principle is capacitive touch sensing. The wires can detect the touch of fingers and trigger the buzzer to emit the corresponding sound.
The video on the right shows the effect.

This is the combination and pairing of different inputs and outputs of the interactive works presented in the class, which provided me with inspiration for my final project.

This week, we conducted the pitch and plan sharing for the final project, and also attempted to create the final appearance of the product using paper. I managed to make a simple model of a room. In my initial plan, I intended to create 2-3 rooms, combined with the web game design on the screen and for presentation. However, later I decided to abandon this model idea and switch to another solution. In the last plan in the attached PDF, it is the one I finally decided to try.

This is a paper model.