Author: Ivan Klimkou

I’ve always been aware of the importance of aesthetics in design and how greatly it changes the perception of objects, websites, apps, etc., and Donald Norman’s article proved such a position to be right. Even though the whole article was dedicated to the positive and negative affects, I would be more interested to see the author’s point of view on what a positive and negative affect is and how the processes in our brain and the system of human perception influence our view of pleasuring and unaesthetic things. How does a person decide whether something is pleasurable or not? How big of a difference in perception is there between different people? Is there a universal understanding of pleasant-looking objects and unpleasant objects? Someone may say that humans like following patterns, and we may see this concept date back far into human history. But what about transitions, smoothness, sharpness, and color palette—concepts widely used in art? What neurobiological processes are responsible for recognizing pleasurable things?

Furthermore, I believe that humans are limited in recognizing aesthetics in such a way that there are no other creatures whose perception of things would be on a higher level than ours and who could communicate with us. Everything that is being produced is limited by a human’s mind, even though it’s conceptually very broad. I’m wondering how different our world would be if we could see how creatures on a higher level perceived the world, and would we be able to understand them at all?

After reading the article about Margaret Hamilton, I was very surprised to find out that she was one of the founders of the software engineering industry. Being interested in astronautics, I’ve gone through many materials dedicated to the Apollo program, but I can’t remember her name being mentioned. I believe that she deserves much more recognition for what she has done to advance technology and humanity.

CONCEPT

Link to the sketch: https://editor.p5js.org/MR_Shark/full/oYWGrKk87

My initial idea for the project was to give a user an opportunity to experience playing the piano. While working on my project, I realized that I could create not only a musical instrument simulator, but I could also create a whole educational project aimed at teaching people how to play simple piano pieces. Furthermore, this project can provide people with a tool that could give a partial overview of what it feels like to play the piano without acquiring an actual instrument.

DESCRIPTION OF THE PROJECT

The user experience begins with a start screen and the music piece composed by Ludovico Einaudi – “Fly”

 

Clicking on the screen takes the user to the actual piano simulator.

The keys are assigned to the user’s keyboard so that they replicate the actual piano experience. However, due to the limited width of the computer keyboard, the piano is divided into two halves.

The octaves from 3 to 5 are available to the user as they cover the scope of the most compositions.

Clicking the buttons at the bottom of the page makes the canvas display the notes of the piano pieces that a user can learn how to play. Clicking the left button displays the notes as they appear on the screen (e.g. A, D, F# etc.). Clicking on the right button displays the notes as they appear on a user’s keyboard (e.g. Q,V, [ , M etc.)

Parts of the code I’m proud of

soundFormats("mp3", "ogg");
  mainscreensound = loadSound(
    "x2mate.com - Ludovico Einaudi - Fly (Intouchables Soundtrack) (192 kbps).mp3"
  );
  let a = 0;
  for (let letter = unchar("A"); letter < 72; letter++) {
    for (i = 3; i < 6; i++) {
      let fileName = char(letter) + i + ".mp3";
      soundfiles[a] = loadSound(fileName);
      a = a + 1;
    }
    if (letter != 67 && letter != 70) {
      for (i = 3; i < 6; i++) {
        let fileName = char(letter) + "b" + i + ".mp3";
        soundfiles[a] = loadSound(fileName);
        a = a + 1;
      }
    }
  }

I had a problem with importing a large number of audio files into the program, and I’m proud of the way I managed to solve the problem with importing a large number of sound files (thank you, Professor Shiloh) using char and unchar functions.

Furthermore, I enjoyed creating classes for the piano keyboard. The code for creating black keys is designed in such a way that they appear as meaningful class objects with properties:

class BlackKey {
  constructor(x, y) {
    this.note = blackkeys[y % 5];
    this.octave = Math.floor(y / 5);
  }

  display(x, y) {
    fill("black");
    rect(30 + 30 * x, 300, 20, 75, 3);
    fill("white");
    textFont(font);
    textAlign(CENTER);
    text(blackkeys[y % 5], 40 + 30 * x, 365);
  }
}

REFLECTIONS

The project helped me implement the knowledge I gained throughout the lectures and readings. I see a lot of room for improvement in this project, either technical or graphical. I believe that if I choose to continue the work on the project, creating a broader range of choices for users, improving graphics, and adding more musical instruments, this project could potentially become a widely known useful tool for people trying to get an understanding of what the experience of playing musical instruments feels like without actually possessing the instrument.

Concept

I had a hard time deciding between my two ideas: a game and a musical interactive experience. But after taking my time, I decided to work on the second idea. I had a big project in mind on implementing different instruments, but after thinking thoroughly about implementing those ideas, I realized how many difficulties can appear; therefore, I decided that the best strategy would be to focus on one particular instrument but give it more flexibility and interactivity. That instrument would be the piano.

The most challenging part

While thinking about creating a piano keyboard, I came up with two strategies on how the idea could be implemented. The first one is creating a class for every key and functions inside which will either create the graphical design or program the click functions. Or I could just find the photos of the piano keyboard and assign the click functions depending on the position of the mouse.

I decided to create a class because it gives me more flexibility with animations and making changes.

But the most challenging part of creating the class is creating a sound. If I download a lot of sounds for every note, the program will run slowly, but if I choose to use an oscillator, it will not sound like the piano; therefore, I’m still deciding what should be done. I will most probably stick to importing actual music files and work on program optimization.

Design

I made a beta version of my project, which is not fully interactive and doesn’t contain all the graphical objects that would be added. I will work on the design of the keyboard, and I also came up with the idea of adding music sheets near the piano to learn new melodies.

Furthermore, I am considering the idea of implementing the click function, not only mouseClick but also keyPressed, which would allow to execute the sounds faster, creating a more natural sound. I will try to make the experience more entertaining by creating more options for a person apart from playing the instrument.

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.

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.

Every designer wants to create the most innovative, intuitively understandable design of their product, but in order to do that, it’s essential to understand what a great design is. During the reading, I was connecting the dots between the previous reading about interactivity and the one assigned for this week. Great design and interactivity go hand in hand because excellent design makes the user experience more interactive while also improving discoverability and understandability.

In the text, the author states that the most important characteristics of good design are discoverability and understanding. I only partially agree with the following statement. Even though I believe that it’s crucial to make a user familiar with the functionality of your product, I also believe that the aesthetics and beauty of the product are no less important than discoverability and understandability. No matter how functional the thing is, if it doesn’t draw attention or if it’s not perceived as an eye-pleasing creation, it will not reach as many users as it could. Therefore, I believe it’s of the utmost importance for a designer to consider the functional side of the product by enhancing its performance,  the logical side by improving discoverability and understandability, and to also focus on producing an aesthetically pleasing creation.

The reading helped me sort out the thinking process behind enhancing the discoverability of the design by providing six fundamental psychological concepts, which are affordances, signifiers, constraints, mappings, feedback, and conceptual models, that I will try to implement in my future works.

CONCEPT

After my first Thursday lecture, I had a concept of the work I wanted to create. I thought it would be the most straightforward piece of art I would make. But it wasn’t until Saturday that I realized how wrong I was.

On Saturday, I had the pleasure of visiting the Arts Center performance called “NOWISWHENWEARE”. It made me think a lot about life and our purpose as humans in general. To make you more familiar with the concept of the installation, there were more than 3 thousand lights all forming different shapes in complete darkness, where you can’t even see a hand near your face. It feels like you are entering another dimension where you can explore a new fabric. Hundreds of lights surround you while you’re listening to the mysterious voice talk about the lives of human beings.

All of these things made me think about telling the story of a human being through a piece of art.

THE SKETCH & DESCRIPTION

The sphere in the middle symbolizes the mind, and the circles symbolize the events and things happening to us. The more experiences we have, the more the sphere grows. But as we experience more and more new things, our sphere has less and less room to grow as most of the concepts seen in everyday life become very familiar to us.

Furthermore, in my work, I wanted to combine either randomly created shapes or those that followed the order. Just like in our lives, there are things we have control over, but at the same time, there are things that are out of our control. Nevertheless, they are essential parts of our experience.

HIGHLIGHT OF THE CODE

function net () {
  
  translate(350, 350);
  noFill();
  stroke('white');   
  
  rotate(angle_n)
  angle_n = angle_n + 1;
  arc(random(420,500),random(-500,700),600,600,0,360); 
  arc(500,0,600,600,0,360); 

}

It may not look complicated, but it took me a while to understand how the rotate function works. And funnily enough, it was one of my failures when I created a net of randomly created arcs, which later helped me create this project.

Reflection

This project helped me create a piece of art I would never have thought of in the first place. Moreover, I noticed how much influence things we experience (in my case, the Arts Center installation) can have on the way we produce art. Maybe it gives us a lens to look through, or maybe it just becomes a source of inspiration.

This is my first assignment after joining the class, and I feel that there are lots of things for me to learn and explore, which will help create more and more sophisticated projects.