Concept

For this project I decided to explore the unconventional. I thought of making a parody horror game, where the ghost is the one being chased. Here is the twist: the ghost isn’t really a ghost, but is a boy with a sheet on his head and the “monster” chasing him is his mom. She is annoyed with him not picking up his laundry,  so she is running after him. The story is pretty self-explanatory from here on – he doesn’t have clothes and that is why he is wearing the sheet on his head instead. The aim is to pick up all the clothes without being caught.

In the background ominous music is playing to add on to the tension and is actually the only scary part. A swoosh sound is implemented for the “folding” of the clothes. Different sounds play when the user wins, loses and before the game begins.

Design

Using ProCreate I drew the characters how I imagined them. I started working on how the clothes will look also. The environment around them could change depending on the mode chosen in the beginning, but the aim stays the same. The mom is purposefully made to resemble me as a way to add personalisation.

 

After drawing my character I asked AI to turn them into sprite sheets.

Challenging aspects

• Switching between the different modes might be hard to execute. I am thinking that it will significantly slow the process.
• Drawing the different environments, clothes, change of screens. This is a challenge to myself, because I want to draw every single detail by myself. When it is something that could be drawn digitally, I would be taking this opportunity, completely avoiding the use of images from the Internet. This way the game will really feel like my creation + I am one of the main characters.
• Dealing with two different sprite sheets. This is frightening to me because this will be my first time working with sprite sheets and I have to do it twice.
• The characters going outside the screen.

Risk prevention

• Two (or more) layers to keep the different scenes from merging. For now this is enough, because otherwise the game and the aim stay the same.
• I will be making the drawings the moment I think of them, so as not to forget my ideas or will be writing a plan if unable to draw them immedeatly.
• For the sprites I will do them separately to give them different speeds.
• I will give them constrains for the width and height, so they do not escape.

AI use

As previously mentioned, AI was used to make sprite sheets in png for the characters I drew.

To my mind, the difference between computer vision and human vision lies in the situational awareness. Take Christian Möller’s Cheese installation as an example. It identifies:

a) whether the person is smiling

b) whether the smile is genuine.

Having said that, computer vision works through identifying emotion with a limited number of factors as opposed to humans, who take things like tiredness, personal matters, body language and other variables when evaluating happiness. Humans are able to build a more comprehensive image of others, because through previous experience they see things that computes may overlook. While reading about the LimboTime and examining the pictures I thought of something else that the computer may not account for. If the person is wearing white and is leaning back, their failure to compete the task may go unnoticed for two reasons: first, the line is invisible and not tangible and second, their the body may not be detected in its entirety. Similarly, if a person is bald, the computer will detect contrast in their face features as the highest point of the body and will shift the results.

Even though those are small errors that may occur they are worth mentioning when the topic is comparing human and computer.

A technique that could help the computer track what we are interested in would be to give more instructions. Instead of asking it to track mouth movement only, we could also add the gradual disappearance of the iris (as a sign of smiling) or a detector for the sound of giggling for example.

I think that computer vision, even though not revealed to its full potential, is a great thing to incorporate in interactive media. Even lower levels of interactivity allow for users to enjoy different products. Humans are simple creatures and they crave entertainment, be it in small amounts. I don’t believe its capacity is going to negatively affect humans or make them unsatisfied.

The reading really opened my eyes on many things that I have been overlooking. But it is exactly because good design is invisible. We are often made to believe that bad design is bad on purpose or we are the ones in the wrong.

This reminds me of my hometown’s funny souvenirs. Gabrovo, Bulgaria offers a variety of illogical items like a spoon with a hole, cups for uninvited guests (with a zig-zag rim), the stingy sugar bowl (which is restricted to giving one sugar grain per shake) and more, showing Gabrovians’ painful stinginess. After reading this text, I wholeheartedly believe that at least some of these items were accidental discoveries that made their way in the Museum of Humour and Satire.

Design from everyday live that bother me a lot are the European bottles, whose caps are attached to them and the disposable cutlery sets that break during usage. Hopefully one day day they also go to the Museum.

I can apply what I read in Interactive Media though clear signs what everything is and its placement (affordances and signifiers). Additionally,  I would try to incorporate familiarity with mental models or easy-to-follow instructions. Overall, I will do my best not assume the users’ needs, but rather investigate and accommodate. A system should work for the people and not against them.

My concept

I wanted to create a short story with many variables that change with each click. The story had to make sense no matter how the variables changed. I asked friends to tell me random words for each of the categories without letting them know what I need them for, so that it was more authentic. (They are not to be held accountable for stories that turn into thrillers.) With this I tried avoiding bias, through which I would subconsciously choose words that would go together in some context (and make no sense in another). This way the only constant is the base of the story. With each click there were 8 words in the text that would switch to a different word in the same category, completely changing the plot.

Code I am proud of

//ninth line
  singleRow = splitTokens(strings[int(random(strings.length))], ",");
  let exclamation = singleRow[EXCLAMATION];
  text ("not help but exclaim:" + exclamation, 50,250 );

As simple as this is I was proud that I remembered to put the exclamations in inverted commas in the words.csv file, instead of doing it here, because it would mark it as part of the text. It would have been something like: “We could not help but exclaim: “exclamation”. ”

How this was made

I used the knowledge from class to make the text change and I also dowloaded a font from Google Fonts, which I liked, to make it seem like it is written with a typewriter. It fits the theme of constantly changing the story by clicking, right?

No AI was used in the making of this sketch.

Reflection

If I were to start this assignment from the beginning I would add more variables, so the reader gets a completely new story every time.

Concept

My idea was to create a universe, representing the night sky. I wanted the user to “discover” planets in space by clicking somewhere and I wanted to add something personal to it. Additionally, using the new skills from class I decided to have the option to remove planets by pressing a key. Each planet has a 50/50 % of having a ring (an ellipse). This is decided through a Boolean – it it returns true then the planet has a ring. To complete the whole galaxy theme, I made the cursor a rocket by removing it and putting and emoji with the same coordinates.

The background is a dark blue sky with stars and the concept behind it was my favourite star constellation – Orion.

Code I am Particularly Proud of

//when one clicks with the mouse a new planet appears (adds element to the array)
function mousePressed(){
  let newPlanet = new Planet (mouseX, mouseY, random(8,40));
  planets.push(newPlanet);
}
//when one touches a key the last element of the array diappears
function keyPressed (){
  planets.pop();
  }

Applying the knowledge I gained from class I was able to create new planets and using the .push and .pop I could add to the array or delete the last element from the array. Now I feel more confident using array functions and am willing to explore more of them in my next coding assignments.

How Was This Made

First, I made a class called Planet, which served as my guide until the end. Each of my planets is stored in the planets array.

After this, I specifically chose a color palette that complemented my idea of space. Then, I had to decide on the variety of planets and for this purpose I chose a random size between 8 and 40. Each celestial body has a range of motion and to imitate the constant movement in space, I did this:

move(){
    this.x=this.x+ random (-5,5);
    this.y=this.y+random (-6,6);

I tried adding more or less range to the random motion but decided on this as the perfect amount of randomness. I also added text to let people know how to interact with it.

I took inspiration from the technical readings and:

https://happycoding.io/tutorials/p5js/array-functions

https://p5js.org/reference/p5/noCursor/

No AI was used in the making of this.

Reflection

I have a few thing in mind that I would like to explore. After adding rings to some of my planets I thought “what would happen if I add different patterns to others?”. I think it’d be cool to see a variety of planets. Also, I believe it would be interesting to include more than just mousePressed and keyPressed options to interact with it. For instance, I am thinking of adding a separate action for a few buttons, so it gets closer to game-like feel.

Since the beginning the reading has been enthralling. The questions asked by the author seem to still be relevant today. I have always thought of interactivity as a way to “communicate” both with other people and HMI. I like to think of it as questions and responses; depending on one’s contribution (the input) they get different answers. When someone declares something to be “interactive” the first thing that pops to mind is technology that communicates back to the person. For example, when I was little I had an interactive alphabet board (in Bulgarian) that when it had its buttons pressed would in turn produce a noise (the sound of the letter that is). Depending on the mode it could also recite the word associated with the letter. I do believe that toys could be interactive, even when the interaction is included in its simplest form, but the Interactive Children’s Rug gives no response to the user and is therefore, not interactive. To this day I still believe that marketing strategies have failed me on multiple occasions with false advertising. Some years ago interactive dolls entered the market with a promise for a new era of playing. What a disappointment it was when the only feature of said dolls was blinking (and only when their heads are tilted). The questions remain: is interactivity subjective, are the objects really interactive? I say yes to both. To a certain extent everything is interactive, but it is the level of interaction that makes it differ. To my mom the washing machine is very interactive, but to me it has a low level of interaction, so I would say that some of the subjectivity may come from previous experience.

The paragraph about books not being interactive was really interesting and it made me think. While I agree with the majority saying that books are indeed interactive, the author’s point should not be overlooked. My proposal is the introduction of a distinction: direct and indirect interaction. What if books are indirectly interactive in the sense that you communicate with the author’s thoughts, but they are not there to respond? At some point the author was doing the “input”, now the reader is accessing existing media and is interacting with the output. With this new idea though we have to be open-minded enough to also accept that interaction could disregard one of the three principles of listening, thinking, speaking (that the author simply deems as participation) and agree that it is indirect interaction.

The tone is notably witty and overall very pleasant and I cannot help but agree with the author on most of the points. I am yet to form my own opinion on what is considered interactive or not, but I definitely am willing to adopt this way of thinking. While reading it, I constantly thought of the different scenarios and examples of questionable interactivity arose. In the future I would try to include more interactivity in my projects like moving elements, sound, change of colors or a combination, in order to explore it (interactivity) from a designer’s standpoint instead of just being the user.

What really stood out to me were the examples of how different everyday objects or nature can be used as inspiration for projects. I think that is because people’s minds are programmed to work with mental models or just things that they are familiar with. On a subconscious level, we are more likely to prefer something we already know (a pattern, a person, naturally occurring phenomena) over things we are yet to familiarize ourselves with, even if we claim that we are open-minded and love challenges. For example, I think that the thing he said about symmetry is very true. It may not look like something, but when we introduce symmetry to randomness, the brain starts recognizing the patterns.

With that being said, it is exactly because of that reason we think that “random” is wrong. But as the video mentions we should associate randomness with the unexpected rather than with the chaotic. The truth about randomness lies somewhere between order and chaos. It is impressive how much variety there is when we make minimal changes. I really enjoyed some of his examples of essentially “patching” already existing buildings or pieces of art. These small changes can have a huge impact on our overall idea and I deem it important that we delve deeper into exploring randomness as a way to create controlled varieties. To a certain extent I could see how that may apply to the usage of AI when coding. One may take inspiration from it, twist it, and produce something unrelated. It is our choice how we will make use of the resources around us but we should do it in an original way.

The video evoked some questions in me. Now I wish to explore how tiles with repetitive patterns seem to fit together, creating new patterns in the corners without ruining what was first there. Similarly to how we often feel inspired from the world around us, I thought about the traditional way this was designed and felt the desire to figure out how to do it with code. The video changed my assumptions about randomness and I hope to be able to use it in moderation in the future.

For this work I decided on a stylized and abstract approach. Prior to the making of it I had some failed experiments in p5 that laid the groundwork for my final idea. Some of that included the use of Boolean variables, but I could not envision them with the concept I had in mind, so I just played around with them.

The idea I am trying to convey is a couple that spends their time together at the park, sitting on a bench and I executed it to look like a time lapse. When the cursor goes from left to right the background changes from night to day and the Moon to Sun.

To do this I used a for() loop for the bodies of the two people and put them in two columns, so they do not combine. I used randomness in a few instances, but kept it very controlled, because I wanted to convey the idea of constant movement throughout the hours that does not interfere with the rest of the background. I used two different ways to change the colors of the background and of the celestial body that ultimately lead to the same result: if(mouseX>width/2) and if (mouseX>200) (the canvas is 400, 400).

Here is how my first tries looked before that. I had asked Gemini to help me with the two bodies’ code, but at the end I simplified it in the final product and let myself experiment.

Additionally, at first I kept the noLoop() because the movement was distracting me while working, but since it was a part of the process I decided not to delete it and put it as a note using //.

A code I am particularly proud of is the one I used for the bench. Even though it is not complicated, I felt that it really put my artwork together.

//Bench
  quad(230,262, 350, 262, 380, 300, 190, 300);
 rect(230,200,120,15);
  rect(230,220,120,15);
  rect(230,240,120,15);
  rect (350,300,10,50);
  rect (210,300,10,50);

What I would change in the future is to make smoother transitions like more colors in-between or using blendMode() for a sunset-like background. In addition, I would love to incorporate Boolean variables somewhere appropriately.

How Was This Made:

Gemini was used for my first trial. Also, I watched this video to better grasp the essence of loops.

When I first read that I have to make a self-portrait, I knew that I had to include some distinguishable features of myself. The first few steps were definitely slow-paced as I was still exploring options, revising from the slides and just experimenting with values.

Playing with the 2D primitives gave me a basic understanding of how p5 works and with each step I grew more and more comfortable with the layout, the functions and how everything works. The first few hours consisted of going back constantly to the reference sheet as well as the slide decks, because i wanted to repeat the process until it became familiar enough.

There was a time when i was thinking about what to do for my hair, so I decided it is high time I stopped constantly relying on what the references have to offer me. While putting different numbers in the bracket after rectangle I accidentally added one more than needed. This “happy accident” lead to the formation of a rectangle with rounded edges, which was perfect for hair. Then i added one more and moved them both until I had a dramatic side-part. What really helped me to understand where everything should be placed was visualising the xy-plane. Soon after that I started finding the exact coordinates with print(mouseX + “,” + mouseY);, which is significantly easier. Despite that, I believe it was needed for me to imagine it at first. Through this and simple math, I was able to make my collar symmetrical.

When I had done my face, hair, clothes, it was time for features. I exaggerated my big green eyes and figured a way to do my eyebrows thick, using an arc. I think I was going for a caricature as I knew that the end product will have little to no resemblance to me if it is not for those characteristics. I also used the arc from my eyebrow and inverted it to create my mouth. With other simple shapes I added depth.

What I am most proud of from this code is the flower rain, which while simple, felt like a big accomplishment.

textSize(45);
  text("🌺",x-200,x+100);
  text("🌼",y+70,z-250);
  text("🌷",y,z);
  text("🌸",x,x);

 

I kept combining things I saw in the reference sheet and tried to think of a way to make it work. I now see the potential and if next time I decide on a similar project, I would definitely approach it differently. I would do more flowers and would add randomness so it does not look so “stiff”.

No AI was used in the making of this.

How Was This Made:

https://p5js.org/reference/

https://p5js.org/tutorials/get-started/