Author: Henry Garcia Violante

• What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?
  I bought an alarm clock from IKEA back in Marhaba Week, and to this day, I have no idea how it works. I kind of figured out how to set the time correctly, but the alarm part is the problem. The alarm clock has two small knobs on the back. With no words in them, just two extremely vague symbols. One is for setting the time (I think) and the other is probably for the alarm, but there’s no indicator that the alarm was set, or at what time or anything really. I believe it could be improved simply by adding a small text explaining how it works.
• How can you apply some of the author’s principles of design to interactive media?
  I think interactive media should go along HCD and also prioritize (but never limit itself to) the affordances, the signifiers and the feedback principles mostly when coming up with something.

Videogame death message

MY CONCEPT:

For this assignment, I chose to do a display of generative text. When the Professor showed us the random poetry example, I immediately thought about the Minecraft death messages, so I decided to have some fun and kind of change the formula a little bit.

HOW THIS WAS DONE:

I had to come up with a formula first, so after gicing it some thought, the formula I went with was “MAIN CHARACTER + HOW THEY DIED + AN ACTION + WHO THEY DIED TO”. Using a Google Sheets document, I came up with a list of the names of 10 persons from different media, from videogames (names such as Steve, Vincent, Freddy) to music (Bowie, Ozzy). Then I choose different ways one can die (in videogames), followed by an action I thought someone could be doing before dying and finally, who could kill a main character.

HIGHLIGHT CODE:

  textSize(20);
  strokeWeight(5);
  textFont("Times New Roman");
  text(person + " " + event + " while ", 100,170);
text (action + " " + enemy + "...", 120, 205);

I guess what I liked the most was being able to put it all together. There are 2 different text functions because if it was only one, the text would either go beyond the screen, or be too small to read comfortably. I also TRIED to change the generated text to another font, and although I was successful, for some reason I couldn’t figure out the main “You Died!” text also changed fonts.

REFERENCES:

That’s the Minecraft death screen, I got inspired by the red tint it puts all over the screen at the moment of death, but I guess the Red Dead Redemption 2 death screen was also an inspiration for the options in the lower right corner. And technically there’s a ton of other references to other media in the messages themselves, but that’s for everyone to find out :).

WHAT I WOULD IMPROVE:

I want to know why the font of the “You Died!” message changed after clicking the mouse for the first time, since I tried various possible solutions for it but nothing worked :(.

What do you consider to be the characteristics of a strongly interactive system? 

When the both parties are considered when making the interactive system.

What ideas do you have for improving the degree of user interaction in your p5 sketches?

Integrating more functions related to the mouse.

Are rugs interactive? Explain in your own words why or why not.

No, because they don’t answer to your actions nor do they listen.

Come up with your own damn definition of interactivity.

When two or more entities continously analyze and receive feedback between each other.

Birds on the Beach

CODE

The following code is for the bird’s wings and body, I had to use the custom shape in order to make the wings. I really like how it ended up looking, but I did have a hard time making it symmetrical.

 //Body
 fill("#3f3737");
 ellipse(200,200,60,100,10);
// Left Wing
 beginShape();
 vertex(176,215);
 vertex(140,225);
 vertex(125,245);
 vertex(120,200);
 vertex(125,180);
 vertex(140,170);
 vertex(155,160);
 vertex(183,160);
 endShape();
 //Right Wing
 beginShape();
 vertex(222,215);
 vertex(260,225);
 vertex(270,245);
 vertex(275,200);
 vertex(265,180);
 vertex(260,170);
 vertex(230,160);
 vertex(214,160);
 endShape();

For the code that makes it move, I had a bit of a harder time…

class Bird{
    constructor(x,y,yspeed) {
    let nums = [1,2,3,5,10,25,50];
    this.x = x;
    this.y = y;
    this.yspeed = random(nums);
    }

    move() {
  this.y -= this.yspeed;
  }
    show() {
push();
 translate(this.x,this.y);

As it can be seen, I only wanted it to move in the “y” axis, so there’s no “xspeed”. For the movement speed, I used an array of numbers, so it can go quite slow or super fast. Now, the most complicated thing was moving the whole bird, since when I first tried it, all the shapes that made up the bird simply merged. I spent no less than an hour trying to make it work, but I wasn’t successful. So I just googled “how to move shapes together in p5” and it led me to “translate”, and when I looked it up on the p5 guide, it gave me all the answers that I needed (kinda). I’m not really sure how it worked, I was just trying different combinations until I added the “this.x” and “this.y” values and it suddenly worked.

INSPIRATION

It isn’t based on anything specific, I just made the background look like a regular beach and tried my best to do a regular bird, although for this, I did have to sketch with a pen and paper how I could do the wings:

WHAT WOULD I IMPROVE?

For the next time, if I had more time, I´d like to be able to implement the pop function, as well as more randomness (maybe the bird’s color) into it, and I’d also add more detail to everything.

REFERENCES I USED

https://p5js.org/examples/Transformation-Translate/

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

Before watching the video, I had never seen any of the artworks shown in it, in fact, I basically had zero idea that such a community of artists existed. The only thing I knew was the example he gave of abstract painting with Piet Mondrian, someone whose work I personally do not like or enjoy at all. But when he began showing the art made with random algorithms I was amazed, it truly looks fascinating. I can definitely understand someone’s love for this type of art, whether they create or they consume it. I cannot really put into words how interesting it is to me that a machine is able to produce such media with relatively simple codes. The nonsensical aspect of some of them gives me a strange feeling, I think the best way I could describe it is a weird mixture of discomfort (not necessarily in a bad way) and curiosity.

Another thing that really interested me was the musical piece he briefly showed. I am VERY into music, I listen to most kinds and yet, those short ten seconds of “randomly” generated music genuinely sounded like nothing I have heard before. It actually makes me wonder how randomness can be implemented into non-random music, or perhaps it has already been produced and I just have not heard of it yet? I will for sure look more into that because it even makes me want to try it myself, although that is probably way easier said than done. But still, the video was extremely eye opening for me and I look forward to keep learning about this and many other interesting topics in the nearby future.

My concept:

In November 1979, proggressive rock band Pink Floyd would release one of its most iconic albums: “The Wall”. Being one of the most popular concept albums to date, my sketch is the (attempt of the) cover of said album.

How this was made:

I used the for() loop for the wall background, and in order to give it that distinct brick pattern I simply copied the code and added a “-50” for each valuable in the pattern. At first I used addition for this, but that left several squares empty, so by simply changing it to a substraction it worked (I also had to add a +50 to the height when establishing the variable).
For the letters, I chose to skip the band’s name (Pink Floyd) in my sketch for two main reasons. The first one being that I am not very good at doing letters (as you can probably tell) and secondly, I didn’t have a lot of time. But for the album’s title (The Wall), I used triangles and rectangles with smooth edges to (attempt) creating the words.

Code I’m proud of:

  //Wall
   fill("#ffffff")
 strokeWeight(4);
 rect(y,0,x,50,);
rect(y-50,50,x-50,50);
 rect(y,100,x,50);
rect(y-50,150,x-50,50);
 rect(y,200,x,50);
rect(y-50,250,x-50,50);
 rect(y,300,x,50);
rect(y-50,350,x-50,50);
 rect(y,400,x,50);
rect(y-50,450,x-50,50);
 rect(y,500,x,50);
rect(y-50,550,x-50,50);
 rect(y,600,x,50);

That’s the code for the brick wall pattern I talked about previously.

What I can improve for next time:

I think once again, the use of a wider variety of shapes. I think that would probably lead to better sketches.

Reference image:

 

I made this usign mostly squares, rectangles and circles. I tried to add some ellipses and triangles but they’re kind of confusing to use, even with the guide. So maybe for future works I could use a wider variety of shapes.

//Torso
 fill("#c44f1c");
 rect(325,215,245,280,30);
 fill("#b14802");
 rect(365,265,10,400);
 fill("#b14802");
 rect(520,265,10,400);
 fill("#197624");
 triangle(450,290,400,340,500,340);
 fill("#40b329");
 ellipse(450,320,35,15);
 fill("#7ad011");
 ellipse(450,320,5,15);