This week I mainly did two things: 1) fixing the flickering bug on my previous tomato sketch, and 2) practicing “breaking things”.

The first one is a very rational process. I look closely at the problem, make hypothesis of the cause, use console.log or other methods to “look behind the curtain”, scratch my head until I find out why, and fix the bug. It was pretty much the same as how I did all my previous assignments. I usually have an idea in mind first, and I break down the problem step by step to achieve that goal. I would also set up a bunch of prompts to solve when there was no bugs. I quite enjoy it and got better at it over time especially after giving up on AI.

Therefore, when my tomato sketch was flickering, and Mimi pointed me to a direction in class, I eagerly fixed it on the same day.

<aside> 🐞

Tomato bug fix

</aside>

This has helped me learn new syntax and understand my code much more deeply than before.

There is another side to coding, however, a less rational one. I’ve always wondered how those computational artists come up with such good sketches; where did they get the ideas? Often times I struggle to create something I’ve never seen or expected. And the other day at office hours, Mimi said something that clicked with me: “When you see a flickering ball, instead of making it not flicker, think about how to make it an interesting flickering ball”, something like that. It is in the breaking of things, that you discover something new and unique. WOW.

Two weeks ago, I went through a bunch of trial and errors to get to this “correct” recursive rectangle. There were a few other patterns that I accidentally made, but I deemed them as derails along the way and didn’t look further.

image.png

This time, in preparation for mid-term, I’m going to break this “correctness”, and see what funny/crazy/irrational rectangles I can make.

Below is a bunch of experiments basing off the previous code. There was little documentation on the process as there was no plan, and my mind was flowing freely to whatever the code presents itself. It was such a liberating process and I loved the result. I don’t think I could reverse engineer the code if I hadn’t bumped into these accidents.

<aside> 👉🏻

Midterm (1)

</aside>

Recursive rectangle

let w = 400;

function setup() {
  createCanvas(600, 600);
  background(0);
}

function draw() {
  for (let i=0; i <5; i++){
    for (let j = 0; j < 5; j++){
      drawrect(i, j, 120);
    }
  }
}

function drawrect(x, y, w) {
  stroke(255);
  noFill();
  rect(x, y, w, w);
  translate(0, 0.05 * w);
  rotate(-sin(0.05 / 0.95));
  w *= 0.95;
  
  if (w > 1) drawrect(w);
}

image.png

image.png

image.png

image.png

image.png

let w = 120;

function setup() {
  createCanvas(600, 600);
  background(255);
  //noLoop();
}

function draw() {
  background(0);
  for (let i=0; i <5; i++){
    for (let j = 0; j < 5; j++){
      drawrect(i * mouseX, j * mouseY, w);
      drawrect(mouseX, mouseY, 120);
    }
  }
  drawrect(300, 300, w);
  
}

function drawrect(x, y, w) {
  noStroke();
  fill(x, y, 200, 60);
  rect(x, y, w, w);
  translate(0, 0.05 * w);
  rotate(-sin(0.05 / 0.95));
  w *= 0.98;
  
  if (w > 1) drawrect(x, y, w);
}

1. 万花筒 copy.mov

image.png

image.png