Author: Tala Asiri

“Digital information isn’t just the lifeblood for new kinds of science; it’s the second fundamental force (after exponential improvement) shaping the second machine age because of its role in fostering innovation”

This reading really delved into the importance and rapid development of digital information and databases, and how they’ve become defining forces in the shaping of a more innovative modern age. Analyzing examples regarding GPS location information, and in particular the Waze app, proved how extensive the effects of using a digital data are. GPS apps like Waze nowadays, follow really intricate digital processes; providing their users with accurate data, routes, estimated arrival times, etc. Their extensive use of sensor data is quite essential to the success of these apps, and can prove quite advantageous to their users, as it can prevent them from going over speed limits and being late to work. It was also quite interesting how these modern apps could possibly overcome the shortcomings of traditional GPS systems, due to their reliance on user-provided data.

Something that I have personally notices, is that when we use the GPS system back home in Jordan, the data regarding routes might not always be accurate. This is due to the nature of the infrastructure in Amman, since it is constantly changing, and routes are often redirected. Hence, I believe it is vital in some cases to use apps like Waze in a dynamic and continuously developing world, which heavily rely on input from users, in order to ensure the accuracy of data.

“Design depends largely on constraints”, is among the most important arguments that is suggested by Graham Pullin in his book. Pullin quite strongly asserts that “good design” requires that the designer values simplicity over all other attributes of the design. This is an interesting point to me, because while I agree that it is important that the user is able to navigate using the design easily, there has to be a more holistic way to approach design. To an extent, the aesthetics of a design and its functionality can be interconnected, as we observed in a previous reading.

Pullin delves into the realm of designing for disability, and a crucial aspect of his argument regarding how “disability inspires design”, is that design in this framework aims to attract minimal attention and intends for the user to blend into their surroundings. This notion of presenting oneself as “normal” implies that there is something to be ashamed of in the first place. Pullin weaves in the example of glasses as a design that is successful in the sense that it eyewear is not associated with disability, due to certain fashion and media sensationalism that normalized this design. The fact that glasses are so successful as a design though, is not strictly due to their functionality, but rather to how people began perceiving them as products and items of fashion – when they are mainly designed for a certain disability.

After reading up on all the examples the text provides, Pullin’s argument regarding the importance of simplicity in designing a product became more vivid. When less emphasis is placed on the aesthetics of a product or design, perhaps more will go into “mak[ing] a design more accessible”.

I decided to create a (really) simple game using what we learned in Object Oriented Programing. This game’s logic basically entails using the space bar to move the ellipse in order to avoid the barriers or the lines. Yes, I made a very rudimentary version of Flappy Bird. It was… an experience. I learned how to create new objects using the function “new”,  calling functions from classes, and my favorite part – checking for collisions.

Prepare to be amazed:

Code:

int state = 0; 
int score=0;
bird b = new bird();
pillar[] p = new pillar[3];


void setup(){
 size(500,700);
 int i; 
 for (i = 0; i < 3; i++){
   p[i]=new pillar(i);
 };
}

void draw(){
  background(0);
  if (state==0){
    // intro state
    text("Click to Play",155,240);
    b.move(p);
  }
  
  else if (state==1){
    // start state 
    b.move(p);
    b.drag();
    b.checkCollisions();
    rect(20,20,100,50);
    fill(255);
    text(score,30,58);
  }
  
  else {
    // end state 
    rect(150,100,200,50);
    rect(150,200,200,50);
    fill(255);
    text("game over",170,140);
    text("score",180,240);
    text(score,280,240);
  }
  
  b.drawBird();
  
  for(int i = 0;i<3;i++){
    p[i].drawPillar();
    p[i].checkPosition();
  }
  
  stroke(255);
  textSize(32);
}
void mousePressed(){
  state = 1;
}

void keyPressed(){
  b.jump();
}

Class:

class bird {
  float xPos, yPos, ySpeed;
  bird(){
    xPos = 250;
    yPos = 400;
  }
  
  void drawBird(){
    stroke(255);
    noFill();
    strokeWeight(2);
    ellipse(xPos, yPos, 20, 20);
  }
  
  void jump(){
    ySpeed=-10;
  }
  
  void drag(){
    ySpeed+=0.5;
  }
  
  void move(pillar[] pillarArray){
    yPos+=ySpeed;
    for (int i = 0; i < 3; i++){
      pillarArray[i].xPos-=3; 
    }
  }
  
  void checkCollisions(){
    if(yPos>800){
      state = 2;
    }
    
    for (int i = 0; i < 3; i++){
      if((xPos< p[i].xPos+10&&xPos>p[i].xPos-10)&&(yPos<p[i].opening-100||yPos>p[i].opening+100)){
        state = 2;
      }
    }
  }
}
    

class pillar {
  float xPos, opening;
  boolean cashed = false;
  pillar(int i){
    xPos = 100+(i*200);
    opening = random(600)+100;
  }
  void drawPillar(){
    line(xPos,0,xPos,opening-100); 
    line(xPos,opening+100,xPos,800);
  }
  void checkPosition(){
    if(xPos<0){
      xPos+=(200*3);
      opening = random(600)+100;
      cashed=false;
    } 
    if(xPos<250&&cashed==false){
      cashed=true;
      score++;
    }
  }
  void reset(){
    state = 0;
    score=0;
    b.yPos=400;
    for(int i = 0;i<3;i++){
      p[i].xPos+=550;
      p[i].cashed = false;
    }
  }
}

 

 

 

When I first started recreating “Phase Pattern” by Manfred Mohr, I considered using functions like line() and beginShape(), but then I thought that drawing graphs would add more accuracy to the patterns I was trying to create. So I drew some sine and cosine functions, added some vertical and horizontal lines here and there, and voila! Can’t say it’s my best work because it still needs some adjustments with the curve shape, but I’ll keep working on it with my not so extensive math skills.

“Phase Patterns” by Mohr:

My rendition:

And here’s my code:

float theta = 0.0;  // Start angle at 0
float frequency = 2.0;
float amplitude = 50.0;  // Height of wave
float period = 500.0;  // How many pixels before the wave repeats

float y_for_sine(float x){
  float y = sin(x * TWO_PI * frequency/width) * 100;
  y = y + height/2 + 50;
  return y;
}

float y_for_cos(float x){
  float y = cos(x * TWO_PI * frequency/width) * 100;
  y = y + height/2;
  return y;
}

void setup() {
  size(600, 700);
  background(0);
}

void draw(){
  // bottom vertical lines (cos)
  stroke(255);
  float strokeweight2 = 1.0;
  strokeWeight(strokeweight2);
  //FOR EACH CURVE:
  float interval2 = (int) strokeweight2 + 4.89;
  float x_index2 = 0;
  while(x_index2 < width){
    //line(x_index, 0, x_index, height);
    for(int y = 0; y < height; y++){
      //draw a point at (x,y) if y < y_for_sine(y)
      if(y > y_for_cos(x_index2)){
        point(x_index2,y );
      }
    }
    x_index2 += interval2;
  }
  
  //top horizental lines (cos)
  float strokeweight3 = 1.0;
  strokeWeight(strokeweight2);
  //FOR EACH CURVE:
  float interval3 = (int) strokeweight2 + 6;
  float x_index3 = 0;
  while(x_index3 < width){
    //line(x_index, 0, x_index, height);
    for(int y = 0; y < height; y += interval3){
      //draw a point at (x,y) if y < y_for_sine(y)
      if(y < y_for_cos(x_index3)){
        point(x_index3,y );
      }
    }
    x_index3 += 1;
  }
  
  //top vertical lines (sin)
  stroke(255);
  float strokeweight = 1.0;
  strokeWeight(strokeweight);
  //FOR EACH CURVE:
  float interval= (int) strokeweight + 5.054;
  float x_index = 0;
  while(x_index < width){
    //line(x_index, 0, x_index, height);
    for(int y = 0; y < height; y++){
      //draw a point at (x,y) if y < y_for_sine(y)
      if(y < y_for_sine(x_index)){
        point(x_index,y);
      }
    }
    x_index += interval;
  }

// cos line -- make this thicker
  strokeWeight(1.05);
  for(int x = 0; x < width; x++){
    point(x, y_for_cos(x));
  }
}

 

Eyeo2012 – Casey Reas

The 40 minutes flew by as Casey Reas began by detailing the origin and development of his very intricate code-generated graphics in relation to Chance Operation. The fact that Reas began by generating simple geometric randomized patterns, gave way to his use of noise and random number systems in order to produce more sophisticated designs, with an organic flow to the shapes and patterns. During his talk, Reas articulates the importance of Michael Noll as a pioneer in the field of creative digital computation, and how Noll emphasizes the significance of the “full exploitation of those unique talents [of computers] for controlled randomness and detailed algorithms [which] can result entirely in an entirely new medium”, and this new medium that Noll describes is a “creative artistic medium”, that has enabled the likes of Reas to to manifest beautiful artworks.

It was also fascinating how Reas points out that randomized number systems  have proved to be essential in the exploration of computer-generated graphics, and allowed people more freedom in creating fascinating patterns that emphasize the intrinsic relation between order and chaos. It really raises the question around the limitations of noise and random numbers in the world of code, design and computer graphics.

Her Code Got Humans On the Moon – and Invented Software

I enjoyed reading this article as it informed me about a piece of history I wasn’t aware of. It was interesting how the passion of one woman was a major driver behind the Apollo 8 mission. It also demonstrated and emphasized the importance of thinking ahead and taking into account all the mistakes that could occur during a certain interaction, and taking the necessary precautions. In the case of Hamilton, she was able to predict an error that was presumably unlikely to happen, and went against the requests of her superiors to install the software needed to prevent the error from occurring. This provides us with a great example of the diligence necessary to foresee possible problems that could result during the interactions that we design for our projects.

Attractive Things Work Better

Norman examines how the aesthetics of an object or experience affect the user’s perception regarding its ease of use. Norman also delves into the importance of accounting for the emotions of the user when designing an interaction, and explain in simple terms that when people feel better about themselves they tend to become “better at brainstorming” and “examining multiple alternatives”. The reading made me question our reliance on aesthetically pleasing processes and how we favor those over less visually stimulating ones – even if it functions the same or even provides a more adequate performance. This made me more inclined to forgo aesthetically appealing choices in the projects I intend to make in the future, in order to challenge the notion of functionality in relation to form. The reading also sheds light on the cognitive processes behind the choices humans make, and the importance of design to the process of learning. Norman eloquently describes that the designer should preferably be in a positive state, since it could invariably affect their curiosity and creative processes, as well as how appealing their design is to the visceral, behavioral and reflective levels of users.

Originally, the wannabe artist in me wanted to make my self portrait look as organic and realistic as possible. But, when that failed, it was very helpful for me to break down every part of the portrait into certain shapes that would suit specific features. I used the quad function for the face shape for a more structured jaw, a combination of rect and ellipse for the hair and body, and so on.

Although challenging, I felt like this assignment helped me learn more about the different functions I could use in Processing, and hopefully next time I can figure out how to use beginShape.

Here’s the code:

float hairR;
float hairG;
float hairB;
PImage lips;

void setup(){
  size(500, 500);
  lips = loadImage("lips.png");
  hairR = 139;
  hairG = 69;
  hairB = 19;
  
} 
  
void draw(){
  
  println ( mouseX + "," + mouseY );
  //background(255, 200, 200);
  background(160,220,232);
  noStroke();
  
  //head
  fill(hairR, hairG, hairB);
  ellipse(250, 120, 258, 120); //head top
  fill(255, 238, 212);
  quad(121, 120, 379, 120, 379, 340, 121, 340);
  quad(121, 340, 360, 340, 300, 360, 200, 360 );
  noStroke();
  fill(hairR, hairG, hairB);
  rect(121,120, 50, 350); //121 + 35 
  rect(345-15 ,120, 50, 350);


  stroke(0);
  strokeWeight(2);
  
  pushMatrix();
  translate(250, 250);
  
  
  fill(250, 200, 200);
  stroke(0);
  strokeWeight(1);
  translate(0,20);
 
  //eyes
  fill(255);
  ellipse(-50,-80,35,35);
  ellipse(50,-80,35,35);
  fill(190, 102, 0);
  ellipse(-50,-80,20,20);
  ellipse(50,-80,20,20);
  fill(0);
  ellipse(-50,-80,10,10);
  ellipse(50,-80,10,10);
  fill(255);
  ellipse(-45,-80,5,5);
  ellipse(55,-80,5,5);
  
  //glasses
  noFill(); 
  stroke(0);
  strokeWeight(2);
  ellipse(-50,-80,60,60);
  ellipse(50,-80,60,60); 
  
 //lips
  image(lips,-50,-20, width/5, height/6);
  
    popMatrix();
 
 //glasses2
 strokeWeight(2);
 line(230,190, 270,190); 
 
 //nose
 stroke(250, 220, 180); 
 triangle(250, 230, 280, 250, 230, 250);

 //neck
 fill(255, 238, 212);
 rect(220,360,70,80);
 
 //body
 fill(140,77,176); 
 stroke(140,77,176);
 rect(65, 440, 75, 120);
 rect(150, 380, 200, 120);
 rect(360, 440, 75, 120);
 ellipse(140, 440, 150, 120);
 ellipse(360, 440, 150, 120);
 
}

void mousePressed(){
  hairR = random(255); 
  hairB = random(255);
  hairG = random(255);
}

And the masterpiece:

For the midterm project, I was interested in creating a series of interconnected reactions, and thought there’s nothing better than a Rube Goldberg machine that embodies that concept. At first, I was throwing around wild concepts, that involve the use of multiple sensors and intricate code. But, in the end I settled on less intricate structure, that was equally challenging.

The main parts this project is comprised of are:

• A wooden ramp
• 2 servos
• Distance sensor
• Force Sensitive Resistor
• LCD Screen
• Rubber ball
• Marble

Although the project fulfills its purpose and main function, I would still have prefered to have some aspects of he code to be enhanced a bit – such as the movement of the servos in relation to the reaction, as well as the display on the LCD screen.

And here’s the video:

The code:

// include the library code:
#include <LiquidCrystal.h>

// initialize the library with the numbers of the interface pins

LiquidCrystal lcd(13, 12, 11, 10, 9, 8);   //defining lcd pins

int sensorValue = 0; // variable to store the value coming from the sensor
int sensorPin = A0; // select the input pin for LDR
int sensorMin = 1023;
int sensorMax = 0;
int fsrReading;

void setup(void) {
  Serial.begin(9600);
  pinMode(3, INPUT);
  lcd.begin(16, 2);
 
}

void loop() {
  sensorValue = analogRead(sensorPin); // read the value from the sensor
  Serial.println(sensorValue); //prints the values coming from the sensor on the screen

    //display text on lcd
    if (sensorValue > 100) {
      lcd.display();
      lcd.clear();
      lcd.setCursor(0, 0);
      lcd.print("Who let the");
      lcd.setCursor(0, 1);
      lcd.print("ball out!");
    } else {
      lcd.clear();
    }

      lcd.display();
      delay(100); 

  
}

 

Making Interactive Art: Set the Stage, Then Shut Up and Listen

I thought this reading was incredibly central to the endless debate surrounding defining or redefining interactivity, and the art of interaction between human and what is seemingly non-human or digital. I have always been a supporter of the notion of allowing the audience to formulate their own perceptions about a certain artwork, rather than presenting them with a binary view of how a work of art should be interpreted.

In terms of the interactivity, I also believe that the artist or the artwork has an obligation to engage its audience in an intricate conversation. Hence, if the purpose and methods of the object or work of art were to be clearly communicated, that would take away from the authenticity of the audience’s response. Engaging in a conversation just isn’t as effective if one of the parties were to impose or dictate how the other should think or respond. Several contemporary video games, virtual reality experiences, and performances (as well as numerous other artworks), are known to be successful due to their ability to challenge the user/viewer and allude to ways of understanding the overall message or goal of the artwork, rather than readily presenting it.

Physical Computing’s Greatest Hits (and misses)

The article really struck a chord with me when the author brought up the notion or ‘originality’, and the ability to produce something truly unique amidst rapid technological advancement definitely came into question. More often than not, the ideation stage is the most challenging part of any project for me. I often struggle with coming up with a concept that is not only classifiable as different and original, but also executed in the best way possible.

This reading helped me realize that the world of physical computing is truly vast, and to see that we have already engaged with and used some of the technology employed in the variety of instruments, eased the pressure a little bit. It was also really interesting to see how most of the instruments depicted by the author focused on engaging with or heightening the senses of the user – not manifest something out of this world, and some of them were just created for the purpose of entertainment. One that really stood out to me, was the body-as-cursor project, mostly because I am invested in the idea of visual and audio extensions of the human body, but also because it provides a variety of experiences (art, interaction, performance, etc.).

Bret makes some really valid arguments regarding the inevitable numbing of human senses, due to people’s excessive reliance on technology. His brief rant made me consider the innate intricacy of my hand movements, and how I often underestimate how powerful of a tool the body is. I also admired how Bret defined his article as a simple acknowledgement of a problem, rather than a grand vision for the future.

There is some merit in Bret’s argument about our immense capability to manipulate object through a wide range of hand and body movements, and that we shouldn’t opt for an increasing use of “Picture Under Glass” – which Bret deems a “visual facade”.  However, in an increasingly industrialized world, technology is dominant in shaping our interactions with our environment and with one another. Hence, it is ambitious to assume that people will forgo the use of technologies that facilitate and make their lives much easier.

Bret’s suggestion to invest more research and funding into developing a more dynamic medium – such as haptic technology – is also an interesting premise; as he doesn’t completely rule out the importance of technology to any future developments.