Stained Glass - OpenProcessing

mySketch
xxxxxxxxxx
 
let pg;
let tileCount = 40;
let grid;
let polygonColors = [
  //赤
  [255, 50, 100,200],
  [255, 100, 100,200],
  [255, 100, 50,200],
  [255, 60, 60,150],
  [255, 20, 20,180],
  [255, 80, 100,150],
  [255, 30, 90,150],
  [255, 100, 30,200],
  [255, 50, 10,150],
  [255, 20, 20,180],
  [255, 100, 100,200],
  [255, 60, 60,150],
  [255, 80, 100,150],
  [255, 50, 10,150],
  //黄色
  [255, 255, 100,200],
  [230, 200, 100,250],
  [255, 230, 100,200],
  [255, 200, 50,200],
  [230, 220, 40,150],
  [255, 200, 60,150],
  [255, 180, 20,180],
  [255, 255, 80,200],
  [240, 255, 100,150],
  [200, 255, 30,150],
  //緑
  [10, 255, 20,150],
  [90, 255, 100,150],
  [40, 255, 100,150],
  [50, 255, 130,150],
  [40, 255, 100,150],
  [100, 255, 40,150],
  [100, 255, 100,150],
  [10, 255, 20,150],
  [100, 255, 30,150],
  [90, 255, 100,150],
  [100, 255, 40,150],
  [40, 255, 100,150],
  [100, 255, 30,150],
  [10, 255, 20,150],
  //青
  [50, 100, 255,150],
  [10, 20, 255,150],
  [20, 100, 255,150],
  [90, 70, 255,150],
  [40, 10, 255,150],
  [100, 20, 255,150],
  [50, 100, 255,150],
  [50, 100, 255,150],
  [10, 20, 255,150],
  [20, 100, 255,150],
  [90, 70, 255,150],
  [10, 10, 255,150],
  [40, 10, 255,150],
  [40, 10, 255,150]
];
​
  var x = 75;
  let y1 = 400; //窓の一番上の段の左右の円の中心y座標
  let dx = 40;
  let y2 = 300;//三つ円の下段のy座標
  let y3 = 120;
  let radius = 25; //窓の円の半径
  let radiusTwo = 50; //三つの円の半径
  let c = 80;
  let d = 30;
​
function setup() {
  createCanvas(1200, 800);
  background(180);
​
​
  //くりぬき
  pg = createGraphics(1200, 800);
​
  pg.background(0);
  pg.erase();
  for (let l = 0; l < 4; l ++){
    pg.ellipse(x + 110,y3,radiusTwo,radiusTwo);
    for (var t = 0; t < 10; t++){
      pg.ellipse(cos(PI/5 * t)*80 + x + 110, sin(PI/5 * t)*80 + y3,30,30);
      pg.ellipse(cos(PI/5 * t)*75 + x + 110, sin(PI/5 * t)*75 + y3,25,25);
      pg.ellipse(cos(PI/5 * t)*70 + x + 110, sin(PI/5 * t)*70 + y3,20,20);
      pg.ellipse(cos(PI/5 * t)*65 + x + 110, sin(PI/5 * t)*65 + y3,15,15);
      pg.ellipse(cos(PI/5 * t)*60 + x + 110, sin(PI/5 * t)*60 + y3,10,10);
      pg.ellipse(cos(PI/5 * t)*57 + x + 110, sin(PI/5 * t)*57 + y3,7,7);
      pg.ellipse(cos(PI/5 * t)*55 + x + 110, sin(PI/5 * t)*55 + y3,5,5);
    }
    for(let k = 0; k < 2; k ++){
      for(let j = 0; j < 3;j++){
        if(j == 0){
          //１段目窓
            //窓真ん中
            pg.ellipse(x + dx, y1 - radius*1.3 - 20, radius, radius);
            pg.ellipse(x + dx, y1 - 20 , radius, radius);
            pg.rect(x + dx - radius/2, y1 - 20+ j*160,radius,120);
            for(let i = 0; i< 2;i++){
              pg.ellipse(x + i*dx*2, y1 - radius*1.3 , radius, radius);
              pg.ellipse(x + i*dx*2, y1 , radius, radius);
              pg.rect(x + i*dx*2 - radius/2, y1 ,radius,100);
            }
          //三つの円の上段1つ
          pg.ellipse(x + 40,y2-50,radiusTwo,radiusTwo);
        } else {
          //２、３段目窓
          for(let m = 0; m< 3;m++){
            pg.ellipse(x + m*dx, y1 - radius*1.3+ j*160, radius, radius);
            pg.ellipse(x + m*dx, y1+ j*160, radius, radius);
            pg.rect(x + m*dx - radius/2, y1+ j*160,radius,100);
          }
          //三つの円の下段2つ
          pg.ellipse(x + (j-1)*60 + radius/2.6 ,y2,radiusTwo,radiusTwo);
        }
        
      } 
      x += 140;
      
    }
  }
  pg.noErase();
​
​
  createGrid();
  showGrid();
}
​
function createGrid() {
  grid = [];
  let tileSize = width / tileCount;
  for (let row = 0; row < tileCount; row++) {
    grid[row] = [];
    for (let col = 0; col < tileCount; col++) {
      let x = col * tileSize;
      let y = row * tileSize;
      grid[row][col] = new Tile(x, y, tileSize);
    }
  }
}
​
function showGrid() {
  for (let row = 0; row < tileCount - 1; row++) {
    for (let col = 0; col < tileCount - 1; col++) {
      polygon(row, col);
    }
  }
}
​
function polygon(row, col) {
  stroke(0);
  strokeWeight(1.3);
  noFill();
  fill(polygonColors[(row + col) % polygonColors.length]);
  beginShape();
  vertex(grid[row + 0][col + 0].x, grid[row + 0][col + 0].y);
  vertex(grid[row + 0][col + 1].x, grid[row + 0][col + 1].y);
  vertex(grid[row + 1][col + 1].x, grid[row + 1][col + 1].y);
  vertex(grid[row + 1][col + 0].x, grid[row + 1][col + 0].y);
  endShape(CLOSE);
}
​
class Tile {
  constructor(x, y, scl) {
    this.x = random(x, x + 0.8 * scl);
    this.y = random(y, y + 0.8 * scl);
  }
}
​
function draw() {
​
  // pgをimageとして配置
  image(pg, 0, 0);
​
}
​