Weekly Reflection _ #8

While reading Emotion and Attractive by Donald A. Norman, a lot of ideas and thoughts were going through my head. Most of what he spoke about made me question the importance of design, practicality, efficiency, and how current feelings affect the decisions we make and actions we take on the spot. One of the first things he mentions is how colorful screens were not necessarily helpful in terms of effectiveness but it gives him a sense of pleasure and hence, he does not want to remove them. He later highlighted that we have evidence that pleasing things work better and produce a more harmonious result. Although I’m not a hundred percent sure what determines a harmonious result in Norman’s context, I interpreted his statement based on the following: Design and adding pleasurable aspects to a product does not necessarily affect how the product itself works, but it affects our interaction with that product that leads to better results. The more attractive a thing is, the more emotionally we connect with something, and the more improvements we can witness in the results. For example, let’s assume I have two different screens with the same efficiency and speed level. If I’m using a small screen to code a game or whatever the project is, the results would be different if I’m using a bigger one. There are many ways to explain the reason for this but the reasons that are not very much discussed in Norman’s text is our feelings towards the product that lead to different results. Based on my interpretation, a bigger screen would be easier for me to program a project, hence, I would feel more motivated to work on it, knowing that I wouldn’t be struggling much with the visibility and display.

Another point Norman highlights in his text is how nervousness and negative affect might change the overall results. I thought of discussing this point because I was able to relate to it on different levels. There is a reason why we need breaks between studying and coding or whatever tasks that require a great amount of focus and mental capacity. In my experience, when I perform such tasks, I see myself drowning back to the same idea or solution I can see. It feels like my brain can not detach from the initial solution, hence, that could create anxiety and overthinking, which ultimately leads me to poor results because I did not have the mental capacity to think out of the box or think differently. When we take breaks, release some tension, and come back with a more positive effect, we think more creatively and possibly see a different way to implement something, leading to better results.

Mid-Term Project

Concept 

For the Midterm Project, I initially started with a museum-like idea but as I focused more on the aesthetics and the picture I had in mind, it started looking like an old library room. I went with a friendly user interactivity experience, where a person experiences a calm and peaceful experience in a tiny underground library, where they could explore some books and have a few reads. I decided to encompass mostly positive quotes from historical figures from different backgrounds as well as Quranic verses. I also decided to include Greek temples and lanterns that hopefully align with parts of European culture and Arab Muslim culture as well.

 

Code Highlight 

The most part I struggled with is representing the quotes randomly as the user clicks on the bookshelf. I first placed an array inside the code itself but I kept getting multiple errors and unpleasant results, hence I decided to move the quotes in a CSV file and split the quotes at a semicolon, similar to how data visualization is implemented. I’m still facing one issue, the quote is being displayed twice, for the time being, I just left it there as a reflection but hopefully would figure out the mistake I made.

function room1_quotes() {
  fill(currentColor[0], currentColor[1], currentColor[2]);
  stroke(currentColor[0], currentColor[1], currentColor[2]);
  strokeWeight(10);
  rect(260, 260, 320, 220, 20);

  // Inside the book
  noStroke();
  fill(193, 154, 107);
  rect(270, 270, 300, 210);

  fill(0); // Set text color to black
  textSize(15); // Adjust text size as per your requirement
  textAlign(LEFT); // Change the text alignment to LEFT

  let textX = 270 + 10; // X-coordinate of the text
  let textY = 270 + 10; // Y-coordinate of the text
  let textWidth = 300 - 20; // Adjust the width to leave some margin
  let textHeight = 210 - 20; // Adjust the height to leave some margin

  // Loop through the quotes and display them as paragraphs

  for (let i = 0; i < selectedquotes.length; i++) {
    text(selectedquotes[i], textX, textY, textWidth, textHeight);
    textY += textHeight + 10;
  }
}
Reflection 

This assignment was definitely time consuming in my experience. It took me a while to figure out a lot of things, especially that I’m not very used to working with classes. I looked at random examples online that did not necessarily do anything I implemented but gave the solution to some of the problems I faced like presenting quotes randomly, and having images change but not rapidly. However, I learned a lot from coding this project, it compelled me to spend a good amount of time trying to understand how each code snippet affects the other and what might be causing glitches or any lags. It certainly made me more confident about my ability to implement something I envisioned, even though its not everything I wanted, but I’m pleased with what I have.

References

 

Midterm Progress

For my midterm project, I’m attempting to avoid games in favor of creating something that involves experience and knowledge for the user to explore, as well as material that is helpful, positive, and reassuring. As a result, I decided to design something resembling an old museum with a theme resembling an underground archive, with some art pieces featuring positive words or advice from historical personalities, and another area of books containing Quran verses in Arabic and English. I’m going to try to provide calming and helpful verses. 

In my main page, I will try to add more aesthetics and try to have a mix of European, Greek and a bit of Arabic aspects since the underground museum would involve historical figures from different backgrounds as well as verses from the Quran. For example, the temples in the main page represent Doric Greek temples, and the lanterns can be considered part of many cultures but I initially associated it with the Arab / Islamic culture. The user would be able to click the “Enter” button and enter the museum, and they would be able to use arrows to move between the two sections in the museum. I’m also aiming to give the user the ability to click on the books and pictures to learn more about the historical background, take advice, or enjoy flipping through  positive quotes or reassuring and guiding verses from the Quran. I also plan to add fire sound, audio sounds for certain clicks and papers.

The 3 Orders of Ancient Greek ArchitectureVintage gold arabic lanterns realistic set Vector Image

Most frightening part 

I’m mostly worried about making the buttons take the user to another page or scene, I’m currently trying to do that for my main page which will take me to the first section of the museum. I’m not sure if I will be able to have two sections but it’s definitely something I’m aiming for. I’m also trying to figure out if I can make a book and the user will be able to flip through a few pages. 

Reading Response-Week#5

Computer Vision

I found the reading on “Computer Vision for Artists and Designers” to be quite interesting and informative. It introduced a variety of projects that piqued my curiosity. While I was familiar with the term “computer vision” before, this reading provided me with a better understanding of its scope and the various concepts it encompasses. One key takeaway from the reading was the realization that computer vision techniques can be used to gather real-time information about various aspects of human interactions, including identities, locations, gestures, facial expressions, gait characteristics, and gaze directions. What intrigued me the most was the accessibility of some of these techniques, which can be implemented by novice programmers in a relatively short time.

I didn’t notice biases in the reading and didn’t affect my beliefs on computer vision much. However, as I read the material, I couldn’t help but wonder about the connection between computer vision and virtual reality (VR). It just so happens that I am currently enrolled in a virtual reality research course, and the reading prompted me to explore this relationship further. Hence I searched online and most sources highlighted how computer vision plays a crucial role in AR and VR, particularly in areas such as object detection, gaze tracking, spatial mapping, gesture recognition, and real-time image processing. These applications not only enhance the immersion and interactivity of AR and VR experiences but also bridge the gap between the virtual and physical worlds. I was also able to make a connection between VR experience and one passage in the reading that particularly resonated with me was the description of the “Messa di Voce” project, which used whole-body vision-based interactions, speech analysis, and projection-based augmented reality to create an audiovisual performance. This project demonstrated the power of computer vision algorithms in tracking performers’ movements and analyzing audio signals to create real-time visualizations, which seem indispensable when it comes to creating a virtual reality experience. Overall, this reading expanded my understanding of computer vision and its wide-ranging applications in various fields, including the arts and virtual reality. It sparked my interest in exploring the intersection of computer vision and VR further and how these technologies can be harnessed to create more immersive and interactive virtual experiences that are safe and ethical for different age groups.


Reading Reflection – Week#4

I mostly agree with the author’s perspective in this chapter that discoverability and comprehension are essential components of creating successful products and technical innovations. It’s fascinating to see how psychology has a big impact on solving problems and recurrent problems in design. Although the author doesn’t go into great detail about design psychology, it is clear that making devices that are both aesthetically beautiful and user-friendly can be challenging.

Think about something like an iPhone from Apple. They provide good examples of how to blend user friendliness and complexity. Despite having a very complex technological design, these devices are surprisingly simple to use. To make our lives easier, developers make a significant effort to accommodate human wants and preferences. Features like Airdrop, which facilitates seamless file sharing, or accessibility options for individuals with visual impairments, are evidence of this commitment.

According to the author, many designers are engineers who are very knowledgeable about technology but lack a thorough understanding of how people behave. They frequently believe that because they are people, they can easily understand how other people will view items or machines. Although I partially understand their position, I find it difficult for them to empathize with other people’s perspectives. Engineers would need to make an effort to understand the psychological aspects because they frequently rely primarily on reasoning and logic. This chapter made me realize the importance of psychology, particularly in professions that serve the needs of people even if they are not directly associated with psychological concerns.

Design and aesthetics are equally important in my opinion because they frequently affect people’s decisions. A product’s appearance and presentation get more detailed as it gets more complicated. Engineers must learn to hide complexity behind a beautiful façade and focus exclusively on what is aesthetically pleasing, straightforward, and understandable to humans. To accomplish this, designers must have a thorough understanding of human psychology, allowing them to foresee a variety of user scenarios and how the product may improve those experiences.

 

Data Visualization Assignment

 

Diversity of International Students in UAEU

Concept:

Several of my close friends are enrolled at the United Arab Emirates University (UAEU), recognized as one of the top universities in the UAE and the Gulf region. Among them, one is an international student who frequently shares her challenges as a minority among predominantly local students, as well as her positive experiences. These conversations piqued my curiosity about the actual number of international students at UAEU. Consequently, I decided to create a visualization to gain insight into the diversity of the international student population, given the institution’s predominantly local student body. The visualization displays the total number of international undergraduate students in UAEU from Fall of 2019 to Spring 2023.


Code:

The following code represents the segment I find most fulfilling because it required significant adjustments and modifications, along with related code segments, to display only the country names and the respective number of students, while excluding dates and gender. Initially, there were issues with text changes and overlapping.

function startChangingText() {
  setInterval(() => {
    // Change the current country index and redraw
    countryIndex = (countryIndex + 1) % countryData.length;
  }, 2000); // Change the index every 2 seconds (adjust as needed)
}

function displayChangingText() {
  // Display the changing text at the top of the screen
  textStyle(BOLD);
  let currentCountry = countryData[countryIndex];
  let countryText = `${currentCountry.country} - Total Students: ${currentCountry.numStudents}`;
  fill(0); // Text color
  textSize(18);
  textAlign(CENTER, TOP);
  text(countryText, width / 2, 10); // Display text at the top
}

 

Reflection:

I underestimated the complexity of this assignment as it turned out to be quite time-consuming. I struggled with finding appropriate data that would be easy to work with which took me a lot of time to figure out. This assignment made me realize that achieving the desired outcome would require substantial effort on my part. I initially had high hopes of creating something more advanced since I’m eager to learn about data visualization and related aspects of big data. However, I’m pleased to have gained valuable experience in loading CSV files and employing techniques like “split,” which will be beneficial if I choose to delve deeper into data visualization in the near future.

References:

https://www.freepik.com/vectors/white-world-map

https://www.youtube.com/watch?v=y_UQdH3Zt2s

https://p5js.org/examples/advanced-data-load-saved-table.html

https://opendata.fcsc.gov.ae/@united-arab-emirates-university-uaeu/international-students-enrolled-in-degree-programs-at-uae-university-for-ay-2019-2023

 

Reading Reflection _ Week 3

Concept of Interactivity 

In “The Art of Interactive Design” by Chris Crawford, the author raises a thought-provoking question that resonates with my own observations: “Interactivity does not always seem interactive in the eyes of the interactor.” This statement challenges us to reexamine our perception of what constitutes interactivity, as many everyday interactions have become so ingrained that we often overlook their interactive nature. Consider the simple act of opening a refrigerator—when these appliances were first introduced, people marveled at the way they responded to their actions, such as the interior light turning on. However, as time passed, this interaction became commonplace, and we no longer perceive it as interactive as it was. That brings me to the degrees of interactivity discussed by the author.

This notion of degrees of interactivity is crucial because it underscores our ability to develop increasingly interactive technology, games, and ideas that facilitate connections among people and generate new ideas and thoughts. It prompts us to question what truly defines interactivity. Is it primarily about entertainment and stimulation, and should interactivity be measured by the extent to which it engages us? Moreover, it’s essential to recognize that the definition of interactivity evolves over generations, particularly in the ever-advancing realm of technology. What was once considered interactive—like early computers that followed programmed orders—has given way to more sophisticated forms of interactivity, such as AI and robots capable of continuous learning and response. In this context, the concept of interactivity continually evolves, reflecting the ever-changing landscape of technological innovation, aside from the other evolving fields that involve interactivity like ways of teaching and learning, working with data, etc.

Ocean Waves

Concept: For this project, my inspiration came from an image I found on an Instagram account. Initially, I attempted to create a vertical wave effect and incorporate snow, but it didn’t achieve the desired visual result. As a result, I decided to shift my focus towards designing the sand and the waves, which evoked memories of my childhood spent at the beach. While I initially tried to create bird-like shapes, I ultimately chose to keep the design more abstract, allowing for interpretation by the user.

https://www.instagram.com/ag.lr.88/

Code Snippet: I take pride in the code that generates the sand grains because I achieved pleasing results by fine-tuning the parameters. I’m also pleased with how I implemented the wave motion, giving it a slower and smoother appearance, in addition to using the concept of Perlin Noise in general.

function Wave() {
  this.yPos = 0.001;

  this.display = function () {
    fill(118, 170, 206);
    // Drawing a polygon out of the wave points
    beginShape();
    strokeWeight(13);
    stroke(255);

    let xPos = 0;
  
    // Iterate over horizontal pixels
    for (let x = 0; x <= width; x += 10) {
      // Calculate a y value according to noise and map it
      let y = map(noise(xPos, this.yPos), 0, 0.8, 200, 380);

      // Set the vertex
      vertex(x, y);
      // Increment x dimension for noise
      xPos += 0.05;
    }
    
    // Increment y dimension for noise
    this.yPos += 0.002;
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
  };
}

// Create sand grains using a loop
  for (let x = 0; x < width; x += grainSize) {
    for (let y = 0; y < height; y += grainSize) {
      let grainColor = color(random(235, 245), random(220, 230), random(180, 190)); // Light sand grain color
      texture.fill(grainColor);
      texture.noStroke();
      let grainSizeX = random(grainSize * 1, grainSize * 3); // Adjust the X grain size
      let grainSizeY = random(grainSize * 1, grainSize * 2); // Adjust the Y grain size
      texture.ellipse(x + random(-grainSize / 4, grainSize / 4), y + random(-grainSize / 4, grainSize / 4), grainSizeX, grainSizeY);
    }
  }

  return texture;
}

 

Reflection:This project marked my first time using code snippets from online examples in P5.js. I enjoyed working with these examples and modifying them to match my creative vision. However, some of the functions and P5.js features used in these examples were unfamiliar and a bit complex for my current level of expertise. I spent a considerable amount of time exploring my own ideas from scratch, sometimes overlooking the new properties introduced in the examples. This experience highlighted the importance of experimenting with P5.js properties independently before incorporating more advanced techniques that may surpass my current skill level.

 

References:

https://p5js.org/examples/

https://www.schemecolor.com/beach-front.php

Connecting the Dots in my Memory

Concept: My artwork depicts dots that may be interpreted as brain cells or fragments of a scattered memory. The lines that link these dots essentially show how I feel our brains attempt to connect the dots or connect the storyline of a memory. It’s an interactive simple project where the user can use the mouse to click to pause and see how much memory was recalled. One could also say that these dots are parts of different memories and they are causing internal chaos trying to link a specific experience, where some parts are distancing and some are getting mixed up. 

 

 

 

 

 

 

Code: The code I’m proud of is the nested loop that allowed me to connect the lines from the dots. I was struggling at first because I had to consider that “cells” is an array and I had to adjust the code accordingly to make it work.

function connectCells(cells) {
  let maxConnections = 10; // Maximum number of connections per cell

  // Loop through each cell as the source cell
  for (let i = 0; i < cells.length; i++) {
    let connectedCount = 0; // Counter for the number of connections made by the source cell

    // Loop through all cells again to consider them as potential target cells
    for (let j = 0; j < cells.length; j++) {
      // Ensure that the source cell is not the same as the target cell
      if (i !== j) {
        // Calculate the distance between the centers of the source and target cells
        let d = dist(cells[i].x, cells[i].y, cells[j].x, cells[j].y);

        // Check if the cells are close enough to be connected, and if the source cell
        // has not reached its maximum allowed connections
        if (d < 50 && connectedCount < maxConnections) {
          stroke(255, 150, 150); // Set the line color
          line(cells[i].x, cells[i].y, cells[j].x, cells[j].y); // Draw a line between the cells
          connectedCount++; // Increment the connection count for the source cell
        }
      }
    }
  }
}

Reflection: For this task, my initial brainstorming revolved around the concept of producing a blurred image to symbolize a hazy memory. However, I felt that executing this idea might be somewhat challenging at this stage. Nevertheless, I am content with my final piece, although I believe it could benefit from additional refinements to achieve a greater level of abstraction and realism in my eyes.

Reference:

https://stackoverflow.com/questions/41719843/connected-balls-not-working-p5-js

 

 

Reading Reflection _ Week#2

Casey Reas’s lecture brought many new perspectives to my thought process when it comes to creating art through technology. It made me wonder in what ways would it be helpful to humanity to create such art forms. What particularly drew my attention was the artwork inspired by Valentino Braitenberg’s book, as shared by Reas. While the core concept of this work isn’t within my primary focus, it serves as a significant part of my ongoing quest to uncover the potential intersections of science and interactive technology. This presentation left a lasting impression on me, fueling my enthusiasm to experiment further with the tools at my disposal. It offered valuable insights into the functioning of the nervous system, highlighting the intricate interplay between order and chance.

Reas’s discourse significantly reshaped my perspective on digital art. I used to believe that art required a profound underlying message or purpose, that artists should embark on their creative journey armed with a well-defined plan and a clear destination in mind. Now, I am inclined to see art as an entity that need not be burdened with the obligation of conveying a deeper meaning. This newfound perspective grants artists the freedom to explore novel artifacts and unconventional methods, allowing art to emerge organically and inviting diverse interpretations. I would be contradicting myself by saying art becomes a canvas for personal experiences and individual thoughts that reflect how each of us is uniquely wired to perceive things differently, because how authentic and personal are digital art works? And how much can we interpret if the art piece is too abstract and lacks symmetry?

This brings me to the discussion of Fractal invaders in Reas’s lecture. While the demonstration initially unfolds as a display of pure randomness, it gradually reveals elements of symmetry and duplication. These emerging images prompted our imaginations, compelling us to find meaning in what was unfolding before us. This particular instance is just one among many that reinforced my belief that certain art projects don’t necessarily rely on strict rationality. Even if a piece of art doesn’t lead us directly to a specific thought or idea, it challenges us to construct our own interpretations and derive meaning from it but that’s not always the case.

Furthermore, Reas’s presentation challenged me to delve deeper into the artist’s unique vision. However, to what extent does randomness with no vision can be considered art ? Some art works that are considered abstract or some works that accidentally became a piece of “art”, make me contemplate on whether or not generative art is considered as an art project created with intention and authenticity.