Author: Fasya Rahmadhani

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!

The video opened my eyes to the possibility of making art with the random function. I’ve used the random function before in my code for my computer science class in high school, like to generate a random number for a user to guess; but I never thought of it to be used in code to make art. After watching Casey Reas’ video, I was reminded of a TikTok video of someone using code to make an image from a single branch and over time branches off into a tree. I didn’t think much of it at the time, but now that I know what ‘randomness’ can do, I think a random function was used in the making of that tree. If I could find that video again, I’ll definitely take a closer look and see how randomness was used in the making of that art piece.

What interested me the most is how you can combined technology and non-technological ideas to make art. In the example from the video, it’s biological ideas. From an interpretation of nervous systems to computing art; this pipeline is one that I have not seen before and definitely not one I’ve thought of. So it’s something I want to explore myself. Maybe not with nervous systems, but what came to mind is how massive objects have a higher gravitational force compared to less massive objects (think sun vs planets) and it would be interesting to make code and make art using this idea.

Concept

I love cats. I don’t have one but I would love to have one in the future. One of my favorite type of cats are orange cats; they’re silly and funny to me. Hence, I decided to create a silly orange cat with their tongue out making a silly face. The cat is also seen to be waving their paw as if to say hello!

Process

I started making the head using a circle and planned on using triangles for the ears, but soon found it difficult to make it look neat so I opted for a long rectangle pointing from one side of the circle to the other to act as ears. This way the ears are more symmetrical.

Highlight

I particularly liked how I made the mouth section where I used different sizes and orientations of ellipses and combining them with layering in mind to form the shape of the cat’s snout.

// mouth
fill('rgb(255,114,38)')
ellipse(200, 270, 15, 30)
fill('rgb(255,182,49)')
ellipse(190, 250, 35, 30)
ellipse(210, 250, 35, 30)
fill('#FF9700')
ellipse(200, 240, 20, 15)

Sketch

function setup() {
  createCanvas(400, 400);
}

function draw() {
  
  background('rgb(178,223,250)');
  
  // body
  fill('orange')
  rect(90, 260, 220, 400, 100)
  fill('rgb(255,182,49)')
  rect(115, 290, 170, 400, 100)
  fill('rgb(255,151,0)')
  
  // arm
  rect(115, 310, 50, 400, 100)
  fill('#FF9700')
  circle(140, 340, 55)
  fill('rgb(255,182,49)')
  circle(140, 340, 35)
  stroke('orange')
  circle(125, 339, 15)
  circle(133, 327, 15)
  circle(147, 327, 15)
  circle(155, 340, 15)
  
  // head
  noStroke()
  fill('orange')
  ellipse(200, 220, 200, 180)
  rect(100, 140, 200, 80)
  
  // streaks
  fill('#FF9700')
  rect(192.5, 130, 15, 50, 10)
  rect(170, 132, 15, 40, 10)
  rect(215, 132, 15, 40, 10)
  
  // ears
  fill('rgb(255,182,49)')
  ellipse(115, 170, 15, 50)
  ellipse(285, 170, 15, 50)
  
  // eyes
  fill('black')
  circle(155, 220, 25)
  circle(245, 220, 25)
  
  fill('white')
  circle(160, 215, 10)
  circle(250, 215, 10)
  
  // blush
  fill('rgb(255,116,44)')
  ellipse(125, 250, 50, 20)
  ellipse(275, 250, 50, 20)  
  
  // mouth
  fill('rgb(255,114,38)')
  ellipse(200, 270, 15, 30)
  fill('rgb(255,182,49)')
  ellipse(190, 250, 35, 30)
  ellipse(210, 250, 35, 30)
  fill('#FF9700')
  ellipse(200, 240, 20, 15)
  
}

Reflection

Though I did use a variety of shapes, my sketch is still very simple. So in the future, I’d like to incorporate more shapes and learn how to animate them as well to make it more interactive and lively; like maybe make the cat’s paw move!