Month: September 2023

Concept:

In this project I wanted to create something cute and there’s nothing cuter than cats! So, adding the saying “cats have seven lives” I implemented it by adding my very own drawing of a cat that appears within seven clicks. After clicking seven times the background restarts.

Cat speedDraw

Highlight of Code: 

Using this class code I have set the randomness of my images to follow a certain pattern within a limited sized canvas.

class Cat {
  constructor(x, y, img) {
    this.x = x;
    this.y = y;
    this.img = img;
    this.angle = random(TWO_PI);
    this.speedX = random(1, 3);
    this.speedY = random(1, 3);
  }

  update() {
    this.x += this.speedX * cos(this.angle);
    this.y += this.speedY * sin(this.angle);

    if (this.x < 0 || this.x > width) {
      this.angle = PI - this.angle;
    }

    if (this.y < 0 || this.y > height) {
      this.angle = -this.angle;
    }
  }

  display() {
    imageMode(CENTER);
    image(this.img, this.x, this.y);
  }
}

In this set of codes I was able to put together the idea of clicking the screen seven times to make the program alternate between a random image of both my drawings. When making the eighth click the program restarts.

function mouseClicked() {
  if (numClicks < maxClicks) {
    let catImage = catImages[numClicks % 2]; // Alternate between cat images
    let cat = new Cat(mouseX, mouseY, catImage);
    cats.push(cat);
    numClicks++;
  } else {
    // Reset after 7 clicks
    cats = [];
    numClicks = 0;
  }
}

Reflection and Ideas for Future Work:

This work took me so long and probably the ones with the most errors. I keep forgetting to add my class codes. I also had a problem with uploading my images without adding any additional local programs as suggested in different websites. After resizing my images and going through my code multiple times I finally got it running.

Edit: https://editor.p5js.org/mariamalkhoori/sketches/6hPD6jbgn

Chris Crawford’s exploration of interactivity in “The Art of Interactive Design” challenges us to rethink our understanding of this fundamental concept in design. By emphasizing interactivity as a two-way conversation, critiquing its misuse, and highlighting its subjectivity, Crawford underscores the importance of user-centric design principles. In a world saturated with technology and digital interfaces, prioritizing active involvement and meaningful engagement is paramount. Ultimately, the essence of interactivity lies in its ability to empower users, giving them a voice and agency in their digital interactions, and this perspective should guide our approach to interactive design.

Crawford’s emphasis on interactivity as active involvement aligns seamlessly with the principles of user-centric design. In user-centric design, the user’s experience takes precedence, and the goal is to empower users by giving them the ability to make meaningful choices and feel a sense of agency. Interactivity, as defined by Crawford, becomes a means to achieve this empowerment.

I believe that user-centric design, while valuable, can face several challenges. It can inadvertently assume homogeneity among users, overlooking diverse needs. Overreliance on user preferences may inhibit innovation and encourage a short-term focus, potentially neglecting long-term considerations. Balancing user wants with genuine needs can be tricky, and accommodating constant user feedback can lead to scope creep and project delays. Biased or limited user research data can result in designs that cater to specific subsets of users, and resistance to change from users may impede progress. Additionally, striving to please all users can lead to a design-by-committee approach. To address these challenges, user-centric design should be part of a holistic approach that considers innovation, business goals, ethics, and sustainability, while maintaining flexibility to adapt to evolving user needs and technology.

This is my first sketch of a “Scuba Diver”.

My art project does not seem as realistic as the photo. However, I tried to use a similar blue color and an array of fish to portray a Scuba Diver’s active moments. This fall break I am planning to go scuba diving with my friends. Scuba diving is an exhilarating and transformative experience for many people. The moment I descend beneath the surface, I can enter a completely different world filled with awe-inspiring marine life, vibrant colors, and a profound sense of weightlessness. The feeling of gliding through the water, exploring coral reefs or underwater caves, and encountering fascinating creatures can evoke a sense of wonder and adventure. The rhythmic sound of my own breathing through the regulator, the cool embrace of the water, and the importance of unity with the underwater environment can create a profound sense of peace and tranquility.

I created this art project to make people feel the same as me.

I wanted to make the fish look more realistic. So, I used arrays to store the points of the wavy background and objects (instances of the Fish class) to represent and control the behavior of fish in the underwater scene. Also, two images are preloaded using the preload() function: ‘scuba.png’ and ‘fish.png’. These images are used for the scuba diver and fish graphics in the sketch. Therefore, The scuba diver and fish move and are displayed on the canvas, creating an animated underwater environment.

// Create the blue wave
  let xOff = 0;
  for (let x = 0; x <= width + 10; x += 20) {
    let yOff = 0;
    let y = height - 100 + map(noise(xOff, yOff), 0, 1, -20, 20);
    wave.push(createVector(x, y));
    xOff += 0.1; // Adjust the noise detail for different wave patterns
  }

  // Create fish objects
  for (let i = 0; i < 5; i++) {
    fish.push(new Fish());
  }

function preload() {
  // Load the dolphin and fish images
  dolphinImg = loadImage('dolphin.png');
  fishImage = loadImage('fish.png');
}

To enhance my code for the underwater scene, there are several areas for improvement. It would be better to reorganize the code by dividing it into functions or classes to improve readability and maintainability. Additionally, defining constants or variables for parameters such as canvas dimensions, image sizes, and the number of fish can make it easier to experiment with different settings. Maybe next time, comprehensive comments and documentation can be added throughout the code to explain its various components and functions, aiding in understanding and collaboration. I would try to make more lively and aesthetic waves also!

 

 

 

In the initial chapter of Chris Crawford’s book, “The Art of Interactive Design,” titled “What Exactly is Interactivity?” the author delves into the concept of interactivity and attempts to provide a comprehensive definition.

Reading this text, I find myself nodding in agreement with the author’s perspective on the term “interactivity.” It’s evident that the author is critical of how the term is used and misused in contemporary discourse. The comparison of interactivity to a conversation, where two actors alternate between listening, thinking, and speaking, is thought-provoking. This made me question: How well does this metaphor hold up when we apply it to different contexts, especially in the digital realm where human-computer interactions can be vastly different from human-human conversations?

The author’s critique of the misuse and overuse of the term “interactivity” in various contexts, from marketing to technology, is a valid point. The example of a laundry detergent labeled as “specialized terminology” humorously illustrates this point and serves as a reminder of the potential for specialized language to lose its meaning.

The discussion about the subjectivity of interactivity is thought-provoking. The idea that interactivity might exist in the eye of the interactor raises questions about how we define and measure it, especially in various contexts where it might manifest differently.

The author’s exploration of what isn’t interactive, such as printed books and movies, challenges traditional definitions and prompts me to reconsider what truly constitutes interactivity. It’s a reminder that not all forms of communication or media can be classified as interactive.

The world grows most quiet during the Blue Hour, that sliver of time right before night. So short as to almost not have existed. During the Blue Hour, babies stop crying. So mothers gaze out their windows. Candles burn a bit dimmer. The Blue Hour is the world heaving one last sigh before going to sleep. I’ve always maintained that poets write from the Blue Hour of their brains.

I look for the Blue Hour in every movie. It’s in Moonlight. When Chiron’s staring into the ocean, it goes, “In the moonlight, black boys look blue.” It’s in The Act of Killing, a documentary about Indonesian genocide. I don’t think there’s a word in the English language to describe the action of sharply taking in a breath, out of breathlessness. The kind of breath that moves you into an almost-cry. It’s not a gasp. But whatever you call it, that’s what I did when I saw that blue picture. All the night birds taking flight. It’s in Wong Kar Wai’s In the Mood for Love. I’ve inserted a picture below:

It’s in Babel. I’ll never forget those two boys laughing against the wind on the mountain, before they knew their lives were over. The sound cut out with all the blue. Like the blue was in your head. In their heads. I noticed that Past Lives did the same thing with its own Blue Hour shot. Cut out all the sound. The Blue Hour is Eternal. It is quiet. It is sad. Profoundly so. I exist in the Blue Hour in the cave of my head and the trench of my heart. It’s the best time to smoke a cigarette. Hence my assignment. I wanted to capture the spirit:

https://editor.p5js.org/EloraTrotter/sketches/GX1kLdNr6

You can take a look at the code above. I’m very glad that I was able to implement loops, classes, and constructors. I wanted to increase the frame rate but P5Js kept crashing. With help from Professor Riad and the ever-reliable Coding Train (Youtube video linked here: https://www.youtube.com/watch?v=UcdigVaIYAk), I was able to fully understand what I was writing. I tried tweaking the the particles so that they became different sizes, or less opaque, but I scrapped all that in the end. Simplicity suited this piece, just like simplicity suits the Blue Hour. I would like to continue working on this piece because I have an unfinished vision of the smoke being huge Van Gogh-like swirls. But that’s a task for future Elora. Carpe the noctem. You learn.

Also- you know on second thought. I’d also like to learn how to integrate music and coding. One song that captures Blue Hour for me is “Midnight Blues” by Pavel Milyakov (Bryan Waterman rec). I’d like people to listen to that while viewing this.