Week 2 – Reading Reflections

The talk by Casey was truly enlightening. His opening remarks about artists and designers being the key players in maintaining order in today’s society—after the chaos (the Big Bang) that led to our creation—really struck me. The rendered animations had an element of randomness to them, but unlike the art where pieces of paper were dropped onto the floor, or the machine that caught fire (intended to destroy itself), these were post-World War demonstrations by the artist. However, hidden within that seemingly destructive surface was an element of randomness, which is what made it so interesting. Once computing became feasible, algorithmic works like those of Keith Tyson could be visualized and fabricated. Whether it’s the ‘role the dice’ algorithm or something of that sort, I believe art cannot truly exist without interpretive bias, complemented by mistakes and uncertainties. This also reminded me of how some painters splash buckets of paint onto the canvas to sometimes set the foundation for their work.

How are you planning to incorporate random elements into your work?

I’m passionate about creating practical solutions—solutions that not only integrate into existing fields but also introduce entirely new possibilities. The word ‘random’ itself is open to interpretation, but in my view, it’s a mix of an artist’s little inattentiveness and human uncertainties. Like I did in this week’s assignment, where I used random color selection, I plan to incorporate different mapping functions that produce unexpected results. It’s true that the internal ‘random’ function built into most programming languages isn’t entirely random, but the influence of the programmer’s choices still adds a layer of uncertainty. Much like Casey, I want the numerical models that form the foundation of my program and its elements to remain random and stay that way. In life, randomness doesn’t equate to mess—it’s simply how things work. The animation Game of Life also visualizes this phenomenon. So, my plan is to innovate artistically while still maintaining a degree of control, such as setting certain parameters.

Where do you feel is the optimum balance between total randomness and complete control?

I believe the balance is subjective and depends on the context. For works that involve transformation and less precision, it’s often better to let things spin out of control. The variation not only eliminates some of the artist’s personal bias, but it also allows for new ideas and inspirations to emerge when the art ‘flows.’ That said, there are also scenarios where the information being used is constrained to specific parameters, and in these cases, the balance depends on the context and how much ‘variance’ is considered acceptable.

Week 2 Assignment – Loops (Major Assignment)

Introduction:

I grew up in this small city that was known for two things: first, the streets that crossed in a way you could see an 8-pointed star, kinda like the British flag, if you looked from above. And second, the whole textile vibe—it was everywhere. Factories on top of factories, markets packed with all kinds of clothes. Most of it got shipped off to Europe and other places. The city itself had some pretty wild sights, but honestly, what always caught my attention were the machines in the factories. The speed and precision with which they wove and embroidered stuff was mind-blowing—a real testament to what humans can do. I was reading the August 1977 issue of Computer Graphics and Art, and on page 27, it talks about using computer graphics in textiles, which totally reminded me of my hometown.

 

 

 

 

 

 

I figured, why look elsewhere when I could dive into something that’s always been close to my heart and totally fascinates me: weaving. Since I was already familiar with coding, I just jumped right into it! At first, I thought I’d weave in a simple horizontal pattern, but then I realized that’s pretty common in real life. So, I switched it up and went for a diagonal pattern instead. To make it more fun, I decided to mimic how the machines move, like the back-and-forth zig-zag motion, and coded that in.

example of weaving done.

Concept:

At first, I thought about using loops like while loops and counter-controlled loops to get started. But then I realized just printing the stitches or weaves straight into the animation wouldn’t really show the ‘time’ and ‘effort’ that goes into the manufacturing process. So, I decided to go with the zig-zag diagonal pattern instead.

Implementation Stage:

While implementing the code, straight away from the thought process didn’t go as planned.

 

 

 

 

At first, I wanted to keep things simple and sketch smaller stitches, but every time the nested loop ran, the program would crash. So, I switched things up and used the ‘draw()’ function. Since the if and while loops are pretty similar (both have a pre-condition check), I used an if loop like a while loop, and that did the trick! I really wanted to use loops, but considering the limits of Chrome’s rendering power and the design needs, I had to either abandon the idea or find a way to make it work. So, I went for the second option. Then came the fun part—making the flow of the ellipses move up and down. For the diagonal effect, I used the linear equation y = mx + c to create a gradient that would rise and fall with each increase or decrease in the x-axis. To get the right gradient of 3 (+ and -), I adjusted the y_pos by 6 (+ and -), and for every change on the y-axis, I grouped it with a horizontal shift of 2. So, 6/2 or -6/2 would give me -3 or +3.

 

Code I am proud of:

The coding in general wasn’t difficult, but something that makes me proud is the ‘on’ and ‘off’ stage the ‘weave_direction’ variable had which worked like a switch.

// starting coordinates of ellipse/printhead;

let weave_direction=0; // direction switch
// 0 -> machine weaves downwards
// 1 -> machine weaves upwards

function setup(){
 
}

function draw(){
 
      
      if (weave_direction === 0){
        fill (r,g,b);
        ellipse (x_pos, y_pos, 5, 5);
        x_pos +=2; // line gradient of -3
        y_pos +=6;
        if ((y_pos >= height) || (x_pos >= width)){
          weave_direction =1;
          x_pos = x_pos + 10; // horizontal gap between the streaks.
        } 
      } else if (weave_direction === 1){
        fill (r,g,b);
        ellipse (x_pos, y_pos, 5, 5);
        x_pos -=2; // line gradient of +3
        y_pos -=6;
        if ((x_pos <= 0) || (y_pos <= 0)){
          weave_direction =0;
          x_pos = x_pos + 10; // horizontal gap between the streaks.
        }
      } // for weaving downwards or else upwards diagonally.
        
      
    

How to use the Program:

Click once to start the ‘stitching machine’, keep pressing to change the color to your liking.This Program in its in spirit is designed towards actual realization of effort that goes into the process.

Embedded Sketch:

Reflections and ideas for Future Improvements:

I’m planning to let users click on the screen to mark points that can be ‘mapped’ and used later to fill in color (the same as the background), which will create the effect of the user drawing onto the stitches. I also tried to keep the code as short as possible while still keeping the logic intact, but down the line, I want to use OOP to make it more dynamic. That way, users will be able to change colors and coordinates after the initial creation.

Sample Art Made:

 

Week 1 Assignment

At First, I wanted to create something different, loaded with animations. Experimentation led to the conclusion that, too much of animation overload resulted in me not being able to express myself to the truest. I wanted to add the ‘Mark 2 ‘ Helmet from Iron Man – wrapping around my face. However, as a fanboy of Michael Phelps, and an aspiring swimmer, I decided to make a portray of myself, swimming. At least, pretending to.

The portrait made, upon mouse click changes the shade of the googles achieved using the following code :

let r ;
let g ;
let b;  //global scope


function draw ()
{
  fill(r,g,b);
  ellipse(200, 210, 40, 30); 
  fill(r,g,b);
  ellipse(300, 210, 40, 30); 
}

function mousePressed() {
  
  r = random (255);
  g = random (255);
  b = random (255);
}

The code also includes animated air-bubbles being exhaled by me, giving the effect of exhaling underwater. The following code does so:

let bubble_pos;

function setup() {
  createCanvas(500, 390);
  bubble_pos = 0;
  
}


function draw () {
  fill (255,255,255);
  circle (223,302 - bubble_pos,20);
  bubble_pos = bubble_pos+8;
  if (bubble_pos >= 290) {
    bubble_pos = 0;
  }
}

}

The logic statement resets the bubble’s position on Y-axis, as it is about to reach the surface.

Figuring out how to make the air_bubbles float upwards and then reset them, as demonstrated above is something I managed to accomplish after a little trial and error, which makes me proud.

However, depending on the water pressure, in the future, I would like to change the size of the Bubbles, as they reach for the surface, increasing in size.

I made use of the following code to help me out with determining the placement, and coordinate position.

print(mouseX + "," + mouseY);

 

Here is the complete code:

 

let r;
let g;
let b;

let bubble_pos;

function setup() {
  createCanvas(500, 390);
  bubble_pos = 0;
  
}

function draw() {
  background(102,178,256);
  
  strokeWeight(1);
  rect(224,366,50,20);
  
  fill(210, 180, 140);
  noStroke();
  ellipse(250, 250, 195, 250);
  fill(204, 229, 255);
  arc(250, 175, 180, 160, PI, TWO_PI); // PI is 180 and TWO_PI makes it 360, for start and stop initially.
  rect(160, 174, 180, 20);
  line(170,168,330,168);
  
  fill(0);
  textSize(18); 
  textAlign(CENTER, CENTER);
  text("NYUAD", 250,125 );
  
  
  fill(0);
  ellipse(200, 210, 15, 10);
  ellipse(300, 210, 15, 10);
  stroke(0);
  strokeWeight(4);
  line(250, 230, 245, 270);
  line(245,270,258,265)
  stroke(0);
  strokeWeight(2);
  fill(220, 85, 85);
  arc(250, 250 + 50, 60, 20, 0, PI, CHORD); 
  noFill();
  stroke(0);
  strokeWeight(4);
  fill(r,g,b);
  ellipse(200, 210, 40, 30); 
  fill(r,g,b);
  ellipse(300, 210, 40, 30); 
  line(220, 210, 280, 210); 
  line(180,209,158,199);
  line(320,211,342,195);
  fill(210, 180, 140);
  noStroke();
  ellipse(148, 250, 10, 80); 
  ellipse(352, 250, 10, 80); 
  stroke(0);
  strokeWeight(4);
  line(190, 160, 250 - 20, 160); 
  line(310, 160, 250 + 20, 160); 
  strokeWeight(2)
  line(170,170,330,170);
  
  print(mouseX + "," + mouseY);
  

  fill (255,255,255);
  circle (223,302 - bubble_pos,20);
  bubble_pos = bubble_pos+8;
  if (bubble_pos >= 290) {
    bubble_pos = 0;
  }
}

function mousePressed() {
  
  r = random (255);
  g = random (255);
  b = random (255);
}