Assignment 3

Concept

My concept was heavily inspired by Vera Molnár’s Des Ordres (1974). The work creates a structured pattern of squares that is randomly disrupted, creating a contrast between order and disorder. I wanted to take this idea and translate it into laser fabrication, rather than simply recreating the same square pattern. Instead of engraving the squares onto the material, I decided to laser cut them, allowing the pattern to physically change the material itself. I experimented with two versions of the design. In the first, the squares stay at a fixed angle, while their sizes are randomized. In the second, both the size and rotation are randomized, with each square able to rotate anywhere within 360 degrees. This allowed me to keep the idea of controlled randomness while developing it into my own design. I also tested the design using both acrylic and wood to see how the same computational pattern changed depending on the material.

p5.js Sketch / Code

Code for Square 1

let cols = 12;
let rows = 12;
let tileW, tileH;

function setup() {
  createCanvas(400, 400, SVG);
  angleMode(DEGREES);
  noLoop();

  tileW = width / cols;
  tileH = height / rows;

}

function draw() {
  stroke(0);
  noFill();
  strokeWeight(2);

  for (let c = 0; c < cols; c++) {
    for (let r = 0; r < rows; r++) {

      // base grid position
      let x = c * tileW + tileW / 2;
      let y = r * tileH + tileH / 2;

      push();
      translate(x, y);

      rectMode(CENTER);
      // fixed rotation
      rotate(45);

      //RANDOM SCALING
      let scaleFactor = random(0.35, 1.2);

      let baseSize = min(tileW, tileH) * 0.6;
      let finalSize = baseSize * scaleFactor;

      rect(0, 0, finalSize, finalSize);

      pop();
    }
  }
}

function mouseClicked() {
  save("square1.svg");
}

Code for Square 2

let cols = 12;
let rows = 12;
let tileW, tileH;

function setup() {
  createCanvas(400, 400, SVG);
  angleMode(DEGREES);
  noLoop();

  tileW = width / cols;
  tileH = height / rows;

}

function draw() {
  stroke(0);
  noFill();
  strokeWeight(2);

  for (let c = 0; c < cols; c++) {
    for (let r = 0; r < rows; r++) {

      // base grid position
      let x = c * tileW + tileW / 2;
      let y = r * tileH + tileH / 2;

      push();
      translate(x, y);

      //FULL 360° RANDOM ROTATION
      rotate(random(0, 360));

      rectMode(CENTER);

      //RANDOM SCALING
      let scaleFactor = random(0.35, 1.2);

      let baseSize = min(tileW, tileH) * 0.6;
      let finalSize = baseSize * scaleFactor;

      rect(0, 0, finalSize, finalSize);

      pop();
    }
  }
}

function mouseClicked() {
  save("square2.svg");
}

The code generates the square pattern using rules for position, size, and rotation. Although the system follows a fixed grid, randomness is introduced through the changing size and rotation of each square.

Vector Design

Squares 1

Squares 2

These SVGs shows one version of the generated pattern. The grid creates a sense of order, while the changing sizes of the squares interrupt that consistency. ( I uploaded them as images because an SVG file is not supported)

Experimental – This design seemed too close to the original work and I wanted to adapt the design and approach it differently by laser cutting instead of copying it and laser engraving it since it will look exactly like the original. After generating the pattern, I converted/exported the design as an SVG vector file so that it could be read by the laser cutter. My first designs experimented with squares inside other squares, similar to the visual structure of my reference artwork. However, when thinking about how I wanted to laser cut the material I developed the design.

Final Results

Square 1 Clear Acrylic

Square 2 Wood

Process and Challenges

One of my main challenges was creating a design that could actually be laser cut while still keeping the randomness of the original idea. My first draft used a square within a square, which was closer to Molnár’s original visual structure. However, I realized that this worked better as an image or engraving than as a laser cut object. Because I wanted to physically cut through the material, I had to rethink the design. I changed it into individual squares and introduced randomness through their size and rotation instead. Another part of the process was experimenting with how much randomness I wanted. One version kept the rotation fixed and only changed the size, while another randomized both the size and the rotation. This helped me compare how changing one rule could completely change the final pattern.

Reflection: How Laser Fabrication Changed My Computational Design

Laser fabrication directly shaped the way I developed my computational design. At first, I was thinking mainly about how the pattern looked on the screen. My original design used a square within a square, similar to my reference.Once I was reflecting with my first design I felt that I wanted to develop the original and laser cut it . The design needed to work structurally as a physical object. Because of this, I changed each element into a single square. Instead of losing the randomness from my original idea, I moved that randomness into other variables, especially size and rotation. The fabrication process therefore did not just reproduce my computational design. It actually changed the design itself. The limitations of laser cutting pushed me to develop a different version of the idea, while still keeping the contrast between order and disorder that originally inspired the project.