Week 10 Reading Response / Blinding Lights – Hamdah AlSuwaidi

In synthesizing the insights from TIGOE’s blog posts, “Physical Computing’s Greatest Hits (and misses)” and “Making Interactive Art: Set the Stage, Then Shut Up and Listen,” there emerges a compelling narrative about the nature of human interaction with technology and the role of the creator in guiding this interaction.

The first post examines the myriad ways in which creators harness technology to bridge the gap between art and the human experience. It underscores that the essence of physical computing is not in the machinery itself, but in the potential for human expression and interaction that it affords. TIGOE celebrates the diversity of approaches—from instruments that translate motion into sound to devices that sense and react to our emotions—each offering a unique dialogue between user and machine. This celebration is not just of the end product but of the process and potential for evolution, highlighting that even familiar ideas can be reinvigorated through creative reinterpretation.

The second post, meanwhile, delves into the philosophy behind interactive art. It champions the idea that art is a collaborative exchange and urges creators to step back after setting the scene, allowing the audience to bring their interpretations and experiences into play. This stance challenges the traditional static relationship between art and observer, proposing instead a dynamic interaction where the audience becomes an integral part of the art’s essence.

Both readings converge on the point that in the realm of interactive experiences, whether through physical computing or art, the creator’s role is not to dictate but to facilitate. It’s an invitation to viewers to engage, explore, and co-create, leading to a richer tapestry of experiences. The pieces do not stand as mere displays of technological or artistic prowess but as starting points for a journey that each participant completes in their own unique way.

By bringing together the physical and the interactive, TIGOE illuminates a future of creation that is ever-evolving, deeply personal, and universally accessible. In this future, the boundaries between the creator, the creation, and the consumer are not just blurred but are actively redefined with each interaction, fostering a space where art and technology serve as mediums for communication, learning, and exploration of the human condition. Both readings serve as a manifesto for the modern maker, encouraging a dialogue with technology and audience that is as open-ended as it is profound.

Blinding lights:

After being inspired by The Weeknd’s album ‘After Hours,’ I chose to name my assignment ‘Blinding Lights,’ which reflects the influence of his music had on me.

https://youtube.com/shorts/uRrlVS0TPpw?feature=shared

This Arduino code controls two LEDs (red and blue) based on the light detected by a photoresistor and the position of a potentiometer. The LEDs alternate based on the light level: if it’s dark (light level below 300), they alternate, with the speed of alternation controlled by the potentiometer. If it’s light, both LEDs remain off. The program uses serial output to display the light level detected by the photoresistor.

const int led0 = 3; // Red LED
const int led1 = 5; // Blue LED
const int photoResistor = A1;
const int potentiometer = A0; // Potentiometer connected to analog pin A0

void setup() {
  Serial.begin(9600);
  pinMode(led0, OUTPUT);
  pinMode(led1, OUTPUT);
}

void loop() {
  int lightValue = analogRead(photoResistor);
  Serial.print("Light Value: ");
  Serial.println(lightValue);

  // Read the potentiometer value to control the speed of LED alternation.
  int potValue = analogRead(potentiometer);
  int delayTime = map(potValue, 0, 1023, 50, 1000); // Adjust this range as needed.

  if (lightValue < 300) { // Threshold for photoresistor touch
    // Alternate LEDs when the photoresistor is touched.
    digitalWrite(led0, HIGH);
    digitalWrite(led1, LOW);
    delay(delayTime); // Delay controlled by potentiometer

    digitalWrite(led0, LOW);
    digitalWrite(led1, HIGH);
    delay(delayTime); // Delay controlled by potentiometer
  } else {
    // If the photoresistor is not being touched, turn both LEDs off or keep them in a default state.
    digitalWrite(led0, LOW);
    digitalWrite(led1, LOW);
  }
}

 

Hamdah AlSuwaidi – Unusual switch

For this assignment I have created a switch that activates an LED light when two jumper wires come into contact with a conductive liquid. Initially utilizing saltwater due to its well-known conductive properties, the project later incorporates laban, showcasing the project’s versatility and the unexpected utility of common substances in electronics. The switch operates on the principle that when the liquid completes the circuit between the two wires, the LED is powered on, demonstrating a basic but effective application of electrical conductivity and circuit design.

Concept:

The concept revolves around the exploration of electrical conductivity in liquids and the application of this property in creating an unconventional switch. Conductivity in liquids is often associated with the presence of ions. Saltwater, being rich in ions, is a good conductor of electricity. On the other hand, laban, while less conventional, also contains various salts and minerals that can facilitate the flow of electricity, making it a surprising but effective choice for this experiment.

How It Works:

Circuit Setup: The project utilizes an Arduino board as the control unit, a simple LED light as the output indicator, and two jumper wires inserted into two separate GPIO (General-Purpose Input/Output) pins on the Arduino. One of these pins is set up as an input to detect the circuit’s completion, while the other serves to provide a low voltage signal. The LED is connected to another GPIO pin on the Arduino, configured as an output.

Conductive Medium: The circuit is initially open, meaning the electrical path is incomplete, and the LED remains off. The introduction of a conductive medium (saltwater or laban) bridges the gap between the two jumper wires, allowing current to flow through the liquid and complete the circuit.

Detection and Response: When the Arduino detects the completion of the circuit through its input pin, it triggers the LED to turn on. This response acts as a visual indication that the circuit has been completed through the conductive medium.

Experimentation and Learning: By experimenting with different liquids like saltwater and laban, users can learn about the properties of electrical conductivity in a hands-on manner.

Video:

IMG_5445

Image:


 

Week 8a Reading Response – Hamdah AlSuwaidi

Norman’s article illuminates the complex interplay between attractiveness and usability in design, suggesting that emotional responses to design can greatly influence how users interact with and perceive functionality. This understanding dovetails with Hamilton’s story, as her work in programming not only required an astute technical foundation but also a profound understanding of the user experience—astronauts, in this case—where the emotional stakes were life-and-death rather than mere convenience or pleasure.

Both Norman and Hamilton disrupt conventional narratives in their fields. Norman challenges the notion that design’s utility is purely functional and devoid of emotional consideration. Similarly, Hamilton shatters the glass ceiling, showcasing that women, often relegated to supportive roles during the 1960s, were capable of leading and innovating in technology and engineering, changing the trajectory of history.

The meticulousness in Hamilton’s programming, her foresight in anticipating potential software errors, and her commitment to creating reliable and user-centric software systems reflect the synthesis of form and function that Norman advocates. Hamilton’s designs needed to be not only functional but also to inspire confidence and evoke a sense of security for the astronauts—emotional impacts that were critical to the success of the Apollo missions.

Norman posits that design should elicit positive emotions, which enhance creative thinking and problem-solving capabilities. Hamilton’s work embodies this ethos, where the software she created required imaginative solutions that had to consider the astronauts’ interactions with the technology. Her work went beyond mere function—it was critical in crafting a human-centric experience under extraordinary circumstances.

Margaret Hamilton’s career, while ostensibly in the realm of software engineering, was also deeply entwined with design principles. Her software had to be user-friendly and intuitive for the astronauts, a requirement that predated but is consistent with Norman’s advocacy for designs that account for human emotions. The alignment between Norman’s theoretical framework and Hamilton’s practical application underscores the importance of design thinking in technological innovation.

In essence, Norman’s essay and Hamilton’s narrative converge on a fundamental principle: whether in the form of a teapot or lunar software, good design respects the user’s emotional experience and cognitive processes. Both stories celebrate the potential of human ingenuity when it is applied with empathy and consideration for the user experience.

Through their respective lenses, Norman and Hamilton illuminate the intricacies of human interaction with technology. Norman does so by dissecting the role of emotion in design, while Hamilton does so by pioneering software that supported one of humanity’s most emotionally resonant achievements. Both exemplify how the integration of form, function, and feeling can result in extraordinary usability and transformative experiences.

The reading of these two narratives, interwoven, culminates in an appreciation for the nuanced role that emotion and human-centric design play in the advancement and acceptance of technology. They advocate for a vision where technology and design do not merely serve human needs but also enrich the human spirit, a vision as expansive and hopeful as space itself.

Midterm – Hamdah AlSuwaidi

Recently, I had the opportunity to visit The Metropolitan Museum of Art (The MET) and was truly inspired by the diverse and rich history encapsulated within its walls. This visit sparked an idea in me to design an exhibit for The MET’s Costume Institute, focusing on the evolution of haute couture through iconic designs from renowned fashion houses. My midterm, aims to showcase the enduring allure and innovation of haute couture, highlighting how designers have redefined beauty and style over the decades.


By focusing on the individual stories that each garment tells about its era, the exhibit aims to provide a rich, textual narrative that captures the essence and evolution of haute couture across different periods.

Interactive elements, such as clickable images that reveal the history and significance of each piece, are integral to the exhibit. These features are designed to engage users, encouraging them to delve deeper into each garment’s story and understand its place within the broader narrative of fashion history.

let titleSize = 40;
let subtitleSize2 = 20;
let subtitleSize = 10;
let  bg, bg2;
let dress1, dress1Zoom1, dress1Zoom2, dress1Zoom3, dress1Zoom4, dress1Zoom5;
let dress2, dress2Zoom1, dress2Zoom2, dress2Zoom3, dress2Zoom4;
let dress3, dress3Zoom1, dress3Zoom2, dress3Zoom3;
let dress4, dress4Zoom1, dress4Zoom2, dress4Zoom3, dress4Zoom4;
let dress5, dress5Zoom1, dress5Zoom2, dress5Zoom3, dress5Zoom4, dress5Zoom5;
let dress6, dress6Zoom1, dress6Zoom2, dress6Zoom3, dress6Zoom4;
let scene = "main"; // Start with the exhibit scene
let bgsound;



function preload() {
  bgsound = loadSound('bgsoundfile.mp3')
  bg = loadImage('bg.jpeg');
  bg2 = loadImage('fullscreen.png'); // The fullscreen image for the exhibit
  //dress1
  dress1 = loadImage('dress1.png');
  dress1Zoom1 = loadImage('dress1Zoom1.png');
  dress1Zoom2 = loadImage('dress1Zoom2.png');
  dress1Zoom3 = loadImage('dress1Zoom3.png');
  dress1Zoom4 = loadImage('dress1Zoom4.png');
  dress1Zoom5 = loadImage('dress1Zoom5.png');
  //dress2
  dress2 = loadImage('dress2.png');
  dress2Zoom1 = loadImage('dress2Zoom1.png');
  dress2Zoom2 = loadImage('dress2Zoom2.png');
  dress2Zoom3 = loadImage('dress2Zoom3.png');
  dress2Zoom4 = loadImage('dress2Zoom4.png');
  //dress3
  dress3 = loadImage('dress3.png');
  dress3Zoom1 = loadImage('dress3Zoom1.png');
  dress3Zoom2 = loadImage('dress3Zoom2.png');
  dress3Zoom3 = loadImage('dress3Zoom3.png');
  //dress4
  dress4 = loadImage('dress4.png');
  dress4Zoom1 = loadImage('dress4Zoom1.png');
  dress4Zoom2 = loadImage('dress4Zoom2.png');
  dress4Zoom3 = loadImage('dress4Zoom3.png');
  dress4Zoom4 = loadImage('dress4Zoom4.png');
  //dress5
  dress5 = loadImage('dress5.png');
  dress5Zoom1 = loadImage('dress5Zoom1.png');
  dress5Zoom2 = loadImage('dress5Zoom2.png');
  dress5Zoom3 = loadImage('dress5Zoom3.png');
  dress5Zoom4 = loadImage('dress5Zoom4.png');
  dress5Zoom5 = loadImage('dress5Zoom5.png');
  //dress6
  dress6 = loadImage('dress6.png');
  dress6Zoom1 = loadImage('dress6Zoom1.png');
  dress6Zoom2 = loadImage('dress6Zoom2.png');
  dress6Zoom3 = loadImage('dress6Zoom3.png');
  dress6Zoom4 = loadImage('dress6Zoom4.png');
  
}
function setup() {
  createCanvas(720, 400);
  textSize(titleSize);
  textAlign(CENTER, CENTER);
   bgsound.loop();
  
}
function draw() {
  
  if (scene === "main") {
    drawMainScene();
  } else if (scene === "exhibit") {
    drawExhibitScene();
  } else if (scene.startsWith("zoomedInDress")) {
    drawZoomedScene();
  } bgsound.play();
  
}
function drawMainScene() {
  background(bg);
  noStroke();
  fill(0);
  textSize(titleSize);
  text("THE MET", width / 3 + 120, height / 3 - 80);
  textSize(subtitleSize2);
  text("THE COSTUME INSTITUTE", width / 2, height / 2 - 110);
  fill(0);
  textSize(subtitleSize);
  text("Touch the start button to begin!", width / 2, height / 2 - 80);
  // Start Button
  fill(255);
  rect(width / 2 - 50, height / 2 + 50, 100, 40, 10);
  fill(0);
  textSize(16);
  text("Start", width / 2, height / 2 + 70);
}
function drawExhibitScene() {
  background(bg2); // Use the fullscreen image as the background for the exhibit
  // Back Button, only show if we're not in the initial exhibit scene
  fill(255); // White color
  rect(20, 20, 60, 30, 10);
  fill(0); // Black color
  textSize(16);
  text("Back", 50, 35);
}
function drawZoomedScene() {
  let zoomedImage;
  switch (scene) {
    case "zoomedInDress1_1":
      zoomedImage = dress1Zoom1;
      break;
    case "zoomedInDress1_2":
      zoomedImage = dress1Zoom2;
      break;
    case "zoomedInDress1_3":
      zoomedImage = dress1Zoom3;
      break;
    case "zoomedInDress1_4":
      zoomedImage = dress1Zoom4;
      break;
    case "zoomedInDress1_5":
      zoomedImage = dress1Zoom5;
      break;
    case "zoomedInDress2_1":
      zoomedImage = dress2Zoom1;
      break;
    case "zoomedInDress2_2":
      zoomedImage = dress2Zoom2;
      break;
    case "zoomedInDress2_3":
      zoomedImage = dress2Zoom3;
      break;
    case "zoomedInDress2_4":
      zoomedImage = dress2Zoom4;
      break;
    case "zoomedInDress3_1":
      zoomedImage = dress3Zoom1;
      break;
    case "zoomedInDress3_2":
      zoomedImage = dress3Zoom2;
      break;
    case "zoomedInDress3_3":
      zoomedImage = dress3Zoom3;
      break;
    case "zoomedInDress4_1":
      zoomedImage = dress4Zoom1;
      break;
    case "zoomedInDress4_2":
      zoomedImage = dress4Zoom2;
      break;
    case "zoomedInDress4_3":
      zoomedImage = dress4Zoom3;
      break;
    case "zoomedInDress4_4":
      zoomedImage = dress4Zoom4;
      break;
    case "zoomedInDress5_1":
      zoomedImage = dress5Zoom1;
      break;
    case "zoomedInDress5_2":
      zoomedImage = dress5Zoom2;
      break;
    case "zoomedInDress5_3":
      zoomedImage = dress5Zoom3;
      break;
    case "zoomedInDress5_4":
      zoomedImage = dress5Zoom4;
      break;
    case "zoomedInDress5_5":
      zoomedImage = dress5Zoom5;
      break; 
    case "zoomedInDress6_1":
      zoomedImage = dress6Zoom1;
      break;
    case "zoomedInDress6_2":
      zoomedImage = dress6Zoom2;
      break;
    case "zoomedInDress6_3":
      zoomedImage = dress6Zoom3;
      break;
    case "zoomedInDress6_4":
      zoomedImage = dress6Zoom4;
      break;  
  }
  background(zoomedImage); // Display the zoomed-in image on full canvas
  // Back Button
  fill(255); // White color
  rect(20, 20, 60, 30, 10);
  fill(0); // Black color
  textSize(16);
  text("Back", 50, 35);
}
function mouseClicked() {
   if (!bgsound.isPlaying()) { // Check if the sound is not already playing
    bgsound.loop(); // Start playing the sound
  }
 
  if (scene === "main") {
    // If the Start button is clicked, change to the exhibit scene
    if (mouseX > width / 2 - 50 && mouseX < width / 2 + 50 && mouseY > height / 2 + 50 && mouseY < height / 2 + 90) {
      scene = "exhibit";
      
    }
  } else if (scene === "exhibit") {
    // Check if the click is within the back button's coordinates
    if (mouseX > 20 && mouseX < 80 && mouseY > 20 && mouseY < 50) {
      scene = "main";
     
    }
    // Check if the click is within Dress1's designated area
    else if (mouseX > 148 && mouseX < 228 && mouseY > 43 && mouseY < 149) {
      scene = "zoomedInDress1_1";
     
    }
    // Check if the click is within Dress2's designated area
    else if (mouseX > 325 && mouseX < 405 && mouseY > 44 && mouseY < 149) {
      scene = "zoomedInDress2_1";
      
    }
    //  Check if the click is within Dress3's designated area
    else if (mouseX > 450 && mouseX < 580 && mouseY > 44 && mouseY < 149) {
      scene = "zoomedInDress3_1";
      
    }
    //  Check if the click is within Dress4's designated area
    else if (mouseX > 148 && mouseX < 229 && mouseY > 203 && mouseY < 308) {
      scene = "zoomedInDress4_1";
      
    }
    //  Check if the click is within Dress5's designated area
    else if (mouseX > 323 && mouseX < 406 && mouseY > 201 && mouseY < 309) {
      scene = "zoomedInDress5_1";
      
    }
    //  Check if the click is within Dress6's designated area
    else if (mouseX > 450 && mouseX < 580 && mouseY > 201 && mouseY < 307) {
      scene = "zoomedInDress6_1";
      
 
    }
    
  } else if (scene.startsWith("zoomedInDress")) {
    // If the Back button is clicked in a zoomed-in scene, go back to the exhibit
    if (mouseX > 20 && mouseX < 80 && mouseY > 20 && mouseY < 50) {
      scene = "exhibit";
  
    } else {
      // Cycle through the zoomed-in images
      let parts = scene.split('_');
      let dressNum = parts[0].replace("zoomedInDress", "");
      let zoomLevel = parseInt(parts[1]);
      zoomLevel = zoomLevel >= 4 ? 1 : zoomLevel + 1; // Loop back after the last image for dress1 and dress2
      if(dressNum === "3" && zoomLevel > 3) zoomLevel = 1; // Since dress3 has only 3 zoom levels
      scene = `zoomedInDress${dressNum}_${zoomLevel}`;
    }
  }
}

 

 

Midterm Progress / Reading Response – Hamdah AlSuwaidi

 Midterm Progress:

For my midterm project, I’m taking on the challenge of designing a captivating costume exhibit for The MET’s Costume Institute. The exhibit will showcase the evolution of haute couture through iconic designs from renowned fashion houses, spanning different eras and design philosophies.

The overarching theme of the exhibit is “Timeless Elegance: A Journey Through Fashion History.” My aim is to highlight the enduring allure and innovation of haute couture, exploring how designers have redefined beauty and style over the decades.

1. Homepage:
– The homepage welcomes visitors to the online exhibit with a visually appealing layout featuring the exhibit’s title, a brief description, and navigation options.

2. Navigation Menu:
– A navigation menu at the top or side of the webpage allows visitors to easily access different sections of the exhibit, including:
– Explore: Provides access to the main exhibit layout where visitors can view featured designers and garments.
– Audio Guides: Offers a collection of audio commentary on select pieces.
– Search: Enables visitors to search for specific designers, garments, or fashion movements.
– About: Provides information about the exhibit, its curators, and contributors.

3. Explore Section:
– Clicking on the “Explore” option takes visitors to the main exhibit layout, which may resemble a gallery or virtual space.
– Visitors can navigate through different areas of the exhibit by clicking or tapping on designated hotspots or arrows.
– Clicking on a designer’s name or garment reveals detailed information, including descriptions, historical context, and images.

4. Audio Guides:
– The “Audio Guides” section presents visitors with a curated collection of audio commentary on select pieces within the exhibit.
– Visitors can listen to the audio commentary by clicking on specific garments or audio icons associated with them.

5. Search Functionality:
– The “Search” option allows visitors to search for specific designers, garments, or fashion movements.
– Visitors can enter keywords or phrases into the search bar to find relevant content within the exhibit.
– Search results display relevant garments, designers, or topics, with clickable links to access more information.

Interactive Elements:
– Throughout the exhibit, interactive elements such as clickable images, videos, and multimedia presentations provide additional context and engagement.
– Visitors can interact with these elements by clicking or tapping on them to access related content or animations.

Some examples:

7. Responsive Design:
– The online exhibit is designed to be responsive, ensuring a seamless experience across different devices and screen sizes.
– Whether visitors access the exhibit on a desktop computer, tablet, or smartphone, the layout and functionality adapt to provide an optimal viewing experience.

  1. Maintaining Engagement: Keeping visitors engaged throughout their online exhibit experience is crucial. Unlike in-person exhibits where visitors may spend hours exploring, online visitors may have shorter attention spans. Designing captivating visuals, interactive elements, and compelling content is essential to maintain visitor interest and encourage exploration.
  2. Audio and Video Integration: Integrating audio and video content into the exhibit may present challenges such as ensuring cross-browser compatibility, synchronizing multimedia elements with other interactive elements or animations, and optimizing playback performance for smooth audio/video streaming.
let titleSize = 40; // Decreased the title size
let subtitleSize = 20; // Decreased the subtitle size

function preload(){
   hangerImage = loadImage('Hanger.png'); // Load hanger image }
}
function setup() {
  createCanvas(windowWidth, windowHeight);
  textSize(titleSize);
  textAlign(CENTER, CENTER);
}

function draw() { background(255); // Set background color to white
if (mouseIsPressed || mouseX != pmouseX || mouseY != pmouseY) {
  // Display hanger image on mouse hover
  image(hangerImage, mouseX, mouseY, 70, 50);
}
                
 // Title
                 
fill(166, 0, 0); // Set text color to red
  textSize(titleSize);
  text("Welcome to Timeless Elegance", width / 2, height / 2 - 50);
  
  // Subtitle
  fill(0); // Set text color to red
  textSize(subtitleSize);
  text("Touch the screen to begin your journey", width / 2, height / 2 + 20);
}

function mouseClicked() {
  // Trigger next screen or action when the screen is touched/clicked
  // For example, navigate to the main exhibit layout
}

The hanger icon serves as a visual representation of fashion and garment design, reinforcing the theme of the exhibit. It symbolizes the process of selecting, showcasing, and appreciating designer garments, further immersing visitors in the world of fashion.Changing the mouse cursor to a hanger creates a more immersive experience for visitors, immediately signaling that they are entering a fashion-themed environment. This subtle visual cue helps transport visitors into the world of haute couture and sets the tone for the exhibit.

https://docs.google.com/document/d/1wQb92P4HcfuLNuzHEYyvs3ZUFQNo6hspwGtPbJLv53Q/edit?usp=sharing (More details about the costume institute and what dress will be included in the exhibit)

Reading response:

The reading on “Computer Vision for Artists and Designers” delves into the increasing accessibility of computer vision technology to artists and designers, facilitated by user-friendly software and open-source communities. It showcases various projects, including Rafael Lozano-Hemmer’s intriguing installation “Standards and Double Standards” (2004), where belts controlled by a computer vision-based tracking system rotate to follow individuals, offering an unintentional yet captivating form of interaction.

However, the ethical implications become pronounced with projects like Suicide Box by the Bureau of Inverse Technology (1996), which utilized motion-detection to record real data of suicides, raising concerns about privacy and surveillance. While such data might aid in locating missing individuals, it blurs ethical boundaries, sparking controversy.

Moreover, the reading outlines different problems addressed by vision algorithms, such as motion detection and object tracking, underscoring their relevance in design considerations. The introduction of “Telecentric lenses” offers insights into improving object recognition, albeit with drawbacks like cost and distortion issues, prompting reflection on their judicious usage.

The discussion expands to the societal acceptance of constant surveillance through technologies like facial recognition, prompting introspection on privacy norms. This leads to questioning the boundaries between innovation and intrusion, highlighting the need for ethical frameworks in technology adoption.

In reflecting on the reading, two artworks stand out for their distinct approaches to computer vision. Rafael Lorenzo-Hemmer’s “Standards and Double Standards” impresses with its inventive use of space and objects, blurring the lines between digital and tangible realms. In contrast, Christopher Moller’s “Cheese” raises questions about the advancements in facial recognition technology and its potential implications for art and society.

Assignment 4 / Reading response – Hamdah AlSuwaidi

For this assignment, the goal was to combine various elements such as text, background scenery, and interactive components to create a visually appealing and engaging composition.

In this particular assignment, the background consists of a gradient sky with clouds, which provides a serene and calming atmosphere. The addition of colorful butterflies adds a touch of whimsy and liveliness to the scene. The choice of background and butterflies was made to create a harmonious and cohesive composition that aligns with the theme of nature and tranquility. Additionally, using a similar background pattern as the previous assignment helps create a consistent visual theme across multiple assignments, reinforcing the idea of a recurring pattern or motif.

 

1. Setup Function:
– Initializes the canvas and creates arrays to hold instances of butterflies, clouds, and flowers.
– Generates multiple instances of butterflies, clouds, and flowers with random positions on the canvas.

2. Draw Function:
– Renders the background with a gradient sky and clouds.
– Updates and displays each cloud’s position on the canvas.
– Updates and displays each butterfly’s position and appearance.
– Displays each flower on the canvas.

3. Butterfly Class:
– Represents a butterfly object with properties such as position, velocity, color, and size.
– The `update()` method updates the butterfly’s position and may change its direction randomly.
– The `display()` method renders the butterfly’s wings with a specified color pattern.

4. Cloud Class:
– Represents a cloud object with properties such as position, velocity, and size.
– The `update()` method updates the cloud’s position, ensuring it moves across the screen.
– The `display()` method renders the cloud as a set of ellipses representing its shape.

5. Flower Class:
– Represents a flower object with properties such as position, size, and color.
– The `display()` method renders the flower as an ellipse representing its center and a smaller red ellipse above, representing its stigma.

6. Interactivity:
– The `mouseClicked()` function triggers a change in butterfly colors when the mouse is clicked. This adds an interactive element to the artwork, allowing users to alter the visual composition dynamically.

let butterflies = [];
let clouds = [];
let butterflyColors = [
  [255, 20, 147], // Pink
  [128, 0, 128], // Purple
  [255, 255, 0] // Yellow
];
let currentColorIndex = 0;

function setup() {
  createCanvas(700, 500);
  
  // Create a flock of butterflies
  for (let i = 0; i < 10; i++) {
    let butterfly = new Butterfly(random(width), random(height), currentColorIndex);
    butterflies.push(butterfly);
  }
  
  // Create some clouds
  for (let i = 0; i < 5; i++) {
    let cloud = new Cloud(random(width), random(height));
    clouds.push(cloud);
  }
  
  
}

function draw() {
  // Draw gradient sky background
  background(135, 206, 250); // Light blue
  for (let y = 0; y < height; y++) {
    let inter = map(y, 0, height, 0, 1);
    let c = lerpColor(color(135, 206, 250), color(255, 255, 255), inter);
    stroke(c);
    line(0, y, width, y);
  }
  
  // Display and update clouds
  for (let cloud of clouds) {
    cloud.display();
    cloud.update();
  }
  
  // Update and display each butterfly
  for (let i = 0; i < butterflies.length; i++) {
    butterflies[i].update();
    butterflies[i].display();
  }
  

  
  // Display "Hamdah" text
  textSize(80);
  textAlign(CENTER, CENTER);
  fill(0); // Black color
  text("Hamdah", width / 2, height / 2);
}

function mouseClicked() {
  // Change butterfly colors on mouse click
  currentColorIndex = (currentColorIndex + 1) % butterflyColors.length;
  for (let i = 0; i < butterflies.length; i++) {
    butterflies[i].changeColor(currentColorIndex);
  }
}

class Butterfly {
  constructor(x, y, colorIndex) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-1, 1), random(-1, 1));
    this.colorIndex = colorIndex;
    this.size = random(20, 40);
    this.angle = random(TWO_PI);
  }
  
  update() {
    // Update position
    this.position.add(this.velocity);
    
    // Change direction randomly
    if (random() < 0.01) {
      this.velocity.rotate(random(-PI / 4, PI / 4));
    }
    
    // Wrap around screen
    this.position.x = (this.position.x + width) % width;
    this.position.y = (this.position.y + height) % height;
  }
  
  display() {
    // Draw butterfly wings with pattern
    fill(0); // Black
    noStroke();
    ellipse(this.position.x, this.position.y, this.size, this.size / 2);
    let wingOffset = this.size / 4;
    let wingSize = this.size / 2;
    push();
    translate(this.position.x, this.position.y);
    rotate(this.angle);
    fill(butterflyColors[this.colorIndex][0], butterflyColors[this.colorIndex][1], butterflyColors[this.colorIndex][2]); // Butterfly color
    ellipse(-wingOffset, 0, wingSize, wingSize * 2);
    ellipse(wingOffset, 0, wingSize, wingSize * 2);
    fill(0); // Black
    ellipse(-wingOffset, 0, wingSize / 2, wingSize);
    ellipse(wingOffset, 0, wingSize / 2, wingSize);
    pop();
  }
  
  changeColor(colorIndex) {
    this.colorIndex = colorIndex;
  }
}

class Cloud {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-0.5, 0.5), 0);
    this.size = random(50, 100);
  }
  
  update() {
    this.position.add(this.velocity);
    if (this.position.x > width + this.size) {
      this.position.x = -this.size;
    }
    if (this.position.x < -this.size) {
      this.position.x = width + this.size;
    }
  }
  
  display() {
    noStroke();
    fill(255);
    ellipse(this.position.x, this.position.y, this.size * 1.5, this.size);
    ellipse(this.position.x - this.size / 3, this.position.y - this.size / 4, this.size, this.size * 0.8);
    ellipse(this.position.x + this.size / 3, this.position.y - this.size / 4, this.size, this.size * 0.8);
  }
}

  

Reading Response:

In his seminal work, “The Design of Everyday Things,” Don Norman meticulously dissects the intricate relationship between design and user experience, shedding light on the fundamental principles that govern successful product interaction. Norman’s exploration of affordances resonates deeply with my own understanding of design, emphasizing the pivotal role of intuitive functionality in fostering seamless user-product relationships.

Consider, for instance, the ubiquitous smartphone interface. A well-designed interface intuitively guides users through its myriad functions, leveraging affordances and signifiers to streamline interactions. Icons and gestures serve as visual cues, effortlessly communicating their intended actions. When users tap an icon, they anticipate launching an app; when they swipe, they expect to navigate between screens. These intuitive interactions not only reduce the cognitive burden on users but also enhance their overall satisfaction with the device.

However, the efficacy of design extends beyond mere functionality; it encompasses a nuanced understanding of users’ evolving needs and technological literacy. As technology continues to evolve, so too does the language of interactive design. Novel features such as facial recognition and fingerprint identification, once considered exotic, have now become commonplace, ingrained within the lexicon of modern devices. Yet, the assimilation of these innovations into the user experience requires careful consideration of contextual factors and prior familiarity.

For instance, imagine a scenario where a user encounters a new smart home device equipped with voice recognition capabilities. To a tech-savvy individual accustomed to interacting with virtual assistants, such as Siri or Alexa, the process may feel intuitive, akin to conversing with a familiar friend. However, for someone less acquainted with these technologies, the experience may prove bewildering, necessitating a more gradual onboarding process to bridge the gap between novelty and comprehension.

This underscores the dynamic nature of interactive design, which continually adapts to accommodate emerging technologies and diverse user demographics. As designers, we must strive not only to anticipate users’ needs but also to cultivate inclusive and accessible interfaces that resonate across varying levels of technological proficiency. By embracing this iterative approach and prioritizing intuitive design, we can forge meaningful connections between users and products, enriching lives and experiences in the process.

 

Assignments 3 / Reading Response – Hamdah AlSuwaidi

In this assignment, I developed a serene landscape populated by butterflies, clouds, and flowers, inviting viewers to immerse themselves in a tranquil virtual environment.

Key Elements:
– Butterflies: Colorful and graceful, the butterflies are the focal point of the scene. Programmed to flutter across the canvas, their movements are dynamic and captivating.
– Background: The canvas serves as a backdrop for the scene, featuring a gradient sky and soft, rolling clouds that drift lazily across the horizon.
– Flowers: Adding depth and detail to the landscape, flowers bloom sporadically, their vibrant colors contrasting against the lush greenery.

Conceptual Framework:
The project draws inspiration from the beauty and harmony found in the natural world. By combining artistic vision with computational techniques, the goal is to evoke a sense of wonder and serenity, inviting viewers to momentarily escape the confines of reality and immerse themselves in a digital oasis of creativity and beauty.

This assignment provided an opportunity to explore the intersection of art and technology, demonstrating how code can be used to create immersive digital experiences that transport viewers to captivating virtual worlds. Through careful design and implementation, the project aims to evoke a sense of wonder and appreciation for the beauty of nature in the digital realm.

code:

let butterflies = [];
let clouds = [];
let flowers = [];

function setup() {
  createCanvas(800, 600);
  
  // Create a flock of butterflies
  for (let i = 0; i < 10; i++) {
    let butterfly = new Butterfly(random(width), random(height));
    butterflies.push(butterfly);
  }
  
  // Create some clouds
  for (let i = 0; i < 5; i++) {
    let cloud = new Cloud(random(width), random(height));
    clouds.push(cloud);
  }
  
  // Create some flowers
  for (let i = 0; i < 20; i++) {
    let flower = new Flower(random(width), random(height));
    flowers.push(flower);
  }
}

function draw() {
  // Draw gradient sky background
  background(135, 206, 250); // Light blue
  for (let y = 0; y < height; y++) {
    let inter = map(y, 0, height, 0, 1);
    let c = lerpColor(color(135, 206, 250), color(255, 255, 255), inter);
    stroke(c);
    line(0, y, width, y);
  }
  
  // Display and update clouds
  for (let cloud of clouds) {
    cloud.display();
    cloud.update();
  }
  
  // Update and display each butterfly
  for (let i = 0; i < butterflies.length; i++) {
    butterflies[i].update();
    butterflies[i].display();
  }
  
  // Display flowers
  for (let flower of flowers) {
    flower.display();
  }
}

class Butterfly {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-1, 1), random(-1, 1));
    this.color = color(random(255), random(255), random(255));
    this.angle = random(TWO_PI);
    this.size = random(20, 40);
  }
  
  update() {
    // Update position
    this.position.add(this.velocity);
    
    // Change direction randomly
    if (random() < 0.01) {
      this.velocity.rotate(random(-PI / 4, PI / 4));
    }
    
    // Wrap around screen
    this.position.x = (this.position.x + width) % width;
    this.position.y = (this.position.y + height) % height;
  }
  
  display() {
    // Draw butterfly wings with pattern
    fill(this.color);
    noStroke();
    ellipse(this.position.x, this.position.y, this.size, this.size / 2);
    let wingOffset = this.size / 4;
    let wingSize = this.size / 2;
    push();
    translate(this.position.x, this.position.y);
    rotate(this.angle);
    fill(255, 100); // Semi-transparent white
    ellipse(-wingOffset, 0, wingSize, wingSize * 2);
    ellipse(wingOffset, 0, wingSize, wingSize * 2);
    fill(0, 100, 255); // Semi-transparent blue
    ellipse(-wingOffset, 0, wingSize / 2, wingSize);
    ellipse(wingOffset, 0, wingSize / 2, wingSize);
    pop();
  }
}

class Cloud {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-0.5, 0.5), 0);
    this.size = random(50, 100);
  }
  
  update() {
    this.position.add(this.velocity);
    if (this.position.x > width + this.size) {
      this.position.x = -this.size;
    }
    if (this.position.x < -this.size) {
      this.position.x = width + this.size;
    }
  }
  
  display() {
    noStroke();
    fill(255);
    ellipse(this.position.x, this.position.y, this.size * 1.5, this.size);
    ellipse(this.position.x - this.size / 3, this.position.y - this.size / 4, this.size, this.size * 0.8);
    ellipse(this.position.x + this.size / 3, this.position.y - this.size / 4, this.size, this.size * 0.8);
  }
}

class Flower {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.size = random(10, 20);
    this.color = color(random(255), random(255), random(255));
  }
  
  display() {
    fill(this.color);
    noStroke();
    ellipse(this.position.x, this.position.y, this.size, this.size * 1.5);
    fill(255, 0, 0); // Red
    ellipse(this.position.x, this.position.y - this.size / 1.5, this.size * 0.8, this.size * 0.8);
  }
}

 

Reading Response:

The first chapter of “The Art of Interactive Design” presents a thorough and insightful exploration into the true essence of interactivity. The author, Chris Crawford, dismantles the common misuse and overuse of the term by defining interactivity as a cyclic process in which two actors alternately listen, think, and speak. This definition, grounded in the analogy of a conversation, strips away the ambiguity surrounding the concept and refocuses our attention on the quality of the engagement rather than mere action and reaction.

Crawford’s critical perspective on the buzzword nature of interactivity in the 1990s and the superficiality of its application to products and technologies drives home the importance of discernment when evaluating interactive experiences. His reference to the frenzied rat race for ‘new and improved’ interactivity, often without substance, highlights the need for more profound and meaningful interactions rather than mere novelty.

The conversation example between Fredegund and Gomer excellently illustrates Crawford’s definition of interactivity, emphasizing the importance of understanding and responding within the context of an exchange. Moreover, his critique of non-interactive activities, like books and movies, offers a clear boundary between passive and interactive experiences.

Crawford’s commentary on the degrees of interactivity is particularly thought-provoking. He challenges the binary view of interactivity as either present or absent, proposing instead a continuum where the depth and richness of the interactive experience can vary. This nuanced approach allows for a more sophisticated analysis of interactivity in various contexts, from refrigerator doors to video games.

In summary, Crawford’s elucidation on interactivity is not only eye-opening but also serves as a call to action for designers and users alike to aspire for deeper, more meaningful interactions. His insistence on the necessity of all three components of the interactive process (listening, thinking, and speaking) provides a clear framework for evaluating and designing interactive systems. The first chapter sets the stage for a deeper dive into the intricacies of interactivity design and its implications for technology and society.

Reflection on Casey Reas’ Eyeo talk on chance operations

Casey Reas’ Eyeo talk on chance operations opened my eyes to a fascinating realm where art and randomness converge. The discussion around the dynamic interplay between order and chaos in art challenges conventional perceptions. Reas introduces the concept of “controlled randomness,” emphasizing the artist’s ability to set rules while allowing for surprises, ultimately contributing a unique twist to the art produced.

What struck me was the initial concern about digital art disrupting artistic expression due to its unpredictability. However, Reas showcases the idea of “ordered randomness,” demonstrating how artists can maintain control over the code while infusing an element of surprise. This not only adds diversity and excitement to art but also challenges preconceived notions about the medium.

The reading also sparked a thoughtful reflection on the difference between traditional hand-drawn art and algorithmically generated digital art. Casey Reas’ Eyeo talk not only expanded my understanding of the intricate relationship between order and chaos in art but also inspired me to explore the creative possibilities within the realm of digital art and coding. The presentation challenged stereotypes, fostering a deeper appreciation for the intentional and meaningful aspects of randomness in artistic expression.

Assignment 2 – Hamdah AlSuwaidi

In approaching this assignment, my initial inspiration stemmed from the intricate illustrations found in “Homage to the Squares Derivations.” However, faced with the complexity of the original concept, I decided to pivot and explore a different avenue. The revised plan led me to create a captivating Turing wheel illusion. By incorporating concentric rotating squares and pentagons, I aimed to convey a dynamic and visually intriguing composition. The shifting background color, coupled with the varying transparency levels, adds depth and dimension to the artwork. This reinterpretation allowed me to explore the interplay of shapes, colors, and optical illusions in a way that both challenges and engages the viewer.

To bring this idea to life, to code a series of concentric rotating squares and pentagons. The choice of concentric shapes creates a compelling visual hierarchy, with each layer featuring a unique size and rotation speed. The background color dynamically changes, providing an additional layer of visual interest.

The decision to incorporate transparency in both the squares and pentagons enhances the illusion, adding a nuanced play of light and shadow to the composition. This not only introduces an element of depth but also offers viewers a captivating visual experience as they observe the interplay of shapes and colors.

In essence, the assignment became an exploration of the balance between complexity and accessibility, as well as a study in the visual aesthetics derived from the juxtaposition of rotating geometric forms.

let angle = 0;
let bgColor = 0;
let colorChange = 1;
let numSquares = 8; // Number of rotating squares
let squareSize = 100; // Initial size of the squares
let numPentagons = 12; // Number of rotating pentagons

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  angleMode(DEGREES);
}

function draw() {
  // Shift background color
  bgColor += colorChange;
  if (bgColor > 255 || bgColor < 0) {
    colorChange *= -1;
    bgColor = constrain(bgColor, 0, 255);
  }

  background(bgColor);

  // rotating squares and pentagons
  push();
  translate(width / 2, height / 2);

  
  for (let i = numSquares; i > 0; i--) {
    push();
    let alpha = map(i, 1, numSquares, 50, 255);
    fill(bgColor, alpha);
    rotate(angle * (numSquares - i + 1)); //  rotation speed 
    let size = squareSize * i;
    square(0, 0, size);
    pop();
  }

  
  for (let i = numPentagons; i > 0; i--) {
    push();
    let alpha = map(i, 1, numPentagons, 50, 255);
    fill(bgColor, alpha);
    rotate(angle * (numPentagons - i + 1)); //rotation speed for each pentagon
    drawPentagon(0, 0, 40 * i);
    pop();
  }

  pop();

  angle += 0.5; // rotation speed 
}

function drawPentagon(x, y, radius) {
  beginShape();
  for (let i = 0; i < 5; i++) {
    let angle = map(i, 0, 5, 0, 360);
    let px = x + cos(angle) * radius;
    let py = y + sin(angle) * radius;
    vertex(px, py);
  }
  endShape(CLOSE);
}

 

Assignment 1- (Self-Portrait) Hamdah AlSuwaidi

Description:
For this assignment, I opted for a straightforward approach to create a self-portrait. The portrait includes various facial features, notably the eyes move horizontally due to the animation, and the eyebrows respond to the eye movement.

Sketch:

Code Implementation:

let eye1X = 170;
let eye2X = 230;
let direction1 = 1;
let direction2 = 1;
let lipYOffset = 0;

function setup() {
  angleMode(DEGREES);
  rectMode(CENTER);
  createCanvas(400, 400);
  background(240);
}

function draw() {
  background(240);

  // Draw the existing elements

  // hair
  fill(41, 38, 31);
  rect(200, 220, 205, 330, 90);

  // shirt
  fill(167, 181, 169);
  rect(200, 380, 190, 270, 40);

  // neck
  fill(245, 227, 176);
  rect(200, 239, 100, 100, 30);

  // face
  fill(245, 227, 176);
  ellipse(200, 150, 150, 175);

  // left eye
  fill(255);
  ellipse(eye1X, 143, 40, 40);

  // right eye
  ellipse(eye2X, 143, 40, 40);

  // left pupil
  fill(0);
  ellipse(eye1X, 143, 15, 20);

  // right pupil
  ellipse(eye2X, 143, 15, 20);

  // mouth
  arc(200, 192, 50, 50, 0, 180);

  // nose
  noFill();
  arc(198, 175, 20, 15, 270, 90);

  // bangs
  noStroke();
  fill(41, 38, 31);
  rect(200, 81, 90, 43, 58);
  strokeWeight(5);
  stroke(41, 38, 31);
  line(150, 115, 175, 115); // left eyebrow
  line(225, 115, 250, 115); // right eyebrow
  strokeWeight(1);
  stroke(0);



  // eye positions 
  eye1X += direction1 * 2;
  eye2X += direction2 * 2;

  // Check if eyes reach the edge and change direction
  if (eye1X <= 160 || eye1X >= 180) {
    direction1 *= -1;
  }

  if (eye2X <= 220 || eye2X >= 240) {
    direction2 *= -1;
  }

  
}