Author: Zere Kystaubayeva

1. Something that drives me crazy and how it can be improved: “automatic doors” across campus! Primarily, the ones in D2, they drive me crazy every day. These so-called “automatic doors” are not even automatic at times, and are super heavy. A lot of the times they simply do not work, and I have to manually open them or wait until somebody opens them for me. It is especially frustrating when you want to have a nice lunch/dinner outside of D2, but carrying the heavy tray in and out of the cafeteria is made almost impossible if you are by yourself. These automatic doors could be improved by making their behavior consistent and by adding clearer signifiers and feedback to show when they are working. Since people in D2 often carry trays, the doors should be designed to open every time and stay open long enough to accommodate real use. This would provide a clear conceptual model of those “automatic doors”.
2. How can I apply some of the author’s principles of design to IM?

   The main lesson from the reading is that interactive media should not make users stop and think, “What is going on here?” or “What am I supposed to do here?” Instructions, explanations, or repeated trials directly affect the user experience of what is meant to be interactive and understandable. In my opinion, interactive systems should clearly signal what actions are possible and what will happen after those actions are taken. Design has to be good – buttons clickable, interactions should respond quickly to the user. That is why feedback is important. I believe that IM should work with normal human expectations, that way there would be more people interested in it or pursuing it.

Concept: I felt inspired by the generative text artworks we reviewed in our last class. I decided to construct the scene using repeated words, rather than the usual shapes or images.

Process: I really tried to simplify my task of creating this piece, as I think that my skills with JavaScript are quite limited. The challenging part for me was trying to understand how to map out/divide the canvas into regions for text. It’s not a shape with particular coordinates, and that is why it was a little hard for me. Here is an example from the code:

// sky
function drawSky() {
  fill(100, 160, 255);
  textSize(14);

  for (let y = 0; y < height / 2; y += 20) {
    for (let x = -50; x < width; x += 60) {
      text("sky", x + offset % 60, y);

My code:

let offset = 0;

function setup() {
  createCanvas(400, 400);
  textFont('Arial');
}

function draw() {
  background(255);
  offset += 0.5;

  drawSky();
  drawSun();
  drawBuildings(); //  static buildings!!!!!
  drawRoad();
  drawCars();     
}
// sky
function drawSky() {
  fill(100, 160, 255);
  textSize(14);

  for (let y = 0; y < height / 2; y += 20) {
    for (let x = -50; x < width; x += 60) {
      text("sky", x + offset % 60, y);
    }
  }
}
// sun
function drawSun() {
  fill(255, 180, 0);
  textSize(16);

  for (let y = 40; y < 120; y += 18) {
    for (let x = 250; x < 350; x += 40) {
      text("sun", x, y);
    }
  }
}
// bldngs
function drawBuildings() {
  fill(80);
  textSize(12);

  for (let y = height / 2; y < height - 80; y += 18) {
    for (let x = 0; x < width; x += 55) {
      text("building", x, y);
    }
  }
}
// road
function drawRoad() {
  fill(120);
  textSize(14);

  for (let y = height - 80; y < height; y += 20) {
    for (let x = -40; x < width; x += 60) {
      text("road", x - offset % 60, y);
    }
  }
}
//cars 
function drawCars() {
  textSize(16);

  let colors = [
    color(255, 0, 0),     // red
    color(255, 200, 0),   // yellow
    color(0, 180, 0)      // green
  ];

  let roadTop = height - 80;

  for (let i = 0; i < 3; i++) {
    fill(colors[i]);

    let y = roadTop + 25 + i * 15;
    let speed = 6 + i * 2; // FAST
    let x = (frameCount * speed) % (width + 80) - 80;

    text("car", x, y);
  }
}

Reflection: I constantly mention this, but I feel that, due to my limited ability with JavaScript, I’m unable to create pieces that match my imagination, which is why I tend to stick to safer and simpler options for the sake of my sanity. I will try to do more elaborate artworks in the future and expand my coding skills.

Concept: This sketch depicts a group of ladybugs crawling across the screen, represented by emojis. Each ladybug is an object with its own position and movement, and randomness makes the composition generative and slightly different every time it runs. I chose the concept to be simple, focusing more on the motion and repetition of visuals.

Code I’m proud of: I am proud of using the “move” and “display” functions inside an array that stores the ladybugs:

for (let i = 0; i < ladybugs.length; i++) {
  ladybugs[i].move();
  ladybugs[i].display();

Code:

 Reflection: I feel like it is getting more and more complicated with each lesson, but I am trying my best to include the required functions into our homework codes. That is why this week’s sketch feels very basic to me.

• • My concept of this week’s generative art task is an apartment building in a big city. Using the “random” function, I made the windows show different colors each time the mouse is clicked, reflecting that each resident has different stories happening to them every day.
  • I came about this idea when experimenting with functions and watching YouTube tutorials for gen. art.  . YouTuber Patt Vira created a tutorial on random smiley faces generative art, and the changing colors reminded me of lights reflected in people’s windows at night. I chose Starry Night by Vincent Van Gogh as the background. I saw the original painting at MoMA in NYC, and I was reminded of New York when creating this piece of work, which is why I chose this painting as the background.
  • Piece of code that I am proud of: the changing of the window’s colors. There’s a dynamic change in art, as well as loops used, that prevented me from creating each rectangle manually.

• • Embedded sketch:

• let bg;
  
  function preload() {
    bg = loadImage("starrynight.jpg");
  }
  
  function setup() {
    createCanvas(400, 400);
    noLoop();
  }
  
  function draw() {
    // Starry Night background
    image(bg, 0, 0, width, height);
  
    // Building
    fill(51, 0, 0);
    noStroke();
    rect(10, 20, 300, 390);
  
    // Door
    fill(255);
    rect(135, 300, 60, 90);
    //Doorknob
   stroke(0);
    strokeWeight(2);
    circle(190,345,10)
    // Windows
    stroke(0);
    strokeWeight(2);
  
    for (let y = 40; y < 260; y += 60) {
      for (let x = 40; x < 280; x += 60) {
        fill(random(200), random(200), random(200));
        rect(x, y, 40, 40);
      }
    }
  }
  
  function mousePressed() {
    redraw();
  }
  
  

   

• Reflection and ideas for future work or improvements: I’m proud of this sketch because it creates a colorful grid of windows that changes every time you click, making it interactive and fun. In the future, I’d like to make the colors change gradually or add more shapes to make it even more dynamic.

• My concept of the self-portrait assignment is me as a bird. I have seen a lot of videos online with cute birds lately, so this is the first thing that came into my mind. The bird is eyeing the worm, which is a pink oval moving together with the mouse.

• function setup() {
    createCanvas(400, 400);
  }
  
  function draw() {
    background(204,255,255);
    
  
    fill(102, 255, 255)
   circle(130,280,100);
    
      fill(102, 255, 255)
   circle(270,280,100);
    
    
    circle(180,210,50);
    fill(102,255,255)
    circle(200,320,200);
     fill(102,255,255)
    circle(200,200,150);
    fill (255,204,255);
     fill(255)
    circle(170,190,20);
  fill(255)
    circle(225,190,20);
    ;
    fill (250,250,0)
   triangle(200,190,200,210,230,200)
  
    
    let moveX=constrain((mouseX - width / 2), -4, 4);
    let moveY = constrain((mouseY - height / 2), -4, 4);
    // pupils
  fill(0);
  
  // left pupil
  circle(170 + moveX, 194 + moveY, 10);
  
  // right pupil
  circle(225 + moveX, 194 + moveY, 10);
    
    
    textSize(32);         
    fill(0);               
    text("I am a bird!", 100, 100);
    
     fill(255,255,255)
   circle(200,350,130);
    
    //worm
      fill(255,204,229)
   ellipse(mouseX, mouseY,80,40);
  
  }

• A code that I am proud of is the one that makes the bird’s pupils move alongside the “worm”. I had to look up how to constrain the pupils within the eyes so they would not move all around the canvas:
• let moveX=constrain((mouseX – width / 2), -4, 4);
  let moveY = constrain((mouseY – height / 2), -4, 4);
  // pupils
  fill(0);// left pupil
  circle(170 + moveX, 194 + moveY, 10);// right pupil
  circle(225 + moveX, 194 + moveY, 10);
• Embedded sketch:
• Link to sketch
• “How this was made”: I have created the body of the bird using simple circles. The face of the bird was also created using simple shapes – eyes and pupils are circles, while the beak is a triangle. At first, I had forgotten math, so I had a hard time understanding the coordinates of the triangle, but I figured it out after asking the Professor. We have learned the mouseX,mouseY function in class, so I had the idea to make some sort of an interactive object in the sketch. I decided for it to be a worm since birds like to eat worms. Only the worm moving felt a bit strange, so I decided to make the bird’s pupils move as well. I looked up the constrain function in the Reference page, but had a hard time understanding it, so I used AI to break it down. After I figured it out, I had the bird’s pupils moving.
• Reflection and ideas for future work or improvements: Use something more complicated than 2D shaped to draw, focus on breaking down the functionality of the code first to fully grasp what each part of the function is responsible for.