Author: Rujul Malhotra

Emotion & Design: Attractive things work better

The article serves as a response to the feedback of Norman’s previous argument in “The Design of Everyday Things” where he had emphasized on the importance of user centered design. In this paper, Norman clarifies that by usability focused design he did not mean the absence of aesthetics. An ideal design would no doubt be something that combines both pleasure and usability. This aspect reminded of the architecture of the Louvre Museum in Abu Dhabi. I believe the dome of the museum is an example of ideal design. While it rightly captures the essence of Arabic design with the creation of the “rain of light” effect, it also serves a sustainable purpose of reducing the energy consumption inside the buildings by shading it from the intense heat. Such a design is the right balance having practical functionality and being visually appealing. Another idea presented by Norman that I found interesting was the different ways in which a design can be interpreted depending on the situation and context.

Her Code Got Humans on the Moon – And Invented Software Itself

The article recounts the remarkable contributions of Margaret Hamilton in the field of software engineering. Her continuous efforts to strive despite the comments of people around her that tried to pull her back, serve as a source of inspiration to the women who face similar situations in male dominated fields of work. I feel the article also sheds lights on the power of creativity which can unexpectedly lead to great inventions. It is important for us to stay focused on our work with utmost dedication and passion. At the same time, it is necessary to remember that our path may not come without obstacles, like the errors that Hamilton encountered, and hence we must remain adaptable to change gears according to what the situation demands. An attitude that combines creativity as well as presence of mind is crucial to design and computing. What I found most inspiring in the article was Hamilton’s perseverance and her approach to try and provide a prevention for every possible error to make the mission as close as possible to being perfect. I believe such stories ought to be brought to light to create an awareness about the individuals behind ground breaking missions and the struggles they had to deal with.

As we begin exploring physical computing, I find it extremely interesting to create simple circuits in replicating mechanisms. This week’s assignment to create an unusual switch provided me the opportunity to get creative. After a lot of contemplation to come up with an idea, I finally decided to create a boat using origami with a sail that flutters with the wind. The idea is inspired from the scenic view of sailboats along Abu Dhabi Corniche. The working of the project is such that when the sail comes in contact with the pole at the back, the circuit is completed and the LED bulb glows.

 

 

 

 

To implement the simple circuit, I have used a resistor, an LED, a breadboard, the Arduino and connecting jumper wires. The pole and the sail have been covered with Aluminium foil to serve as conductors. The model was tested outdoors, and was observed to successfully work with the wind.

I found this assignment to be particularly interesting, as it involved more ideation than implementation of the concept. I am satisfied with the end result of achieving a switch without the use of hands.

CONCEPT:

My midterm project attempts to showcase the beauty of the Indian classical dance of Kathak. The project was ideated based on my experience pursuing the dance form for six years. Living in the UAE, I saw learning Kathak as a way to discover and connect to my cultural roots. The graceful yet swift movements and the jingling of the footbells in Kathak always leave me awestruck.

MAIN IDEA:

The project depicts an interactive book that provides insight into some of the fundamental movements of Kathak. Flipping through the pages, the user encounters interactive animations that add visual detail to the description provided. Below is the basic layout of each page that I had in mind as I began the project.

I wanted to depict the dance movements realistically and decided to adopt the concept of sprite sheets for this task. I began working on the project by collecting all relevant media including images for the spritesheets. It was challenging to create the sprite sheets as I had to ensure that the sizes of the images were all the same. Below are the sprite sheets used in the project.

CODING:

The project has been implemented using object-oriented programming. I have created a separate class for each page. This approach helped me organize the various functions involved. The main highlight of my project is the execution of spritesheets based on the example discussed in class.

Using sprite sheets, I was able to have a layer of interactivity on each page. The animations allow the user to view the demonstration of each dance movement at their own pace using the arrow keys. The functionality of the keys was created using the following code.

function keyPressed() {
  if (currentPage === 1) {
    if (keyCode === RIGHT_ARROW) {
      step1 = (step1 + 1) % sprites1.length; //Determines the frame number
      pages[currentPage].display(); // Redraws the page to update sprite animation
    } 
  }
  if (currentPage === 2) {
    if (keyCode === RIGHT_ARROW) {
      step2 = (step2 + 1) % sprites2.length;
      pages[currentPage].display(); 
    } 
    
  }
  if (currentPage === 3) {
    if (keyCode === LEFT_ARROW) {
      step3 = (step3 + 1) % sprites3.length;
      pages[currentPage].display();
    } 
  }
  if (currentPage === 3) {
    if (keyCode === RIGHT_ARROW) {
      step4 = (step4 + 1) % sprites4.length;
      pages[currentPage].display(); 
    } 
  }
}

PROJECT SKETCH:

Throughout the project, I paid attention to details such as the fonts and choice of images which helped make the project visually appealing. The background music is a classical composition involving the Tabla and Sitar, two instruments that form an integral part of any Kathak performance.

CHALLENGES:

The first major challenge that I faced was in trying to change the screen for each page. I overcame this challenge by creating separate classes for each page. Also, I had initially imagined an animation to depict the page flip, however due to my limited knowledge of the use of videos in p5, I was unable to implement it.

IMPROVEMENT:

An improvement that I would like to bring about in this project would be to include the corresponding sound of footbells for each  movement on the page about footwork. I tried implementing this idea but was not able to achieve the desired result.

Overall, I believe the project is simple yet unique and involves most of the concepts covered in class. It was a great learning experience which enabled me to tackle all concepts at once.

 

 

For the midterm project, I had decided to present an interactive representation of the Indian classical dance of Kathak as mentioned in the previous post. I now have a clear image in mind for my project with the entire user experience being presented in the form of a book that allows you to flip pages and explore a new dimension of Kathak on each page.

The main idea would be to use sprite sheet and produce animations of different dance movements. I collected online images depicting the Kathak movements and then combined them to form a sprite sheet.

The aim of my project is to serve an introductory guide into the world of Kathak. A new concept that I explored during this process was the function to import videos into a sketch, this enabled me to create the flipping page effect.

I still have more details to be executed, however I have divided the entire process into steps which is helping me proceed with ease.

For the midterm project, I wanted to implement all the concepts learned so far and at the same time create something that represented my experiences. So I arrived at the idea of creating an interactive artwork that depicts the Indian classical dance form of Kathak. I intend to bring a unique perspective to this project, drawing from my six years of learning the dance form of Kathak.

My vision for the project is to create an experience that allows the user to explore different movements and hand gestures of the dance form. Another idea that I hope to explore is the use of the string of syllables that compose a piece as a dataset which results in the corresponding footwork for the syllable, hopefully producing a depiction of the dance.

The application of sound would be integrated in the form of the sound produced by the footbells worn by the dancer. I am also thinking of exploring the concept of a sprite sheet discussed in class which I believe would produce a more realistic effect.

To begin the project, I started exploring a unique way of presenting the dancer. I came across an interesting tutorial on using Perlin noise to manipulate the pixels of an image. I tried implementing this but found the code a little complex, and I would like to work on simplifying it.

https://editor.p5js.org/rujulm/full/kl43KRCHP

Going forward, the challenges I perceive are the implementation of the ideas that I have into code. I have experienced challenges in coding in the past that required me to change my expectations of the final result. I hope to put in the effort to explore concepts that would help my work seem realistic.

“Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers” talks about the increasingly used concept of computer vision, which refers to the ability of a computer to interpret visuals such as data, images, and videos. The article focuses on the applications of computer vision in interactive art by describing particular examples that have stood out in this field. I found Myron Krueger’s Videoplace to be a remarkable artwork that involves various aspects of vision and interaction. It gave me the impression of optical illusions, making it seem intriguing. I also thought of the concept of LimboTime to be very impressive. Involving a relatively simple idea, the project includes exciting interactivity through computer vision.

I felt the article provided a concise yet thorough understanding of the concept of computer vision. It was informative and interesting to read about the different techniques that enable the computer to infer visual data namely, ‘frame differencing’ to detect movements, ‘background subtraction’ to detect the presence of people and objects, and ‘brightness thresholding’ that compares and classifies the pixel brightness.

The discussion of computer vision in the physical world reminded me of a very common application of computer vision. The reverse camera used in cars processes visual data to such precision which enables it to produce an accurate estimate of the guide lines that assist the driver in parking the car. However, as mentioned in the article such applications are only possible if the physical conditions are designed to be compatible with the program.

Overall, the article was an engaging read. I felt it has sparked new ideas that I hope to explore in projects and further work to understand the working of the various techniques involved in computer vision.

The Psychopathology of Everyday Things

The chapter talks about the different factors that are crucial for a design to be practical. The author stresses on the importance of two main factors of discoverability (which enables the user to identify the actions that can be performed) and understanding (which allows the user to figure out the use).

The author throughout the chapter, argues that engineers and designers often overlook the needs of the people which dissolves the purpose of the design no matter how unique it may look.

An interesting viewpoint is put forward, that machines can not have a shared understanding as they lack the experiences possessed by people. Hence, for a mchine to be efficient it would have to take into consideration the possible human errors and strike a balance between being understandable and enjoyable.

I completely agree with the author’s opinion on the need for a shift to more human centered design which would enable an inclusive environment for all users and would eliminate the need for a high level of logic to operate a simple machine.

The paradox of technology, is indeed a reality with technology having the capacity to make things easier or complex depending on its design. Thus a good design ought to take into consideration the multiple disciplines that would make it useful for the user.

This week, we explored the concepts of generative text and data visualization. I particularly enjoyed working with data and finding ways to represent the data visually. For the assignment, I decided to map the airports of the world using points.

I began by importing a data set containing the airport code, country, latitudes, and longitudes. Three arrays have been created to extract the Longitude, Latitude, and Code columns. Using a for loop to iterate through the range of possible values, the longitude and latitude values have been used as the x and y coordinates of the points.

The points have been given a randomized color through stroke(). Further, to add an element of interactivity, the screen displays the airport codes when the mouse is pressed.

for (let i=0; i<=rowNum; i++){
    stroke(random(255),random(255),random(255))
    strokeWeight(6)
    x=map(latitude[i],90,-70,0,width) //Mapping the latitude to the width of the canvas
    y=map(longitude[i],-130,170,0,height) //Mapping the longitude to the height of the canvas
    point(y,x)
    
    
    if (mouseIsPressed) { //Executes when the mouse is pressed
      strokeWeight(2)
      stroke(255)
      text(code[i],y,x) //Displays the corresponding airport code for each i value
      textSize(10)
      
    }
  }

This was an interesting assignment that allowed us to map existing data and produce beautiful artwork. I would like to extend my learning by exploring the different ways in which data can be represented to make it better understood by the viewer.

For this assignment, we had to experiment with concepts of object-oriented programming and arrays. I have made two sketches, both involving these concepts in different ways.

The first sketch is inspired by the example of the bouncing ball done in class. This sketch involves white lines produced on clicking against a colorful background, created using the random function. The movement in the lines is achieved using the noise() function. Finally, the mousePressed() function is used to produce interactivity, allowing the users to control the frequency of creation of the lines.

Applying object-oriented programming, I have defined a class called Shapes within which the required function Line() is defined. An array called ‘list’ stores each line as it is created.

Line() {
    stroke(255);
    strokeWeight(5);
    line(this.n,0,this.n,400);
    //xoff is the variable used for the argument of noise()
    this.xoff+=0.01;
    //the values are enhanced by a factor equivalent to the height
    this.n=noise(this.xoff-this.x)*height;
  }

The second sketch helped me achieve what I had initially hoped to create. It involves an illusion created using a for loop that produces rectangles of different sizes, all rotating at a certain angle. An if condition involving the mouseIsPressed Boolean variable results in the addition of color to the sketch. I wanted the sketch to include specific colors, so I created an array to store the color values, which are randomized and used as an argument for fill.

class Shapes{
  constructor(){
    this.angle=0;
    this.i=0;
    this.colors=["rgb(226,200,126)","rgb(239,165,83)","rgb(236,143,99)","rgb(239,119,110)"]; //array storing colors used as an argument for fill
    
 }
  
  Rectangle(){
    translate(width/2,height/2); //shifts the origin to the center of the canvas
    rectMode(CENTER);
    
    //for loop to decrease the size of squares
    
    for (let x=width; x>=0; x-=20){
      fill(int(random(0,130)));
      if (mouseIsPressed){
        fill(this.colors[this.i]);
        this.i=int(random(this.colors.length));
      }
      rotate(this.angle);
      rect(0,0,x,x);
      fill(int(random(150,255)));
      
      if (mouseIsPressed){
        fill(this.colors[this.i]);
        this.i=int(random(this.colors.length)); //stores a random value from the colors array
      }
      rotate(45);
      rect(0,0,x+20,x+20);
      this.angle+=1;
    }
  } 
}

During the assignment, I encountered several challenges with defining functions within a class and ran into errors while creating the loops. These errors were mainly due to the difference in the syntax used within a class.

Reflecting of the process, I feel both the above sketches involved relatively basic concepts of object-oriented programming, and I hope to enhance my learning by exploring further on these topics.

The Art of Interactive Design

The chapter begins with an interesting argument on the term interactive. With the increased usage of the word in recent times, it becomes essential to understand what it means to be interactive. The writer has beautifully put forward his explanation of the term using the metaphor of a conversation. Breaking down interactivity into three major processes, the writer has compared it to the actions of listening, thinking, and reacting while having a conversation. The analogy of a conversation and the interactive process resonated with my understanding of the term.

He further stresses the importance of having two purposeful mediums to produce an interaction. He makes it very clear that if only one actor is present, it becomes more of a reaction than an interaction. The examples illustrated by the writer allowed me to grasp the difference between a reaction and an interaction.

While the writer agrees that some people would not approve of his classification of action as a mere reaction, he has elaborated on the subjectivity of the interactive process by introducing the concept of degree in interactivity. Hence, a passive interaction could be classified as an interaction at a low level.

To make his stance better understood, the writer goes on to discuss the different types of conversation you can have based on the person you are talking to and has used this explanation to classify activities such as reading and watching movies as non-interactive. Finally, he talks about graphic designing and the need to integrate interactivity into it.

The chapter was a thought-provoking read, and to a large extent, I agree with the writer on his definition of the interactive process.