Author: Fasya Rahmadhani

Concept

With the assignment being to create an unusual switch that doesn’t require the use of the hands, I struggled a bit to come up with an idea. After seeing an example in class (the one using foil mustache that completes a circuit when smiling), I wanted to use some kind of an action using the a body part to complete a circuit as well. So I came up with the idea to use the action of waving. When you wave, the forearm and the upper arm usually makes contact, and I used this point of contact as my unusual switch. Hence the name: Wave to Say Hi!

Photos and Videos

 

Code Snippet

void setup() {
  // initialize input and output
  pinMode(12, OUTPUT);
  pinMode(10, OUTPUT);
  pinMode(A2, INPUT);
}

void loop() {
  // variale declarations
  int greenLED = 12;
  int redLED = 10;
  int buttonState = digitalRead(A2);

  if (buttonState == HIGH){
    // if waving hi, green light ON, red light OFF
    digitalWrite(greenLED, HIGH);
    digitalWrite(redLED, LOW);
  }
  else {
    // if not waving hi, green light OFF, red light ON
    digitalWrite(greenLED, LOW);
    digitalWrite(redLED, HIGH);
  }
  
}

Circuit Illustration

 

(Circuit illustration done on PowerPoint)

Arduino Setup

(I used the website Tinkercad to make the above Arduino circuit diagram.)

For this project I used two LEDs: red and green. I connected the two LEDs to the pins D10 and D12 respectively, and hence used them as outputs in my code. For the analog input, I had my unusual switch (which would be in place of the push button switch in the diagram) making a connection between 5V and the pin A2.

Code

Github Link

Reflection

I was happy with how I incorporated two outputs into my circuit, but for my input, I’d like to try using a sensor instead of a ‘switch’ in the future.

Her Code Got Humans on the Moon—And Invented Software Itself

I was previously not aware on who Margaret Hamilton is before reading this article, and I wish I would have known her sooner. Her contribution to the software engineering field, and her role in its development, is very inspiring. When it said that after a late-night party, she rushed back to the lab to correct a code that she realized was flawed, out of fear for the headlines in naming her as the one at fault, I realized the sheer amount of stress and responsibilities that she had, and I truly look up to her dedication and commitment to her work.

This article also highlighted the importance of error handling. When Hamilton told the higher-ups that they should develop the code to prevent the crash, they dismissed her concern and decided not to do anything about it. In the end, the worst case happened. I think the lesson here is valuable to programmers alike: we need to expect the unexpected, prepare for all the possible outcomes, and develop ways to handle all of those outcomes. It might not be possible to always know every possible outcome, but this is exactly why testing is so important: to realize flaws and holes in the program, in the same way Hamilton realized the possibility of the crash because of her daughter.

Emotions & Design: Attractive things work better

Norman’s exploration of the balance between aesthetic and usability and their importance on design is something to think about when thinking of a product. Norman highlights how the aesthetics of a design affects the mood of the user, which in turn affects the usability of it.

This reminds me of how things nowadays are designed with a heavy focus on aesthetics in mind. For example, cute stationaries and journals are popular recently, with ‘back to school haul’ and ‘what’s in my bag’ videos trending on social media. Yes they are cute, but that’s not the only reason why they’re popular. I think that the reason they are so popular is because they’re cute and they’re useful. The aesthetics of the journal inspires the person to continue journaling, the cute notebooks motivates people to make notes, and the same with cute pens and highlighters.

I think that it’s this connection between aesthetics and human emotion that is able to contribute to the overall experience of the design.

Sketch

Link to full screen!

Screenshots

Concept

The concept originated from my obsession with keychains. I love having silly little knicknacks dangling off the zippers on my bag, or making jingling noises as i move my house keys. I wanted to encapsulate this experience so that’s why I decided to base my midterm on this idea.

In this game, users are free to decorate their bag with any of the keychains provided. They can move the keychains around to their liking to place anywhere on their bag, while also being able to rotate the keychain to best fit their preferred orientation. And note how the keychain jingles when it’s moved!

There is also a bonus feature in which the user can get one randomly generated special keychain to add to the collection!

Code, Problems, and Favorites

• I really enjoyed illustrating some of the keychain designs (including the keychain hook) by hand on PowerPoint
• Using an array with the file names for my keychain images, and using a loop to run through the array to quickly load all of the images made it so much easier.

function preload() {
  
  // array of image names
  let imageNames = [
    "/images/strawberryChain.png",
    "/images/carrotChain.png",
    "/images/tomatoChain.png",
    "/images/specialChain.png",
    "/images/specialChain1.png",
    "/images/specialChain2.png",
    "/images/specialChain3.png",
  ];

  // load images and sound
  for (i = 0; i < imageNames.length; i++) {
    let newChain = new Keychain(
      loadImage(imageNames[i]),
      random(40 + 40, 320 - 40),
      random(150 + 50, 500 - 130),
      70
    );
    chains.push(newChain);
  }
}

• I used a lot of Classes in my project and I’m honestly glad I did because it made my code so much neater (albeit still messy, but it’s good enough!). I made a class for my keychains, the bag, and the background scenes depending on the game state. This way, my sketch file is less populated!
• I had a lot of troubles trying to figure out how to rotate the keychains on click, but I managed to figure it out by adding an angle attribute to my Keychain class.

function mousePressed() {
  for (let chain of chains) {
    
    // checks if mouse is over keychain
    if (chain.isMouseOver() && gameState != "end") {
      
      // tilt the keychain when clicked
      i = 10;
      if (chain.angle > -90) {
        chain.angle -= i;
      } else {
        chain.angle = 90;
      }
...

• In terms of the design, I was sure I wanted to include pinks and purples, and the whole idea of ‘decorating/personalizing’ reminded me of GirlsGoGames (GGG), an old online gaming website that I used to play when I was younger. And this is what inspired my overall design layout, style, and color palette!

For the Future

As much as I am proud of the final outcome, I still have areas of the project that I would like to improve on.

Firstly, the png images of the keychains, after resizing, looks very pixelated, so in the future I would consider this when illustrating and implementing images.

Second, there seems to be some glitch on the special keychain side. When a special keychain has been revealed, it takes the second mouse click for it to be able to be dragged, so it doesn’t drag on the first click. I’m still unsure as to how to fix this.

Third, as of right now, all of the keychains are presented when it hits the end game state. However, it would be better if I could somehow hide unselected keychains so that users can pick which keychains they want to use and which they don’t. Perhaps I could use selection statements to see if the keychains are not position on the area of the bag, then they should not be shown when it hits the end game state.

Final Thoughts

I really love how this project turned out; it’s fun, it’s cool, and it’s pink!

One way computer vision differs from human vision is in which computer vision uses sensors, which is almost similar to the human eyes, except their ‘vision’ is not an image but more like bits of information. Though both ‘visions’ need to be understood, the process for a computer would be longer and more complicated in which information has to be internalized and run through a series of program.

To help the computer see we must make the object of attention to be easily visible by either having it be a very bright light, so the computer can track the brightest pixel, or have it in an environment that contrasts the desired object to be tracked/seen (like against a green screen)

As much as it is interesting and cool, the idea of computer vision in relation to surveillance will always come with privacy concerns, especially as seen with the Suicide Box project by the Bureau of Inverse Technology. I think there should be some type of consent from both the artist and those that interact with the art. However with art like the Suicide Box, there is no consent and it all just seems like an invasion of privacy.

Concept

Keychains. Trinkets. And other knick-knacks. The Holy Trinity of my obsessions. I love collecting them. The keychain of my house key always jingles wherever I go because of how many keychains I’ve attached to it. I want to encapsulate this experience into a game in which the user will personalize a bag of their choice with keychains, trinkets and other decorative items of their choice!

Design

• Using pictures of the different keychains and storing them in an array that will randomize when the user clicks the randomize button but it will stay on screen/user can move the object onto their bag if they wish to take the object.
• Implement sound effects of the jingle of keychains whenever the user clicks on a keychain.
• User can also randomize the bag until they choose a bag of their choice.
• use OOP for ribbons so that the user can put however many ribbons as they like on their bag.

Challenges

• Figuring out the logic in how to click-move-click-place the keychains based on mouse input could be tricky. This would require a function.
• Using shapes to illustrate the illustrations and design of the game. I’m using pictures for the more detailed keychains, but I would like to try designing my own keychains using the shapes on p5.

Risk prevention

• Use different files for different parts of the code so that it is more organized and I can easily refer to a specific part of the code without having to scroll through long blocks of code.
• Have a ‘miscellaneous’ file where I would do my testing at.
• Create copies of files so I never lose my previous work after I’ve edited some parts of the code.

Concept

After working on my previous project which was related to my culture, I wanted to continue to incorporate Indonesia into my work. I was born in a city called Bogor in Indonesia, and the city is also known as Rain City, with how much it rains there. Thus, I was inspired to use weather data on rain in Bogor. However, I could only find dataset that wasn’t specific to Bogor, but a general data of rain in Indonesia. This is where I got my dataset from. The dataset has daily records of rainfall and the average temperature of the day from 2010 to 2020 from one station. The initial image I had in my mind was of a rainy scene; nice and simple. One raindrop representing the amount of rainfall in that one day, position from left to right, 2010 to 2020.

Highlight

I was very proud of myself for thinking about making a class object to make it easier for me to create multiple rain droplets. I also incorporated the map function to determine the size, coolness (which is based on the average temperature; the warmer it was the more green the raindrops look , and the colder it was the more blue), and the speed of the raindrops falling was also determined by the size (mapped from the rainfall data).

 // size, color, speed
size = map(float(rain[i]), rainMin, rainMax, 0, 20);
cool = map(float(temp[i]), tempMin, tempMax, 255, 80);
speed = map(size, 0, 20, 3, 10)

// adding droplets
droplet = new Droplet(posX, posY, size, cool, speed);
droplets.push(droplet)
droplets[i].show();
droplets[i].fall();

Sketch

Reflection

I thought this project was very simple, and I would love to challenge myself further with adding texts, perhaps generative texts, to this piece to make it more interactive and interesting.

Two of the most important characteristics of good design are discoverability and understanding. Discoverability: Is it possible to even figure out what actions are possible and where and how to per- form them? Understanding: What does it all mean? How is the product supposed to be used? What do all the different controls and settings mean?

– Norman Don

Pliers vs scissors. I don’t know if this applies to all pliers, but the one my dad has works in a way that is opposite to how a scissor works; when you close the two handle, the corresponding ends would close too in a scissor to cut, but with my dad’s pliers you have to separate the handle so that the corresponding ends close, so it always confused me whenever I had to use his pliers. I think the functionality of a design also depends on who the design is intentioned for, because for my dad, that plier works just fine because he uses it regularly or has experience in using it. Whereas, for me, I seldom use it and I use scissors more often compared to pliers (for different reasons, but in general); so it makes sense why I would find it confusing.

This idea of intended user also reminds me of Apple’s Senior Mode, where the app’s interface is modified to be more accessible to older/senior users. It would showcase the specific apps, most used ones perhaps, and would display them in big blocks on the home screen for easier access. In this way, I would also like to incorporate accessibility in my future interactive media works.

Concept

Batik is an Indonesian pattern. Batik-making is a traditional art that uses wax to create Batik patterns on a fabric. I wanted to recreate a Batik pattern for this assignment. The main pattern that serves as my inspiration is the Batik Kawung pattern, which I incorporated into my work as the background.

Initially I didn’t know what Kawung meant, but after researching, Kawung is a fruit (Sugar Palm fruit) and this fruit is the inspiration behind the Batik Pattern. I also incorporated this fruit into my piece as the inspiration behind the floating yellow flowers that appear when the mouse is clicked anywhere on the canvas.

My next inspiration came from the use of floral designs in many Batik textiles, so I went onto Pinterest to look for a specific color scheme as well as flower designs. I love the look of a soft color palette, especially pinks and greens, so I went with this specific Pin as my main inspiration for the objects in my work.

 Highllight

My favorite part of the code has to be the functions I made for the main central flower. I learnt how to use the rotate function to create the petals of the flower, and I’m proud of myself for figuring out how to create the line details on the petals (with increasing and decreasing lengths) using for() loops because it took me quite a while to get it right since I kept messing up the angle of rotation between each repetition. I challenged myself further by making a spin() function in my Flower() class so that whenever the mouse touches the flower, the flower will start spinning.

show() {
  angleMode(DEGREES);
  translate(200, 200);
  rotate(this.angleSpeed);

  // outer flower
  stroke("rgb(245,235,216)");
  fill("#65180b");
  for (this.petal = 0; this.petal <= 7; this.petal += 1) {
    ellipse(0, 50, 60, 80);
    rotate(45);
  }

  // line detail
  for (this.petal = 0; this.petal <= 7; this.petal += 1) {
    for (this.i = 0; this.i <= 10; this.i += 5) {
      line(0, 0, 0, 60 - this.i);
      rotate(7.5);
    }

    for (this.i = 0; this.i <= 10; this.i += 5) {
      line(0, 0, 0, 45 + this.i);
      rotate(7.5);
    }
  }

  // inner flower
  stroke("#65180B");
  fill("#df8d7b");
  for (this.petal = 0; this.petal <= 7; this.petal += 1) {
    rotate(45);
    ellipse(0, 20, 30, 40);
  }
}

spin(){
  // spin flower
  this.angleSpeed += 2
}

 

Sketch

Hover over the central flower to see it spin and click on any part of the canvas to add more designs onto the piece!

Reflection

In this project I got to learn more about the history of Batik patterns as well as the origins behind them. In terms of technicalities, I see the appeal of using Objects; it made this project so much neater and more organized than my previous ones. Incorporating my culture into making this project is something I would definitely think about for future projects.

After reading the text, I now understand interactivity a bit more. Initially i thought it was just a simple exchange between two parties, but now I see it more as a back and forth and continuous effort from both parties to keep the exchange going. I really like the idea of interactivity having three main components: listening, thinking and speaking. Though there is a debate on what counts as interactive or not, I do think that the three components make good factors to consider when classifying them into the degrees of interactivity.

I love how the light inside a refrigerator was mentioned, because when I was younger it really did serve as a form of entertainment to open the fridge, see the light turn on, and then slowly close it, not fully, but just enough so that I can see the light eventually turns off. Even though Crawford concluded that this system has ‘low level interactivity’, to younger me it was a fun little activity that until now, I would still occasionally do for fun; so in that sense, I would consider the lights on refrigerators to be a high level interactivity (though this is a highly biased and personal take).

Concept

The inspiration started with the for loop lesson where we made a pattern in grid format, and in class I made a repeating pattern of an orange laid out in rows and columns. As opposed to the black and white designs from computer art magazines provided for reference, I wanted to do something more colorful and fun. Brainstorming from the ‘orange’ idea, I thought of a picnic setting! So I went onto Pinterest and looked it up for inspiration. Then I found this:

In my head, it was possible to recreate the iconic red pattern look of the picnic blanket using the for loop we learnt in class, so that’s exactly what I did. Red blocks displayed in a grid format using for loops, with lighter red blocks on the right and bottom of the red blocks to give the effect of overlapping strips of red fabric.

Highlight

For the cake, I’ve always wanted to learn how to rotate shapes on p5js so I challenged myself into making the cake with strawberry toppings which are repeated ellipses in a for loop that increase in angle of rotation each iteration. And I also got to use the translate function in the process!

I learnt how to rotate from here!

 // strawberry toppings

angleMode(DEGREES);
translate(200, 200);
noStroke();
fill("rgb(238,96,67)");
for (angle = 0; angle <= 360; angle += 45) {
rotate(angle);
ellipse(0, 40, 20, 25);
}

Sketch

Psst! Try hovering over the bottom right of the cake 😉

Link to the “Want a Slice?” p5js code.

Reflection

I really enjoyed making this piece because I learnt so many new functions, like the translate and the angleMode function, as well as applying what we learnt in class (for loops, if statements, movement of shapes).

In the future, I would love to learn how to make it less glitchy (like the strawberry here looks as if it isn’t moving in sync with the slice of cake in the back), and also maybe challenge myself into making my own version of the designs from the old computer art magazines instead of sticking to manually building images using colorful shapes!