Week 10 – Reading Response + Assignment_Shereena AlNuaimi

#1:
In 2008, TIGOE released a blog post titled “Physical Computing’s Greatest Hits (and misses),” which explores the field of physical computing by presenting a range of projects that illustrate the integration of technology with human interaction and creativity. It looks at how these initiatives, which include fun controllers like the “Stranglophone” and instruments resembling Theremins, blur the boundaries between engineering and art while highlighting the value of human interaction in technology.

The initiatives that are showcased strive to capture not only observable inputs but also intangible components of human experience, such emotional connection or inner quiet. They explore personal facets of everyday life, putting out gadgets that may be used in unusual ways, like screaming at people or giving them hugs.

In a sector full with repetitive concepts, the post critically examines what makes a work original and suggests that each creator’s little deviations are what make a work innovative. It supports the notion that, with gadgets acting as portals for inquiry and education, physical computing is about investigating human expression as much as it is about technology.

The post ends by extending an invitation to readers to take part in the development of physical computing and highlighting the necessity of ongoing innovation as well as the acceptance of change and adaptability in this ever-evolving industry. It provides room for development and fresh input, inspiring innovators, thinkers, and doers to push the envelope even farther.

#2:

The post “Making Interactive Art: Set the Stage, Then Shut Up and Listen” by TIGOE suggests changing the way interactive art is made. It promotes artists taking a backseat after establishing the scene so that viewers may participate and analyze the work on their own. Interactive art, in contrast to traditional art forms, starts a conversation that is co-authored by viewers. It is said that an artist should operate like a director would, offering suggestions but never forcing an interpretation on performers. The article emphasizes the artist’s humility in embracing a range of reactions from the audience, including misinterpretations or deceptions. It encourages artists to think of interactive pieces not as finished items but as continuous performances modified by audience involvement. Subsequently this implies that this method encourages participants’ emotional resonance and self-discovery. Ultimately, the post serves as a guide for creators navigating participatory culture, emphasizing the value of interactive art in sparking meaningful experiences.

 

ASSIGNMENT:

Bullseye Game!

Archery has been one of my passions for about 9 years now. I drew inspiration from the archery target by using the LED colors yellow, red and blue. When the button is pressed the yellow LED starts blinking and the blue and red LED turns off as if you hit a bullseye!

WEEK 9 Unusual Switch + Documentation blog post Shereena AlNuaimi

I spent hours trying to think of a concept until it eventually occurred to me. To be very honest, I’m happy with the result, but I wanted to challenge myself further and attempt to learn more about Arduino. My original plan was not to blow a charm into the jumper cable to achieve the light produced by the LED, but since my code was crashing and my Arduino board stopped working all of a sudden, I had to modify my plan. I had to make the most of my limited time to do my task.

Naturally, investing a significant amount of time to complete this “unusual switch” project enabled me to become comfortable with the Arduino board concept overall. While this wasn’t how I intended to become familiar with it, the experience was still an eventful rollercoaster. Moreover, I decided to incorporate a very memorable part of my childhood a charm of the Arc De Triomphe. France was a huge part of my childhood and still is, something that everyone finds shocking is that my first language surprisingly was French (I know crazy right?). Furthermore, I wanted to combine a partial part of my life into this project as well.

Something I’d like to improve on in the future is trying to figure out why the brightness of my LED was so dim and not that bright. Overall, I’m pleased with the outcome, and the fact that I get to include something somewhat special was pleasing.

Unusual switch

const int led0 = 11; // LED connected to digital pin 11
const int touchSensorPin = 3; // Touch sensor (white wire) connected to digital pin 3

void setup() {
  pinMode(led0, OUTPUT); //LED as output
  pinMode(touchSensorPin, INPUT_PULLUP);
}

void loop() {
  if (digitalRead(touchSensorPin) == LOW) {  // if touch sensor detects physical contact
    digitalWrite(led0, HIGH); // Turn on LED
  } else {
    digitalWrite(led0, LOW); // Turn off LED
  }
}

 

 

Reading Response 8A – Shereena AlNuaimi

#1: Emotion & Design: Attractive Things Work Better

In “Emotion & Design: Attractive Things Work Better,” Donald Norman explores the impact of affect and emotion on design, emphasizing the relationship between usability and aesthetics. He clarifies how the effect affects cognitive function. For instance, although negative affect increases depth-first processing and focusses cognition, positive affect promotes creativity and flexibility. In addition, Norman highlights the importance of human-centered design and how important it is in high-stress situations when it may reduce issues and enhance usability. He illustrates these concepts and shows how environment and mood influence one’s choice of design by comparing three teapots. Furthermore, he argues that beautiful things work better because they can foster better performance, learning, and overall harmony.

He also looks at how affect influences behavior, arguing that negative affect improves focus and concentration while positive emotion fosters creativity by molding perceptions and judgments. Moreover, he then highlights how crucial thoughtful human-centered design is in high-stress situations, when cutting down on distractions and annoyances becomes crucial. Conversely, in neutral or advantageous conditions, the design’s pleasure and visual attractiveness might encourage positive affect, inventiveness, and the capacity to withstand minor setbacks. Norman challenges the notion that utility should take precedence over beauty in design and instead advocates for a balance between the two. In the end, he disavows the idea that style should supersede utility, highlighting the need for truly beautiful objects to have a purpose and be practical.

#2: 

Midterm & Midterm documentation – Shereena AlNuaimi

Catch The Dates

Why not use the “Fruit Ninja” game, which I spent years of my childhood playing, serve as the inspiration for this minigame? With little consideration, “Catch the dates” turned into a mini game.

Dates and explosives will begin to fall from the NYUAD  palm trees that serve as the game’s backdrop as soon as you begin playing. The objective is to avoid receiving a score of zero or below. The player can score two points on dates, but their score will be reduced by three if they catch the bomb in the basket.

One thing that I’m most proud of is the game itself as a whole. Being an extremely indecisive person, it was hard for me to just stick with one idea. However, with careful consideration I came to being excited to code this small game itself while including a part of my childhood in it while embedding culture and symbolizing the UAE’S culture and heritage by using dates instead of fruits.

One challenge I have encountered when coding this midterm, was the basket leaving a trace at the bottom as well as the background being not too flexible with height and fit on the screen.

However, I solved that issue with adjusting the image width and height in order to fit perfectly. 

In conclusion, this midterm really made me step out of my comfort zone. In reality I am not too proud of the work that I achieve nor do I like to share it, however, with this course, I was able to achieve that and step out of my comfort zone a little bit and be proud of the work I have accomplished especially when creating this little game. 

// Declare variables
let titleSize = 35
let bg;
let basketImg;
let dates = [];
let bombs = [];
let score = 0;
let gameStarted = false;
let gameOver = false;
let basket;
let basketScale = 0.5; // Adjust basket scale
let basketSpeed = 7;
let nextDateFrame = 0; // Frame count for next date
let nextBombFrame = 0; // Frame count for next bomb
let scoreBoxWidth = 200; // Width of score box
let scoreBoxHeight = 50; // Height of score box

// Preload images
function preload() {
  bg = loadImage('palm trees.png');
  basketImg = loadImage('basket.png');
}

// Setup canvas and game state
function setup() {
  createCanvas(800, 800); // Larger canvas size
  textAlign(RIGHT, TOP);
  textSize(24);
  resetGame();
}

// Reset game state
function resetGame() {
  score = 0;
  gameStarted = false;
  gameOver = false;
  dates = [];
  bombs = [];
  basket = createVector(width / 2, height - basketImg.height * basketScale); // Adjusted basket size
  nextDateFrame = 0; // Reset frame count for next date
  nextBombFrame = 0; // Reset frame count for next bomb
}
// Main game loop
function draw() {
  // Display background
  image(bg, 0, 0,width *1.5 , height*1.5);

  // Display instructions if game not started
  if (!gameStarted) {
    displayInstructions();
    return;
  }

  // Display game over screen if game is over
  if (gameOver) {
    displayGameOver();
    return;
  }
  
  // Display basket
  image(basketImg, basket.x, basket.y, basketImg.width * basketScale, basketImg.height * basketScale); // Adjusted basket size

  // Move basket continuously when arrow keys are held down
  if (keyIsDown(LEFT_ARROW) && basket.x > 0) {
    basket.x -= basketSpeed;
  }
  if (keyIsDown(RIGHT_ARROW) && basket.x < width - basketImg.width * basketScale) {
    basket.x += basketSpeed;
  }
  
  // Move and display dates
  if (frameCount >= nextDateFrame) {
    let date = new FallingObject('dates');
    dates.push(date);
    nextDateFrame = frameCount + int(random(120, 240)); // Randomize next date appearance
  }
  for (let date of dates) {
    date.move();
    date.display();
    if (date.checkCollision(basket.x, basket.y, basketImg.width * basketScale, basketImg.height * basketScale)) {
      date.reset();
      score += 2;
    }
  }

  // Move and display bombs
  if (frameCount >= nextBombFrame) {
    let bomb = new FallingObject('bomb');
    bombs.push(bomb);
    nextBombFrame = frameCount + int(random(120, 240)); // Randomize next bomb appearance
  }
  for (let bomb of bombs) {
    bomb.move();
    bomb.display();
    if (bomb.checkCollision(basket.x, basket.y, basketImg.width * basketScale, basketImg.height * basketScale)) {
      bomb.reset();
      score -= 3;
      if (score <= 0) {
        score = 0;
        gameOver = true;
      }
    }
  }

  // Display score
  fill(0, 0, 255);
  rect(width - scoreBoxWidth, 0, scoreBoxWidth, scoreBoxHeight);
  fill(255);
  textAlign(RIGHT, TOP);
  text(`Score: ${score}`, width - 10, 10);
}


// Handle key presses
function keyPressed() {
  // Start game on spacebar press
  if (!gameStarted && key === ' ') {
    gameStarted = true;
  }

  // Reset game on 'r' press
  if (gameOver && key === 'r') {
    resetGame();
  }
}

// Display game instructions
function displayInstructions() {
  fill(255);
  stroke(2);
  strokeWeight(5);
  textSize(titleSize);
  text("CATCH THE DATES", width/2 +190, height/2 -150);
  fill(255);
  text('Instructions:',width / 2 +120 , height / 2 -90);
  text('Use arrow keys to move the basket',width / 2 + 300 , height / 2 -40);
  text('Catch dates to score points',width / 2 + 250 , height / 2);
  text('Avoid bombs',width / 2 + 120 , height / 2 + 40);
  text('Press space to start',width / 2 + 180 , height / 2 + 80);
}

// Display game over screen
function displayGameOver() {
  fill(255, 0, 0);
  triangle(width / 2, height / 2 - 100, width / 2 - 150, height / 2 + 150, width / 2 + 150, height / 2 + 150);
  fill(255);
  textAlign(CENTER, CENTER);
  textSize(25);
  stroke(1);
  strokeWeight(3);
  text('Game Over!', width / 2, height / 2 + 30);
  text('Press "r" to play again', width / 2, height / 2 +  118);
}

// FallingObject class
class FallingObject {
  constructor(type) {
    this.x = random(width);
    this.y = -50;
    this.speed = random(2.5, 3.5); // Adjusted speed
    this.type = type;
    this.image = loadImage(`${type}.png`);
  }

  // Move the falling object
  move() {
    this.y += this.speed;
    if (this.y > height) {
      this.reset();
    }
  }

  // Display the falling object
  display() {
    image(this.image, this.x, this.y, 50, 50);
  }

  // Reset the falling object's position
  reset() {
    this.x = random(width);
    this.y = -50;
    this.speed = random(2.5, 3.5); // Adjusted speed
  }

  // Check for collision with another object
  checkCollision(objX, objY, objWidth, objHeight) {
    return this.x > objX && this.x < objX + objWidth && this.y > objY && this.y < objY + objHeight;
  }
}

 

Week 5 – Reading response Shereena AlNuaimi

“Computer Vision for Artists and Designers” by Golan Levin introduces computer vision as a set of algorithms enabling computers to intelligently interpret digital images and videos, emphasizing its recent accessibility to novice programmers and interactive-media artists. It demystifies computer vision for beginners, focusing on its applications in interactive art, elementary computer vision techniques, physical optimization for computer vision, multimedia authoring tools for computer vision.

The author also explores the evolution of computer vision as a medium for artistic expression, outlining its recent democratization and tracing its historical origins. It highlights how computer vision methods are being applied to a wide range of artistic mediums, video games, and home automation systems. In addition, he deconstructs basic computer vision methods including frame differencing, background subtraction, brightness thresholding, and basic object tracking and provides an understanding of how to use and use them in interactive media. It highlights how crucial physical optimization is for computer vision and offers suggestions for setting up conditions that support reliable algorithmic performance.

Furthermore, he also examines multimedia authoring tools for computer vision, including major software development environments and their corresponding computer vision toolkits or plug-ins, such as Processing, Macromedia Director, and Max/MSP/Jitter. Additionally, it provides an example of a workshop project named LimboTime that shows how computer vision techniques can be used to create an interactive game. LimboTime highlights the wider application of computer vision in art and design by demonstrating the accessibility and possibilities for non-programmers to create vision-based interactive systems.

Overall, this reading offers us a comprehensive overview of computer vision, catering to novice programmers and artists, and highlights its growing significance in interactive art and design, offering practical insights and resources for implementing computer vision techniques in various artistic and design contexts.

Assignment 4 + Reading response – Shereena AlNuaimi

For this assignment, I planned to incorporate something that I have been passionate about for 10 years now which is archery. Truthfully, I’m pleased with how this task turned out. My life has involved archery greatly and continues to do so. And it’s awesome to be able to integrate that aspect of myself somewhat with my university education.

In order for this assignment to be interactive, when mouse is clicked the archery target appears circle by circle. Each circle color resembles a score. Realistically speaking, I wanted the colors to be as accurate as possible that’s why I chose the colors that I did. For it to be as close to the target as possible. Overall, i’m pleased with the outcome of this assignment.

let circleColors = [[255, 255, 0], [255, 0, 0], [0, 0, 255], [0, 0, 0]]; // Yellow, Red, Blue, Black
let circleSizes = [100, 200, 300, 400];
let circleIndex = -1;

function setup() {
  createCanvas(600, 600);
  textAlign(CENTER, CENTER);
  textSize(48);
  fill(255, 255, 255);
}

function draw() {
  background(240, 255, 255);
  // Draw the circles for the archery target
  for (let i = circleIndex; i >= 0; i--) {
    fill(circleColors[i][0], circleColors[i][1], circleColors[i][2]);
    stroke(0);
    strokeWeight(1);
    let circleSize = circleSizes[i];
    ellipse(width / 2, height / 2, circleSize);
  }
  
  // Draw the arrow-shaped letters
  let nickname = "Shroon";
  let startX = (width - (nickname.length - 1) * 50) / 2;
  let startY = height / 2;
  let arrowSize = 50;
  let spacing = 50;
  for (let i = 0; i < nickname.length; i++) {
    drawArrow(startX + i * spacing, startY, arrowSize, nickname.charAt(i));
  }
}

function mouseClicked() {
  if (circleIndex === circleSizes.length - 1) {
    circleIndex = -1; // Reset to show innermost circle again
  } else {
    circleIndex++; // Increment to show the next circle
  }
}


function drawArrow(x, y, size, letter) {
  // Draw the arrow body
  fill(255);
  stroke(0);
  strokeWeight(2);
  beginShape();
  vertex(x - size / 4, y - size / 8);
  vertex(x - size / 4, y - size / 2);
  vertex(x + size / 4, y - size / 2);
  vertex(x + size / 4, y - size / 8);
  vertex(x + size / 2, y - size / 8);
  vertex(x, y + size / 2);
  vertex(x - size / 2, y - size / 8);
  vertex(x - size / 4, y - size / 8);
  endShape(CLOSE);
  
  // Display the letter
  fill(0);
  textSize(size / 2);
  textAlign(CENTER, CENTER);
  text(letter, x, y - size / 8);
}


function drawArrow(x, y, size, letter) {
  // Draw the arrow body
  fill(255);
  stroke(0);
  strokeWeight(2);
  beginShape();
  vertex(x - size / 4, y - size / 8);
  vertex(x - size / 4, y - size / 2);
  vertex(x + size / 4, y - size / 2);
  vertex(x + size / 4, y - size / 8);
  vertex(x + size / 2, y - size / 8);
  vertex(x, y + size / 2);
  vertex(x - size / 2, y - size / 8);
  vertex(x - size / 4, y - size / 8);
  endShape(CLOSE);
  
  // Display the letter
  fill(0);
  textSize(size / 2);
  textAlign(CENTER, CENTER);
  text(letter, x, y - size / 8);
}

 

Reading Response:

Don Norman’s book “The Design of Everyday Things” addresses the difficulties people encounter with everyday possessions by emphasizing the design concepts of affordances, signifiers, and mapping. Norman illustrates the uncertainty and frustration brought on by poor design by sharing personal tales about his problems with doors and other everyday items. He highlights the significance of discoverability and understanding in effective design, talking on the necessity of clear and understandable signals that convey the right information about what may be done and how.

Furthermore, he emphasizes how important it is for designers to comprehend both technology and human behavior. He draws attention to the difficulties brought about by technology advancements, such as the growing complexity of everyday items as a result of functional additions. Norman talks on the paradox of technology, which has the ability to improve people’s lives and make things easier, but it also creates complexity that can cause users to become frustrated and struggle. Additionally, when designing products, the interaction of psychology and technology is crucial to making sure that people find the end result delightful and pleasurable as well as useful. Norman’s observations highlight the necessity for designers to put behavior and human needs design (HCD) first while utilizing technology to improve the user experience as a whole.According to him, the foundation of successful design is a thorough understanding of people and their wants, which is attained by observation and adaptive design processes that guarantee products actually satisfy user needs.

Assignment 3 & Reading Response – Shereena AlNuaimi

For this assignment, I drew inspiration from abstract paintings in general. That’s mostly because abstract paintings are essentially shapes layered on top of shapes, or at least that’s what we initially believed. The audience can learn that there’s more to an abstract artwork than meets the eye. which I attempted to include into my work.

Making this project more realistic in some manner and pushing myself to replicate at least one of Picasso’s paintings would be my best improvements, if there are any. But that will have to wait. The ellipses and circles that emerge when the mouse is clicked, which are larger than the squares themselves, is something I’m proud of.Overall, I’m somewhat proud of the outcome.

// Global variables to store the canvas and arrays of shapes and colors
let canvas;
let shapes = [];
let colors = [];
let numColors = 7; // Number of colors to generate

function setup() {
  createCanvas(600, 600);
  canvas = createGraphics(800, 600); // Create off-screen graphics buffer
  canvas.background(255); // Set background color of off-screen canvas

  // Draw background and shapes, generate colors, and apply colors to the off-screen canvas
  drawBackground();
  drawShapes();
  generateColors();
  tintColors();
}

// Function to draw the background of the off-screen canvas
function drawBackground() {
  canvas.noStroke(); 
  canvas.fill(255); 
  canvas.rect(0, 0, 600, 600); // Draw white rectangle covering the canvas
}

// Function to randomly generate and draw shapes onto the off-screen canvas
function drawShapes() {
  let numShapes = 50; // Number of shapes to draw
  let maxSize = 400; // Maximum size of shapes

  // Loop to create and draw random shapes
  for (let i = 0; i < numShapes; i++) {
    let x = random(canvas.width); 
    let y = random(canvas.height); 
    
    let size = random(50, maxSize); // Random size for the shape

    // Generate random fill and stroke colors for the shape
    let fillColor = color(random(255), random(255), random(255));
    let strokeColor = color(random(255), random(255), random(255));

    // Creates an object to represent the shape and adds it to the shapes array
    let shape = {
      x: x,
      y: y,
      size: size,
      fillColor: fillColor,
      strokeColor: strokeColor,
      shapeType: int(random(3)) // Randomly choose shape type (0: ellipse, 1: rectangle, 2: polygon)
    };

    shapes.push(shape); // Add the shape object to the shapes array
  }

  // Loop through shapes array and draw each shape onto the off-screen canvas
  for (let shape of shapes) {
    canvas.fill(shape.fillColor); 
    canvas.stroke(shape.strokeColor);
    canvas.strokeWeight(2); 

    // Draw different types of shapes based on their shapeType property
    if (shape.shapeType === 0) {
      canvas.ellipse(shape.x, shape.y, shape.size, shape.size); // Draw ellipse
    } else if (shape.shapeType === 1) {
      canvas.rect(shape.x - shape.size / 2, shape.y - shape.size / 2, shape.size, shape.size); // Draws rectangle
    } else {
      // Draws polygon with random number of vertices
      let numVertices = int(random(3, 8)); // Random number of vertices between 3 and 7
      let angle = TWO_PI / numVertices; // Angle between vertices
      let halfSize = shape.size / 2; // Half the size of the shape
      canvas.beginShape(); // Begin drawing a custom shape
      for (let a = 0; a < TWO_PI; a += angle) {
        let sx = shape.x + cos(a) * halfSize; // Calculate x-coordinate of vertex
        let sy = shape.y + sin(a) * halfSize; // Calculate y-coordinate of vertex
        canvas.vertex(sx, sy); // Add vertex to the shape
      }
      canvas.endShape(CLOSE); // End drawing the custom shape
    }
  }
}

// Function to generate random colors and store them in the colors array
function generateColors() {
  colors = []; // Clear the colors array
  for (let i = 0; i < numColors; i++) {
    colors.push(color(random(255), random(255), random(255))); // Generate random color and add it to the colors array
  }
}

// Function to apply tinted colors to the off-screen canvas
function tintColors() {
  let colorIndex = 0; // Initialize color index
  // Loop through the canvas in a grid pattern
  for (let y = 0; y < canvas.height; y += 50) {
    for (let x = 0; x < canvas.width; x += 50) {
      let c = colors[colorIndex % colors.length]; // Get the color from the colors array
      canvas.tint(c); // Apply tint with the color
      canvas.image(canvas, x, y); // Draw the off-screen canvas onto itself with the applied tint
      colorIndex++; // Increment color index
    }
  }
}

// Function called when mouse is clicked
function mouseClicked() {
  generateColors(); // Regenerate colors
  canvas.clear(); // Clear off-screen canvas
  drawShapes(); // Redraw shapes on off-screen canvas
  tintColors(); // Apply tinted colors
}

// Function called when mouse is moved
function mouseMoved() {
  generateColors(); // Regenerate colors
  canvas.clear(); // Clear off-screen canvas
  drawShapes(); // Redraw shapes on off-screen canvas
  tintColors(); // Apply tinted colors
}

// Main draw function to display the off-screen canvas onto the main canvas
function draw() {
  image(canvas, 0, 0); // Display off-screen canvas on the main canvas
}

Reading Response:

In the book “The Art Of Interactive Design”, Crawford delves into the concept of interactivity by addressing the misinterpretations of the term “interactivity” itself. He emphasizes the importance of the quality of each subtask for successful interaction, distinguishing between the genuine interactivity and instances where the terms is diluted. Moreover, Crawford introduces the concept of and “interactivity designer,” highlighting the specialized skills and consideration required for designing interactive experiences. The chapter concludes by addressing the resistance faces by interactivity designers.

In essence, this chapter provides a thought-provoking and insightful exploration of interactivity, challenging conventional understandings and advocating for a more comprehensive approach to designing interactive experiences. Crawfords perspective redefines interactivity but also emphasizes the need for a paradigm shift and integration of diverse expertise in the evolving field of interactivity design.

Reading Response – Shereena AlNuaimi

In his Eyeo lecture, Casey Reas explores the relationship between art and chance, emphasizing how order and chaos interact in creative expression. He presents the idea of “controlled randomness,” in which artists set guidelines while leaving room for unexpected outcomes, providing a novel viewpoint on the process of creating art. Reas presents the idea of “ordered randomness” to show how artists may retain control while offering unpredictability in response to worries that digital art is stifling artistic creativity. In addition to promoting investigation into digital art and coding, this conversation challenges preconceptions and heightens appreciation for the deliberate use of unpredictability in creative expression. It also improves awareness of the link between order and chaos in art.

Furthermore, he highlights how programming languages become vital to the creation of art, drawing connections between code determinism, creative expression, and controlled unpredictability. This point of view encourages a deeper exploration of the creative possibilities inherent in code by showing how straightforward code may result in patterns that are both visually pleasing and meaningful artistically. These insights provides a new previously untapped avenues for artists to explore the interplay of chance, intention, and order, greatly expanding their artistic canvas.

Assignment 2 – Shereena AlNuaimi

After further browsing the artworks that were posted to help inspire this assignments idea. My inspiration stemmed from the artwork by Bill Kolomyjec’s “Random Squares.”

At first, I fully convinced myself that it would be rather simple to recreate just a collection of squares. Nevertheless, I was shockingly mistaken. I discovered that my code seems blank after fiddling around with it and making squares within squares. Furthermore, I went ahead and made the decision to push myself simply because I know that if I set my mind to something, I’ll do all in my power to make it happen. I made the decision to attempt to program the squares to change color when the mouse is over them.

To solve the task I set for myself, I began reviewing tutorials on YouTube right away. I wanted to learn how to improvise for the if else statement I used and avoid making my code too long or complicated. and put the map statement into practice so that the code could detect if the mouse was hovering over the squares and alter its color accordingly.

In a realistic sense, the task itself was both difficult and instructive. I came to the realization that I do need to practice a little myself in order for me to find coding to be rather straightforward, so hopefully I will keep doing that. In the future, I do plan to push myself more than I did on this project, but I also want to make sure that I don’t put too much pressure on myself and take my time enjoying the process of producing. Overall, I’m somewhat proud of the outcome.

let squares = [];
let numSquares = 6; // Total number of larger squares
let nestedSquares = 4; // Number of nested squares within each larger square
let squareSize;
let maxSize, minSize;
let spacing; // Spacing between larger squares

function setup() {
  createCanvas(560, 372);
  squareSize = width / (numSquares / 2); // Assuming 3 squares in a row
  maxSize = squareSize;
  minSize = squareSize / 10;
  spacing = squareSize / 50;

  // Initialize properties for each large square
  for (let i = 0; i < numSquares; i++) {
    let x = (i % 3) * squareSize + squareSize / 2;
    let y = floor(i / 3) * squareSize + squareSize / 2;
    squares.push({ x, y, size: maxSize, hovered: false });
  }
}

function draw() {
  background(255);

  for (let i = 0; i < squares.length; i++) {
    let sq = squares[i];

    // Determine if the mouse is over the square
    sq.hovered = (mouseX > sq.x - sq.size / 2 && mouseX < sq.x + sq.size / 2 &&
                  mouseY > sq.y - sq.size / 2 && mouseY < sq.y + sq.size / 2);

    // Draw the nested squares
    for (let n = 0; n < nestedSquares; n++) {
      let nestedSize = sq.size - n * (sq.size - minSize) / nestedSquares;

      // Color change based on mouse position
      let colorValue = sq.hovered ? map(mouseY, 0, height, 255, 0) : 255 - (n * (255 / nestedSquares));

      fill(
        colorValue,
        255 - colorValue,
        map(mouseX, 0, width, 0, 255)
      );

      // Draw each nested square
      rectMode(CENTER);
      rect(sq.x, sq.y, nestedSize - n * spacing, nestedSize - n * spacing);
    }
  }
}

Assignment 1 (Self-Portrait) Shereena AlNuaimi

For this assignment, I aimed to incorporate one of my favorite things to do, that instantly fills my entire body with peace and happiness. Watching the sunset. The plan was ideally to make the background more ombre other than fading, however, as it’s my first time using p5js I found it difficult to implement that into my background. For future assignments, I’m hoping to create more interactive projects and master the ombre affect as well as getting more familiar with coding.

let rectWidth;
let rectHeight;
let rectX, rectY;
let eye1X = 170;
let eye2X = 230;
let speed = 8;

function setup() {
  createCanvas(400, 400);
  rectWidth = width/4;
  rectHeight = height/4;
  rectX = 0;
  rectY = height/2;
  angleMode(DEGREES);
}

function draw() {
  background(255, 255, 153, 10);

  //SUNSET BG
  
  rectMode(CENTER); //LIGHT ORANGE TOP
  stroke(255, 204, 0)
  fill(255,204, 0);
  rect(rectX, rectY-120, rectWidth+50, rectHeight+50);
  
  rectMode(CENTER); //D.ORANGE MID
  stroke(255, 153, 0)
  fill(255,153, 0);
  rect(rectX, rectY, rectWidth+50, rectHeight+50);

  rectMode(CENTER); //BOTTOM
  stroke(255, 102, 0)
  fill(255,102, 0);
  rect(rectX, rectY+120, rectWidth+50, rectHeight+50);
  

  
  rectX = rectX + speed;
  
  if (rectX > width){
  rectX = 0;
  }
  
  //hair
  fill(43, 28, 17);
  stroke(0, 0, 0);
  rect(200, 220, 205, 330, 90);
  
  //neck
  fill(240,190, 120);
  stroke(0,0, 0);
  rect(200, 239, 100, 100, 20);
  
  //face
  fill(240,190, 120);
  stroke(0,0, 0);
  ellipse(200, 150, 150, 175);
  
  //nose
  noFill();
  arc(198, 175, 20, 15, 270, 90);
  
  //shirt
  fill(136, 189, 242);
  rect(200, 380, 190, 270, 50);
  
  //bangs
  noStroke();
  fill(43, 28, 17);
  rect(200, 81, 100, 40, 58);
  strokeWeight(1.5);
  
  //right eye
  fill(255);
  ellipse(eye2X, 143, 40, 40)
  
  //left eye
  fill(255);
  ellipse(eye1X, 143, 40, 40);
  
  //right pupil
  fill(51, 0, 0);
  ellipse(eye2X, 143, 15, 20);
  
  //left pupil
  fill(51, 0, 0);
  ellipse(eye1X, 143, 15, 20);
  
  //mouth
  fill(0);
  arc(200, 192, 50, 50, 0 ,180);
  
  
  
}