Creative Reading Reflection – Computer Vision for Artists and Designers:

This article talks about computer vision, which helps computers understand pictures and videos using special math rules (algorithms). In the past, only experts and the military used it, but now regular people and artists can use it too, thanks to better software. It talks about examples like Videoplace and Sorting Daemon, these examples demonstrate how computer vision can be used in creative and thought-provoking ways to engage with audiences and address social issues.

In the second part of the article, it talks about simple computer vision techniques that beginners can use. These techniques include things like detecting motion, figuring out if something is there, and using brightness to find objects. These techniques are like the basic building blocks for making interactive systems that react to people or things in videos.

And it’s crucial to think about the physical environment when working with computer vision. It talks about how things like good lighting, using special lights, reflective markers, and picking the right camera parts can make computer vision work better.

A real-life example I can think of computer vision is Self-driving Cars. Also known as autonomous vehicles, they use computer vision technology along with many sensors like cameras,  LiDAR, radar, and GPS to understand and drive safely in their surroundings which also count as the physical environment of the car.

Mid-Term Progress:

My idea so far is baesd on an interactive digital collage artwork centered around a female portrait. Users would have the opportunity to add elements to the portrait, such as changing the color of the eyes, selecting different noses, or altering the mouth. These interactive dimensions could allow users to personalize and customize the artwork according to their preferences. The objective of creating a fun artwork that helps individuals express themselves and enjoy the creative process is a commendable goal. While the idea is still in its conceptual stage, it holds the potential to become an enjoyable and expressive digital art experience, especially if you continue to develop and refine it further.

This was last week when I wasn’t sure of the idea yet:

Untitled Notebook (3)

Code Design:

As of now, I think its better to start the project with the instructions page, even though proffesor Michael advised to start with thats hardest, but I dont think i can do that personsally. i can start with the first page and carry on with the rest.

1. At least one shape – Most probaby added in the artwork to create a a even further collage style or added in the intsutrctions page not sure yet.
2. At least one image – Main portrait would be images, multiple images will be added to my project.
3. At least one sound – background music to give a vibe of a painter creating a portrait.

What I find Frightening:

I havent started with the main point of the project which is the portrait, but I do think thats the part where ill be struggling the most and as well the saving file output which will finalize the portrait, as im adding concepts and ideas that I havent done before, I have yet to look at videos to explain the ideas. In order to overcome this, I plan to attend an office hour with Proffesor Michael, and research concepts and ideas of how I can implement them.

The other day, Aleks and I were leaving the classroom when I noticed a TV screen just outside the classroom door displaying an image from a webcam using hieroglyphs. It was an interesting project that initially seemed simple to me. However, after reading this week’s material, I realized that creating an art project involving computer vision involves considering numerous factors, making it more complex than I had thought.

I appreciated the way the Golan Levin weaved together various elements in his article. He provided numerous real-life examples and explained the multitude of technologies used in computer vision. The article highlighted the challenges artists face when working with computer vision, where changes in lighting or the brightness of a person’s clothing can disrupt the entire program. It demonstrated how computer vision techniques have been applied in a wide range of interactive art projects, from real-time visualizations of vocal performances to sociopolitical installations. This showcases the versatility and creativity that computer vision brings to the world of art.

Even though our class primarily focuses on art, I was excited to learn that concepts like X-rays, MRI, and CAT scans are also based on the principles of computer vision. This illustrates that computer vision can be applied not only in the art field but also in enhancing people’s lives in critical ways.

Computer vision is a concept with immense potential for advancement. We are witnessing the increasing integration of computer vision in interactive artworks and various applications. I believe that in the near future, computer vision will become even more accessible and seamlessly integrated into our daily lives, enhancing a wide range of applications beyond art, including healthcare, transportation, security, and entertainment.

The readings gives an overview on the development and application of the computer vision technology. While it is specifically about the computer vision technology, I think it also exemplifies the general trend of technological development: from the highly specialized sector to a novice and amateur sector. And in this development, artists play a pioneer role in populating the technology.

It is surprising to see how early the computer vision technology was utilized by artists and intertwined with virtual reality technology. This is a very good example of the co-evolution of different technologies and how artists are making attempts to explore the connections between different technologies. On the other hand, however, it can also be seen from this example of computer vision technology that the technology development is never linear. It might take many years for one technology to be fully advanced and adopted by people outside the field of techniques.

It is also meaningful to see that how we can improve the efficiency of technology by changing the physical environments. It is a great case where the physical world and digital world collaborates to achieve our goals. It is important to keep it in mind that the deficiencies in technology could be fixed by changing the physical environments the technology is situated in and that the environment can also be augmented by technology. This truly provides me with another perspective on the relationship between the physical and digital world.

I found Golan Levin’s article, “Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers,” to be the most informative reading we have done so far. Levin’s exploration of the application of computer vision in art and design resonated deeply with me, and it left me pondering the pervasive impact of computer vision in our daily lives.

The historical perspective Levin provides with the example of the videoplace immediately captured my attention. It is crazy to think how deep the roots of computer vision run and how they have been intertwined with the development of virtual reality for decades. It’s intriguing to realize that the seeds of a technology so pervasive today were planted half a century ago. w

What struck me most was the broader implications of computer vision in our daily lives. Levin’s examples, while rooted in the world of art and design, made me contemplate the ubiquity of computer vision in the modern world. From facial recognition on our smartphones to the automation of industrial processes, computer vision is quietly shaping our interactions and experiences. It’s no longer a niche technology; it’s a fundamental part of our daily existence today.

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.

 

Concept

My initial idea was to see how COVID-19 had influenced the death rate of the whole world, however, I was not sure if this was an ethical thing to do. Therefore, I decided to visually represent what was the number of deaths in 2019 based on other illnesses. I found a great website that has public data and data visualizations available online. I thought it would be interesting to visualize the data available using circles. This way is more spontaneous and hence easier to understand. Each circle represented the cause of death. The bigger the circle the more deaths there were in 2019.

Approach and Code Highlights

To create this code, I was using a for loop in a setup function. I took a single row and split it into individual values that were separated by a comma.  I then assigned variables for each cause of death in a single row and I used ‘int’ to convert the value into an integer. I then calculated the sum of the deaths for every disease in a single row. And because all of this is in the for loop, this happened to every row in my data file, so I got the total number of deaths for every country in the world. After, I scaled the size of the circle according to the data. Specifically, in the data file the range of min and max values was from 0 to 500000, which would correspond to 1 to 10 size on the canvas, respectively. I placed the circle in the random x & y positions and I used the range of min and max for the radius.

After I was able to draw circles according to a country I needed to find a way to visually distinguish them. I am really proud that I was able to understand how to do it.

// Use unchar function to convert a
// single-character string to its corresponding
// integer representation
// We also use split because we have 3 letters in a
// country code and we need to extract only
// the first letter

let countryCode = unchar(split(singleRow[1], "")[0]);
print(countryCode);

// We know that the country code as represented by
// a number is going to be between 65 and 90 that
// corresponds to letters from A to Z
// We assign red values to the letters

let redValue = map(countryCode, 65, 90, 0, 255);

// Coloring the circle in a range for red value
// and fixed green,blue and alpha values

noStroke();
fill(redValue, 100, 100, 155);

I decided to use different colors to assign the colors according to some variables in the data file. In the data file, I had a country code represented as 3 letters. For instance, Kazakhstan is KAZ and Argentina is ARG. So, with the help of an unchar function, I used this country code and converted a single-character string to its corresponding integer representation. Specifically, for ease of things, I decided to split the 3 letter code into 3 values and use only the first one. To represent letters in a code I used the ASCII printable characters, where ‘A’ is 65 and ‘Z’ is 90. You can find the whole list of ASCII printable characters here. Then, I used a map function to re-map numbers from the ASCII range (65 to 90) to the color range (0 to 255). The last thing I did was to fill all the circles. I played with different Green, Blue, and Alpha values until I got visually appealing circles.

Future Thoughts and Reflections

I had several problems with the code, which did not allow me to see the circles. Firstly, I had some places where I forgot to put a curly brace or I put an extra one. This did not allow me to run the program and I understood how careful I should be in looking through a code. It is very helpful to write what is a curly brace for when closing it. Second, I had multiple times where I had to print the values and look if they were definer or undefined. This helped with debugging a lot. Moreover, the biggest problem was with assigning the const numbers for the radius of the circle. If the range is too big, for example from 1 to 100, what happens is that the program prints only 3 circles and the rest are not visible, probably because the smallest circles are just 1 pixel. Therefore, I had to change the range to be from 1 to 10, so that all the circles were visible. This assignment helped me to understand how to debug a problem step by step and it also taught me that the best way to do it sometimes is a trial and error method.

 

 

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

 

CONCEPT

After the data visualization lecture, I had a lot of ideas about what data I would like to project on the map. I thought about oil dwellers in the GCC region, corn fields in Europe, and so on. But it turned out that finding a CSV file with data can be harder than writing the actual code for data visualization. After hours of searching, I decided to find something more obvious and chose to project the world’s airports on the map.

SKETCH

The sketch illustrates where the airports are located in the world. Through observations, we can see which parts of the world are more developed and which are not. This data can later be used in scientific research.

CODE

function draw() {
  for (let csvRowNumber = 1; csvRowNumber < strings.length; csvRowNumber++) {
    let singleRow = split(strings[csvRowNumber], ",");
    let longitude = float(singleRow[6]);
    let latitude = float(singleRow[7]);

    // Making sure that longitude and latitude coordinates exist

    if (!isNaN(longitude) && !isNaN(latitude)) {
      //Map function is used for calculating the coodinates x and y

      let x = map(longitude, minLong, maxLong, width, 0);

      // Invert y-axis to match typical map orientation

      let y = map(latitude, minLat, maxLat, height, 0);

      stroke(0);
      point(x, y);
    }
  }

A lot of used functions were covered during the lecture, but while writing a code for a sketch, I was facing different problems. For example, some .csv files with numeric values didn’t work with the float function. And this project helped me a lot with building confidence around doing data visualization code.

REFLECTIONS

Personally, this project was more technical for me than creative because the scope of my work was limited to the data I was able to find on the Internet. But I believe that technical skills are no less important than doing creative work; therefore, I’m glad I had an opportunity to get familiar with the new functions and opportunities P5 has, which I will use in my future works and projects.