The Art Of Interactive Design

The chapter was a very interesting read. I liked how the writer analyzes interactivity by understanding how we ourselves speak. The writer classifies our speech to listening, thinking, and speaking. Where speaking is where the interactivity will take place (and a bit of listening too)

I am more into the backend and how the system works with algorithms and coding rather than a designer of the front-end so this was an interesting read for me as the front-end is a very important part of every product and I need to improve my, “Interactive designing” skills. Let me end my post with a quote from Steve Jobs:

“Design is not just what it looks like and feels like. Design is how it works.”

Light Organ

So I wanted to make use of the dusty LCD Display that we had in our kits, I searched for some tutorials on how to connect it, and did a simple hello world.

The next day, I started tapping on my desk to a beat, and felt like I wanted to make a “beat boxing machine”. But, I didn’t have a proximity sensor to detect movements and I didn’t want to use buttons as that seemed counterintuitive. What I did find in our kit though, was a photo resistor. I figured if I could connect it and detect when the light intensity is low(when you wave ur hand over the resistor) I could set up some arbitrary values and make the buzzer make some sounds.

It was relatively straightforward setting up the breadboard with all the components with the help of the tutorials. I learned that we need a potentiometer for an LCD to adjust the brightness so that it can be made visible in any light environment.

I found a function on the sparkfun website that converts frequencies into keys so I could actually play organ keys on the buzzer which was really cool. I also used code from the sparkfun examples to detect the light intensity from the photo resistor.

https://learn.sparkfun.com/tutorials/sik-experiment-guide-for-arduino—v32/experiment-11-using-a-piezo-buzzer 

https://learn.sparkfun.com/tutorials/sik-experiment-guide-for-arduino—v32/experiment-6-reading-a-photoresistor

I initially started with a system where I had to manually check the maximum light intensity and then manually enter it as the, ‘startVal’ variable. Then every decrease by 5 units from the startVal frequency would result in a different note being played in the buzzer. Later I improved the function so it keeps detecting the light intensity and updating a, ‘high’ variable so I knew the max intensity without the need of manually entering it. So now it had auto calibration.

Here’s a video of how it worked (I used my phone to bring it closer and further from the photo resistor to vary the light intensity):

I’ve also attached the code here:

#include <LiquidCrystal.h>

const int jumpVal=5;


const int sensorPin = 0;
const int buzzerPin = 9;
const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;
int lightLevel, high = 0, low = 1023;

const int songLength = 1;
int starterVal;

char notes[] = "c";//dfda ag cdfdg gf "; 

int beats[] = {1,1,1,1,1,1,4,4,2,1,1,1,1,1,1,4,4,2};

int tempo = 113;

LiquidCrystal lcd(2,3,4,5,6,7);

void setup() {
 
  lcd.begin(16, 2);
  pinMode(sensorPin, INPUT);
  pinMode(buzzerPin, OUTPUT);
  
 
}

void loop() {

   lightLevel = analogRead(sensorPin);
   manualTune();
   starterVal=map(high, 0, 1023, 0, 255);
   lcd.setCursor(0, 0);
   lcd.print(lightLevel);
   lcd.setCursor(0, 1);
    
    int i,j, duration, prox;
    char noteNames[] = { 'c', 'd', 'e', 'f', 'g', 'a', 'b', 'C' };
    if(lightLevel<(starterVal-(jumpVal))) {
  for (j = 0; j < 8; j++)
  {
    int num=starterVal-(jumpVal*j);
    if (lightLevel<num) {
      notes[0]=noteNames[j-1];
      lcd.clear();
      lcd.setCursor(0, 0);
   lcd.print(lightLevel);
   lcd.setCursor(0, 1);
      lcd.print(noteNames[j-1]);
      
      } 
    }
  for (i = 0; i < songLength; i++) 
  {
    duration = beats[i] * tempo;  

    if (notes[i] == ' ')          
    {
      delay(duration);            
    }
    else                          
    {
      tone(buzzerPin, frequency(notes[i]), duration);
      delay(duration);            
    }
    delay(tempo/5);              
  }
} else {
        lcd.clear();
      lcd.setCursor(0, 0);
   lcd.print(lightLevel);
   delay(100);
        }
 
}

void manualTune()
{
 if (lightLevel < low)
  {
    low = lightLevel;
  }

 
  if (lightLevel > high)
  {
    high = lightLevel;
  }
  lightLevel = map(lightLevel, 0, 1023, 0, 255);
  lightLevel = constrain(lightLevel, 0, 255);

} 

int frequency(char note) 
{
 
  int i;
  const int numNotes = 8;  
  char names[] = { 'c', 'd', 'e', 'f', 'g', 'a', 'b', 'C' };
  int frequencies[] = {262, 294, 330, 349, 392, 440, 494, 523};



  for (i = 0; i < numNotes; i++)  
  {
    if (names[i] == note)        
    {
      return(frequencies[i]);    
    }
  }
  return(0);  
              
}

 

The Sweet Sweet Sound of Victory

Building onto my project from last week, I’ve decided to give the brave souls that successfully complete my insanely difficult maze a sweeter reward than just LEDs lighting up. I originally hoped that I could somehow have Arduino play a short tune (mp3) but then I realized that it actually isn’t that simple. I’d have to utilize this device called “the shield” — which I had no clue how to put together.

I opted for the next best thing: have the LEDs blink out the rhythm of the song I intended to play while I manually produce it with my mouth. (#lol)

The “song” begins the moment the player reaches the end of the maze.

Excuse me for my bad singing:

The Beginning of Infinity; The Quest for Universality

In this text, there are multiple topics that I feel the author addresses and ties in nicely with the evolution of universality. I will not address all of them as that would make this blog longer than it is already going to be.

  1. Firstly, the author starts with an introduction to pictograms and how these evolved into our current writing system. I believe it is important to note that pictograms, while not always the most practical thing, can be universal. They just need to be used differently than the author interprets. The book
    Common images used in emojis.

    was published in 2012 (Deutsch), and so since then emojis have become popular. While they might not always be used to express complex ideas, there is some value to these objects. Windows even had their own style of emojis before they became mainstream and these were known as Wingdings. (Vox 2015) Throughout the reading of the pictograms evolving, all I could think of were Wingdings and emojis and how people have come full circle, back to using a type of pictogram.

  2. Towards the end of the reading, he builds on how computers had to move into digital, as analogue would never have reached universality. This section served to denote the discrepancies between analogue and digital which were two words I have always heard but never known the distinction between.  Not only that, but I gained insight on the origin of computers as well.

 

Overall, there is the uniting theme of universality and its implantation throughout various topics, and I quite enjoyed how he tied together the history/evolution of scripts, numerals, computers, and genetics. He took what I thought were random topics and explored a new facet of them.

 

Sources:

Deutsch, David. The beginning of infinity: explanations that transform the world. Penguin Books, 2012, intro.nyuad.im/wp-content/uploads/2015/08/Untitled-4.pdf.

Edwards, Phil. “Why the Wingdings font exists.” Vox, Vox, 25 Aug. 2015, www.vox.com/2015/8/25/9200801/wingdings-font-history.

Making the Drum Show Even More Flashy

To expand on my switch from the previous assignment, I decided to use one of the more basic codes that we learned in class. Wednesday, in class, was the first time that I have ever coded. After the class ended, I become pretty overwhelmed with all the new content I was learning and couldn’t really wrap my head around how each line of code was working. I asked my friend if he could go over the code with me again so that I made sure how each line worked and how they interacted with one another. The code I have used is, therefore, more simple than the one we inputted in class because I wanted to understand the really simple codes before getting into the more advanced codes (e.g. I didn’t use “bool”, only “int”).

I decided to run probably the most basic lines of code, which is to let the LEDs blink, i.e. one LED would be on initially and when the pedal was pressed, the other would light up but the initial LED would not. When let go, the newly lit LED would go off and the initial LED would light back up.

I connected my wires and LEDs in the way shown in Figure 1 below.

Figure 1: Arrangement of the Wires on the BreadBoard and Red Board

The lines of code that I used are shown here: https://gist.github.com/hyl392/df806c51ac2ae19a9ec0a7939ecb0cd3

The link to my final product, making the LEDs “blink” is here: https://www.youtube.com/watch?v=A-Gl6UceYLs

The improvement and the lines of code are simple, but in terms of its relation to the use of the foot pedal, if the second LED were to be another colour (like in the video above) and were brighter, playing the drums could become almost like a light show. Creating a light show that follows the beat of the drums could be pretty fun! Music festival-worthy, perhaps!

The Art of Interactive Design Chapter 1 – Response

Perhaps because Interactive Media is still a relatively new programme at NYUAD, a lot of professors and even students are unaware of what IM is – me included. “What exactly is this IM that you are taking?”, asked my ‘Future of Medicine’ professor. “Well, I guess you could say…it’s like…computer science but more hardware?”, I replied. I myself, a current student taking an intro to IM class, did not even know how to explain the subject that I was/am studying. (That’s obviously a fail on my part, so sorry professors if I downplay your subject/discipline, I’m still learning!!) The reading inspired me to create my own definition of IM and right now as it stands, reads: “that sort of media that has digital interactions with people which is basically like when the media interacts with humans by listening, processing and then responding to what was listened and yea…” I’ll need to improve my definition I know, but Crawford told me to make my own definition and that’s mine for now. From now on, I shall work on my explanation of what IM is and hopefully by the end of the semester my definition can improve.

The Jump to Universality – Response

Everything about the reading was going well for me until I reached the part on page 266 where it says that there is “the need for error correction”. The text points to the idea that without the presence of error-correction, all knowledge creation is necessarily bounded. I think I spiraled down into a philosophical rabbit hole after reading this – I thought that it was the opposite. If we don’t have the creation of such thing as right and wrong, shouldn’t our knowledge not be bounded then as there are infinite opportunities to think in any way possible? Wouldn’t error correction be something like manipulating DNA and creating superhumans?!!?

I was stuck in this rabbit hole for a while but decided to accept the idea that was stated on the paper in front of me and continued to read onwards. I realised that the text does explain more about the phenomenon I had just described and I eventually figured out that I was misinterpreting and misreading the whole idea – I had disregarded the fact that this jump to universality and its error correction was in the context of computers. This realisation assured me a lot more because for a good while I was convinced that the author was basically saying that it’s ethical to manipulate DNA, and other theoretically unethical practices.

Overall, I thought it was really interesting for the author to pick out so many examples of the jump to universality in many fields. This reading connected, in many cases, to my other class’ learning about globalisation and how homogeneity and uniformity are influencing and impacting nations, which leads to universality.

The Art of Interactive Design- Response

Reading ‘The Art of Interactive Design’ was an interesting experience. Defining the term ‘interactive’ has always been of interest to me personally due to my research and interest in Interactive Theater. Although Interactive Design is of different nature, much of what I read was coherent and applicable to the ideas I wanted to explore. I liked the use of a ‘conversation’ and the three steps that are claimed to be a criteria for a conversation. Also, I think that the differentiation between interaction and reaction is important. The explicit statement that an interaction is not merely a heightened reaction is important in determining which products can be classified as interactive and which cannot be. The same can be said in regards to participation. The way that different forms of art are considered is helpful in understanding what the author means by interactivity.

The Art of Interactive Design; How is interaction defined?

 

 

 

 

In this excerpt from The Art of Interactive Design by Chris Crawford, I disagreed with the base definition of the text: “a cyclic process in which two actors alternately listen, think, and speak.” (Crawford 8) This definition does not take into account that multiple objects can interact at the same time and with each other, as it limits the interaction to only taking place between two “actors.”

For example, when a class and professor are having a discussion, this is not a simple two-person conversation. All the students (who are engaged and participating) are listening both to the points of the professor and the other students, and are building their contributions to the discussion from the participation of others along with their own opinions/thoughts. The conversation is driven by more than two people listening, speaking, and thinking.

This three step definition also excludes various interactions as it is a very human-centric definition. It rules out interactions with pets that cannot speak, and humans interacting with the environment.

Lastly, I found the style in which the text is written hard to take seriously. While it tried to be lighthearted and funny, I did not enjoy the interruption of the text with the author’s email and note from the editor. The author also tended to put in a lot of disclaimers on his opinion, which I found made him less credible. If I am going to publish a book of my opinions and definitions, I will stand by them fully.

 

Source:

Crawford, Chris. The art of interactive design: a euphonious and illuminating guide to building successful software. No Starch Press, 2003, intro17fall.nyuad.im/wp-content/uploads/2017/08/chapter1_crawford.pdf.

The Jump to Universality – Response

Even though I do not quite understand the connection between this text and our course material, it is a very interesting read.

With gradual improvement of a system, at some point of history, one improvement would make the system “universal”, gives the system ability to cover every possible instance and potential problem.

However, I do not particularly agree with the author on one point regarding the “universality” of language. My first language Chinese is one of the few languages in the world that do not have an alphabet. Yet I believe it is just as “universal” as any other alphabet based language. One of the points the author brought up is that an alphabet can accommodate all potential words in a language and it would help people to pronounce a  foreign word. I have not heard of anyone creating a new character in my life, yet new words and concepts are imported into the system everyday. We do this by combining existing concepts together or transliterate a foreign word using characters that have similar sounds.  Perhaps in the old times when people did have the need to create new characters. However, I do not see the difference between that and the time when Shakespeare coined a whole bunch of new words for the English language.