Week 9_Creative Switch – Jihad Jammal

Concept:

The requirement was clear: devise an alternative that bypasses the conventional hand-operated mechanism. Recognizing that our feet are just as capable when it comes to applying force in a precise manner—much like how we use them to operate pedals in a car—I decided to explore this avenue. I constructed a prototype using cardboard for the pedal, taking advantage of its availability and ease of manipulation, and copper for its conductive properties, essential for transferring the switch’s command.

A highlight of some code that you’re particularly proud of:

const int ledPin = 13; // LED connected to digital pin 13
const int touchSensorPin = 2; // Touch sensor (white wires) connected to digital pin 2

void setup() {
  pinMode(ledPin, OUTPUT); // Set the LED pin as output
  pinMode(touchSensorPin, INPUT_PULLUP); // Set the touch sensor pin as input with internal pull-up resistor
}

void loop() {
  // Check if touch sensor is touched (wires are connected)
  if (digitalRead(touchSensorPin) == LOW) {
    digitalWrite(ledPin, HIGH); // Turn on the LED
  } else {
    digitalWrite(ledPin, LOW); // Turn off the LED
  }
}

Video of Project:

Reflection and ideas for future work or improvements:

Reflecting on the process of creating my foot-operated light switch, I initially envisioned using aluminum for its excellent conductivity and lightweight properties. However, practical limitations often steer the course of innovation, and this project was no exception. With aluminum out of reach, I adapted to the materials available to me, selecting copper tape as a suitable alternative. This choice was not without its merits; copper’s conductivity is remarkable, and its flexibility proved invaluable during the assembly process.

The simplicity of the code was my saving grace, making the integration of electrical components less daunting than anticipated. Yet, every project presents its challenges. One such challenge was securing the wires in such a manner that they consistently made contact with the copper tape. Due to their placement, there were occasions when the connection was missed, disrupting the switch’s functionality. I recognized that increasing the copper tape’s surface area could potentially mitigate this issue, providing a more forgiving target for the wires to connect with.

 

Week 8A Reading Response – Jihad Jammal

Jihad Jammal

Intro to IM

Professor Aaron Sherwood

Reading Reflection Week 8A

March. 26, 2024

 

Response #1: Her Code Got Humans on the Moon

The essence of innovation, as illustrated by Margaret Hamilton’s story, pushes us to reconsider our perception of technological achievements. Hamilton’s legacy embodies the reality that groundbreaking advancements are often the culmination of relentless, behind-the-scenes effort rather than just celebrated moments of success. Her contributions, critical yet initially overshadowed by the astronauts’ lunar feats, prompt a deeper reflection on how we recognize and value the architects of progress. This perspective challenges the prevailing narrative that often glorifies the end result while glossing over the intricate processes and individuals essential to these achievements.

 

This narrative invites us to search for the ‘Margaret Hamiltons’ of our current era, whose pivotal work may be lurking in the shadows, unrecognized due to prevailing biases or the allure of more sensational accomplishments. It raises pertinent questions about the criteria we use to evaluate and celebrate innovation. Are we too focused on the visible peaks of success, neglecting the vast contributions that form the foundation of these achievements? The persistent gender gap in technology further complicates this discourse, suggesting that the undervaluing of foundational work might not just be a matter of oversight but also of systemic undervaluation of contributions from diverse voices. Hamilton’s story, therefore, not only highlights the need for a broader appreciation of the many facets of innovation but also calls for a more inclusive recognition of who gets to be celebrated as innovators.

 

 

Response #2: Attractive things work better

It’s clear that there’s a deep relationship between how things are designed and how we feel about them. The idea that well-made objects have the power to arouse happy emotions raises the possibility that great design is about more than just functionality—it’s also about appealing to our sense of beauty and wellbeing. My viewpoint has been expanded by this investigation into design philosophy, which shows that good design is more than just functional—it also has an emotional component that improves our day-to-day existence. It offers a vision for the direction of design, one that seeks to improve our lives by skillfully fusing beauty and functionality rather than just satisfying the most fundamental functional needs. This growing knowledge highlights the transformative potential of design, emphasizing its ability to improve the quality of our daily interactions by carefully balancing form and function in addition to solving practical issues.

 

Citations:

Norman, D. (2002). Emotion & Design: Attractive Things Work Better. Interactions Magazine, 9, 36–42. https://doi.org/10.1145/543434.543435

McMillan, R. (n.d.). Her Code Got Humans on the Moon—And Invented Software Itself. Wired. Retrieved March 26, 2024, from https://www.wired.com/2015/10/margaret-hamilton-nasa-apollo/

Midterm Project Presentation/Documentation – Jihad Jammal

Concept:

Taking a fresh and creative approach to the beloved Snake game format, my concept introduces players to a comically troublesome dog, embarking on a homework-eating spree. This idea reinvents the classic game mechanic, where instead of a snake that grows with each item consumed, we have a dog that enlarges with every piece of homework it swallows. This creative twist not only injects a dose of humor into the gameplay but also layers in strategic depth and a ticking clock element, with a 30-second time limit creating a sense of urgency.

The concept of this game particularly appeals to me due to my personal fascination with those almost mythical stories we’ve all heard growing up—tales of pets, especially dogs, eating homework and becoming the convenient scapegoat for undone assignments. There’s something universally relatable and humorously nostalgic about the idea, regardless of how fanciful these excuses might have seemed. I was inspired to bring these whimsical narratives to life through gameplay, transforming an age-old excuse into an interactive and entertaining experience.

By integrating this playful storyline with the mechanics of the growing dog within a limited timeframe, I aim to capture not just the essence of these stories but also their inherent humor and the frantic, often comical, attempts to salvage what’s left of the homework before it’s too late. It’s a nod to those shared experiences, a blend of reality and exaggeration, that many of us can chuckle at in hindsight.

Embed sketch:

Include code snippets and one or more images

 

function draw() {
    switch (gameState) {
        case "start":
            drawStartScreen();
            break;
        case "play":
        // Start the looped sound if it's not already playing and the game state just switched to "play"
      if (!gameLoopSound.isPlaying()) {
        gameLoopSound.loop();
        gameLoopSound.setVolume(0.5); // Set volume to 50%
      }
            drawPlayScreen();
            // Calculate time left here
            let timePassed = (millis() - timerStartTime) / 1000;
            let timeLeft = max(30 - timePassed, 0);
            
            // Display the timer
            fill(0);
            noStroke();
            textSize(16);
            textAlign(RIGHT, BOTTOM);
            text("Time left: " + timeLeft.toFixed(1), width - 10, height - 10);

            if (timeLeft <= 0) {
                gameState = "gameover";
              if (gameLoopSound.isPlaying()) {
          gameLoopSound.stop();
        }
            }

            // Check if the dog collides with the square and handle scoring
            checkCollisionsAndScore();

            // Display the current score
            displayScore();

            // Handle player movement
            handleMovement();
            break;
        case "instructions":
            drawInstructionsScreen();
            break;
        case "credits":
            drawCreditsScreen();
            break;
        case "gameover":
            drawGameOverScreen();
            break;
    }
}

 

 

Describe how your project works and what parts you’re proud of (e.g. good technical decisions, good game design):

My approach to this project was focused on crafting an engaging and enjoyable game loop that balanced challenge and playability. I was acutely aware that the dog’s speed couldn’t start off too fast, as this would alienate new players, nor could it become too slow as the timer neared its end, as this would sap the excitement from the gameplay. Achieving this balance was critical in keeping players engaged and encouraging them to improve over time. Additionally, I aimed to create a cohesive and immersive game environment. From the main menu’s view of the backyard to the transition into a bird’s-eye view of the entire backyard upon starting the game, players are drawn into a world that feels both expansive and detailed. This seamless movement into the game’s space was designed to make players feel as if they’ve stepped into the backyard themselves, observing the chaos from above.

Furthermore, I’m particularly proud of how I tackled the game’s technical and design challenges. After some experimentation, I managed to modularize many of the game’s features, breaking them down into separate functions that could be easily managed and updated. This was a significant departure from my initial approach, which had all the functionalities crammed into the draw function—a classic case of spaghetti code. This early version was overwhelming and led to analysis paralysis, making debugging a tedious chore. However, by compartmentalizing these features, I not only streamlined the development process but also significantly improved the game’s performance and my ability to debug and expand on the game. This decision towards modular design has been a game-changer, allowing for cleaner code, easier maintenance, and the flexibility to add new features or tweak existing ones with minimal hassle. It’s a technical achievement that has had a profound impact on both the development experience and the overall quality of the game.

Below is some of the modularized code:

function displayGameInfo() {
    let timePassed = (millis() - timerStartTime) / 1000;
    let timeLeft = max(30 - timePassed, 0);
    fill(0);
    noStroke();
    textSize(16);
    textAlign(RIGHT, BOTTOM);
    text("Time left: " + timeLeft.toFixed(1), width - 10, height - 10);

    checkCollisionsAndScore();
    displayScore();
    handleMovement();
}

function checkCollisionsAndScore() {
let hit = rectRectCollision(dog.x - dog.img.width / 2 * dog.scale, dog.y - dog.img.height / 2 * dog.scale, dog.img.width * dog.scale, dog.img.height * dog.scale, whiteSquare.x, whiteSquare.y, whiteSquare.size, whiteSquare.size);
  if (hit) {
    dog.growAndSlow();
    whiteSquare.respawn();
    score++;

    // Play collision sound at 30% volume
    collisionSound.setVolume(0.3); // Set volume to 30%
    collisionSound.play();
  }
}

function displayScore() {
    fill(0);
    stroke(255);
    strokeWeight(2);
    textSize(16);
    textAlign(RIGHT, TOP);
    text("Score: " + score, width - 10, 10);
}

function handleMovement() {
    if (keyIsDown(LEFT_ARROW)) dog.move(-1, 0);
    if (keyIsDown(RIGHT_ARROW)) dog.move(1, 0);
    if (keyIsDown(UP_ARROW)) dog.move(0, -1);
    if (keyIsDown(DOWN_ARROW)) dog.move(0, 1);
}

function draw() {
    switch (gameState) {
        case "start":
            drawStartScreen();
            break;
        case "play":
        // Start the looped sound if it's not already playing and the game state just switched to "play"
      if (!gameLoopSound.isPlaying()) {
        gameLoopSound.loop();
        gameLoopSound.setVolume(0.5); // Set volume to 50%
      }
            drawPlayScreen();
            // Calculate time left here
            let timePassed = (millis() - timerStartTime) / 1000;
            let timeLeft = max(30 - timePassed, 0);
            
            // Display the timer
            fill(0);
            noStroke();
            textSize(16);
            textAlign(RIGHT, BOTTOM);
            text("Time left: " + timeLeft.toFixed(1), width - 10, height - 10);

            if (timeLeft <= 0) {
                gameState = "gameover";
              if (gameLoopSound.isPlaying()) {
          gameLoopSound.stop();
        }
            }

            // Check if the dog collides with the square and handle scoring
            checkCollisionsAndScore();

            // Display the current score
            displayScore();

            // Handle player movement
            handleMovement();
            break;
        case "instructions":
            drawInstructionsScreen();
            break;
        case "credits":
            drawCreditsScreen();
            break;
        case "gameover":
            drawGameOverScreen();
            break;
    }
}

 

Describe some areas for improvement and problems that you ran into (resolved or otherwise):

Reflecting on the project, I see a few avenues for enhancement that could elevate the gameplay experience and address some challenges encountered along the way. In future iterations, I’d love to delve deeper into refining the game’s core loop. Introducing an in-game store where players can buy stat or ability upgrades seems like an exciting direction. Coupling this with the addition of random power-ups, like speed boosts, time extensions, and score multipliers appearing throughout the 30-second gameplay window, would inject more depth and variability into the strategies players might employ. Given the tight time frame players are working with, these elements could introduce pivotal decision-making moments that are both thrilling and consequential, potentially transforming an average round into an extraordinary one.

On the technical side, one particular hurdle I had to navigate involved the game’s scalability, specifically related to the dog’s growing image. As the dog expanded, it reached a point where it would cause the site or the p5.js environment to crash. Despite my efforts, pinning down the precise cause was challenging, leading me to theorize that it stemmed from an excessive strain on resources at any given moment. Under the pressure of deadlines, I opted for a temporary workaround by imposing a maximum size limit on the dog’s growth. This solution, while effective in preventing crashes, is admittedly more of a band-aid than a cure. Moving forward, dedicating time to resolve this issue comprehensively would not only enhance performance but also ensure that the gameplay’s immersive experience remains uninterrupted and fluid for all players.

Credits:

Sounds:

  • https://pixabay.com/sound-effects/dog-barking-70772/
  • https://pixabay.com/sound-effects/crunchy-paper-33625/
  • https://pixabay.com/sound-effects/merx-market-song-33936/

Art:

  • https://www.freepik.com/free-vector/sticker-template-dog-cartoon-character_20496955.htm#fromView=search&page=1&position=44&uuid=59df1125-5f43-4d72-9319-72464f25d11c
  • https://www.pinterest.com/pin/4433299622478035/
  • https://www.freepik.com/free-vector/scene-backyard-with-fence_24552372.htm
  • https://www.freepik.com/free-vector/seamless-textured-grass-natural-grass-pattern_11930799.htm#query=cartoon%20grass%20texture&position=0&from_view=keyword&track=ais&uuid=7951681d-d20d-4bad-8ce4-d50239a26e77

Code Assistance:

Chatgpt – https://chat.openai.com/

 

Full Code:

let dog; // This will be an instance of MovableImage
let bgImage; // This variable will hold your background image
let startScreenImage; // This variable will hold your start screen image
let gameState = "start"; // "start" for the start screen, "play" for the gameplay
let whiteSquare; // Instance of WhiteSquare
let customFont; // Variable for the custom font
let score = 0; // Tracks the number of times the dog collides with the white square
let hwImage; // This will hold the image of the homework paper
let timerStartTime;
// Global variables for button dimensions
let buttonWidth = 100;
let buttonHeight = 40;
let gameLoopSound;
let collisionSound;


class WhiteSquare {
constructor() {
    this.size = 50; // This can be adjusted based on the actual size of your image
    this.x = 0;
    this.y = 0;
    this.respawn();
  }

  display() {
    // Use the homework image instead of a white rectangle
    image(hwImage, this.x, this.y, this.size, this.size);
  }

  respawn() {
    // Cap the additional distance increase once the score reaches 32
    let cappedScore = Math.min(score, 32);
    let additionalDistance = cappedScore * 5; // The distance increase caps when the score reaches 32
    let minDistance = 100 + additionalDistance; // Base min distance + additional based on capped score

    // Attempt to respawn the square until it's far enough from the dog
    do {
      this.x = random(this.size, width - this.size);
      this.y = random(this.size, height - this.size);
    } while (this.isTooCloseToDog(minDistance));
  }

  isTooCloseToDog(minDistance) {
    if (dog && dog.x !== undefined && dog.y !== undefined) {
      let distance = dist(this.x, this.y, dog.x, dog.y);
      return distance < minDistance;
    }
    return false; // Default to false if dog is not initialized
  }
}


class MovableImage {
  constructor(image, x, y, scale = 1) {
    this.img = image;
    this.x = x;
    this.y = y;
    this.scale = scale; // Added a scale property
    this.speed = 5; // Initial speed - starting with a reasonable speed
  }

  display() {
    // Check if the image is within the bounds of the canvas
    this.x = constrain(this.x, 0, width);
    this.y = constrain(this.y, 0, height);
    
    push();
    translate(this.x, this.y);
    scale(this.scale); // Apply the scaling factor
    image(this.img, 0, 0);
    pop();
  }

  move(stepX, stepY) {
    this.x += stepX * this.speed;
    this.y += stepY * this.speed;
  }

  // Function to set the scale and adjust speed
 growAndSlow() {
   
const maxScale = 0.25; // Adjust this value as needed for balance and performance

  // Only grow if below the maximum scale limit
  if (this.scale < maxScale) {
    this.scale *= 1.025; // Grow by 2.5%
  }

    // Only reduce speed if the score is less than 13
    if (score < 13) {
      this.speed = max(1, this.speed * 0.95); // Reduce speed by 5%, no less than 1
    }
 }

}

function preload() {
  dogImage = loadImage('images/dog1.png');
  bgImage = loadImage('background2.jpg');
  startScreenImage = loadImage('backyard.jpeg');
  customFont = loadFont('MadimiOne-Regular.ttf'); // Load the custom font
  hwImage = loadImage('HW.png'); // Load the image of the homework paper
  buttonSound = loadSound('woof.mp3'); // Make sure the path to your mp3 is correct
    gameLoopSound = loadSound('game_loop_2.mp3'); // Adjust path as needed
    collisionSound = loadSound('paper.mp3'); // Adjust path as needed




}

function setup() {
  createCanvas(400, 400);
  dog = new MovableImage(dogImage, width / 2, height / 2, 0.009);
  whiteSquare = new WhiteSquare();

  imageMode(CENTER);
  textFont(customFont); // Set the custom font for all text
  
  
  // Define button properties
  buttonWidth = 100;
  buttonHeight = 40;
  restartButtonX = width / 2 - buttonWidth / 2;
  restartButtonY = height / 2 + 20;
  menuButtonX = width / 2 - buttonWidth / 2;
  menuButtonY = height / 2 + 70; // Positioned below the restart button

}

function rectRectCollision(x1, y1, w1, h1, x2, y2, w2, h2) {
  return x1 < x2 + w2 &&
         x1 + w1 > x2 &&
         y1 < y2 + h2 &&
         y1 + h1 > y2;
}

function isMouseOverButton(x, y) {
  return mouseX >= x && mouseX <= x + buttonWidth &&
         mouseY >= y && mouseY <= y + buttonHeight;
}

function drawButton(label, x, y) {
  fill(100); // Button color
  stroke(0); // Button outline color
  strokeWeight(2); // Button outline weight
  rect(x, y, buttonWidth, buttonHeight, 5); // Draw the button with rounded corners
  noStroke(); // Disable outline for the text
  fill(255); // Text color
  textSize(16); // Text size
  textAlign(CENTER, CENTER);
  text(label, x + buttonWidth / 2, y + buttonHeight / 2); // Draw the text centered on the button
}

function mousePressed() {
    let playButtonX = width / 2 - buttonWidth / 2;
    let playButtonY = height / 2 + 20;
    let instructionsButtonX = width / 2 - buttonWidth / 2;
    let instructionsButtonY = playButtonY + 70; // Positioned below the "Play" button
    let creditsButtonX = width / 2 - buttonWidth / 2;
    let creditsButtonY = instructionsButtonY + 50; // Positioned below the "Instructions" button

    if (gameState === "start") {
        if (isMouseOverButton(playButtonX, playButtonY)) {
            gameState = "play";
            timerStartTime = millis();
            score = 0;
            dog = new MovableImage(dogImage, width / 2, height / 2, 0.009);
            whiteSquare = new WhiteSquare();
        } else if (isMouseOverButton(instructionsButtonX, instructionsButtonY)) {
            gameState = "instructions";
        } else if (isMouseOverButton(creditsButtonX, creditsButtonY)) {
            gameState = "credits";
        }
    } else if ((gameState === "instructions" || gameState === "credits") && isMouseOverButton(menuButtonX, menuButtonY)) {
        gameState = "start";
    } else if (gameState === "gameover") {
        if (isMouseOverButton(menuButtonX, menuButtonY)) {
            gameState = "start";
        }
        let restartButtonX = width / 2 - buttonWidth / 2;
        let restartButtonY = playButtonY;
        if (isMouseOverButton(restartButtonX, restartButtonY)) {
            gameState = "play";
            timerStartTime = millis();
            score = 0;
            dog = new MovableImage(dogImage, width / 2, height / 2, 0.009);
            whiteSquare = new WhiteSquare();
        }
    }
    if (isMouseOverButton(playButtonX, playButtonY) || 
      isMouseOverButton(instructionsButtonX, instructionsButtonY) || 
      isMouseOverButton(creditsButtonX, creditsButtonY) || 
      isMouseOverButton(menuButtonX, menuButtonY) || 
      isMouseOverButton(restartButtonX, restartButtonY)) {
    buttonSound.play();
  }
}

function drawGameOverScreen() {
  background(0); // You can change the background color
  fill(255);
  textSize(32);
  textAlign(CENTER, CENTER);
  text("Game Over!", width / 2, height / 2 - 60);
  textSize(24);
  text("Your Score: " + score, width / 2, height / 2 - 20);
  

  // Draw the "Main Menu" button
  drawButton("Main Menu", menuButtonX, menuButtonY);
  
    // Draw the "Restart" button
  drawButton("Restart", restartButtonX, restartButtonY);
}


// Global variables for new button positions (adjust the Y positions as needed)
let instructionsButtonY = 267.5; // Positioned below the "Play" button
let creditsButtonY = 315; // Positioned below the "Instructions" button

function drawBackgroundAndTitle() {
    image(startScreenImage, 200, 200, width, height); // Repeated background and title setup
    textSize(30);
    textAlign(CENTER, CENTER);
    stroke(0); // Black outline
    strokeWeight(4); // Thickness of the outline
    fill(255); // White fill for the text
    text("The Dog ate my Homework!", width / 2, height / 2 - 20);
}

function drawStartScreen() {
    drawBackgroundAndTitle();
    drawButton("Instructions", width / 2 - buttonWidth / 2, instructionsButtonY);
    drawButton("Credits", width / 2 - buttonWidth / 2, creditsButtonY);
    drawButton("Play", width / 2 - buttonWidth / 2, height / 2 + 20);
}

function drawPlayScreen() {
    image(bgImage, 200, 200, width, height);
    dog.display();
    whiteSquare.display();
    displayGameInfo();
}

function drawInstructionsScreen() {
    image(startScreenImage, 200, 200, width, height); // Repeated background and title setup
    fill(255);
    textSize(16);
    stroke(0); // Black outline
    strokeWeight(4); // Thickness of the outline
    textAlign(CENTER, CENTER);
    text("The aim of the game is to eat as much of your owner's homework in 30 seconds before you get caught. Use the arrow keys to move around.", width / 8, height / 5, 300, 200); // Adjust the box size if needed
    drawButton("Main Menu", menuButtonX, menuButtonY);
}

function drawCreditsScreen() {
   image(startScreenImage, 200, 200, width, height); // Repeated background and title setup
    fill(255);
    textSize(16);
    stroke(0); // Black outline
    strokeWeight(4); // Thickness of the outline
    textAlign(CENTER, CENTER);
    text("Credits:\nGame Design: Jihad\nProgramming: Jihad, Chatgpt \nArtwork: brgfx, babysofja  \nSound: Pixabay",
      width / 8, height / 5, 300, 200); // The text box's width and height
    drawButton("Main Menu", menuButtonX, menuButtonY); // Adjust the Y position to place it below the credits text
}


function displayGameInfo() {
    let timePassed = (millis() - timerStartTime) / 1000;
    let timeLeft = max(30 - timePassed, 0);
    fill(0);
    noStroke();
    textSize(16);
    textAlign(RIGHT, BOTTOM);
    text("Time left: " + timeLeft.toFixed(1), width - 10, height - 10);

    checkCollisionsAndScore();
    displayScore();
    handleMovement();
}

function checkCollisionsAndScore() {
let hit = rectRectCollision(dog.x - dog.img.width / 2 * dog.scale, dog.y - dog.img.height / 2 * dog.scale, dog.img.width * dog.scale, dog.img.height * dog.scale, whiteSquare.x, whiteSquare.y, whiteSquare.size, whiteSquare.size);
  if (hit) {
    dog.growAndSlow();
    whiteSquare.respawn();
    score++;

    // Play collision sound at 30% volume
    collisionSound.setVolume(0.3); // Set volume to 30%
    collisionSound.play();
  }
}

function displayScore() {
    fill(0);
    stroke(255);
    strokeWeight(2);
    textSize(16);
    textAlign(RIGHT, TOP);
    text("Score: " + score, width - 10, 10);
}

function handleMovement() {
    if (keyIsDown(LEFT_ARROW)) dog.move(-1, 0);
    if (keyIsDown(RIGHT_ARROW)) dog.move(1, 0);
    if (keyIsDown(UP_ARROW)) dog.move(0, -1);
    if (keyIsDown(DOWN_ARROW)) dog.move(0, 1);
}

function draw() {
    switch (gameState) {
        case "start":
            drawStartScreen();
            break;
        case "play":
        // Start the looped sound if it's not already playing and the game state just switched to "play"
      if (!gameLoopSound.isPlaying()) {
        gameLoopSound.loop();
        gameLoopSound.setVolume(0.5); // Set volume to 50%
      }
            drawPlayScreen();
            // Calculate time left here
            let timePassed = (millis() - timerStartTime) / 1000;
            let timeLeft = max(30 - timePassed, 0);
            
            // Display the timer
            fill(0);
            noStroke();
            textSize(16);
            textAlign(RIGHT, BOTTOM);
            text("Time left: " + timeLeft.toFixed(1), width - 10, height - 10);

            if (timeLeft <= 0) {
                gameState = "gameover";
              if (gameLoopSound.isPlaying()) {
          gameLoopSound.stop();
        }
            }

            // Check if the dog collides with the square and handle scoring
            checkCollisionsAndScore();

            // Display the current score
            displayScore();

            // Handle player movement
            handleMovement();
            break;
        case "instructions":
            drawInstructionsScreen();
            break;
        case "credits":
            drawCreditsScreen();
            break;
        case "gameover":
            drawGameOverScreen();
            break;
    }
}

 

Midterm Progress Check – Jihad Jammal

Concept:

The core idea of my game reimagines the classic mechanics of the retro game Snake, introducing a playful twist where the protagonist is a dog on a mission to eat as much homework as possible. In this game, players navigate a dog around the screen, aiming to collect and consume homework pieces scattered across the play area. Each piece of homework the dog eats not only adds points to the player’s score but also visually enlarges the dog’s face, making the game increasingly challenging and humorous as the dog’s appearance grows comically large.

To add a layer of strategy and urgency, the game is set against a ticking clock. Players must race against time, strategizing to eat as much homework as they can before the timer expires. The score is a combination of two elements: the physical size of the dog’s face, which grows with each piece of homework eaten, and a numerical value that increases with the homework consumed. This dual scoring system provides immediate visual feedback and a quantifiable measure of success, engaging players in a quest to beat their own high scores or compete with others.

A highlight of some code that you’re particularly proud of:

function drawDog(x, y) {
  push(); // Start a new drawing state
  translate(x - width / 2, y - height / 2); // Center the drawing on the dog's position
  scale(0.25)
  
  var colorW = color(255,255,255);
  var colorBL = color(0,0,0);
  var colorBR = color(160,82,45);
  var colorP = color(255,182,193);
  
  // Ears
  push();
  noStroke();
  fill(colorBR); 
    // Right ear
    rotate(-PI/2.2);
    translate(-400,30);
    ellipse(width/2, height/4, 150, 50);  

    // Left ear
    rotate(PI/-12);
    translate(-56,245);
    ellipse(width/2, height/4, 150, 50);
  pop();
  
  // Base
  push();
  noStroke();
  fill(colorW);
  ellipse(width/2, height/2, 200, 200)
  pop();
  
  // Mouth
  push();
  noStroke();
  fill(colorBL);
  translate(150,210);
  arc(50, 50, 80, 80, 0, HALF_PI + HALF_PI);
  pop();
  
  // Tongue
  push();
  noStroke();
  fill(colorP);
  translate(-25,65);
  rect(width/2, height/2, 50, 35, 20)
  pop();
  
  // Tongue detail
  push();
  fill(219,112,147);
  ellipse(width/2, 277.5, 5, 25);
  stroke(125);
  pop();
  
  // Nose
  push();
  noStroke();
  fill(colorBL);
  translate(142,150);
  triangle(30, 75, 58, 100, 86, 75);
  pop();
  
  // Nose shine
  push();
  noFill();
  stroke(colorW);
  strokeWeight(2);
  noFill();
  strokeJoin(MITER);
  beginShape();
  scale(0.5, 0.5);
  translate(380,437);
  vertex(10, 20);
  vertex(35, 20);
  endShape();
  pop();
  
  // Eyes
  push();
  noStroke();
  fill(colorBR);
  rect(220, 160, 60, 60, 20, 30, 20, 40);
  fill(colorBL);
  ellipse(250, 190, 35, 35);
  ellipse(150, 190, 35, 35);
  fill(colorW);
  ellipse(150,180,10,10);
  ellipse(250,180,10,10);
  pop();
}

 

Embedded sketch:

Reflection and ideas for future work or improvements:

Progress on the game development is quite encouraging at this point. I’ve successfully tackled the challenge of scaling the dog’s head in a way that ensures all facial features remain proportionate, regardless of its size. This was a crucial step to maintain the visual consistency and appeal of the game, ensuring that as the dog “eats” more homework and its face grows, it still looks natural and retains the humorous charm intended for the game’s design.

The next significant hurdle I’m facing involves developing a robust logic system for the game. Specifically, I need to implement a mechanism where the growth of the dog’s head is directly tied to the action of consuming homework pieces (HW) within the game. This means creating a set of rules and conditions in the game’s code that accurately tracks each piece of homework the dog eats and translates that into proportional increases in the size of the dog’s head.

Reading Response Week 6 – Jihad Jammal

Jihad Jammal

Comm Lab

Professor Aaron Sherwood

Reading Reflection Week 6

Feb. 26, 2024

 

Bridging Worlds

 

Levin’s approach to computer vision in the arts serves as a potent democratizing force, effectively breaking down barriers that have traditionally separated the realms of advanced technology and creative expression. In a field that might appear daunting due to its technical complexities, Levin’s narrative fosters an inclusive environment. By presenting computer vision as an accessible tool for artistic exploration, he invites individuals from diverse backgrounds to engage with technology in a creative context. This democratization is crucial because it empowers a wider array of voices and perspectives to contribute to the evolving dialogue between technology and art. It challenges the notion that one must have an extensive background in computer science or fine arts to participate in this innovative intersection, thus fostering a more diverse and vibrant community of creators. The implication is clear: the future of art and technology is not reserved for a select few but is an open field for exploration by anyone with curiosity and creativity.

 

Moreover, Levin delves into the ethical landscape encountered by artists who utilize this technology to craft pieces that interact with and react to human actions. Issues of privacy, consent, and surveillance emerge as critical considerations. As such the capability of computer vision to potentially breach personal spaces or to be deployed in manners that could exploit or inaccurately portray individuals warrants careful scrutiny.

 

Citations:

 

www.flong.com. (n.d.). Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers – Golan Levin and Collaborators. [online] Available at: https://www.flong.com/archive/texts/essays/essay_cvad/index.html

ASSIGNMENT: Generative text output – Jihad Jammal

Concept:

For this assignment, I aimed to capture the feeling experience of encountering a the blue screen of death (BSOD). To enhance the immersion and create a tangible sense of interaction, I introduced the interaction of th words being disrupted from there wave by your mouse. As the mouse moves across the screen, letters seem to be ripped away into a circle, creating an illusion of them swirling around the cursor. This subtle yet effective layer of interactivity I feel engages with the user in a more direct way, improving my  digital.

A highlight of some code that you’re particularly proud of:

// Calculate the necessary width for a single repetition of the text, including some spacing
let textWidthWithSpacing = textWidth(myString) + 50; // Additional spacing to ensure no overlap

// Draw the text repeatedly across the width of the canvas
for (let x = offset % textWidthWithSpacing - textWidthWithSpacing; x < width; x += textWidthWithSpacing) {
  for (let j = 0; j * lineSpacing < height; j++) {
    let yPos = j * lineSpacing; // Vertical position for each line

    for (let i = 0; i < myString.length; i++) {
      let myChar = myString.charAt(i);
      let waveTime = (frameCount + i * 10) * 0.05;
      let waveHeight = sin(waveTime) * 20; // Wave height for a pronounced effect

      // Original character positions
      let charX = x + (textWidth(myString) / myString.length) * i;
      let charY = yPos + waveHeight; // Apply wave motion

Embedded sketch:

Reflection and ideas for future work or improvements:

Reflecting on the project, I’m genuinely pleased with the outcome and the creative journey it took me on. However, if given the opportunity to revisit and refine the project, I would consider enhancing the virus aspect to make it more pronounced. This could involve more explicit visual cues or even integrating disruptive patterns that more closely mimic the erratic behavior of a computer under the influence of a malicious virus. By doing so, the piece would not only capture the viewer’s attention more forcefully but also deepen the narrative, making the experience even more memorable and impactful.

Reading Response Week 5: The Psychology of Everyday Things – Jihad Jammal

Jihad Jammal

Intro to Interactive Media

Professor Aaron Sherwood

Reading Reflection Week 5

Feb. 18, 2024

 

A Journey Through User-Centered Design

 

Reflecting on the first chapter of “The Psychology of Everyday Things” by Don Norman, it becomes evident how the intricacies of design profoundly impact our interaction with everyday objects. Norman delves into the paradox that as technology advances, intending to simplify our lives, it simultaneously introduces complexity that can hinder usability. This duality is a crucial reminder of the importance of human-centered design, which aims to make products intuitive and accessible, yet often falls short in the race towards innovation and feature enhancement.

 

Norman’s discussion about the conceptual models and the system image highlights a critical gap between designers’ intentions and users’ perceptions. It’s a compelling argument for the necessity of clear, intuitive design cues that guide users rather than confuse them. This point resonates deeply with the frustration many of us experience with modern devices, where functionality is obscured by complexity, leading to a reliance on trial and error or the dreaded instruction manual. The example of the refrigerator controls serves as a potent illustration of how misleading or inadequate system images can lead to user frustration and inefficiency, underscoring the importance of aligning the designer’s model with the user’s model through clear, intuitive design.

 

Moreover, Norman’s insights raise important questions about the responsibility of designers and manufacturers in ensuring their products enhance rather than complicate our lives. It challenges the reader to consider how products could be designed differently, with a focus on the user’s experience above all. This chapter not only changes the way one might view the objects around them but also emphasizes the role of thoughtful design in improving everyday life. It’s a call to action for designers to prioritize usability and for users to demand more intuitive products, highlighting the ongoing dialogue between design and user experience in shaping the tools of our daily lives.

 

Citations:

Norman, D.A. (2013). The design of everyday things. New York, New York: Basic Books.

 

Assignment 3 – Jihad Jammal

Concept:

 

 

Diving into this project, I was really drawn to the bright colors and the way shapes came together in those two images. It made me think about how sometimes less can be more. This idea isn’t new, but seeing it in action sparked something for me. I remembered those simple, yet catchy thumbnails on NoCopyright Sounds videos (Third Image) and wondered if I could apply the same principle. So, I decided to cut back on the clutter in my work, aiming for simplicity while still keeping it colorful and lively. It was a bit of a challenge, trying to find the right balance between too much and just enough. But in the end, it paid off. This approach helped me see my work in a new light, proving that you can make something stand out by stripping it down to its essentials. It was a great reminder that sometimes, the simplest approach can be the most effective.

A highlight of some code that you’re particularly proud of:

// Define a class for the Wiggly Circle
class WigglyCircle {
  constructor(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.time = 0; // Time property for animation
  }

Embedded sketch:

Reflection and ideas for future work or improvements:

Reflection on this assignment I would have liked adds layer of engagement, transforming the viewer’s experience from passive observation to active participation. Even with my academic commitments, I managed to experiment freely with colors and shapes, which was a liberating process.

If I were to work on this again in the future improvements, I would consider either thickening the lines to give the shapes more definition or reducing the background’s opacity to allow for a clearer view of the action on the canvas. Both adjustments aim to enhance the visual impact and ensure that the vibrancy and movement I’m striving for are fully realized.

Reading Reflection_Week 4 – Jihad Jammal

Jihad Jammal

 

Intro to IM

 

Professor Aaron Sherwood

 

Reading Reflection Week 4

 

Feb. 12, 2024

 

 

Reimagining Interactivity in the Digital Age

After reading “The Art of Interactive Design,” I find that Crawford’s definition of interactivity has a significant impact on how we use technology in our daily lives. It forces us to reevaluate not just how we create technology but also how we interact with it in our daily lives. I agree with Crawford’s focus on the conversational, cyclical aspect of engagement, which draws attention to the contrast between the promise of digital technology to foster deep human connection and the transactional, often surface-level interactions they currently encourage (Crawford, 2003). This viewpoint calls for a more deliberate use of technology, pushing us to look for and produce really engaging experiences that promote sincere communication and comprehension.

Furthermore, Crawford’s research also poses important questions regarding the viability of this kind of in-depth communication in the framework of social media and mass media. In an age where algorithms are increasingly mediating digital connections, how do we create systems that facilitate meaningful discourse at scale? This motivates us to think of how users and designers might influence the direction of interactive design in the future (Crawford, 2003). Furthermore, it motivates users to seek out more deliberate technological engagement, moving from passive consumption to active involvement. It emphasizes the significance of promoting designs that value depth and quality of interaction, proposing a transition towards more human focused technology ecosystems, as someone who is interested in the larger effects of technology on society (Crawford, 2003).

Citations:

Crawford, C. (2003). The art of interactive design : a euphonious and illuminating guide to building successful software. San Francisco: No Starch Press.

Reading Reflection Week 3: Eyeo2012_Casey Reas

Jihad Jammal

Intro to IM

Professor Aaron Sherwood

Reading Reflection Week 3

Feb. 5, 2024

 

Controlled Randomness at the Intersection of Programming and Creativity

 

After watching the video, my understanding of digital art has been significantly broadened by the concept of “controlled randomness”, especially with the intersection of computer programming and creative exploration. Reas’s explanation, where he describes the process of “simply flipping a coin and drawing a left or right but it creates this pattern where we have open areas and closed areas; it becomes vaguely maze-like, and we are able to approach computing from many different angles just from using a single program,” (31:10 – 32:00) eloquently captures the essence of this innovative method. Because the “controlled randomness” methodology uses unpredictability as a basis for creativity in a digital world that is normally perceived as a rigid and unchanging medium, it has changed my understanding of what may be deemed artistic creation/expression. While I understood that art might be highly personal to the individual, I had always thought of art as a clear expression of the artist’s intention, as seen in the brushstrokes or the chiseled stone. Reas’s work, on the other hand, offers a convincing alternative by demonstrating how artists can create the conditions for chance to occur within limitations, so questioning traditional ideas of artistry and emphasizing the special possibilities that arise from the collaboration of computational processes and human creativity.

Furthermore, Reas’s assertion sheds light on how well-managed randomness can act as a link between the fluidity of artistic expression and the deterministic character of code. This combination elevates programming languages from being only tools to being active players in the creation of art, encouraging a deeper reflection on the creative possibilities they possess. It is both illuminating and encouraging to see that intricate, visually beautiful patterns with substantial artistic value can be produced by basic code. It opens up new avenues for artists to investigate the dynamics of order and chaos, intention, and chance by extending the creative canvas beyond conventional media. As such there is a great deal of room for creativity at any skill level when it comes to transforming computer engineering tools for creative expression, especially now that it is known that specialized equipment is not necessary.

 

Citations:

Festival, E. (2012). Eyeo2012 – Casey Reas. [online] Vimeo. Available at: https://vimeo.com/45851523 [Accessed 5 Feb. 2024].