tessellation-1 - OpenProcessing

mySketch
xxxxxxxxxx
 
// recreation of demos in the book "Generative Design: visualize, program, and create with Processing"
// P.2.1.1
// Alignment in a grid
// based on P_2_1_1_01.pde
// interactions
//  Mouse: regen
//  Keys: s: save png
//
// For DPD 2020: Emergence in a grid
// schien@mail.ncku.edu.tw, 20201117
​
let tileCount = 40; 
let actRandomSeed = 0;
​
function setup() {
  createCanvas(500, 500);
  strokeWeight(0.1);
  //strokeCap(PROJECT);   //設定線條末端型式
}
​
function draw() {
  background(255);
  randomSeed(actRandomSeed);    //設定random的值,只要是同一組seed產出的random就是一樣,可以用來設定這裡的所有random產出一樣的值
  
  for (let gridY=0; gridY<tileCount; gridY++) {
    for (let gridX=0; gridX<tileCount; gridX++) {
​
      let posX = width/tileCount*gridX;   //設定第幾格  width/tileCount = X的長度 ; gridX = 第幾格 
      let posY = height/tileCount*gridY;  //設定第幾格  height/tileCount = Y的長度 ; gridX = 第幾格
​
      let toggle = int(random(0,2));    //骰骰子; int為整數 取0~2中間的數(0.01~1.99)所以取整數永遠是0或1
​
      if (toggle === 0) {   
        strokeWeight(mouseX/20);   //設定左上往右下畫的縣寬依X的大小變化
        line(posX, posY, posX+width/tileCount, posY+height/tileCount);
      }
      if (toggle === 1) {
        strokeWeight(mouseY/20);    //設定右上往左下畫的縣寬依Y的大小變化
        line(posX, posY+width/tileCount, posX+height/tileCount, posY);
      }
    }
  }
}
​
function mousePressed() {
  actRandomSeed = int(random(100000));
}
​
function keyPressed() {
  switch (key) {      //狀態的開關  switch是被設計為有很多種狀態(或很多判斷式if)的功能 因為如果要打很多if很麻煩 所以有這種功能
                                    //等於下面一堆if的判斷式
    case '1':         //狀態1
    strokeCap(ROUND);
    break;
    case '2':           //狀態2
    strokeCap(SQUARE);
    break;
    case '3':           //狀態3
    strokeCap(PROJECT);
    }
  
  //if (key === '1'){
    //strokeCap(ROUND);
//  }else if(key === '2'){
  //  strokeCap(SQUARE);
//  }else if(key === '3'){
  //  strokeCap(PROJECT);
    //      }
  
}