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.

Week 2 Assignment – Loops (Major Assignment)