Week 11 – Fabric Cellular Automaton

Concept:

Throughout the semester, my coding skills have improved. Looking back at my first assignment and this one, I think there is a lot of improvement in making my ideas come to life.  For this week’s project, I used a dimensional Cellular Automaton to create a fabric-like pattern. My project is an interactive cellular automaton inspired by the RGB Cellular Automaton project. The randomized ruleset and adjustable cell size allow users to visualize infinite visual possibilities. In this project, each layer of cells builds on the previous to create a unique pattern. 

Highlight and Progress:

I began this journey by searching for inspiration because I felt there were a lot of constraints in the algorithmic design of the cellular automaton. I started experimenting with this project in hopes of creating a system where the color of the cells that are equivalent to one would change around the mouse; however, I faced so many issues, and the system would stop working all the time. I tried to fix it, but I had limited time to finish this assignment. As a result, I began experimenting with different shapes and sizes and even tried to create a new rule set each time the mouse was pressed.

 

Throughout the process, I began improving the project by adding layers to it, as you can see from the interface, I initially wanted it to feel like a website. I think what I like the most about the project is the visualization. I think it is interesting and engaging to see and experiment with. I am proud that I was able to tackle the ruleset to be able to change it. This is done by pressing the mouse. When the mouse is pressed, the for() loop goes through each index of the cells and sets the value to 0, resetting all cells. For each cell, the x and y positions are calculated based on trigonometric functions After resetting the grid, the center cell is set to 1, making it an active cell. This marks the starting point for the new pattern.

//  start at generation 0
let generation = 0;
// cell size
let w = 3;
let slider;
//state
let isComplete = false;

// starting rule
let ruleset = [0, 1, 1, 0, 1, 0, 1, 1];

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  textFont("Arial");

  //   make slider to change cell size
  slider = createSlider(2, 20, w);
  slider.position(25, 25);
  slider.style("width", "100px");

  // save button
  saveButton = createButton("Save Canvas");
  saveButton.position(160, 5);
  saveButton.mousePressed(saveCanvasImage);

  // reset button
  resetButton = createButton("Reset");
  resetButton.position(290, 5); // Place it next to the save button
  resetButton.mousePressed(resetCanvas);

  //array of 0s and 1s
  cells = new Array(floor(width / w));
  for (let i = 0; i < cells.length; i++) {
    cells[i] = 0;
  }
  cells[floor(cells.length / 2)] = 1;
}

function draw() {
  //slider w value
  w = slider.value();
  fill(240);
  stroke(0);

//   for slider text 
  rect(25, 5, 104, 20,2);
  fill(0);
  stroke(255);
  textSize(13);
  textFont("Arial");
  text("Adjust Cell Size:", 30, 20);
  
//   for resitting ruleset text 
  fill(240);
  stroke(0);
  rect(385, 5, 240, 20,2);
  fill(0);
  stroke(255);
  textSize(13);
  textFont("Arial");
  text("Press Mouse to Generate a new pattern ", 390, 20);
  
  

  for (let i = 1; i < cells.length - 1; i++) {
    //drawing the cells with a state of 1
    if (cells[i] == 1) {
      noFill();
      stroke(random(180), random(180), random(250));
      //y-position according to the generation
      square(i * w, generation * w, random(w));
    }
  }

  //next generation.
  let nextgen = cells.slice();
  for (let i = 1; i < cells.length - 1; i++) {
    let left = cells[i - 1];
    let me = cells[i];
    let right = cells[i + 1];
    nextgen[i] = rules(left, me, right);
  }
  cells = nextgen;

  // gen + 1
  generation++;

  // stop when it reaches bottom of the canvas
  if (generation * w > height) {
    noLoop();
    isComplete = true;
  }
}

// a new state from the ruleset.
function rules(a, b, c) {
  let s = "" + a + b + c;
  let index = parseInt(s, 2);
  return ruleset[7 - index];
}

// mouse is pressed
function mousePressed() {
  // make new ruleset with random 0s and 1s
  ruleset = [];
  for (let i = 0; i < 8; i++) {
    ruleset.push(floor(random(2))); // Random 0 or
    //  fill(255);
    // square(i *w, generation * w, w);
  }
  //https://p5js.org/reference/p5/console/ for debugging
  console.log("New Ruleset: ", ruleset);

  // restart with the new ruleset
  cells = new Array(floor(width / w));
  for (let i = 0; i < cells.length; i++) {
    cells[i] = 0;
    noStroke();

    let x1 = 5 * i * cos(i);
    let y1 = i * sin(i);
    fill(205, 220, random(90, 155), 10);
    circle(x1, y1, w * random(150));
  }
  cells[floor(cells.length / 2)] = 1;
  generation = 0;
  loop();
}

// save image
function saveCanvasImage() {
  saveCanvas("cellularAutomata", "png");
}

// restart
function resetCanvas() {
  background(255);
  cells = new Array(floor(width / w));
  for (let i = 0; i < cells.length; i++) {
    cells[i] = 0;
  }
  cells[floor(cells.length / 2)] = 1;
  generation = 0;
  loop(); //
}

 

Embedded Sketch:

Future Work:

To improve this project in the future, it would be interesting to see how with a web camera, audiences can interrupt the pattern by making noise. Additionally, adding a system to choose a set of colors and maybe a layout for the different patterns would also be interesting to visualize. Improving this project to become a website where people can experiment with the endless possibilities using Cellular Automaton in terms of shape, size, color, and layout would be interesting to see. Perhaps this project would evolve into an educational tool, teaching concepts behind  Cellular Automaton and mathematical systems while reflecting the intersection of art, technology, and science in an interactive format.

Resources: