Author: Aleks

Concept

Since this is the first time I get to work with electric components, specifically the Arduino Uno, I am excited to explore all the possibilities with physical computing and circuit design. For the first assignment using the Arduino, we were tasked to come up with a creative switch, a physical component that opens and closes the circuit, without the use of our hands. The concept that I came up with was to create a switch that completes the circuit when you bend your arm in and flex your bicep.

Process

Accomplishing this switch was slightly more challenging than anticipated, At first, I realized that the wires given in the starter kit were not long enough, to comfortably create connective pads. Additionally, I tried to use conductive fabric, however, the tape I had would not hold it in place properly. Finally, I decided that it was best to use two aluminum foil pads for creating the connection. A video of the working switch is attached below.

VIDEO FOR SWITCH

Reflection

Overall, with my limited knowledge of circuit design and lack of certain supplies, I believe that I could have created a better switch. Nevertheless, since this is my first time working with these concepts, I am proud of the switch I created, and I believe it is a fun way to connect a circuit. On a side note, even though the circuit was only 5V, it still gave me a weird sensation on my skin as the current was trying to pass through me. I look forward to working on more complex projects involving the Arduino.

Link to the sketch: https://editor.p5js.org/oa2302/full/Yn69_3-Qb

Concept:

The overall concept for my midterm project I have described in my first progress post regarding this assignment. I was inspired by another student’s project, as well as reminiscent of the 2D mobile puzzle games that I loved to play, and thus, I decided to create my own puzzle game. I think puzzle games are meant to be mysterious and invoke a lot of thinking in order to solve them, and thus, when I initially planned on what my midterm would be, I was highly ambitious. Nevertheless, I am extremely happy with the outcome, and exploring this type of concept, though challenging, was highly engaging and fun for me.

Though I initially planned to do 4 different puzzles, as I was creating the first puzzle, I realized that creating 4 different ones was not a task I could do in such a short amount of time. Nevertheless, I chose two puzzles that I could make work well with my beginner coding experience. These two puzzles are finding the differences and solving a riddle. Once these two puzzles are solved, the indicators above the door will turn green, and the door will open, signifying you have won.

What really made this project take so long for me was the fact that I decided to draw each element and scene by hand, and thus, creating each required scene took much more time than it could’ve if I had just used images from the internet. Nevertheless, this makes my work original and authentic.

Process / How It Works:

I began by creating 2 main scenes in a digital drawing application on my iPad. I drew an introduction screen where I would generate the title, start, and instructions buttons. Then, I designed the game scene, focusing on a nearly monochrome 2D scene. Since I wanted each element in the game to be interactive, I decided to draw each element in a separate layer, and then create a button using a transparent PNG file for just that object. Similarly, I created the start and instruction buttons. I also created a state machine using if conditions and constant variables, which allows you to travel between a zoom-in of each object or the main game screen.

The code I am most proud of is most likely breaking every part of the game into pieces, which I made into functions, and thus, my actual function draw() loop only contains the if conditions.

//state machine using if conditions and the infinite draw function loop
function draw() {
  if (state == INTRO_SCREEN) {
    introScreen();
  } else if (state == RULES_SCREEN) {
    rulesScreen();
  } else if (state == GAME_SCREEN) {
    mainMusic.amp(0.4);
    gameScreen();
  } else if (state == PLANT_ZOOM) {
    showPlant();
  } else if (state == PAINTING_ZOOM) {
    showPainting();
  } else if (state == CLOCK_ZOOM) {
    showClock();
  } else if (state == BOOKS_ZOOM) {
    showBooks();
  }
}

function introScreen() {
  //show or hide buttons
  startButton.show();
  rulesButton.show();
  backButton.hide();
  backToGameButton.hide();

  //hide objects
  exitDoor.hide();

  //main
  image(startBG, 0, 0);
  push();
  fill(20);
  stroke(200);
  strokeWeight(5);
  textFont(font1B, 190);
  text("NO WAY OUT", width / 2, 290);
  pop();
}

function rulesScreen() {
  //show or hide buttons
  startButton.hide();
  rulesButton.hide();
  backButton.show();

  //hide objects
  exitDoor.hide();

  image(startBG, 0, 0);
  push();
  fill(20);
  stroke(200);
  strokeWeight(5);
  textFont(font1B, 150);
  text("INSTRUCTIONS", width / 2, 290);
  pop();
  push();
  strokeWeight(20);
  stroke(200, 200, 200, 100);
  fill(125);
  rectMode(CENTER);
  rect(width / 2, 550, width - 100, 310);
  pop();
  textFont(font1A, 30);
  textWrap(WORD);
  text(instructions, width / 2, 450, width - 170);
}

function gameScreen() {
  //hide buttons
  startButton.hide();
  rulesButton.hide();
  backToGameButton.hide();
  answerInput.hide();
  submitButton.hide();
  difference1.hide();
  show_difference1.hide();
  difference2.hide();
  show_difference2.hide();
  difference3.hide();
  show_difference3.hide();
  difference4.hide();
  show_difference4.hide();

  //show all objects
  exitDoor.show();
  plantPot.show();
  clockButton.show();
  booksButton.show();
  paintingButton.show();

  //background and above door indicator
  image(gameBG, 0, 0);
  image(indicator, 257, 175);
  let indicator1 = new Indicator(300, 210);
  let indicator2 = new Indicator(380, 210);


  if (puzzle1solved == true) {
    indicator1.setCorrect();
  } else if (puzzle2solved == true) {
    indicator2.setCorrect();
  }
  indicator1.display();
  indicator2.display();
}

Reflection:

Overall, I believe that this midterm project has been a major milestone in my journey of learning how to code. Ever since I was small, I always dreamed of being able to create games and about all the endless ideas I had. Finally, I can proudly say that I am on the track to fulfilling my dream. Additionally, I believe that by creating all my elements as buttons, it was much easier to manipulate when they were shown and hidden. I am sure this can also be done in many other ways, and I will explore those when the right time comes. Nevertheless, the main issue I faced was expecting too much from myself. I spent over 10 hours in total, drawing, coding, and figuring this game out, however I was unable to reach the goal of 4 different puzzles. I also found it challenging to create puzzles, such as a sudoku, within this game. Nevertheless, I am extremely happy with the final result.

In his article Computer Vision for Artists and Designers, Golan Levin writes about the progression of computer vision and how it has played a crucial role in shaping what we perceive to be interactive tech, art or not. It is interesting to acknowledge that prior to people experimenting with using computer vision for artistic endeavors, the “application development for computer vision technologies, perhaps constrained by conventional structures for research funding, has generally been limited to military and law-enforcement purposes” (Levin). Nevertheless, in our fast-paced and exponentially growing society, it is bizarre to note that with each decade, our computer vision capabilities expand vastly.

In his article, Levin demonstrates multiple examples of where computer vision met artistic and interactive ideas, all ranging in creation times spanning the past few decades. Levin also focused on the different techniques that are used to allow the computing of visual files, mainly by pixel analysis, and this led me to reflect on how, throughout my childhood, we took these technologies for granted. When I was 10, like any other young aspiring boy who liked to play video games, I dreamt of creating the perfect set-up to record myself playing my favorite games. Green screens were extremely popular during that time amongst various creators, and they allowed them to capture and project only the subject of the video onto a different layer. This effect was ultimately used to achieve a better immersive experience for the viewers; however, it is only now that I realize how these applications function and what algorithms and processes are involved to create the seamless effect of being able to change your background. And with each month, we see more implementations of these techniques; for instance, Zoom allows people to change their backgrounds, even without a proper green screen.

In conclusion, I believe that it is a fascinating topic for many to explore, and understanding the complexities behind all the computer vision algorithms is substantially brought into a simpler context in Levin’s article.

Concept Design

As we were looking at previous Midterm projects in class, one of them reminded me of a type of game I used to highly enjoy. The project that reminded me of this was the Coffee shop experience. A few years back, I really enjoyed playing mobile 2D puzzle / escape room games, which had a very similar structure to how the Coffee shop experience functioned. You would be able to zoom into certain parts of the walls, where the objects were placed, and solve interactive puzzles, which would eventually lead to you figuring out some final code to opening the door and passing the game. Thus, I decided that I would attempt and create a virtual 2D escape room game of my own. I am still debating on whether I should create the images myself or find references online. I began by sketching out two versions of how I would want the game to function.

 

 

 

 

 

 

 

I am still not fully decided on the overall theme of the experience/puzzle game; however, I will shortly begin sketching possible ideas for the visuals and take it from there.

Code Design

In order to piece all of the walls and “zoom-in puzzles” together, I am sure that I will need to come up with some sort of layers and switch them according to some indicators.

As of now, I think the best approach for this would be to create a class that would help differentiate between the different scenes. Additionally, I need to consider where I will include each of these elements:

1. At least one shape – Perhaps the door, maybe create shapes as objects underlying the images for them to detect if they are being selected
2. At least one image – Images for puzzles, keys, characters, background, etc.
3. At least one sound – Some theme song playing in the background.
4. At least one on-screen text – One of the puzzles will be a riddle which will include on-screen text.
5. Object-Oriented Programming – I will create a “Layer Manager” class which will help me switch to different layers, such as the overall wall view, zoom into a specific puzzle, etc.

Frightening Concepts

Since I have not yet tried creating objects that are clickable, I believe that this aspect, along with switching views, will be the most challenging for me. In order to overcome this, I will try to research methods of how I can implement this. I have a few ideas about how I can create clickable objects, and I will create a tester p5 sketch, where I will try to implement all of these concepts, which are complex to me. After I am able to make sure that they work well, I can then confidently add them to my midterm project.

Chapter 1 of The Design of Everyday Things by Don Norman poses interesting and crucial observations about the design of our everyday objects, machines, and other utensils. When Norman described the example of bad design with the story about his friend being trapped between doors, I remembered of a similar experience I once faced. After moving to central Europe from Ukraine, I did yet realize that the design of doors in this area of Europe was significantly different than that in Ukraine. Here, doors had handles only on the inside and a dysfunctional knob on the outside. When I an apartment building in Slovakia, I was confused why do all the doors have useless knobs if they don’t even turn. I later learned that this design choice was mainly for ‘safety purposes.’ Still didn’t stop me from accidentally locking myself out of the apartment, even with the door unlocked.

I believe that the points Norman makes in the first chapter are precisely how poor design choice leads to many failures and mistakes. Even recently, I had bought swimming goggles, and accidentally ruined them by rubbing the inside surface. I later read the instructions where it said not to do so. I believe the design of everyday things can be so much better, exactly like Norman proposes, and that it is perhaps our human nature to assume other think like us to design things in a way that we might understand, but others might find challenging. Just like Norman’s example with how engineers think about the things they create, they assume things logically, which is not the case for all people, and thus poor design choices are made. They might not necessarily be poor in functionality, but it is often difficult for people to understand the exact functions if the design is unclear. Overall I believe Norman makes valid arguments as to why the design of everyday things could be so much better.

Concept

After our lecture, where we learned about how to visualize large amounts of data within p5, I remembered one popular image regarding the subject. This was the visualization of all McDonald’s locations in the USA. The map was nearly full of points representing the large amounts of fast-food chain restaurants, however, I realized that I had never seen a similar map for Europe. This inspired me to search for a file containing the locations of all McDonald’s restaurants in Europe, and consequently, visualize the data to see what the map of Europe will look like through McDonalds locations. I was able to find a .csv file with exactly what I was looking for published by a user on GitHub.

Implementation / Code

Since the project I am working on is very similar to the data visualization example we looked at in class, a lot of my code is very similar, including checking if the file loaded, checking if there are errors within the file, and so on. I also realized that it is unnecessary to run through the file again in order to plot the points onto the canvas. Or perhaps it might be… As I was trying to create the data visualization, I frequently used the example in the lecture notes as a template. However, even though the code seemed good, the mapping of the points did not resemble a map to me. The minimum and maximum Lat and Long coordinates were all correct and accurate after I checked them on Google Maps, however, the visualization itself did not resemble the map of Europe. This set me back, and I took a few hours off to come back later and think what might be causing this issue.

Something that was initially confusing to me, was determining the minmaxLatLong coordinates. The method of adding 10 and subtracting 10 from the variables “latitude” and “longitude” themselves seemed odd to me. I decided to try and instead use an extreme value for the initialization of the variables minLat, maxLat, minLong, and maxLong. To my surprise, this actually produced a visualization that seemed way more accurate, however, it was not scaled properly to the canvas. After playing around with the values, I was able to get a good scale on the canvas. I am yet to figure out why this worked out the way it did.

function getMinMaxLatLong() {
  let singleRow = [];
  for (let mcdRowNumber = 0; mcdRowNumber < strings.length; mcdRowNumber++) {
    singleRow = split(strings[mcdRowNumber], ",");
    let latitude = float(singleRow[0]); // first is latitude
    let longitude = float(singleRow[1]); // second is longitude

    if (isNaN(longitude) || isNaN(latitude)) {
      // make sure they are numbers
      print("Conversion to float failed; Skipping row " + mcdRowNumber);
    } else {
      if (mcdRowNumber == 0) {
        // very interesting observation, by changing the initial values of min and max of the lat and long, the entire visualization shifts, why?
        minLat = -20;
        maxLat = 30;
        minLong = 20;
        maxLong = 70;
      }
      minLat = min(minLat, latitude);
      maxLat = max(maxLat, latitude);
      minLong = min(minLong, longitude);
      maxLong = max(maxLong, longitude);
    }
    let xpos = map(longitude, minLong, maxLong, 0, width);
    let ypos = map(latitude, minLat, maxLat, height, 0);
    stroke(3);
    point(xpos, ypos);
  } // end of for loop

  //inaccurate with the extreme values
  //print("Latitude (min, max) = (" + minLat + "," + maxLat + ") ");
  //print("Longitude (min, max) = (" + minLong + "," + maxLong + ")");

  print("Finished.");
} // end of findMinMaxLatLong

Final Product

Above is the final data visualization. The black points represent the McDonalds fast food restaurants in most of Europe.

Reflection

Even though the coding was mostly understandable, I am still questioning why the initial methods of determining the minimum and maximum Latitude and Longitude did not work out. I will be looking into this more thoroughly in the future, and I enjoyed working on this project.

When I first joined the Introduction to Interactive Media course, I did not know what to expect. My perception of interactive media at the time was highly connected to that of a visual artist. Coming from an artistic background and having taken many art courses throughout my life, I have come to accept interactivity to be highly based of the audiences reaction.

Nevertheless, I was pleasantly surprised when the course that I am in turned out to be something that I had dreamed of trying by myself, but never having the time. Chris Crawford puts it perfectly when he says, “interaction: a cyclic process in which two actors alteratley listen, think, speak.” My understanding of the interactivity had been highly subjective, and I found myself in the position of naming various items ‘iteractive,’ even if they were not ideally so. I liked Crawford’s example of the degrees of interactivity, specifically how he talked about the fridge possessing a low degree of interactivity. This led me to think back about some commercial or idea I saw/had, where a smart fridge would scan all the food inside if, and provide you with various information, e.g. constructed a grocery list for you, or proposed recepies that can be made with the ingredients available. I believe that type of fridge can pass for being interactive.

Ultimately, I believe that this chapter highly changed my views on interactivity, specifically what it means for something to be interactive. The three main steps, listen, think, speak, can most likely be applied universally, and thus I see huge potential in this field of study.

When I first began brainstorming the possibilities of what I could create with object-oriented programming, my creativity was lacking. However, one evening, as I was looking through some old videos, an idea struck me. Since this assignment requires us to create objects within an array, I thought that creating fireworks would be a perfect opportunity for that.

Since I have no experience creating a class in p5, or in coding in general, I decided that it would be best for me to plan out each specific action I would need and draft a handwritten ‘plan’ which can be seen below:

Ultimately, this assignment has been the most challenging out of all the previous ones. This resulted in me spending a lot of time looking for resources to help guide me through the challenges of making everything work. What I found most confusing was creating the object, adding it to an array, and then removing it. I struggled a lot while trying to create a for loop which would add an object to the array when the mouse is clicked and then remove it from the array when the firework explodes.

Nevertheless, I was able to figure out an efficient method to implement my ideas into code functionally. Here is the most tricky code I have written so far:

function mouseClicked() {
  let newFirework = new Firework(mouseX, mouseY); //creates new object with cursors x and y parameters for the objects startX and startY variables.
  fireworks.push(newFirework); //add new firework object into array
}

function draw() {
  background(40,40,100);
  push();
  fill(177,177,224);
  stroke(202,179,0);
  textAlign(CENTER);
  textSize(50);
  text('click for fireworks!', 250, 100)
  pop();
  //for loop to add firework to array
  for (let i = fireworks.length - 1; i >= 0; i--) {
    firework = fireworks[i]; //creates object from array
    firework.moveUp();
      if (firework.exploded) {
        firework.showExplosion();
        if (firework.faded()) {
          fireworks.splice(i, 1); //remove rocket after exploded
        }
      } else {
        firework.show();
        if (firework.reachFinalY()) {
          firework.explode();
        }
      }
    }
  }

What was also really challenging was managing all the different names for the variables. I ran into multiple problems with my code, which were all caused because I misspelled the name of a variable, or used the wrong one.

Finally, I was happy with my result and could generate as many fireworks as I wanted to celebrate the completion of this assignment. Since this was my first experience trying to code something using Object Oriented Programming, it proved to be challenging. I would also occasionally forget to add the “this.” before a variable’s name within a class, which caused more crashes, however after polishing up my code, I am very proud of what I was able to achieve in this assignment.

Moving forward, one idea that I would like to implement is having more interactivity and user control over my programs. For instance, having a slider to increase the size of the explosions, their shapes, or their colors. Many variables that can be changed, and I hope in the near future I will be able to create projects with much more interactivity.

References:

The Coding Train: Videos on OOP and Arrays…

p5.js – Reference Page

When I first began brainstorming an idea for this assignment, I was overwhelmed looking through all the other elaborate projects my classmates and other students were able to come up with. I felt as though I was lost and didn’t know enough to create something that I actually liked. I started my exploration by playing around with generating lines using a for() loop and allowing the background and stroke to change color according to the cursor position. This was my first attempt at this assignment:

I found the project to be very simplistic, yet the patterns created by the overlapping lines create a beautiful sense of symmetry, and the gently changing colors create stark contrast and desaturation at times.

Nevertheless, as I kept browsing through other projects, I felt as though I hadn’t done enough.

I spent a while playing around with variables and the loops, randomly. I think it’s only fair to say that trying things randomly leads to unexpected and random results, however, those results can be just what you want.

I began by using a similar loop structure, but now generating lines to create a pyramid in the center of the canvas. The main concept I wanted to convey was my feelings of being lost and confused. I felt as though those who knew more than I did found it much simpler and knew how to keep everything fair and organized. I transformed this concept into my assignment. As the cursor moves, representing ‘knowning less’ – the lines represent chaos and fear that many of us experience. Similarly, if the mouse is pressed, an organized array of circles turns to chaos.

Ultimately, the part I struggled with most was adjusting the loops so they don’t cause P5 to crash once I add them to the draw function. Here is a part of my code I am proud of:

function chaos(s) {
  if (status === 0) {
    for (let y = 0; y < height; y = y + 40) {
      for (let x = 0; x < width; x = x + 40) {
        offset = offset + 0.1;
        line(0 + mouseX, x + noise(offset) * (s/2), y + noise(offset) * (s/2), height);
      }
    }
  } else {
    for (y = 0; y < height; y = y + 20) {
      for (x = 0; x < width; x = x + 20) {
        offset = offset + 0.1;
        noFill()
        circle(y + noise(offset) * (s/20), x + noise(offset) * (s/20), mouseY/5);
      }
    }
  }
}

I created a separate function called chaos, which also had an argument input (s), which I determined to be mouseY representing the height of the cursor.

Here is my final project:

Looking forward, I am planning to learn how to better optimize my code, especially loops, and I am excited to see what I will be able to do with the functions now that I have a basic understanding of how useful they can be.

Sources:

Coding Train Videos – 5.1, 5.2, …

P5JS – Reference Page

Written Response: Eyeo2012 – Casey Reas

After taking a first glance at the assigned reading, I was not too excited to watch a 40-minute presentation about something called “Chance Operations.” Nonetheless, I was thoroughly intrigued by the concepts Reas explained and demonstrated.

Prior to enrolling in this course, my exposure to computer-generated art and media was highly superficial, and when I thought of ‘computer graphics’ only things like CGI and 3D Models came to mind. I understood the basic concepts of randomness and the vital roles it played across all disciples, however, it has never crossed me that these concepts of randomness and noise could be used to create intricate and unique artworks through supposedly ‘simple’ code.

Another part of the presentation that surprised me was the close resemblance Reas’ work had to an artwork of my own:

Casey Reas’ Work
My work

Though the similarities are quite obvious, Reas’ artwork had been generated by code that he had written. Mine was created physically. It seems that at times, randomness and noise can often prevail in the physical and digital worlds of media, and I believe Casey Reas’ presentation exclusively demonstrates the latter. This was even more evident as shown through his project in collaboration CHRONOGRAPH with Tal Rosner, where they took hundreds of images, and randomly compiled them to create unique artworks. The applications went even further when Reas’ demonstrated the artwork he had created where he collaborated to create a visual representation of how certain proteins communicate. Ultimately, it can be said that randomness is not merely a concept that is useful for coding or creating media, but it is one which runs our lives down to the individual atoms and cells.