Month: February 2024

Week 5 – Midterm Progress – Lord of the Maze – Dachi Tarughishvili

Concept:

My midterm will be a game titled Lord of the Maze which is inspired by epic fantasy novel called Lord of the Rings which my previous project Eye of Sauron was based on. This time around I want to make a maze style game where main character Frodo has to make his way out of the maze and reach Mount Doom (volcano in Mordor where the ring is forged and place where it can be destroyed). In addition to the maze, orcs are roaming along different pathways which you should avoid. Coming in direct contact with an orc will decrease your health. If you loose all three health points, you lose the game. If you reach mount of doom in time, you win the game, and image gets displayed. Some of the features I am considering adding are: time counter, sound effects, more orcs, more movement patterns, Eye of Sauron additional level before reaching mount of doom and destroying the ring.

Design:

Maze Generator | Graphic design inspiration, Maze, Design inspiration

These are some of the basic design elements behind my midterm project as it is going to be top down, 2D 8 bit pixel art-style maze game. I am also going to add iconic soundtracks from LOTR to enhance the atmosphere. I am also thinking of other obstacles or objectives along the way like additional monster or a ring. Additionally, I want a spell casting ability design of which might either be animated or might opt for simpler integration with visual changes P5js offers. The maze itself is gonna be fixed for ease of implementation, and collision detection, however, I could possibly pursue more generative design in the future.

Classes will most likely be: UI, Ring, Orc, Mount of Doom, Game Win, Game Over conditions and more.

Challenges:

Challenges will most likely come from collision detection. The maze logic should be properly implemented so that Frodo does not go through walls and does not break player immersion.

Additionally, it will be quite difficult to make all objects work together as they have to abide different rules. I don’t think the movement itself will be an issue as most monsters should have predefined path. Integrating eye of Sauron animation from project before both programmatically and conceptually might be challenging.

Risk Prevention:

To maximize the efficiency of implementation, I am going to approach the task step by step. First, I am going to design the maze and check basic collisions for the character.

After that I am going to add orcs and make them move on predefined paths. I will then implement Ui Elements since games core logic works successfully and I can only build up from there.

Additional logic concerning the eye, reaching mount of doom, additional obstacle, the ring, and potential power will be built each one at a time.

Eventually, I am going to try to polish everything together, improve my comments and foundation and possibly work on graphics and transitions.

As far as audio is concerned, each new element will be accompanied by relevant audio file and thats how they are going to be added as well consequently.

 

 

Midterm project First draft

For my midterm project, I want to create a fruit ninja game but instead of cutting fruits, I want the user to cut flowers. Simulating you’re cutting flowers from a garden.

This first week I wanted to work on the hardware of the game.

I have the backbone of the game coded. Starting with the instructions display, the game which ellipses simulate the flowers and triangles simulate insects which simulates bombs. I started with a simple design so that it would be easier for me to code and understand every step.

It was a bit challenging for me to understand and to add the GameObject class.

Everything that moves or shows on the screen in your game, such fruits or bombs, is designed after the GameObject class. This is why it’s helpful:

In simple terms, GameObject is like the basic DNA for all the items in the game. It makes creating and managing game items easier and more organized.

  1. Saves Time: It avoids writing repetitive code for common game item functions, such as moving or displaying on the screen. All items can use it after you write it once in GameObject.
  2. Maintains Order: It assists you in maintaining the clean code of your game. Aware of the locations of the common elements
  3. Facilitates Modifications & Simple to Add New Content: Modifying an attribute that should be shared by all items (such as movement) only requires making a change in GameObject; all items will then update accordingly.

Another thing that I had to learn was to increase difficulty as the user sliced flowers. I added this feature to my GameObject class.

This formula allows for dynamic adjustment of the game’s difficulty or pace, making objects fall faster or slower based on the speedMultiplier value.

Accordingly, if the game is playing at 60 frames per second (fps), the object will glide smoothly down the screen because its y location will be updated 60 times in a second.

this.y += this.speed * speedMultiplier;

Furthermore, I had to add a lot of If statements such as If an ellipse was not cut – game over or if a triangle was cut then – game over.

A handle function handles particular tasks within the code. For example, handleFruits() in a game might add new fruits, update their positions, and check if you missed any, all in one place. It ensures that everything that has to happen with fruits is done correctly and helps keep your code neat.

function handleFruits() {
  if (frameCount % 60 === 0) { //60(fps) a new EllipseFruit object is added to the fruits array every second. 
    fruits.push(new EllipseFruit());
  }
  for (let i = fruits.length - 1; i >= 0; i--) {
    fruits[i].update(); //Updates the position or state of the fruit 
    fruits[i].display(); //Draws the fruit on the screen 
    if (fruits[i].offScreen()) {
      gameOver = true; // End the game if any fruit goes off-screen
      break; // Exit the loop to immediately handle game over
    }
  }
}

 

 

 

Next steps: 

This next week I’ll work on improving the game and make it more aesthetic. I need to add the pictures of the flowers and change the cursor to some scissors. I have to add some music so that every time the user cuts a flower there is a sound in the background. Lastly, I have to figure out how to display the instructions first with the fullscreen option.

Bibliography: 

https://p5js.org/es/reference/#/p5.PeakDetect/update

https://p5js.org/es/reference/#/p5/createButton

https://p5js.org/es/reference/#/p5.Score

https://p5js.org/es/reference/#/p5/keyIsPressed

https://p5js.org/es/reference/#/p5/pop

When Art Meets Tech: The Magic of Computer Vision for Creatives

For anyone who has ever been interested in fusing art and technology but has been afraid to take the step, Golan Levin’s paper, “Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers,” is an awakening. It basically says:  “Hey, you don’t need to be a tech whiz to play with computer vision. Come investigate!”It aims to dismantle the stigma associated with technology and demonstrate how it can be an interesting and easy tool for designers and artists.

 

In the past, computer vision was a high-tech field only utilized by the military or for severe scientific applications. But Levin demonstrates that it’s no longer exclusive to specialists. Artists are now utilizing computer vision to create amazing and interactive works of art because of more affordable devices, quicker computers, and an online community of shared code.

 

This paper made me think about broader issues, such as the responsible use of technology in art and privacy considerations. While it’s exciting to see how far technology can take art, it’s also critical to consider the effects of our creations.

To conclude I would like to end with two questions for reflection-

  1. How can artists ensure that their use of computer vision respects individuals’ privacy?
  2. What influence will designers and artists have on how society perceives and uses this technology going forward?

https://www.flong.com/archive/texts/essays/essay_cvad/index.html

Week 5 Reading : The Evolution of Computer Vision – From Myron Kreuger to OpenAI’s SORA

On Feb 16, 2024, OpenAI released a preview of SORA, a text-to-video diffusion transformer model. With that, almost everyone will be able to (to an extent) generate videos they imagine. We have come a long long way since Myron Kreuger’s 1989 Video Place (Gosh, his implementation makes all my VR experiences weak). In the previous years, a lot of public computer vision models came out and became accessible –  YOLO,  GANs, stable diffusion, DALL-E mid journey.etc .The entire world is amazed when DALL-E shows its in-painting functionalities. However, it should be noted that such capabilities (or at least theories behind it) were in existence since antiquity (i.e. PatchMatch  is a 2009 inpainting algorithm, which later got integrated into Photoshop as the infamous content aware fill tool).

What a time to be alive.

And back in 2006, Golan Levin, another artistic engineer wrote the Computer Vision for Artists and Designers. He gave a brief overview of the state of computer vision, and discussed frame differencing, background subtraction, brightness thresholding as extremely simple algorithms which the artists can utilize. Then gave us the links to some Processing code at the end as examples. I wish that the writing contains a bit more how-to guide and figures on how to set up the Processing interface and so on. 

Golan wanted to stress that, in his own words, a number of widely-used and highly effective techniques can be implemented by novice programmers in as little as an afternoon and bring the power of computer vision to the masses. However, in order to get computer vision to the masses, there are certain challenges… mainly not technology, but digital literacy.

The Digital Literacy Gap in Utilizing Computer Vision

From observation, a stunning amount of people (including the generation which grew up with ipads) lack basic digital literacy. There are some “things” you have to figure out yourself once you have used the computer for some time, for instance to select multiple different files at once, hold the Ctrl key and click on the files. On windows,  your applications are most likely installed in C:\Program Files (x86).  If the app is not responding, fire up the task manager and kill the process in windows, or force quit in mac, or use the pkill command in linux. If you run an application and the GUI is not showing up, it is probably running as a process in the system tray.etc .etc.

However, the masses who use computers on a daily basis for nearly a decade (a.k.a. my dad, and a lot more people, even young ones) struggle to navigate around their computer. For such masses, Golan Levin’s article is not a novice programmer tutorial, but already an intermediate tutorial – one has to have installed Processing in their computer, set up the Java prior to that and so on. Personally, I feel that a lot of potential artists give up the integration of technology due to the barrier of entry of the environment setup (for code based tools and computer vision). Hence, as soon as any enthusiastic artist tries to run an OpenCV code from github on their computer, and when their computer says “Could not find a version that satisfies the requirement opencv”, they just give up.

Nevertheless, things are becoming a lot more accessible. Nowadays, if you want to do such computer vision processing, but don’t want the code, there are Blender Geometry Nodes, Unity Shader Graphs where you can drag around stuff to do stuff. For code demonstrations, there is Google Colaboratory where you can run python OpenCV code without dealing with any python dependency errors (and even get GPUs if your computer is not powerful enough).

Golan mentioned “The fundamental challenge presented by digital video is that it is computationally “opaque.” Unlike text, digital video data in its basic form — stored solely as a stream of rectangular pixel buffers — contains no intrinsic semantic or symbolic information.” This no longer exists in 2024, since you can either use either Semantic Segmentation, or plug your image into any transformer model to have each of your pixels labeled. Computers are no longer dumb.

The Double-Edged Sword of User-Friendly Computer Vision Tools

With more computer vision and image generation tools such as Dall-E,  you can type text to generate images, of course with limitations. I had an amusing time watching a friend try to generate his company logo in Dall-E with the text in it, and it failed to spell it correctly, and he keeps typing the prompt again and again and gets frustrated with the wrong spelling. 

In such cases, I feel that technology has gone too far. This is the type of computer vision practitioners that these new generations of easy tools are going to produce. Ones who will never bother to open up an IDE and try coding a few lines, or to just get Photoshop or GIMP and place the letters by themselves. Just because the tools get better does not mean that you don’t have to put in any effort to get quality work. The ease of use of these tools might discourage people from learning the underlying principles and skills, such as basic programming or graphic editing.

However…

The rate of improvement of these tools is really alarming. 

Initially, I was also gonna say the masses need to step up the game, and also upgrade their tech skills, but anyway…at this rate of improvement in readily available AI based computer vision tools, computer vision may really have reached the masses.

Week 4 Reading Response: Shouldn’t design accomodate me?

In this reading, Norman discusses the psychological aspects of design, especially focusing on how users often blame themselves for difficulties with poorly designed objects rather than recognizing the design flaws. He introduces the term “psychopathology” to describe the mental stress and frustration caused by poorly designed objects.

During one of the lectures in a core I took last semester, “Re-Design” with professor Goffredo Puccetti, we learnt about one of the Universal Principles of Design, which is “Accommodation”, which is basically when you design an object that can be used by most of the population. Like certain designs don’t seem to be a hindrance in most cases, like stairs.

Let’s take a beautiful beach as an example. A scenic view right here on Saadiyat Island. But what’s that? Not everyone can enjoy it? Because of the stairs?

According to WHO, an estimated 1.3 billion people experience significant disability. That’s a whopping 16% of the population, coming to 1 in 6 of us. And despite there being a significant number of people who can’t access stairs, there still seems to be designers who don’t accommodate such people. Consequently, these people end up not going to places due to their disabilities and blame themselves.

All in all, what I got from the first chapter is that it explores the principles of good design and the impact it can have on people’s daily lives.

 

Week 4 — Reading Reflection: Don Norman’s Ch1

I personally found Don Norman’s view on the design world and its rules valid. The main goal of a designer is to find innovative creative ways to make designs easier to use and efficient, so when something as simple as how to open a door gets too complicated I too would write about it.

What makes a good design is the level of how fast users understand how it works. However, nowadays Norman argues that as technology is developing design must play a role in easing the interaction between technology and people. This idea hits close to home, in every family gathering I am the designated technology expert whenever my grandparents want to post something on instagram or update their facebook status, it would be nice if these platforms would measure user experience and user feedback — which was also a principle of design that Norman wrote about. This issues of technology not being inclusive to those of older generations must be addressed because it is a global issues.

Assignment Week – 4

I wanted to take the route of generative text, I wanted something that has a motion of swaying side to side having some sort of hypnotic effect. Additionally, I wanted the text to be in a pixelated font mainly for the aesthetic element, I used the font Silkscreen to achieve that look.

As a beginner in p5.js I had to use online resources such as the p5.js reference page, and YouTube: Patt Vira’s videos.

I am especially proud of being able to figure out the following formulas and that block of code, it might seem basic but it took me a while to wrap my head around them. The following block is what gives the element of swaying as there are two texts overlapping each other using, the top layer mimicking the motion of the layer under it. Updating the angle based on a sinusoidal function, creating a dynamic movement in the pattern which is what creates the swaying motion. And, I added the interaction element of being able to switch the colors of the text randomly – the colors are randomized and the letters are transparent.

function draw() {
  background(0);
  stroke(255);
  let x = r * cos(angle);
  let y = r * sin(angle);
  translate(20, 300);

  for(let i = 0; i < points.length; i++) {
    line(points[i].x, points[i].y, points[i].x + x, points[i].y + y);
  }

  fill(textColor);
  textSize(size);
  textFont(font); 
  text(msg, x, y);

  let increment = 2 * sin(t);
  t++;
  angle += increment;
}

function mousePressed() {
  // Change text color on mouse click
  textColor = color(random(255), random(255), random(255), 100);

  // Introduce noise to the points
  for (let i = 0; i < points.length; i++) {
    points[i].x = originalPoints[i].x + random(-10, 10);
    points[i].y = originalPoints[i].y + random(-10, 10);
  }
}

I initially wanted to add the Dubai landscape behind the text, however that was a complete failure, I couldn’t figure out what went wrong, but that is the only thing that I would change with my code.

Here is my entire code:

let font;
let points = [];
let originalPoints = [];
let msg = "dubai";
let size = 250; 
let r = 15; 
let angle = 0; 
let t = 0;
let textColor;

function preload() {
  font = loadFont("fonts/Silkscreen-Regular.ttf");
}

function setup() {
  createCanvas(850, 400);
  points = font.textToPoints(msg, 0,  0, size);
  originalPoints = points.map(point => createVector(point.x, point.y));
  angleMode(DEGREES);
  textColor = color(255, 100);
}

function draw() {
  background(0);
  stroke(255);
  let x = r * cos(angle);
  let y = r * sin(angle);
  translate(20, 300);

  for(let i = 0; i < points.length; i++) {
    line(points[i].x, points[i].y, points[i].x + x, points[i].y + y);
  }

  fill(textColor);
  textSize(size);
  textFont(font); 
  text(msg, x, y);

  let increment = 2 * sin(t);
  t++;
  angle += increment;
}

function mousePressed() {
  // Change text color on mouse click
  textColor = color(random(255), random(255), random(255), 100);

  // Introduce noise to the points
  for (let i = 0; i < points.length; i++) {
    points[i].x = originalPoints[i].x + random(-10, 10);
    points[i].y = originalPoints[i].y + random(-10, 10);
  }
}

 

Week 4 Reading Response – Saeed Lootah

I personally have not always thought much about the appliances or objects we always interact with even though I sometimes get annoyed by them so when going through the chapter I began to think more about the things I use on a day-to-day basis. Moreover, the beginning of the chapter outlines a philosophy which I have started hearing more of today: Human Centered Design. In my last semester I believe it came up in one of my classes, I am personally surprised that it didn’t exist until recently because I always imagined that designers (anyone that designed anything to be specific) always had the person at the center but what’s new is that designers are accounting for the worst possible mistakes or misunderstandings to best “foolproof” their work.

By the end of the chapter I began to think about two things. How have designers or the discipline of design in general changed since this book has been published. I ask this because as I’m reading it sometimes feel obvious and maybe thats because it has become more ingrained into the culture or perhaps it’s obvious when its spelled out. Then my second thought was about a recent product. The Apple vision pro, which I’m sure almost everyone has heard of by this point, uses the senses in a way which comes naturally to people whereas before with other virtual reality headsets people would have to be taught or spend more effort learning. It made me consider how sometimes a designer might approach a problem from the perspective of how can we make it with the tools we have already or some designers might approach a problem with the perspective of what tools do we have to make the product we should. Maybe I didn’t explain myself very well but thats what came to mind.

 

 

W5- Computer Vision Reading Reflection

 

I have personally never encountered the concept of computer vision before this reading. So, as I was reading it, I could not help but be amazed by the ways in which a concept as complex as computer vision can be manipulated to be used in different ways. It was very interesting for me to see the range of computer vision usage, going from military purposes to interactive art. To me, such a range showcases the duality of computers. It showcases that computers go beyond technicality but can actually encompass concepts that are typically seen as “non-technical.” The author also brought up different techniques to use computer vision such as frame differencing and brightness thresholding. The author’s introduction of different techniques for computer vision instilled the idea that we cannot simply rely on computers to create optimal outcomes. That is why a well prepared environment is almost always needed to help create optimal outcomes that could be generated by the computer itself. 

Thus, the relevance of user interaction comes into play. Are humans vital for the success of computer vision systems? Do we need to play an active role to ensure that computer vision systems are optimized correctly? In my eyes, the significance of the physical environment in regards to computer vision underscores the role human interaction plays in shaping the functionality of computer vision systems. Humans are able to manipulate and optimize the environment to enhance the performance of computer vision systems. Whether it is simply adjusting lighting or placing sensors in the environment, human intervention plays a vital role in computer vision systems. Other than this, it is users’ interaction with computer vision systems that determine the interpretation and utilization of its output. Therefore, human intervention is essential for harnessing the full potential of computer vision, ensuring it runs successfully. To me, the idea of computer vision as displayed by the author showcases the interconnected nature of computers and users and that one is somewhat always dependent on the other for success.

Conversation

For this week’s assignment, I chose to create generative text project. To find inspiration for it, I browsed through some data on Kaggle, eventually landing on a dataset of Tweets, where each tweet corresponds to a certain emotion(https://www.kaggle.com/datasets/nelgiriyewithana/emotions). Hence, I tried to use the data to create a somewhat meaningful conversation between two people.

First I uploaded an image of two characters speaking and thought about putting text over their heads like comic book characters, to indicate speech. The speech , in this case, is simply one instance of the Tweets in the dataset, but every Tweet is written from first perspective, giving an illusion of fluency in the conversation. The main idea behind creating a conversation was to randomly choose what the first person has to say, then identify the emotion the speech is tied to, and finally, get another random Tweet from the database that has the same emotion. The only addition to the text would be the connectives words I added manually, but they are also randomly taken from the given array that I wrote.
let openers = ["True, " , "Right!, " , "Agreed, " , "Same, ", "Fax, " , "Relatable, " , "Yeah, " , "I see, "]; //additions to the second speech

I made it easier for me to correlate text with emotions by creating arrays of text for each emotion, so that the random function only has to choose between texts of the same emotion. Example of a conversation below. With each run of the program, different texts and emotions will be generated.

Example

In the future I would like to try to make the conversation make more sense by adding additional variable and edits into the texts, but I feel like sometimes the generated outcome with this code is funny enough to be worth it.