week 11 – group assignment (maya)

1st exercise: 
We used the existing example: Week 11 Bidirectional serial communication(p5js Sketch) to fulfill the 1st exercise. We created a new variable “moveEllipse” to map the alpha value to the canvas width. We then used our variable as the x-position of the ellipse, successfully enabling the ellipse to move from one edge to the other as the potentiometer value increased.

let moveEllipse = map(alpha, 0, 1023, 0, width);  
ellipse(moveEllipse, height / 2, 60);

2nd exercise:
Editing that same example, we added the bouncing ball javascript from p5.js: https://editor.p5js.org/icm/sketches/BJKWv5Tn . The LED becomes brighter when the ball moves towards the right edge of the canvas. Conversely, the LED becomes dimmer when the ball moves towards the left edge of the canvas. We edited the arduino to replace digitalWrite with AnalogWrite to enable the control of the LED brightness.

let x = 320;
let y = 180;
let xspeed = 3;
let yspeed = 2;
let r = 25;

  ellipse(x, y, r*2, r*2);
  // mapping brightness to canvas width
  let rightValue = map(x, 0, width, 0, 255);
  right = int(rightValue);
  x += xspeed;
  y += yspeed;
  if (x > width - r || x < r) {
    xspeed = -xspeed;
  if (y > height - r || y < r) {
    yspeed = -yspeed;

3rd exercise: https://youtu.be/YFucULMGidI

I took the main structure of the code from the exercise we looked at in class- where we had to press our spacebar to connect to our board. There, I added the code with the bouncing ball given to us through this link: https://editor.p5js.org/aaronsherwood/sketches/I7iQrNCul

The approach was to call bounceBall() function once the serial is activated, where p5js will continuously send touch value (1 means it touched the ground and 0 means it’s above ground) to the arduino. In return, the arduino would send lightStatus value (the input read from the light sensor). If the received value is bigger than 500, the wind blows from left to right and right to left if the value is smaller than 500.


int ledPin = 5;
int lightPin = A1;
int lightStatus;

void setup() {
  pinMode(ledPin, OUTPUT);
  pinMode(lightPin, INPUT);

  // start the handshake
  while (Serial.available() <= 0) {
    digitalWrite(LED_BUILTIN, HIGH);
    digitalWrite(LED_BUILTIN, LOW);

void loop() {
  while (Serial.available()) {
    digitalWrite(ledPin, HIGH);

    int ledLight = Serial.parseInt();
    lightStatus = analogRead(lightPin);
    if (Serial.read() == '\n') {
      digitalWrite(ledPin, ledLight);
      digitalWrite(ledPin, LOW);
  digitalWrite(LED_BUILTIN, LOW);

week 11 – reading reflection

I agree with the author’s perspective that adopting a discreet design for “aids” may not be the optimal choice. This approach perpetuates the notion that these aids conflict with societal norms and thereby draw undue attention, and so should be concealed. This inadvertently contributes to the stigmatization of disabilities in general, reinforcing the idea that it is something to be embarrassed about. Nevertheless, I understand that individuals with disabilities may desire discrete designs due to probable negative attention towards their conditions. Society often reacts adversely to things that deviate from the norm, leading some to prefer aids that blend in. Considering the limited market for disability-related products, it may be pragmatic to focus on designs that cater to the majority rather than a smaller fraction of individuals who embrace their disabilities and seek products that stand out.

I resonate with the notion that the lack of stigma surrounding bad eyesight is attributed to the normalization of glasses as a fashion accessory. The integration of glasses into everyday wear, regardless of bad/ good eyesight, has contributed to their acceptance and reduced their visibility as a medical aid. This normalization could serve as a valuable model for the design of other aids, reducing the perception of these devices as conspicuous or abnormal. The article’s observation about the exclusion of designers in the creation of aids, such as prosthetics and hearing aids, is particularly poignant. It seems paradoxical that individuals who themselves may use aids are not involved in their design. This exclusion perpetuates the categorization of aids as purely medical products, further intensifying the stigma associated with bodily “aids”. Inclusion of designers with personal experiences of using aids could offer valuable insights, bridging the gap between functionality and aesthetic appeal and challenging the prevailing stigmas associated with these essential tools.

week 10 – reading reflection

The first reading was definitely intriguing and despite its somewhat comical tone, I believe it highlights an important issue that is growing ever so prevalent in our contemporary times. Pictures under Glass technology, I believe, isn’t a so far-fetched notion and could potentially occur in the nearer future. Technological advancements are facilitated for human convenience and so ultimately, I feel as though it’s used to increasingly replace human capabilities. In the case of the first reading, ‘pictures under glass’ undermines human capability of touch and it overlooks the importance of tactile richness. Stimulation, especially new stimulation, is vital for strengthening neural pathways and promoting cognitive growth and as such, these novel experiences contribute to cultivating a shaper mind, creating a foundation for a more resilient and adaptable cognitive capacity. However if such experiences are massively condensed to something homogenous like this picture under glass technology, we lose such cognitive abilities. In this sense, whilst technological advancement is good, it is worrying as it feels like we are on a path of neurological de-evolution.

In delving into the second reading, the contrasting reactions among readers regarding the trajectory of interactive media resonates with the profound (aforementioned) notion. The shared call for a forward-thinking approach, aligning innovation with our human experiences, I believe, becomes even more relevant in this context. Such a notion ultimately strikes a chord with my concerns about the impact of technology on our lives. The discussion on the potential loss of creativity and emotional depth in a future dominated by touchscreens and voice commands prompts personal reflection on the role of technology in my own experiences. Navigating this dynamic landscape, the reflections serve as both a call to action and a personal invitation to consciously shape a future where technology enhances, rather than diminishes, the richness of both physical and emotional existence.

week 10 – group assignment (Jason)

Video: https://youtu.be/d6cVEQlEJnk

For our group assignment, we weren’t sure in what way a sensor could be implemented to generate musical notes, so we first brainstormed on an instrument on which we could base this assignment: the accordion. To replicate the keys, we decided to use switches (buttons) and for “bellows” we decided on the flex sensor. We first planned out our schematic, first mapping out the switches, resistors then the analog (connecting) wires. However when actually delving into the construction of the breadboard and subsequently the coding aspect, we ran into a few problems that required us to improvise. We first realized through using the serial monitor that the output generated by the flex sensor was incredibly jittery and inconsistent. It was hard to make out a constant value range. Hence we decided to use an alternative sensor: the photoresistor. Ultimately our approach was predominantly to improvise. Once we had resolved our main code, we decided to utilize the LCD, on a whim, to show “:)” or “:(” pertaining to specific conditions. This required us to do some research on how the LCD is connected to the breadboard, and the code used to display characters: https://docs.arduino.cc/learn/electronics/lcd-displays

3 buttons play different notes. The range in tone of the note varies according to the photoresistor – the more the light is conceived, the higher the note is played. Subsequently, the LCD shows “:)” when the tone frequency, determined by the analog reading from the flex sensor, is higher than the previous frequency; otherwise, it displays “:(“. This comparison is specific to each color (red, green, blue), and the frequency values are mapped accordingly.


Arduino Code:

// include the library code:
#include <LiquidCrystal.h>

// initialize the library by associating any needed LCD interface pin
// with the arduino pin number it is connected to
const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

int buzzerPin = 8;
int redpin = A0;
int greenpin = A1;
int bluepin = A2;
int phopin = A3;  //
float prev=0;

void setup() {
  // put your setup code here, to run once:
  pinMode(buzzerPin, OUTPUT);
  pinMode(redpin, INPUT);
  pinMode(greenpin, INPUT);
  pinMode(bluepin, INPUT);
  pinMode(phopin, INPUT);  //
  lcd.begin(16, 2);

void loop() {
  // put your main code here, to run repeatedly:
  int redState = digitalRead(redpin);
  int greenState = digitalRead(greenpin);
  int blueState = digitalRead(bluepin);
  int flexState = analogRead(phopin);  // 350 to 1000
  float redvariance = 130.8 + map(flexState, 350, 1050, 0, 130.8);
  float greenvariance = 261.6 + map(flexState, 350, 1050, 0, 261.6);
  float bluevariance = 523.2 + map(flexState, 350, 1050, 0, 523.2);
  if (redState == HIGH) {
    tone(buzzerPin, redvariance);
    if (higherThanPrev(prev, redvariance)) {
    } else {
    prev = redvariance;
  } else if (greenState == HIGH) {
    tone(buzzerPin, greenvariance);
    if (higherThanPrev(prev, greenvariance)) {
    } else {
    prev = greenvariance;
  } else if (blueState == HIGH) {
    tone(buzzerPin, bluevariance);
    if (higherThanPrev(prev, bluevariance)) {
    } else {
    prev = bluevariance;
  } else {

bool higherThanPrev(float prev, float now) {
  return prev < now;

Overall we were quite pleased with the end result, even more so with our LCD addition. However, we felt as though it was difficult to classify our project as a musical instrument since, despite the complex interplay between analog/ digital sensors, the sounds produced were less “musical” in a sense.<span style=”color: #000000;”> </span><span style=”color: #000000;”>Furthermore, we realized that whilst the tone of the sound produced by the blue switch was very clearly affected by the amount of light perceived by the photoresistor, this was not the case for the red switch</span>. It was much harder to distinguish a change in the tone of the sound. We believe it is because the red button signals the C note in the 3<sup>rd</sup> octave, and the blue one signals the C note in the 5<sup>th</sup> octave. Since the frequency of octaves is calculated with the formula “Freq = note x 2<sup>N/12</sup>”, the changes in frequencies mapped to the notes will be more significant as octaves increase. For future improvements, especially with regards to its musicality, perhaps we could have each button play a series of notes, hence the 3 switches would produce a complete tune. Rather than mapping ranges for the photoresistor, we could choose a (more than/ less than) specific value. For example, in a dark room, the complete tune would be played in a lower key whilst in a bright room, the tune would play in a higher key.

week 9 – analog input & output

Video: https://youtu.be/JsG16pEle1I

For this assignment, I decided to use a photoresistor as my analog sensor. I wanted to represent and draw a comparison of our mentality during day and night i.e., I wanted to represent alertness and calmness through LED lighting patterns. When photoresistor sensor value (psv) is between 20-150, the yellow LED will blink rapidly. If the psv is at 0, the blue LED will blink slowly. The button applies these blinking patterns to different LEDs, meaning when the button is pressed and psv is between 20-150, the blue LED will blink rapidly whilst psv at 0 will cause the yellow LED to blink slowly. Through this assignment, I was able to grasp a stronger sense of the arduino syntax but most importantly, I became more capable of working the breadboard to make correct connections. Furthermore I think I’ve cemented my abilities in reading schematics which has enabled me to make such connections on the breadboard without taking a glimpse at the fritzing breadboard layout, which I’m really pleased about. Whilst I still struggled with the coding aspect, I really enjoyed and appreciated this assignment.


Arduino code snippet:

if (photoState >= 20 && photoState <= 150) {
  flickerLight(currentLed);  //flickerLight(yellowPin)
  digitalWrite(currentLed == yellowPin ? bluePin : yellowPin, LOW);
  // 1) currentLed == yellowPin => checks if value is yellowPin
  // 2) ? bluePin : yellowPin => if 1st condition == true, turn off bluePin, otherwise turn off yellowPin
} else if (photoState <= 10) {
  digitalWrite(currentLed, LOW);
  flickerDark(currentLed == yellowPin ? bluePin : yellowPin);

if (buttonState == HIGH) {  // if button is pressed, toggles value of "currentLed" between 'yellowPin' & 'bluePin'
  currentLed = (currentLed == yellowPin) ? bluePin : yellowPin;

I had the hardest time implementing this change: button applies blinking patterns to different LEDs. And through very extensive research I learned about the conditional (ternary) operator. I realised after hours of experimenting and researching that I needed to create a variable to keep track of the LED state: “currentLed”. By incorporating this with the conditional (ternary) operator, I was able to create a mechanism where if the button was pressed, flickerLight/ flickerDark would correspondingly be applied to the opposite LED pin. Whilst it was definitely a pain in the sense that I struggled with this specific implementation for hours, I was very pleased with the end result. With regards to future improvements/ projects, I’d like to create a moodlight. I could use the tricolour LED, switch and trimpot. The trimpot could control the colour displayed and the switch, likewise to this assignment, could afftect the flicker pattern displayed.


week 9 – reading reflection

I wanted to highlight the juxtaposition of “Making Interactive Art: Set the Stage, Then Shut Up and Listen” and “Physical Computing’s Greatest Hits (and misses)” as it offers a comprehensive view of the delicate balance required in the realm of interactive art and physical computing. The former reading emphasizes the importance of creating a space for open interpretation, urging artists to resist the urge to over-explain their creations. I think this really resonates with the idea that true interactive art is a living conversation, where the audience actively contributes to the experience. On the other hand, the latter, showcasing recurring themes in physical computing projects, reinforces the notion that repetition doesn’t equate to stagnation but rather serves as a canvas for individual interpretation and innovation. Themes like theremin-like instruments or video mirrors may be recurrent, but each iteration offers a unique perspective, inviting creators to infuse their individuality into well-trodden paths.

What stood out the most to me was the encouragement to embrace recurring themes not as constraints but as opportunities for creative expression. The notion that physical computing provides a playground for creativity, as expressed in response to “Physical Computing’s Greatest Hits (and misses),” aligns seamlessly with the idea of setting the stage and letting the audience take the spotlight. I think this serves a profound reminder that even within established themes, there is ample room for exploration and originality. Hence, the blend of such perspectives encourages a dynamic approach to interactive art, where established concepts serve as a foundation rather than a limitation, and the true beauty emerges from the fusion of technology, creativity, and the unique interpretations of those engaging with the art.

week 8 – unusual switch

This project took a while for me to wrap my head around mostly because of the stipulation: creative and unusual, I guess I was overthinking what classifies as unusual and what does not. I realise that the prompt specifies no use of hands but for some reason I interpreted that as no use of hands to regularly trigger a button/ switch etc., as a means to activate the led… so hopefully my simple project still qualifies. I interpreted the light to embody a positive emotion since it radiated a warm and homey glow. I wanted to connect this to a meaningful something whilst making it so that it could act as a switch, and with my sleep-deprived brain, this really stumped me. The only viable “something” I could think of was relating this “switch mechanism” to the arts, which I’m moderately passionate about. And naturally this transformed and manifested into the idea of using scissors as a switch.


The whole circuit itself was not too difficult to create – it consisted of a green light, ground wire, resistor, a red wire and 2 more wires to connect from the breadboard to the scissors. The one thing I will say is that I had no no conductive tape or aluminium foil and so I had to make do with using normal tape to wind the wires to their appropriate positions on the scissors. Because of this, it wasn’t too reliable since the wires were prone to shifting, and so ultimately it would’ve worked better through use of a more stable medium. Whilst I’m happy about this assignment, I do have doubts on the “creativity” aspect. I also propose a more meaningful and idea-wise, stronger alternative. Perhaps I could’ve attached aluminium foils/ conductive tape to my chest and hand. Whenever I would place my hand over my heart, the led would light up.

week 8 – reading response

I think it’s especially interesting how wide the breadth of psychology, which is profoundly underpinned by Norman’s “Emotion and Design: Attractive Things Work Better”, really is. Norman’s emphasis on emotions highlights the significance of aesthetics in enhancing user functionality, and this is all the more important to note is since such a concept really challenges the conventional belief that aesthetics should take a backseat to functionality in design. Her specific delineation regarding affect, aesthetics and functionality makes sense and the reason why it was illuminating was because this wasn’t something I consciously and actively thought about when handling a product. It’s completely natural for positive affect to increase tolerance for minor flaws in user functionality because we are in a more forgiving headspace for such a situation. However, negative affects eliminate this state of mind, hence it makes more sense to prioritise user functionality over aesthetics in products that warrant negative affects.
This same concept can be applied to Margaret Hamilton’s groundbreaking work as exemplified in the second reading whereby it highlights the clear intersection between psychology and user functionality in high-stake situations. Her meticulous software development for the Apollo mission integrated rigorous testing and fault tolerance to ensure usability under extreme conditions i.e., conditions that are prone to evoking negative affects. This ultimately aligns with the psychological principles discussed in Norman’s text, illustrating that the design of critical systems must consider users’ emotional states and its subsequent impact on usability.

Final Midterm Project

Midterm Project Link: https://editor.p5js.org/jiho.choi/full/Iz4oCo4Lf

I wanted to make my Midterm project personal and the first thing that naturally popped into my mind was music. Music is such a big part of my life and I can confidently say that I probably will never be seen anywhere without my earphones. The original plan was to incorporate illustrations to use as music backgrounds, but I was experiencing an art block after my comlab webcomic assignment. I physically couldn’t get myself to draw again so instead I decided to code and make use of my knowledge thus far. Essentially, different songs would show different illustrated backgrounds that corresponded to my most profoundly remaining memory of that music. Whilst the backgrounds came off a bit cliche, it was still an honest memory so I was somewhat fine with it. Because my past assignments lacked a clear focus on aesthetic appearance I tried my best to achieve that particular quality. I thought a vintage radio graphic would look more visually pleasing and doable to code so that was the path I stuck with.

The way it works:
1) press play ==> music plays.
2) pause music ==> background changes to default.
3) skip button + play button ==> plays next song.

This process wasn’t at all a fond memory but instead was incredibly taxing, stressful and frustrating. Up until coding the vintage radio, things were going very smoothly and I was having so much fun… but once it got to coding the backgrounds, there was rapidly building friction. I was unfortunate enough to experience first-hand the importance of manually saving your code every 10secs. I had spent 6 hours coding my bg#1 and I thought it was autosaving as I went. Clearly I was wrong and the webpage malfunctioned and gave me the: “something went wrong” page…
But overall I’m proud that I was able to pull off what I would consider in my books a complex piece. Again, I used assignment#3 as a a guiding reference to creating my own version of this piece.

Parts I am most proud of:

function mouseClicked() { 
  let x = 337; // x-coordinate of the second ellipse
  let x2 = 387; // x-coordinate of the third ellipse

  if (mouseX >= x - 20 && mouseX <= x + 20 && mouseY >= 471 && mouseY <= 511) {
    if (song.isPlaying()) {
    } else {
  } else if (mouseX >= x2 - 20 && mouseX <= x2 + 20 && mouseY >= 471 && mouseY <= 511) {
    if (playButtonCount === 0 || playButtonCount === 2) {
      currentSongIndex = (currentSongIndex + 1) % songs.length;
      song = loadSound(songs[currentSongIndex]);
      if (playButtonCount === 0) {
        playState = 1;
        playButtonCount = 1;

1) mouse click function to control when the music plays and pauses and skips to the next song. This I really had to sit down and think and for some parts, especially those requiring maths (marking down the boundaries of buttons) it was more trial and error and once again hardcore searching on google.

class Wave {
  constructor(xIncrement, yIncrement, xoff, yoff, color) {
    this.xoff = xoff;
    this.yoff = yoff;
    this.xIncrement = xIncrement;
    this.yIncrement = yIncrement;
    this.color = color;
  displayWave(yOffset) {
    beginShape(); //creating wave shapes in variation 
    for (let x = 0; x <= width; x += 3) {
      let y = map(noise(this.xoff, this.yoff), 0, 1, 600 + yOffset, 700 + yOffset); //determining minimum/ maximum height of waves
      vertex(x, y);
      this.xoff += this.xIncrement; //increments this.xoff by this.xIncrement 
    this.yoff += this.yIncrement; //increments this.yoff by this.yIncrement 
    vertex(width, height + yOffset);
    vertex(0, height + yOffset);
    endShape(CLOSE); //

2) I had been googling different ways people had used p5.js to embody beach art and I spontaneously came across the noise function used by someone with really high qualifications. Of course the code was way too complicated for me to understand fully let alone use so I continued browsing but found another more helpful link, by p5.js. I used the code provided and tweaked around with numbers to understand what each line of code did and what role of the numbers were, since there were a lot… Similar to the one above this also required a lot, A LOT  of trial and error, especially with creating multiple wave layers(?) which took up half my day.

IMPROVEMENTS: There is a lot I’d like to mention for improvements…
1) firstly, I didn’t realise the space in the radio handle was opaque. I was on a race against time and so couldn’t afford to really observe the drawing. This is especially such a shame since it really cuts back on the aesthetics.

2) Another thing I’d like to mention is the fact that the details of the background aren’t quite clear because the radio size is too big. Of course I already went through a prior episode and so didn’t think it wise to change all the numbers relating to class: radio. Instead I opted to make the canvas bigger, originally it had been 800, 800. (prior episode==>) This too was an incredibly onerous process because every positioning detail relies on coordinates. So I had to go through each line of code to adjust the numbers, of course I’d like to believe that there is a much better solution but again, with my current knowledge on coding, this was the best I could come up with.

3) the requirement for this project was that a loop is required, a way to reset the experience. That was what my on/ off button was for. My plan was that when the on/off button was pressed when music was playing, music would pause. But if button was pressed when no music was playing, song would restart and automatically play. This for the life of me would not work. Somehow I got the last 2 buttons to work yet the first one was refusing to cooperate. If I tried to implement some code targeting the first button, then the interaction for the last button would not work. Of course I still have not been able to conquer this specific part of the code…

4) music backgrounds… This gave me such a headache I spent almost 5-6 hours trying to look for a solution but came up with zilch. When I tried to integrate the codes from e.g., sunset.js to sketch.js (my main sketch file), for some reason which to this day I still don’t know, the positioning, stroke weight and order of shapes went haywire. I really cannot think of a reason why since the backgrounds were created on a same-sized canvas. Because I couldn’t present a blank, half finished project, I had to compromise by uploading the png form of these javascript files, which didn’t look too bad. It just looked a bit dull since everything was static.

5) another thing relating to background, I felt like there was a big quality difference in bg#1 and bg#2 which still really irks me and leaves me feeling dubious about the quality of my project. For next time, I’d like to really delve into and experiment with the cool p5.js effects before contemplating a design because that’s how I discovered the noise function. Through serendipitous search!

6) finally along the way a part of my code ceased to work: click radio = radio change colour. There was too much to keep track of and if one thing worked, another didn’t, so I don’t even know at what point it stopped working. I ran out of time at the end and I am planning to go through to try and solve the issue.

Links and images to separate relating javascript files:

background#1 – “rises_the_moon”:

background#2 “in_my_room”:






Week#5 Midterm Project

I wanted to make my midterm project really personal so as to motivate me to want to code and really push myself and the only topic that instantaneously came to mind was music. I am an avid music lover and have used music as a coping mechanism during times of (lowkey) depression and so I naturally garnered a really strong feeling about it. I decided to create my own version of the “coffee shop experience” which really struck a chord in me. My rendition of the “coffee shop”, as aforementioned, centers around music. A vintage radio with an on/off, skip and pause button, which necessitates user interaction, would play a sequence of 5(?) songs – more details listed below. Each song has their own uniquely specific background, each relating to a specific memory, and each background has an element of dynamicity. It’s important to note that the song title and artist name will be displayed on the radio for each song that plays.

1) create a radio using p5.js javascript.
(on/off button – when “on”, music plays, skip button, pause button)
(off button – sequence of songs randomizes + turns off music).
(make sure songs autoplay on loop)
2) (image and sound) – different songs(x5) have different backgrounds.
3) (list/arrays and on-screen text) – song title shows on display when song is playing.

Specific worries/ possible challenges:
1) keeping track of specific parts of codes:
it’s absolutely imperative that my code is well organised and commented, more so for me since I’m in the process of establishing somewhat of a foundation in coding. Keeping track of variable names, classes, functions are most imperative. One solution could be to work on separate sketch.js files for specific parts (for example., backgrounds) specifically for code sections that will be encompassed in classes. Once I’ve made sure it works, I can always copy and paste it onto the main sketch.js file. I’ll also need to copy and paste regularly my main file code onto googledocs/ word doc just so that it’s easier for me to keep track and stay more organised – I find that the p5.js window size limits readability.

2) localising “click” function to specific shapes:
throughout my assignments where interactivity is present, I’ve used “click” functions that result in a change, but it has never been localised to a specific area. It was general and random, which hence enabled flexibility. Because of this, I am naturally worried of the complexity of the code. And with this follows a subsequent building anxiety: the numerous conditions (if/for loops) that majorly depend on how the user decides to interact. To me, this particular segment appears as a big knotted, balled up thread which I have to individually unpick and so at the moment seems incredibly daunting… Of course though nothing is impossible with an internet search (in-depth if necessary). According to my memory, the topic of localising the “click” function to specific shapes has been touched upon in one of the coding train videos. The same can be applied to the if and for loops.  Furthermore there is always the “coffee shop experience” example I can use for guidance or as a source of reference.