Author: Ling

Prompt:

• What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?
• How can you apply some of the author’s principles of design to interactive media?

Response:

One of the inventions that drives me crazy on weekly basis is the washing machine. When I tried to do laundry, I am always confused on multiple options that are provided on the panel.

As demonstrated by the picture above, I am confused by the information presented. What is easy care? what is its difference with skin care? when should I choose easy care? When choosing the temperature, how will different temperature affect the washing effect? As a result, I need to go through multiple websites to look for my answer. To improve on this process, I believe the machine could be more interactive. For example, using a display screen to ask users to choose what type of clothes are they washing and then asking how long would they want to wait, etc.. To save the machine from asking repeated question, the screen could provide a default option for users if users have found the best washing mode.

I want to focus on HCD later on for my interactive media works. I always admire how Steve Jobs design the iPad. He successfully incorporated the touch screen technology with very intuitive human interaction as he stated that a 6-year-old could start playing games on iPad without any instruction(visual, text, etc.) (https://www.forbes.com/sites/michaelnoer/2010/09/08/the-stable-boy-and-the-ipad/). Everything should be intuitive and audience could receive very clear feedback after they interact.

Here’s the final output:

For this program I want users to interact with balls on the screen to check how fast they can click on the ball that randomly appears on the screen.

To control the ball instance, I created a ball.js class in the files and part of the code that I am proud of is

isExpired(now) {
    return now - this.bornAt >= this.lifespan;
  }

  contains(px, py) {
    return dist(px, py, this.x, this.y) <= this.r;
  }

this code control the ball disappearing time as users will fail to click on the ball if they move their mouse slow.

To control which ball to disappear in a sequential manner, I use array to control the sequence of spawning and disappearing the ball

for (let i = balls.length - 1; i >= 0; i--) {
    let b = balls[i];
    b.draw();

    // remove if expired
    if (b.isExpired(now)) {
      balls.splice(i, 1);
    }

Future Improvements:

I could add a score board somewhere so that user know how they well they perform in this “clicking the ball game.”

 

Prompt: What do you consider to be the characteristics of a strongly interactive system? What ideas do you have for improving the degree of user interaction in your p5 sketches?

Based on the reading, a strong interactive system would involve several cycles of listening, thinking, and speaking processes. He denied movie as interactive as the content does not alter based on audiences’ reactions. However, I strongly disagree his opinion as audiences choose to attend this movie to listen the expressions by the movie directors expressed through images and sounds, during the watching experience, movies would alter audience emotion along and this process, in my opinion, is interactive. i believe interactivity should be defined as a media’s ability alter the state of its audiences. And therefore a strong interactivity would be medias that have really strong ability to affect the audience whether it is through responding audiences’ input or itself would be strong enough to affect audience regardless of their reaction. There are several ways of affect audiences and we don’t have to limit the ways of interactivity like the author did.

To improve the degree of user interaction, I believe there are two aspects that I should consider most. First, the design itself should be full of aesthetics and would emotionally change the audiences’ states. Second, the design would change based on the user input to improve the level of engagement or concentration of the audiences.

prompt: How are you planning to incorporate random elements into your work? Where do you feel is the optimum balance between total randomness and complete control?

I watched the video after I completed the coding assignment. Surprisingly, some of the idea from the presenter coincide with thoughts that crossed my mind during creation.

First, the presenter argued that the emergence of randomness in computers renders new life to creation of art. I agreed strongly as computers are already good at repeating simple patterns and this usually leads to stunning effect as it appeared in the presenters’ examples, however, to create certain chaotic element in the art piece, using randomness that is achieved through built-in functions in computers shred new light on adding vividness into the artwork. For example, patterns could appear in different directions, different styles, and for each time the key is pressed, something new appears.

Second, I also agree with the presenter’s idea of having something simple to govern the art piece is essential and I believe this is the best balance between total randomness and complete control. In particular, computers need certain elements, as simple as a line, to work with and then randomness should be added to on top of this repeated patterns. If we let randomness totally governs the art piece, it would lead to a complete chaotic situation in which no aesthetics could be observed.

Here’s the final output.
Inspiration:

How “for” and “while” work are often related to the term repetition: by applying these two statements simplify programmers job to program for repetitive scenarios. While at the same time, another keyword in the reading for this week is “random”, so I decided to create a piece that combines the two.

Through first impression, my art work is a rough imitation of the art pieces created by Piet Mondrian(https://artsandculture.google.com/entity/m0crnb5?hl=en). When I first saw them in museums, I was shocked by their simplicity. However, a question rises in my head, if we draw lines and place colors in those grids randomly will they achieve the same visual effect?

Through this interactive creation, in my opinion, it is very hard to achieve same visual effect by just randomly drawing lines on canvases. Only certain ratio of arrangements of lines and certain arrangements of colors create artistic effects.

Highlight of Code:

The complete code could be found on (https://github.com/dr04002/Intro_IM/blob/main/Assignment2/sketch.js). GPT5 is employed in assisting the completion. However, there are few interesting codes.

function makeRandomLines(count, span, margin, minGap) {
  const picks = [];
  let tries = 0, triesLimit = 5000;
  while (picks.length < count && tries < triesLimit) {
    tries++;
    const x = random(margin + LINE_W, span - margin - LINE_W);
    if (picks.every(p => Math.abs(p - x) >= minGap)) picks.push(x);
  }
  picks.sort((a,b)=>a-b);
  return picks;
}

To generate random lines, there are several difficulties:

1. the lines must have the same numbers of the original piece so that it is easier for the transition effect
2. the lines have to stay inbound of the canvas
3. a minimum distance is imposed to ensure lines are not too close to each other

These difficulties are solved through:

1. using parameter count to ensure the same number of lines
2. using random(margin + LINE_W, span – margin – LINE_W) to control the lines’ positions within boundaries
3. picks.every(p => Math.abs(p – x) >= minGap controls the lines distances.

Future improvements:

1. the randomized art piece could have more or less lines than the original piece, but this would make the transition effect way harder
2. the stroke weight could also be randomized to see how different compositions of stroke weights affect the audience

 

Here’s the final output(hint: try to move the mouse around the portrait).

Inspiration:

From long ago, I watched the Love Death + Robots series produced by Netflix and loved the story of Zima Blue. https://www.imdb.com/title/tt9788510/ . I love the plot and the artistic choice, so when it comes to a chance to digitally create something related to my self-portrait, I decided to draw a painting in the style of Zima Blue.

However, I am not good at drawing and learn how to draw picture quickly in p5js almost seems impossible. Thanks to the development of computer vision and the style transfer algorithm(https://en.wikipedia.org/wiki/Neural_style_transfer), I was able to upload my picture and a photo of Zima Blue to ChatGPT and ask it to perform style transfer.

Here’s the Zima Blue original episode screenshot and the photo I obtained after style transferring to one of my photos.

(original episode screenshot)

(style-transferred picture)

Work Flow:

However, the produced format is in jpg style and it is impossible to convert it into drawing functions that are built in p5js. And directly asking GPT to transfer the image to p5js code produces unintended effects.

 

(direct p5js conversion)

 

I consulted previous student Pi(pi.ko@nyu.edu) for assistance and solution is followed:

1. upload the jpg file to websites like(https://www.cutout.pro/photo-enhancer-sharpener-upscaler) to increase the number of pixels in the photo.
2. load the file into Adobe Illustrator use the Make Trace Command to receive the SVG file(https://en.wikipedia.org/wiki/SVG) which contains all the x,y coordinate of the lines so it is possible for it to be converted into built-in functions in p5js(the parser could be found in the appendix)

After this, I worked with GPT to color the drawing. Since they are of irregular shapes and the parser convert them into coordinates, it is hard for me to identify which parts to color. So, I ask GPT to write a helper function to label the region of the curves and the coloring comes after.

In the end, I want to add an effect of changing the background color with mouse moving, so the central logic behind is as followed:

// Normalize mouse to 0..1 (works even when mouse is outside the canvas)
const mx = constrain(mouseX / width,  0, 1);
const my = constrain(mouseY / height, 0, 1);

// Use mouseX to steer hue, mouseY to steer saturation/brightness.
// Feel free to tweak the ranges to taste.
const baseHue = map(mx, 0, 1, 20, 220, true);     // left→right: orange → blue
const sat     = map(my, 0, 1, 70, 90,  true);     // bottom→top: more vivid
const bTop    = map(my, 0, 1, 95, 70,  true);     // top band gets darker as you go down
const bMid    = map(my, 0, 1, 90, 65,  true);
const bBot    = map(my, 0, 1, 80, 60,  true);

The complete code and the parser could be found on:

1. complete code(copy and paste the code into p5js and you will receive what’s above): https://github.com/dr04002/Intro_IM/blob/acaed841ba9257a17bef0dad063c0cf1d1e4a1bb/sketch.js
2. parser:https://github.com/dr04002/Intro_IM/blob/acaed841ba9257a17bef0dad063c0cf1d1e4a1bb/svg_conversion

Here are future improvements that I could make:

1. the left shoulder should be blue but they are left blank in this drawing
2. the size of the canvas should fit the size of the main portrait so there’s no blank on the bottom,