Author: Javeria Haq

For my midterm project, I decided to change  my initial idea and created a unique card matching game “Paws and Puzzles”. The game revolves around Simba (named after my own dog<3), a lovable dog who has scattered his toys in the park and needs players’ assistance to match these toys through a card game. The objective is to pair up cards that represent Simba’s toys, including items like balls, a rubber duck, a squeaky chicken and more. The twist is that players must complete the matching within 30 attempts; otherwise, Simba becomes sad, leading to a game over scenario. Paws and Puzzles is not just about matching; it’s wrapped in a delightful storyline, making it engaging and fun.

Here are a few images of the cards I designed:

 

How It Works:

In “Paws and Puzzles,” the game’s core mechanics involve flipping and matching cards. It starts with a visually appealing menu page, and players can choose between starting the game or viewing instructions. There’s also a win condition, and the restart functionality is in place, enhancing the overall user experience. Additionally, the integration of audio elements specific to each scene complements the game, making it more engaging for players.

What I’m particularly proud of is the game’s visual design, which includes amusing captions for the cards, adding an enjoyable element to the gameplay. I’m especially happy with the mousePressed function and the card-matching logic in my code. It did take some time, but I got them working just the way I wanted.

function mousePressed() {
   if (!gameStarted) {
    if (instructionMode) {
      // Clicked on "Start Game" button on instructions page
      const startGameButtonX = 31;  
      const startGameButtonY = 598; 
      const buttonWidth = 150;
      const buttonHeight = 50;
      
      if (mouseX > startGameButtonX && mouseX < startGameButtonX + buttonWidth && mouseY > startGameButtonY && mouseY < startGameButtonY + buttonHeight) {
        gameStarted = true;
        initializeCards();
      }
    }else {
      const startButtonX = 222;
      const startButtonY = 235;
      const buttonWidth = 150;
      const buttonHeight = 50;

      if (mouseX > startButtonX && mouseX < startButtonX + buttonWidth && mouseY > startButtonY && mouseY < startButtonY + buttonHeight) {
        //clicked on start game button
        gameStarted = true;
        initializeCards();
      } else if (mouseX > startButtonX && mouseX < startButtonX + buttonWidth && mouseY > startButtonY + buttonHeight + 20 && mouseY < startButtonY + buttonHeight + 20 + buttonHeight) {
        //clicked on instructions button
        instructionMode = !instructionMode;
      }
    }
  } else {
    for (let card of cards) {
      if (card.contains(mouseX, mouseY) && !card.isFlipped() && flippedCards.length < 2) {
        card.setFlipped(true);
        flippedCards.push(card);
        audioCard.play();

        if (flippedCards.length === 2) {
          tries++; //increment the tries
          if (millis() - startTime >= flipDelay) {
            checkMatch();
            startTime = millis(); //reset the timer
          }
        }
      }
    }

    //restart button click on game win
     if (gameWon && mouseX >= 210 && mouseX <= 420 && mouseY >= 297 && mouseY <= 347) {
      restartGame();
    }

    //restart button click on the loss
    if (tries > 30 && mouseX >= width / 2 - 75 && mouseX <= width / 2 + 75 && mouseY >= height - 100 && mouseY <= height - 50) {
      restartGame();
    }
  }
}




function checkMatch() {
  //check if flipped cards match
  if (flippedCards.length === 2) {
    if (flippedCards[0].getValue() === flippedCards[1].getValue()) {
      score++;
      flippedCards = [];
    } else {
      //not a match, unflip the cards after a delay
      setTimeout(function () {
        flippedCards[0].setFlipped(false);
        flippedCards[1].setFlipped(false);
        flippedCards = [];
      }, flipDelay);
    }

    //checking win condition
    if (score === cards.length / 2) {
      gameWon = true;
      audioGame.stop(); 
      audioWin.play();
     
      //lose game if more than 30 tries
    } else if (tries > 30) {
      
      gameWon = false;
      audioGame.stop();
      audioLose.loop();
     
    }
  }
}

 

Challenges Faced and Areas for Improvement:

I encountered some challenges, notably a performance issue on the Safari browser. Although I tried various online solutions, none seemed to work, and I eventually opted to playing the game on Chrome for better performance. An area for improvement is adding more levels to the game to increase the difficulty and provide players with a sense of progression. And, of course, there were a couple of bugs that I had to wrestle with – but that’s all part of the coding “fun”, right? Creating this game was a lot of fun, and I hope that people enjoy playing it just as much:)

For my midterm project, I’m drawing inspiration from the cherished game my sister and I used to play on our PSP, featuring Sonic, and giving it an endearing and personal twist. I’ll be introducing my beloved dog, Simba, into the world of gaming.” Simba’s Pawtastic Adventure” centers around Simba’s quest to gather delicious treats and his favorite toys as he embarks on a journey to find his way back home to his family. Simba will journey through enchanting landscapes while avoiding obstacles like puddles, bushes and other obstacles.

Gameplay Overview:

• Character: Simba, the adorable and loyal dog with a heart full of love and a tummy full of treats to collect.
• Objective: Accompany Simba through a whimsical world filled with colorful landscapes while gathering his favorite treats and toys.
• Obstacles: Simba must navigate around playful puddles, fluffy bushes and other challenges.
• Homecoming: The ultimate goal is to reunite Simba with his family, making it a heartwarming experience for players.
• Scoring: Players earn pawprints as they collect Simba’s treasures, with bonus pawprints for completing levels fast.
• Feedback: Adorable animations and joyful sounds upon collecting items, plus a heartwarming “Family Reunion” animation when Simba finds his family.

With Simba’s Pawtastic Adventure, my aim is to not only transport players back to the  days of playing online games but also envelop them in a world filled with the purest form of love and warmth – the love between a furry friend and their family.

While I haven’t started coding the game yet, I anticipate challenges in achieving smooth and responsive movement for Simba, especially when it comes to jumping and implementing gravity in a way that feels natural. Additionally, handling collision detection with obstacles and surfaces may prove to be complex. To overcome these challenges, I intend to break down the game development process into smaller, manageable sections. By tackling smaller chunks of the game at a time, I can focus on refining specific aspects without feeling overwhelmed by the complexity of the entire project.

The reading delves into the realm of computer vision, a technology that enables computers to comprehend images and videos. It discusses a significant transformation: how computer vision has evolved into a field that is now accessible to anyone. This transformation has been facilitated by the development of new tools, the emergence of open-source communities where people freely share their work and the availability of more affordable video equipment. In the past, computer vision was highly complex and primarily reserved for experts, but today, it is a resource that regular individuals, including students and artists, can leverage to accomplish exciting projects.

One project discussed in the reading that stood out for me  is “Videoplace,” an interactive art installation developed by Myron Krueger between 1969 and 1975. In this installation, a participant stands before a backlit wall functioning as a projection screen. The system digitizes the participant’s silhouette and analyzes their real-time posture, shape and gestures. What’s striking is how this technology was conceived and implemented decades ago when our technological capabilities were far less advanced. It serves as a precursor to contemporary innovations like facial recognition in Apple iPhones.

We are currently observing a growing incorporation of computer vision in interactive art installations and diverse applications. Computer vision has become increasingly accessible and smoothly integrated into our everyday routines, elevating a broad spectrum of functionalities beyond the realm of art. These encompass healthcare, transportation, security and entertainment, signifying its pivotal role in our contemporary existence.

 

In this chapter, Norman emphasizes the importance of clear and effective design in enhancing user understanding and interaction with a wide range of products, systems and environments. He highlights the immense significance of crafting designs that not only look appealing but are also intuitive, user-friendly and aligned with human behavior and capabilities.

In today’s rapidly evolving technological landscape, it becomes essential to prioritize effective design. We seek natural and frustration-free interactions with machines. No matter how technologically advanced a product may be, its true value lies in its user-friendliness.

The reading reminded me of my freshman year when I had to do laundry for the first time. The different settings left me so confused and frustrated that I left the laundry room altogether, and then I had a friend come in who helped me. It is a stark reminder of how we crave simplicity and intuitive design in our daily interactions.

The reading also raised a question for me: How can we ensure that as emerging technologies push the boundaries of advancement, they do not compromise on user-friendliness? Striking a balance between innovation and usability becomes paramount in an era where the rate of technological change is relentless.

For this assignment, I opted to create a rainfall data visualization for my hometown, Islamabad. The motivation behind this choice was because it serves as a nostalgic reminder of the lush, rainy climate in Islamabad, which I truly miss in contrast to the super hot weather here in Abu Dhabi.

Initially, I began with a simple bar chart. However, during my research on data visualization techniques, I stumbled upon Chart.js, which I decided to incorporate into my assignment due to its ability to provide a visually engaging representation of the data. I sourced my dataset from Kaggle, which contained various columns related to weather, including minimum and maximum temperatures. However, I chose to focus solely on the column that documented the maximum monthly rainfall in Islamabad.

Here’s how my barchart looks like:

Working with the dataset was relatively straightforward, as I had prior experience working with CSV files. One aspect of my code that I particularly like is the part dedicated to visualizations.

function createChart() {
  let options = {
    type: 'bar',
    data: {
      labels: months,
      datasets: [
        {
          backgroundColor: originalColor, // Set original color
          borderColor: 'rgb(0, 50, 100)',
          borderWidth: 2,
          barPercentage: 1,
          data: rainfallData,
          label: 'Monthly Heaviest Rainfall (mm)',
        },
      ],
    },
    options: {
      title: {
        display: true,
        text: title,
      },
      legend: {
        display: false,
      },
      scales: {
        xAxes: [
          {
            ticks: {
              autoSkip: false, // Prevent auto-rotation
              maxRotation: 0, // Set rotation angle to 0 degrees (horizontal)
              minRotation: 0, // Set rotation angle to 0 degrees (horizontal)
              fontSize: 8, // Adjust the font size of x-axis labels
            },
            categorySpacing: 40, // Increase the spacing between category (label) items
          },
        ],
        yAxes: [
          {
            scaleLabel: {
              display: true,
              labelString: 'Monthly Heaviest Rainfall (mm)',
            },
          },
        ],
      },
   
        }
      },

I’m pleased with the feature that displays the corresponding rainfall value when hovering over each bar. This functionality simplifies the process of interpreting the chart, eliminating the need to constantly refer to the x and y axes.

Overall, I’m satisfied with how this assignment turned out. However, in future projects, I’d like to incorporate more interactivity to make the visualization more engaging and enjoyable for users.

I found the reading to be quite intriguing as it prompted me to think what interactivity really is, a concept I had not given much thought to previously. Crawford’s definition of interactivity, drawing parallels with the dynamics of a meaningful conversation – involving listening, thinking and speaking – resonated with me. Throughout most of the reading, I found myself in agreement with his perspective on interactivity in various contexts.

However, I didn’t quite agree with Crawford when it came to his perspective on movies. He appeared to suggest that movies, inherently, lack interactivity. This reminded me of “Bandersnatch” a movie on Netflix that challenges this notion. In this movie, we as viewers have the opportunity to make choices for the characters, and the storyline changes depending on these choices.

Thinking about it a bit more, this difference in opinion really makes me wonder how media and storytelling are evolving. Traditional movies tend to stick to a linear plot, but “Bandersnatch” blurs the line between cinema and interactive storytelling, challenging our old-school idea of how movies work.

 It’s clear that interactivity is changing and adapting to new technology. We, as consumers, want more immersive and hands-on experiences in our media. While Crawford’s view has its merits, it might need a bit of an update to include these exciting, new forms of interactive storytelling that are turning our passive media consumption into an interactive adventure.

For this assignment, I initially knew I wanted to create something that captured the essence of the night sky and stars, as I’ve always found it incredibly captivating. However, I was unsure of the specific visual direction I wanted to take. It was during this contemplation that my friend coincidentally shared a comic strip featuring aliens, which instantly sparked my imagination. I thought, “Why not incorporate an alien spaceship into this assignment?”

Inspiration:

As I sketched the alien character, he naturally became a “Ben” in my mind, so I decided to call this “Ben’s Late Night Sky Chromatics”.

The part of the code that I’m most proud of is the spaceship class.

//spaceship 
class Spaceship {
  constructor(x, y, bodyWidth, bodyHeight, cockpitWidth, cockpitHeight) {
    this.x = x;
    this.y = y;
    this.bodyWidth = bodyWidth;
    this.bodyHeight = bodyHeight;
    this.cockpitWidth = cockpitWidth;
    this.cockpitHeight = cockpitHeight;
    this.speed = 6; //initial speed
  }

  update() {
    this.x += this.speed; //spaceship moving across the screen

    if (this.x > width + 50) {
      this.x = -50; //continuous and seamless movement of the spaceship across the screen 
    }

    laserX = this.x;//laser moving with the spaceship
  }

  display() {
    //spaceship's body
    fill(240, 55, 55); 
    stroke(0); 
    strokeWeight(2);
    ellipse(this.x, this.y, this.bodyWidth, this.bodyHeight);

    //lights on the spaceship's body
    fill(222, 209, 29);
    circle(this.x - 16, this.y + 5, 5);
    circle(this.x, this.y + 11, 5);
    circle(this.x + 16, this.y + 5, 5);

    //cockpit
    fill(255); 
    ellipse(this.x, this.y - 20, this.cockpitWidth, this.cockpitHeight);

    //alien
    fill(69, 163, 94); 
    circle(this.x, this.y - 14, 25); //alien head
    fill(255);
    circle(this.x - 6, this.y - 15, 1); //alien eyes
    circle(this.x + 6, this.y - 15, 1);// alien eyes
    noFill();
    arc(this.x, this.y - 7, 10, 5, 0, PI); //alien mouth

    //alien ears 
    fill(0);
    line(this.x - 14, this.y - 26, this.x - 10, this.y - 10); 
    circle(this.x - 14, this.y - 26, 2);//left ear
    line(this.x + 14, this.y - 26, this.x + 10, this.y - 10); 
    circle(this.x + 14, this.y - 26, 2);//right ear

    //spaceship legs
    fill(255); 
    triangle(this.x - 47, this.y + 41, this.x - 35, this.y + 18, this.x - 30, this.y + 20); //left leg
    triangle(this.x + 46, this.y + 41, this.x + 30, this.y + 21, this.x + 35, this.y + 19); //right leg
  }
}


//mouse click to randomly change laser beam color
function mousePressed() {
  const randomIndex = int(random(colors.length)); //picking random index within the array of the laser beam color
  laserColor = colors[randomIndex]; //randomly selected color for the laser beam
}

Designing the spaceship and getting all the values just right was a bit challenging. I started by sketching the spaceship and the night sky background separately, and then I had to merge them, which required a bit of trial and error. However, after a few hours of tweaking, I managed to create a spaceship that I was pleased with. I love the way the spaceship itself and Ben turned out, as well as a bit of interactivity in how the spaceship’s beam changes color upon clicking. Despite its simplicity, I also like the part of code that randomizes the positions of the stars each time the sketch starts. I like how this subtle feature adds an element of unpredictability and liveliness to the scene.

As for future improvements, I’d like to consider adding more spaceships and perhaps introducing some of Ben’s friends to make the scene even more engaging and cute. However, overall, I’m satisfied with how this assignment has turned out so far.

 

As a Computer Science major, watching Casey Reas’s presentation on “Chance Operations” was truly enlightening. I had always perceived code as a rigid and entirely controllable entity, firmly rooted in rational decisions and binary logic. However, Reas’s perspective on blending randomness and algorithmic control to yield surprising results challenged this notion.

A particularly captivating idea he presented was “Fractal Invaders,” where artist intentionally incorporate controlled randomness into their work, much like the unpredictable outcomes of a coin toss or a roll of the dice. This controlled randomness made each version of the artwork unique and unpredictable.

Moreover, he emphasized upon the power of symmetry in his creative process. He highlighted that even in compositions that initially arose from randomness, the introduction of symmetry could instill a sense of order and familiarity. It struck me that as humans, we possess an inherent tendency to seek patterns and meaning within chaos. Our brains are wired to identify recognizable shapes and forms, and this inclination even extends to our perception of generative art.

All in all, the process of merging randomness with symmetry in generative art is fascinating because it explores how our minds work creatively. It shows that complexity can come from simplicity and that order and chaos can coexist. This artistic process invites us to contemplate the human mind’s innate desire to discover patterns and meaning in the world, ultimately pushing the boundaries of creative expression.

 

For this assignment, I drew inspiration from Casey Reas, who delved into the realm of randomness in his artistic endeavors. What has always fascinated me about art is that there’s no single “correct” way to perceive it. So, I set out to create something that generates different results based on user interaction. I designed squares with circles inside them, and these circles change in size as the user hovers their mouse over the squares. This introduces an element of unpredictability and variability into the creative process, echoing Casey Reas’s exploration of randomness.

The part of code that I like is this:

In this section, when the mouse hovers over a square, it dynamically adjusts the size of the associated circle according to specific conditions. This results in a captivating pulsating effect for the circles when users interact with the squares. What makes this fascinating is that each person’s experience will yield a different pattern based on where and how long they hover their mouse.

I found this assignment to be a delightful exploration. It prompted me to view art and generative art from a fresh perspective, highlighting that even within randomness, there exists an underlying sense of pattern. It’s as if the elements of chance and algorithms are working together to create a structured yet ever-evolving composition.

 

For this assignment, the task was to create a self-portrait, and I’ll admit I’m someone who can’t draw at all. So, I approached this assignment with a mixture of excitement and nervousness and I decided to keep my self-portrait simple yet cute, which I hope would come across effectively.

I began by sketching the outline for the head and hair. It started off decently, but I faced significant challenges when it came to layering various shapes to achieve the correct hair texture. After a few tries, I eventually managed to get it  right.

So initially this is how my portrait looked like

And this is what my final portrait looks like

As I mentioned before, I take pride in the part of the code that allowed me to create the hair, even though it might not be particularly intricate. The layering aspect was a challenging but rewarding aspect of this assignment.

Working on this project was a delightful experience because it made me realize that while I might struggle with drawing on paper, I can create something visually appealing using Processing. I particularly enjoyed adding interactivity to my portrait, as I believe it adds an interesting dimension to the work. While I am satisfied with my final submission, there are a few areas I would like to improve upon. One of them is creating a more detailed body for my self-portrait since I kept it relatively simple this time.