Author: Henry Garcia Violante

MY CONCEPT:

Around the first or second week of classes, I remember missing my bass that stayed back at home (this was before I knew I could book one here), so  I spent a lot of time just thinking about how I could play bass without having one. Nothing really came to mind, but when the professor assigned us this project, I took on the challenge of making a working bass in p5.js.

This is the title screen of the experience. To “force” the user to into fullscreen mode, the start button is hidden until fullscreen is activated. Once it’s pressed, the game switches into the bass playing mode which I’ll go into in a bit. First I want to explain talk a bit about the name. Why “BASS PLAYER 11,000”? It’s a pretty straightforward answer. During development, every time I did a “risky” change to the code, I would duplicate the sketch, and I did this 11 times. I only wish I could’ve done it 56 or 58 more times. That would’ve been funny.
Now, for the bass stage, designing it was the first thing that I did since it was fairly easy. There’s not much to it, I just based it on a regular 4-stringed bass guitar. I also added the keys that play each note. THAT was hard, first I recorded all 32 sounds the bass can make (from frets 0 – 7). Then I have to convert them from .mp4 files to .mp3 files, then I had to upload them all to the sketch. After that, I started with some of the code to load them all. Here is when I encountered my first issue… Since the sketch was loading 32 files one after the other, it took like 10 minutes for it to load, so making changes to it was extremely inefficient. (Since I didn’t know what to do there I designed the starting screen at this point). After getting expert advise, I used a function called “Promise.all”, which loaded all the files at the same time. This reduced the loading time from 10 minutes to 10 seconds, which was, to say the least, pretty good.
After that, the coding for the key binding and fullscreen adjusting was very time consuming, yet simple at the same time. (I would like to admit that, due to desperation, AI helped with the math equation required for the resizing and to fix some code, other than that I did it all by myself).

CODE I’M PROUD OF:

function keyPressed(){
       if (key === "p") {
 fullscreen(!fullscreen());
 return;
 }
  if (key === "0"){
    restartGame();
    return;
  }
 if (gameState !== "playing") return;
  //Now to make the actual sounds, It is meant to be "played" as if it was an actual bass
let index;
      // A string
 if (key === "a") index = 0;
 else if (key === "s") index = 1;
 else if (key === "d") index = 2;
 else if (key === "f") index = 3;
 else if (key === "g") index = 4;
 else if (key === "h") index = 5;
 else if (key === "j") index = 6;
 else if (key === "k") index = 7;
   // E string
 else if (key === "z") index = 8;
 else if (key === "x") index = 9;
 else if (key === "c") index = 10;
 else if (key === "v") index = 11;
 else if (key === "b") index = 12;
 else if (key === "n") index = 13;
 else if (key === "m") index = 14;
 else if (key === "l") index = 15;
   // D string
 else if (key === "q") index = 16;
 else if (key === "w") index = 17;
 else if (key === "e") index = 18;
 else if (key === "r") index = 19;
 else if (key === "t") index = 20;
 else if (key === "y") index = 21;
 else if (key === "u") index = 22;
 else if (key === "i") index = 23;
   // G string
 else if (key === "1") index = 24;
 else if (key === "2") index = 25;
 else if (key === "3") index = 26;
 else if (key === "4") index = 27;
 else if (key === "5") index = 28;
 else if (key === "6") index = 29;
 else if (key === "7") index = 30;
 else if (key === "8") index = 31;
else return;
 sounds[index].play();

To be honest, proud of the whole code, but I guess this bit specially.

IMPROVEMENTS:

There’s a lot of stuff that, because of time and technical difficulties, was cut sort of last minute.
For example, I really really REALLY wanted to make it so that when a note is played, the corresponding fret “lights up” in some way, but I was unable to figure it out. It is definitely posisble, but my theory is that it would’ve required me to “unmake” the design of the bass and start from scratch, and I was NOT willing to do that. Perhaps if I had more chance.
Another thing that was cut was the “Extras” screen. It was supposed to include some “tabs” that showed what keys to press in order to play certain songs. It got cut because switching between 2 screens was hard enough. Also no time. If I only had more time.

EXTRAS/REFERENCES:

That’s how my gallery looked after all the videos of each note.

There’s a lot more verisons of the bass sketch, that’s just an example.
For references I mostly used the p5 website and expert advice from the amazing professor. AI was only used to help with some math and improvement of a single code line.

UPDATE!:

So after my presentation I added mainly 2 things.
First, I added music to the starting screen with the examples covered in class. The music is a tape of Metallica’s “Fade to Black” ending bass track.
For the second thing, I initially wanted to make each fret light up when its note is played, but the array stuff needed to do that is way beyond me. So the next best thing was to have the strings light up when a note is played on that string. The code for it was a bit complicated, but I just needed to create a new array with a timer. The timer helps the string light up for just a couple of frames.
Thank you! 🙂

Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers

I guess I always figured that the way computers “see” things was a very complex system, but it was only until I read this that I realized all the work and how far we’ve come in regards to computer “vision”. I even remembered when I was little and would play with my family using the Xbox Kinect. It would be so awesome to use this for projects.

• What are some of the ways that computer vision differs from human vision?
  Computer vision is different in the sense that, it doesn’t automatically understand what it sees. When a person sees something they can immeadiately distinguish between different objects, while a computer cannot.
• What are some techniques we can use to help the computer see / track what we’re interested in?
  Some techniques are based on detecting different things, like motion, brightness, and presence. They detect whether pixels have changed between frames or substract a previously established background to excract any changes from said background, etc.
• How do you think computer vision’s capacity for tracking and surveillance affects its use in interactive art?
  I think that computer vision is a key element in interactive art’s future, being able to track a person’s movements makes way for endless possibilities in the field, but when applied to other fields, such as its use in surveilance (like the Flock cameras) proposes ethical and moral questions that, although valid, innevitably delay advancements in these technology. It’s a shame, but at the same time, these ethical dilemmas are definitely worth having.

INTERACTIVE BASS

I have completed the main part of the project. I am missing the introduction screen and some other details that I would like to add.
I’ve had an extremely difficult time with this (hopefully I will explain in class why). I am TERRIFIED as to why it takes so long to load and whether it can be fixed somehow. However, I have been working on this much longer one would probably think (I didn’t eat all day). The loading issue sure troubles me, but my hunger is far stronger now. I am hopeful I can fix this to be how I want it to be.

• 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);