Week_2_Code_Assignment

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