Movement in a grid

// make accessible to DPD 2025: Complexity I

// schien@mail.ncku.edu.tw

​

// recreation of demos in the book "Generative Design" (http://www.generative-gestaltung.de/1/)

// P.2.1.2

// Movement in a grid in colors

// based on P_2_1_2_01.pde

// interactions

//  Mouse: position x: circle shift x; position y: circle shift y; click: regen

//  Keys: s: save png

//

// For DPD 2023: Emergence in a grid

// schien@mail.ncku.edu.tw, 20201117

// variable adjustment

// schien@mail.ncku.edu.tw, 20230425

​

let tileCount = 20; 

let actRandomSeed = 0;

let bgModule = 25;

let fgModule = 13;

​

function setup() {

  createCanvas(500, 500);

}

​

function draw() {

  let tileWidth = width/tileCount;

  translate(tileWidth/2, tileWidth/2);

  background(255);

  noStroke();

  randomSeed(actRandomSeed);

  for (let gridY=0; gridY<tileCount; gridY++) {

    for (let gridX=0; gridX<tileCount; gridX++) {

      let posX = tileWidth*gridX;

      let posY = tileWidth*gridY;   

      let shiftX = random(-mouseX, mouseX)/20;

      let shiftY = random(-mouseY, mouseY)/20;

      fill(150, 30, 255);

      circle(posX+shiftX, posY+shiftY, bgModule);

    }

  }

​

  for (let gridY=0; gridY<tileCount; gridY++) {

    for (let gridX=0; gridX<tileCount; gridX++) {

      let posX = tileWidth*gridX;

      let posY = tileWidth*gridY;   

      fill(255);

      circle(posX, posY, fgModule);

    }

  }

}

​

function mousePressed() {

  actRandomSeed = int(random(100000));

}

​

function keyPressed() {

  if (key === 's' || key === 'S') {

    save('color_dots.png');

  }

}