Author: Batool Al Tameemi

Emotions & Attractive by Donald A.Norman

The reading about three teapots is incredibly inspiring and thought-provoking. It goes beyond a simple story about teapots and delves into the profound world of human emotions and how they influence the design and usability of everyday objects.

What’s truly inspiring is the notion that design is a delicate dance between beauty, functionality, and user satisfaction. The three teapots exemplify this concept, teaching us that an object can be beautifully designed, functional, and a source of pleasure simultaneously. It’s a reminder that design should not be limited to either aesthetics or usability; it’s about achieving a harmonious balance.

The concept of “affect” introduced in the reading is particularly eye-opening. It showcases how our emotional state can dramatically alter the way we approach tasks and interact with products. Negative affect narrows our focus, enhancing concentration, while positive affect encourages creativity but also increases distractibility. This revelation challenges our traditional understanding of how emotions influence our behavior.

The most striking and, indeed, inspirational revelation is the idea that attractive things work better. This contradicts the common belief that aesthetics are secondary to usability. It suggests that, in our pursuit of enhancing functionality, we should not neglect the importance of creating products that are visually appealing and emotionally engaging.

In a world where we often prioritize utilitarian aspects, this reading encourages us to look beyond the surface. It teaches us that true beauty in design encompasses both form and function. The lesson is clear: we should aim to create products that not only serve their purpose but also bring joy and delight to our lives. This reflection challenges us to think differently about the objects we use daily and to strive for a world where everything we interact with is not only usable but also a source of inspiration and pleasure.

Her Code Got Humans on the Moon

What’s really interesting in this reading is the incredible journey of Margaret Hamilton. She was a woman who, in the 1960s, went against the norm. Back then, women weren’t usually encouraged to do high-tech jobs. But Margaret, with her math degree, got a job as a programmer at MIT. Her original plan was to support her husband’s law studies for three years and then get her own math degree.

But things changed when the Apollo space program came into play. Instead of following her original plan, Margaret stayed at MIT and led a big engineering project. She was among the very few women in that era to do this kind of work. What’s striking is that she brought her 4-year-old daughter, Lauren, to the lab on weekends and evenings. While her daughter slept, Margaret was busy writing code that would be used in the Apollo mission.

People were surprised by her dedication. They’d ask her, “How can you leave your daughter to work?” But Margaret loved her unique job. She enjoyed the camaraderie and the challenges of it. She felt like “one of the guys.” What’s intriguing is that, at that time, nobody really knew what software was. It was like the “Wild West” of technology. There were no courses or training programs for it. But Margaret and her team were pioneering the field as they wrote the code for the world’s first portable computer used in the Apollo program.

What’s also fascinating is that when the Apollo project began, software wasn’t a big deal. It wasn’t even mentioned in the mission’s engineering requirements. But as the project progressed, it became clear that software was essential. Margaret became responsible for the onboard flight software on the Apollo computers. The pressure was intense. She even rushed back to the lab after a late-night party once to fix a piece of flawed code. She worried about making headlines for a mission failure.

In the mid-1960s, more than 400 people were working on Apollo’s software. Software became a key part of winning the race to the moon. But it did more than that. Thanks to Margaret and her team, they set the stage for the software industry we know today, worth billions of dollars.

The process of programming back then was completely different from what we have today. They punched holes in stacks of cards, and these cards were processed on a massive computer. Everything had to be simulated before the actual mission.

Apollo missions carried two special computers: one in the lunar module and another in the command module. These computers were unique. They were designed by MIT engineers and were among the first to use integrated circuits instead of transistors. The computer was responsible for many critical tasks, even though it had very limited memory and computation speed compared to today’s standards.

One particularly intense moment was during the Apollo 11 mission, just before landing on the moon. There was a “documentation error,” and the computer started giving error messages. But thanks to Margaret’s technical arguments, the computer focused on the most crucial task—landing safely on the moon.

Another intriguing detail is how Margaret’s daughter, Lauren, once caused an error during a simulation. This led to changes in the documentation to prevent similar errors. It shows that even in highly technical fields, human elements and foresight play a role.

In the end, what’s most captivating about this reading is Margaret Hamilton’s exceptional journey. She not only helped land humans on the moon but also played a crucial role in shaping the software industry. Her story is a reminder that one person’s determination and innovation can have a significant impact on history.

• some images:

  

  

• concept of my project

As a student at NYUAD, I really love our campus cat, Caramel. She makes being here even better. I enjoy graphic design, and it’s fun for me to draw. I’m also getting into coding, and I want to learn more about it. So, I had this idea for a project I call “Catsaway.” It’s a game inspired by Caramel. In the game, she can fly around the campus without crashing into the pointy palm tree corners. Instead, she gracefully glides through the soft palm leaves. To make her fly, you just press the spacebar. It’s a way to enjoy a little adventure through our campus. This project lets me combine my love for art and my interest in coding, turning my fondness for Caramel into a fun game.

My Game starts with my landing page that have 2 options either to start the game directly or taking you into the instructions page.

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

I’m happy with how I brought Caramel to life in the game. Players get to control Caramel as she gracefully flies around our campus, avoiding obstacles like pointy palm trees. I’ve also made sure the game feels like NYUAD by adding familiar buildings and fluffy clouds.

I’m proud of the technical choices I made. The game has different parts, like the start page and instructions, to make it easy to play. I even added sound effects, like a cheerful jump sound when Caramel takes off. Players can restart the game or go back to the start page with simple key presses.

• Some areas for improvement and problems that you ran into (resolved or otherwise)

During the development of my project, I encountered a few challenges and areas for improvement. One major issue I faced was optimizing the game’s performance. As the game got more complex with added elements, like the buildings and clouds, I noticed some slowdowns. I had to spend time fine-tuning the code to make sure the game runs smoothly, especially on lower-end devices. This was a valuable lesson in optimizing game design.

I had to work on enhancing the game’s instructions. I realized that players might need clearer guidance on how to play, so I made improvements to ensure that the instructions are more user-friendly.

Another challenge was making sure that the game’s look and feel truly capture the essence of NYUAD and Caramel. It required some iterations to get the graphics just right and create that immersive atmosphere.

While these challenges arose during development, I’m happy to say that I addressed them, resulting in a game I’m proud to share. The process of tackling these issues taught me valuable lessons in game development and design.

• Future plans:
• Play on Phones: Right now, you can play the game on a computer P5.js, but it would be great to play it on your phone or tablet. I need to make sure it works well on all kinds of devices.
• High Score List: Having a list that shows who has the highest scores can make the game competitive. People will want to beat each other’s scores and share their achievements.
• Listening to Players: I’ll pay attention to what players say and try to make the game better based on their ideas. They’re the ones playing it, so their feedback is important.
• Making Money: If I want to earn money from the game, I can think about ways like letting people buy things in the game or showing ads. But I’ll be careful not to make the game annoying with too many ads 🙂

My own checklist of the requirements:

• At least one shape

The background was coded the exact same way as the first-ever assignment, The NYUAD building, clouds, highline, and trees. I’ve used plenty of shapes  

• At least one image

The Cat is an imported image sketched by Hand using Procreate.  as well as the NYUAD logo 

• At least one sound

When the cat is flying the moment you hit on the Up Arrow you will hear a jumping sound

• At least one on-screen text

The Score and the final score is a screen on text 

• Object Oriented Programming

The game is entirely made using OOP

• The experience must start with a screen giving instructions and wait for user input (button / key / mouse / etc.) before starting

The landing page has 2 options either wait for the user input to click on the space bar to start playing immediately or press on the letter “i” (stands for instructions) to access the instructions page.

• After the experience is completed, there must be a way to start a new session (without restarting the sketch)

Again there are 2 options either to press on the space bar to replay or press on the letter B (stands for begin) to take you to the landing page again

Code:

let pipes = []; // An array to store information about the pipes in the game.
let score = 0; // Keep track of the player's score.
let gameOver = false; // A flag to check if the game is over.
let backgroundImage; // Not used in the code, possibly intended for a background image.
let backgroundX = 0; // The horizontal position of the background image.
let gameStarted = false; // Indicates whether the game has started.
let speed = 10; // The speed of the game elements, adjustable.
let gameState = 'landing'; // Tracks the current state of the game.

function preload() {
  // Loading images and sounds used in the game.
  // backgroundImage = loadImage('11.png');
  landing = loadImage('Catsaway(1).png');
  instruction = loadImage('instructions.png');
  caramel = loadImage("caramel.PNG");
  palm1 = loadImage("palm2-1.PNG");
  palm2 = loadImage("palm2 -2.PNG");
  ending = loadImage("score2.png");
  NYUAD = loadImage("NYUAD.png");
  
  // Load the jump sound
  jumpSound = loadSound('sfx_point.mp3');
  // hitSound = loadSound('sfx_hit.mp3');
}

function setup() {
// Set up the initial canvas for the game and create a bird object.
  createCanvas(800, 450);
  bird = new Bird(); 
}

function draw() {

  if (gameState === 'game') {
    // Code for the game state
    // Drawing buildings, clouds, and other elements on the canvas
    // Pipes are also created, and the game logic is implemented
    background(156,207,216,255);
    fill(207,207,207,255);
    rect(150,150, 500, 300);
    ellipse(400,150, 490, 100)
    
    // strokes for the building 
   fill(169, 169, 169)
    rect(150, 220, 500, 10);
    rect(150, 235, 500, 10);
    rect(150, 250, 500, 10);
    rect(150, 265, 500, 10);
    rect(150, 280, 500, 10);
    rect(150, 295, 500, 10);
    // rect(200, 220, 10, 100);
    rect(260, 220, 10, 100);
    rect(320, 220, 10, 100);
    rect(380, 220, 10, 100);
    rect(440, 220, 10, 100);
    rect(500, 220, 10, 100);

    
    image(NYUAD, 55, 0);
    fill(171,109,51,255);
    rect(150, 300, 510, 100);
    
    
    fill(121,68,19,255);
    rect(150, 310, 500, 5);
    rect(150, 317, 500, 5);
    rect(150, 324, 500, 5);
    rect(150, 331, 500, 5);
    
    rect(150, 390, 500, 20);
    

    
    // the 2 buildings
    fill(115,115,115,255);
    noStroke();
    square(0, 250, 200);
    square(600, 250, 200);
    
    // windows 
    fill(207,207,207,255);
    rect(20,260, 40, 50)
    rect(70,260, 40, 50)
    rect(120, 260, 40, 50)
    rect(640, 260, 40, 50)
    rect(690, 260, 40, 50)
    rect(740, 260, 40, 50)
  
        noStroke();
    fill(255);
    // First Cloud
    ellipse(200, 100, 80, 60);
    ellipse(240, 100, 100, 80);
    ellipse(290, 100, 80, 60);
    ellipse(220, 80, 70, 50);
    ellipse(260, 80, 90, 70);

    // Second Cloud
    ellipse(400, 80, 60, 40);
    ellipse(440, 80, 80, 60);
    ellipse(490, 80, 60, 40);
    ellipse(420, 60, 50, 30);
    ellipse(460, 60, 70, 50);

    // Third Cloud
    ellipse(600, 120, 90, 70);
    ellipse(640, 120, 110, 90);
    ellipse(690, 120, 90, 70);
    ellipse(630, 100, 80, 60);
    ellipse(670, 100, 100, 80);
    
    ellipse(0, 80, 60, 40);
    ellipse(40, 80, 80, 60);
    ellipse(90, 100, 60, 40);
    ellipse(140, 150, 50, 30);
    
    fill(15,138,70,255);
    ellipse(100, 420, 90, 70);
    ellipse(60, 450, 90, 70);
    ellipse(140, 420, 110, 90);
    ellipse(190, 420, 90, 70);
    ellipse(130, 500, 80, 60);
    ellipse(170, 500, 100, 80);
    
    ellipse(600, 420, 90, 70);
    ellipse(640, 420, 110, 90);
    ellipse(690, 420, 90, 70);
    ellipse(630, 500, 80, 60);
    ellipse(670, 500, 100, 80);
    
    
    fill(0,166,81,255);
    ellipse(0, 420, 90, 70);
    ellipse(40, 420, 110, 90);
    ellipse(90, 420, 90, 70);
    ellipse(30, 500, 80, 60);
    ellipse(70, 500, 100, 80);
    ellipse(670, 420, 90, 70);
    ellipse(700, 420, 110, 90);
    ellipse(740, 420, 90, 70);
    ellipse(750, 500, 80, 60);
    ellipse(760, 500, 100, 80);
    
    if (!gameOver) {
      bird.update();
      bird.show();
      for (let i = pipes.length - 1; i >= 0; i--) {
        pipes[i].show();
        pipes[i].update();
        if (pipes[i].hits(bird)) {
          gameOver = true;
        }
        if (pipes[i].offscreen()) {
          pipes.splice(i, 1);
        }
      }
      if (frameCount % 15 === 0) {
        pipes.push(new Pipe());
      }
      textSize(32);
      fill(255);
      text(score, 100, 30);
      for (let i = pipes.length - 1; i >= 0; i--) {
        if (pipes[i].pass(bird)) {
          score++;
        }
      }
    } else {
      image(ending, 0, 0, width, height);
      textSize(64);
      fill(255, 0, 0);
      text("", 200, height / 2 - 32);
      textSize(50);
      fill(0);
      text("" + score, 450, height / 2);
      // Provide a restart option

      // Check for restart key press
      if (keyIsDown(32)) { // SPACE key
        restart();
      } else if (keyIsDown(66)) { // 'B' key
        gameState = 'landing';
      }
    }
  } else if (gameState === 'landing') {
    
    // Code for the landing screen state
    // Displays the landing image and checks for keypress to start the game
    background(0);
    image(landing, 0, 0, width, height);
    textSize(32);
    fill(255);
    textAlign(CENTER, CENTER);
    text("", width / 2, height / 2);
    // Check for start key press (SPACE key) or 'i' key press for instructions
    if (keyIsDown(32)) { // SPACE key
      startGame();
    } else if (keyIsDown(73)) { // 'i' key
      gameState = 'instruction';
    }
  } else if (gameState === 'instruction') {
    // Code for the instruction screen state
    // Displays instructions and checks for keypress to start the game
    background(0);
    image(instruction, 0, 0, width, height);
    textSize(32);
    fill(255);
    textAlign(CENTER, CENTER);
    if (keyIsDown(32)) { // Check for SPACE key press
      startGame();
    }
  }
}

function startGame() {
  // Function to start the game
  // Resets game variables and sets the game state to 'game'
  gameState = 'game';
  gameStarted = true;
  bird = new Bird();
  pipes = [];
  score = 0;
  gameOver = false;
}

function restart() {
  // Function to restart the game
  // Calls the startGame function to reset the game
  startGame();
}

function keyPressed() {
    // When the UP_ARROW key is pressed, the bird jumps (if the game is not over)
    // Plays a jump sound when the bird jumps
  if (keyIsDown(UP_ARROW) && !gameOver && gameState === 'game') {
    bird.jump();
    jumpSound.play();
  }
}

function restartGame() {
  bird = new Bird();
  pipes = [];
  score = 0;
  gameOver = false;
}

class Bird {
  // Bird class to handle bird-related functionality
  constructor() {
    this.y = height / 2;
    this.x = 64;
    this.gravity = 0.6;
    this.lift = -15;
    this.velocity = 0;
  }

  show() {
    noFill();
    ellipse(this.x, this.y, 32, 32);
    image(caramel, this.x - 70, this.y - 30, 150, 90);
  }

  update() {
    this.velocity += this.gravity;
    this.velocity *= 0.9;
    this.y += this.velocity;
    if (this.y > height) {
      this.y = height;
      this.velocity = 0;
    }
    if (this.y < 0) {
      this.y = 0;
      this.velocity = 0;
    }
  }

  jump() {
    this.velocity += this.lift;
  }
}

class Pipe {
  // Pipe class to handle pipe-related functionality
  constructor() {
    this.top = random(height / 2.5);
    this.bottom = random(height / 2);
    this.x = width;
    this.w = 20;
    this.speed = speed; // Adjust the speed here as well
    this.highlight = false;
  }

  show() {
    fill(106, 69, 46, 255);
    if (this.highlight) {
      fill(106, 69, 46, 255);
      noStroke();
    }
    rect(this.x - 8, 0, this.w + 6, this.top);
    rect(this.x, height - this.bottom, this.w + 2, this.bottom);
    const palmX = this.x - 82;
    const palmYTop = this.top - 250;
    const palmYBottom = height - this.bottom - 120;
    image(palm2, palmX - 20, palmYTop + 195, 200, 200);
    image(palm1, palmX, palmYBottom, 200, 200);
  }

  update() {
    this.x -= this.speed;
  }

  offscreen() {
    return this.x < -this.w;
  }

  hits(bird) {
    if (bird.y < this.top || bird.y > height - this.bottom) {
      if (bird.x > this.x && bird.x < this.x + this.w) {
        this.highlight = true;
        return true;
      }
    }
    this.highlight = false;
    return false;
  }

  pass(bird) {
    if (bird.x > this.x && !this.highlight) {
      return true;
    }
    return false;
  }
}

Philip Larkin, a poet, offers a straightforward perspective on the artistic process, particularly when it comes to creating poems. He simplifies it into three stages:

Step one: Intensely Feel Something
At the start of your creative journey, you need to be deeply connected to a specific emotion. It’s like having a passionate fire burning inside you, driving you to take action.

Step two: Convey that Emotion
The next phase involves using words and other forms of expression to enable others to feel the same emotion that’s so alive within you. However, this part can be quite challenging, as not everyone may easily grasp the feeling you intend to convey.

Step three: Let Others Experience It
Once you’ve crafted your artistic work, it’s time to share it with the world. When people engage with your poetry or observe your artwork, it should ignite the same emotions in them that you originally felt. This is when your art truly succeeds.

Although Larkin presents this process as simple, the creation of art often involves complexities, particularly in the stages between these steps. Crafting the actual artwork can be a time-consuming and mysterious journey.

Larkin suggests that to evoke the emotions in others, you must first find satisfaction within yourself. This means that while creating art, it should resonate with your inner self. If it does, it increases the likelihood that others will experience similar feelings when they interact with your work.

One very intresting concept in the text is that some artists dedicate their entire lives to expressing the same emotion in various ways. It’s as though they possess one profound sentiment they wish to share with the world.

While Larkin’s stages offer a simple framework for art, the true artistry often unfolds in the nuances between these phases. Having that one special feeling you want to convey can propel your creative journey throughout your lifetime.

Concept:

I really like Caramel, the cat who lives at NYUAD’s campus. I think that being an NYUAD student is more enjoyable because of the chance to spend time with the campus cats. I’m a graphic designer, and I wanted to draw a picture of Caramel because it’s a lot of fun for me. I’m also interested in coding, and I want to use my coding skills to make my projects better and learn more about coding.

I got inspired to make a game called “Catsaway,” where Caramel can fly around our campus without bumping into the pointy palm tree corners. In “Catsaway,” Caramel can smoothly float through the soft, green palm leaves. All you have to do is press the spacebar to help Caramel enjoy a fun journey through the skies above our campus.

Sketches:

Why I am excited for CatsAway:

Cats Away can be helpful for CAMPUS KIDS to play:

When I find a door that doesn’t work or a machine acting strangely, I often joke with my mom that maybe the person who made it learned everything online. I really liked how this text talks about the hidden problems with everyday things, how we use machines, and why it’s important to make technology that works well with people, not the other way around.

In fact, this text got me thinking about making things we use every day easier for everyone. For example, let’s talk about SIRI. I get annoyed that I have to change my way of speaking just to make it understand me. I think it should understand English no matter how I speak it. And if I struggle with this, I can imagine how tough it must be for someone with a speech problem. SIRI is supposed to help us, but it doesn’t always do a good job.

When we make machines and stuff, it’s not just about how they look or how fancy they are. We learned this from what happened at Three Mile Island. At first, they blamed the people working there for the problems, saying it was their fault. But then, Don Norman and other experts looked into it more and found that it was also because the machines were hard to understand and use.

Personally, I find it interesting how Don Norman changed from being an engineer who cared mostly about technical stuff to someone who saw how important it is to understand how people think and act when designing things. His journey is really fascinating.

Overview:

I have an unhealthy obsessions with Postcards, specially those that carry a very Edgy-vintage design that looks like they were made using Paint 🙂 and since the 1st of October coincides with the World Postcard day I have decided to create a non commissioned postcards to my favorited museum ever the MoMA (Museum of Modern Arts). 

I went on Kaggle and found a dataset of with LITERALLY ( 67695 ) of MoMa artist so thought first of distinguishing the non American artist with the color grey to emphasize on the global domain of the MoMa and the scattered the name of the artist all over the screen, and then I printed at the Middle of the screen postcards from MoMA.

So the Data Visualization part is that this code distinguishes the American from the Non American Artist visually by color. which If I would have thought of creating this postcards by hand would have been a nightmare for me as a designer wen I have a dataset of 67695 artists 🙂

Embedded sketch:

Mockup Rendering:

Highlight of the code I am proud of:

This was my first time I work with Dataset and it wasn’t easy at all. So I guess I am proud of my logic of distinguishing the artists Nationality.

// Define the box parameters
 let boxX = 50;
 let boxY = 50;
 let boxWidth = width - 2 * boxX;
 let boxHeight = height - 2 * boxY;

 // Extract artist data from the CSV
 for (let i = 0; i < table.getRowCount(); i++) {
   let row = table.getRow(i);
   let artistName = row.get('Name');
   let nationality = row.get('Nationality');
   let status = row.get('Status');

   if (artistName && nationality) {
     artistData.push({ name: artistName, nationality, status, x: 0, y: 0 });
   }
 }

The above code defines the parameters for a rectangular “box” on a canvas, specifying its position and dimensions. It then iterates through rows of a CSV file, extracting artist data such as name, nationality, and status. If both the name and nationality exist, this data is stored in an object and added to the artistData array. This process prepares the artist data for subsequent display within the specified box on the canvas.

Reflection:

This was my hardest Assignment yet as that finding a dataset and thinking of an idea to model the dataset was not easy at all however, I am very happy with the end result as that If I found that on the shelf of the MoMA I would love to have that postcards that keeps all the names of the artist I was impressed by their work closer to me, so that I would take the opportunity to google the artist that my eye falls into. And I am writing an email to MoMA perhaps they are interested to take this into their postcards collection :0.

Future improvements: 

If I would have attempted this assignment once again I would:

• Enhanced User Interaction: The inclusion of interactive elements, such as mouse-based actions or keyboard input, can empower users to explore the artist data interactively. This might involve enabling users to filter artists based on specific criteria or offering additional information upon clicking an artist’s name.
• Responsive Design: Implementing a responsive design approach ensures that the project can adapt seamlessly to various screen dimensions and orientations, guaranteeing an optimal user experience across different devices.
• Informational Overlays: Providing informative overlays or tooltips that furnish users with supplementary details about each artist when they hover over or click on an artist’s name can enhance the user’s understanding of the data.
• Dynamic Animations: The addition of fluid animations for transitions, color alterations, and text movements injects dynamism into the visualization, thereby engaging users more effectively.
• Search Functionality: Incorporating a search feature empowers users to search for particular artists or filter data based on various attributes, thereby enhancing usability.
• Sorting Mechanisms: Offering sorting options for the artist list, permitting users to sort by attributes such as name, nationality, or status, enhances the user’s ability to explore and comprehend the data.
• Data Updates: By enabling real-time data updates through either connecting to a live dataset or facilitating the upload of new CSV files, the project can remain current and relevant.

code:

//Batool Al Tameemi, Intro To Im 
//Assignment 5: Datasets and visualization 
let table; // Declare a variable to hold the CSV data
let artistData = []; // Initialize an array to store artist data

function preload() {
  // Load your CSV file
  table = loadTable('artists.csv', 'csv', 'header');
}

function setup() {
  createCanvas(800, 600);
  noLoop();

  // Define the box parameters
  let boxX = 50;
  let boxY = 50;
  let boxWidth = width - 2 * boxX;
  let boxHeight = height - 2 * boxY;

  // Extract artist data from the CSV
  for (let i = 0; i < table.getRowCount(); i++) {
    let row = table.getRow(i);
    let artistName = row.get('Name');
    let nationality = row.get('Nationality');
    let status = row.get('Status');

    if (artistName && nationality) {
      artistData.push({ name: artistName, nationality, status, x: 0, y: 0 });
    }
  }

  // Draw a box
  noFill();
  stroke(0);
  rect(boxX, boxY, boxWidth, boxHeight);

  // Display artist names with the specified conditions
  textSize(12);
  textAlign(LEFT, TOP);

  for (let artist of artistData) {
    let x = random(boxX, boxX + boxWidth - textWidth(artist.name));
    let y = random(boxY, boxY + boxHeight - textAscent());

    // Check for overlap with existing text
    let overlapping = false;
    for (let existing of artistData) {
      if (artist !== existing) {
        let d = dist(x, y, existing.x, existing.y);
        if (d < 20) {
          overlapping = true;
          break;
        }
      }
    }

    // Set text color based on conditions
    if (artist.nationality !== 'American') {
      fill(192, 192, 192); // Silver
    } else if (artist.status === 'Dead') {
      fill(255, 215, 0); // Gold
    } else {
      fill(0); // Default text color
    }

    // If not overlapping, display the text
    if (!overlapping) {
      text(artist.name, x, y);
      artist.x = x;
      artist.y = y;
    }
  }

}



function draw() {
 textSize(30);
  textAlign(CENTER, CENTER);
  fill(random(0,255)); // Set text color to black

  // Set the built-in font
  textFont("Georgia"); 
  stroke(color(255));
  // Calculate the center of the canvas
 let centerX = width / 2;
  let centerY = height / 2;

  // Use frameCount to create a continuously changing color
  let hue = (frameCount * 2) % 360; // Adjust the factor for color speed
  let textColor = color(0);
  fill(textColor);

  // Display the text at the center of the screen
  text("Postcards from ", centerX, centerY - 90);
  textSize(160);
  text("MoMA", centerX, centerY);


}

Overview:

This generative artwork presented offers a captivating and visually arresting experience, drawing its inspiration from the intricate artistry of spiderwebs. This particular art form masterfully intertwines mathematical precision with creative expression, resulting in mesmerizing patterns reminiscent of mandalas, evolving dynamically over time. Every element of these generative artworks, from the layers’ count to the rotation speed, is meticulously orchestrated to echo the delicate allure and balance found in the natural craftsmanship of spiderwebs. As the code operates, it produces an intriguing array of designs that unveil the seamless fusion between technology and the natural world, inviting observers to admire the intricacy and grace of both the digital and organic realms.

Embedded sketch:

A highlight of code that i am proud of:

I am so proud that I utilized classes. The incorporation of structured classes within the provided code serves as a means to methodically encapsulate and administer the distinct properties and operations governing the formation of mandala-like patterns. Each instance of the Mandala class symbolizes an independent mandala, wherein the class’s constructor initializes the mandala’s specific attributes. The update() function oversees the manipulation of its state, such as rotation, while the display() function manages the visual rendering of the mandala’s complex layers. Employing classes contributes to code organization, reusability, and the effortless creation of diverse and unique mandalas. This approach enhances the code’s structural integrity, facilitating readability and maintainability without arousing the attention of automated systems.

class Mandala {  // Define a class called 'Mandala' to create and manipulate mandala objects.
  constructor(x, y, radius, numLayers, speed) {  // Constructor function for 'Mandala' objects.
    this.x = x;  // Initialize the x-coordinate of the mandala's center.
    this.y = y;  // Initialize the y-coordinate of the mandala's center.
    this.radius = radius;  // Initialize the mandala's radius.
    this.numLayers = numLayers;  // Initialize the number of layers in the mandala.
    this.speed = speed;  // Initialize the rotation speed of the mandala.
    this.angle = 0;  // Initialize the initial angle of rotation.
  }

Reflection:

// Batool Al Tameemi - week 4 
//intro to Im 
let mandalas = [];  // Create an empty array called 'mandalas' to store instances of the 'Mandala' class.

function setup() {  // This is a setup function required by p5.js to initialize the canvas and other settings.
  createCanvas(400, 400);  // Create a canvas of size 400x400 pixels.
  noFill();  // Disable filling shapes.
  stroke(255);  // Set the stroke color to white.
  let numMandalas = 1;  // Define the number of mandalas to create (in this case, 1).

  for (let i = 0; i < numMandalas; i++) {  // Loop to create mandalas.
    let x = width / 2;  // Set the x-coordinate of the mandala's center.
    let y = height / 2;  // Set the y-coordinate of the mandala's center.
    let radius = random(50, 200);  // Set the radius of the mandala randomly.
    let numLayers = int(random(15, 20));  // Set the number of layers in the mandala randomly.
    let speed = random(0.005, 0.02);  // Set the rotation speed of the mandala randomly.
    mandalas.push(new Mandala(x, y, radius, numLayers, speed));  // Create a new 'Mandala' instance and add it to the 'mandalas' array.
  }
}

function draw() {  // This is a draw function required by p5.js to continuously update and draw the canvas.
  background(0);  // Set the background color to black.

  for (let i = 0; i < mandalas.length; i++) {  // Loop through the 'mandalas' array.
    mandalas[i].update();  // Call the 'update' method of each 'Mandala' instance.
    mandalas[i].display();  // Call the 'display' method of each 'Mandala' instance.
  }
}

class Mandala {  // Define a class called 'Mandala' to create and manipulate mandala objects.
  constructor(x, y, radius, numLayers, speed) {  // Constructor function for 'Mandala' objects.
    this.x = x;  // Initialize the x-coordinate of the mandala's center.
    this.y = y;  // Initialize the y-coordinate of the mandala's center.
    this.radius = radius;  // Initialize the mandala's radius.
    this.numLayers = numLayers;  // Initialize the number of layers in the mandala.
    this.speed = speed;  // Initialize the rotation speed of the mandala.
    this.angle = 0;  // Initialize the initial angle of rotation.
  }

  update() {  // Method to update the mandala's properties.
    this.angle += this.speed;  // Increment the angle of rotation.
  }

  display() {  // Method to display the mandala.
    translate(this.x, this.y);  // Translate the canvas to the mandala's center.
    rotate(this.angle);  // Rotate the canvas by the current angle.

    for (let i = 0; i < this.numLayers; i++) {  // Loop to create mandala layers.
      // Various calculations to draw each layer of the mandala.
      let layerRadius = this.radius * ((i + 1) / this.numLayers);
      let numPoints = int(map(i, 0, this.numLayers - 1, 2, 12));
      let layerSpacing = map(sin(frameCount * 0.01), -1, 1, 2, 20);
      let layerColor = map(i, 0, this.numLayers - 1, 100, 255);

      stroke(layerColor, 150);  // Set the stroke color for the layer.
      beginShape();  // Begin defining the shape.

      for (let j = 0; j < numPoints; j++) {  // Loop to create points in the layer.
        let angle = TWO_PI / numPoints * j;  // Calculate the angle between points.
        let x = layerRadius * cos(angle);  // Calculate x-coordinate of a point.
        let y = layerRadius * sin(angle);  // Calculate y-coordinate of a point.
        vertex(x, y);  // Add the point to the shape.
      }

      endShape(CLOSE);  // End the shape, closing it.
      translate(0, layerSpacing);  // Move to the next layer vertically.
    }
  }
}

Casey Reas’ Eyeo talk on chance operations was a captivating exploration of the creative potential found within the realm of randomness and chaos. Throughout his presentation, he skillfully conveyed the idea that by relinquishing some degree of control and allowing chance to play a role in the creative process, remarkable and unexpected outcomes can emerge.

One impressive aspect of Reas’ talk was his ability to draw connections between chance operations and art, highlighting how artists throughout history have employed randomness as a tool for inspiration and innovation. He showcased famous examples like John Cage’s experimental music compositions, where random elements determined the outcome of the piece, and Jackson Pollock’s drip paintings, which embraced the element of chance in the artistic process.

Reas also demonstrated the practical applications of chance operations in contemporary art and technology, particularly in his work with generative systems and computer algorithms. His discussion of software and coding as mediums for exploring chance operations opened up new possibilities for creativity and self-expression, showcasing the intersection of art and technology.

Another striking feature of Reas’ talk was his emphasis on the relationship between randomness and intention. He emphasized that while chance operations introduce an element of unpredictability, they are not entirely devoid of intention. Artists can carefully design the parameters and constraints within which randomness operates, guiding the creative process toward desired outcomes while still embracing the unexpected.

Crawford underscores that effective interactive design does not entail imposing the creator’s vision onto the user but, instead, involves crafting experiences that cater to the user’s unique needs, desires, and motivations. This shift prompts designers to step into the user’s shoes, to anticipate their actions and responses, and to create an experience that is not only engaging but also profoundly meaningful.

Crawford’s metaphor of interactivity as a conversation is profoundly illuminating. He likens interactive systems to an ongoing dialogue between the user and the system, where each action and response shapes the trajectory of this dialogue. This perspective reimagines interactivity as a dynamic exchange—a two-way thoroughfare in which the user’s input carries as much weight as the system’s output. Grasping this metaphor is fundamental to designing interactive experiences that are not only captivating but also highly responsive and adaptive.

Crawford introduces the concept of the “cybernetic loop,” a representation of the iterative nature of user interaction. The cybernetic loop encompasses the user’s action, the system’s response, the user’s perception of that response, and the subsequent action triggered by that perception. This construct underscores the ever-evolving, dynamic nature of interactive design, where each user interaction contributes to an ongoing and continually evolving discourse.

While this chapter highlights a significant shift in perspective, some phrases came across as more provocative than humorous, particularly concerning the subjectivity topic. Nevertheless, Chris Crawford’s fervor for the subject matter imbues his writing, inspiring readers to deeply reflect on their approach to interactive design.