let size = 30; let gridW = 0, gridH = 0; function setup() { createCanvas(windowWidth, windowHeight); gridW = int(width / size); gridH = int(height / size); frameRate(1); } function mousePressed() { clear(); createCanvas(windowWidth, windowHeight); gridW = int(width / size); gridH = int(height / size); } function draw() { grid = []; white_list = []; // -------------------------------- // // 一定確率で壁の突起を設定する. // -------------------------------- // for (let i = 0; i < gridW; i++) { grid[i] = []; for (let j = 0; j < gridH; j++) { if (random() < 0.6) { grid[i].push(7); } else if (i == 0 || i == gridW - 1 || i == gridW - 2 || j == 0 || j == 1 || j == gridH - 1) { // 外周は突起にはしない grid[i].push(7); } else { grid[i].push(1); white_list.push([i, j, false]); } } } background(250); strokeWeight(1); // -------------------------------- // // 白マスを１つずつ捜査していって周辺のマスを決める. // -------------------------------- // white_list.forEach(e => { let x = e[0]; let y = e[1]; if (x < gridW - 1) { // 右マスが白でない if (grid[x + 1][y] != 1) { // ここは右端 => 右マスを影と奥の壁(4)で仮決定 grid[x + 1][y] = 4; if (y < gridH - 1) { // 下マスも白 => 全面が影(6)に変更 if (grid[x][y + 1] == 1) grid[x + 1][y] = 6; // 右下マスも白 => 影と上面(8)に変更 if (grid[x + 1][y + 1] == 1) grid[x + 1][y] = 8; } } } if (y > 0) { // 上マスが白ではない if (grid[x][y - 1] != 1) { // 奥の壁と上面(2)で仮決定 grid[x][y - 1] = 2 if (x > 0) { // 左マスも白 => 上マスは上面(5)に変更 if (grid[x - 1][y] == 1) grid[x][y - 1] = 5; // 左上マスも白 => 影と上面の(8)に変更 if (grid[x - 1][y - 1] == 1) grid[x][y - 1] = 8; } if (x < gridW - 1) { // 右マスが白ではない & 右上マスが白ではない => 右上は上面 + 影(3) if (grid[x + 1][y] != 1 && grid[x + 1][y - 1] != 1) { grid[x + 1][y - 1] = 3; } } } } }); // -------------------------------- // // パターンに応じて各マスを描画. // -------------------------------- // for (let x = 0; x < gridW; x++) { for (let y = 0; y < gridH; y++) { let pattern = grid[x][y]; let colorFlg = false; if (x > 1 && y > 1 && x < gridW - 1 && y < gridH - 1 && grid[x - 1][y] != 1 && grid[x + 1][y] != 1 && grid[x][y - 1] != 1 && grid[x][y + 1] != 1) { if (random() < .5) { colorFlg = true; } } drawPattern(x, y, pattern, colorFlg); } } // -------------------------------- // // 白マスの境界線を必要に応じて描画. // -------------------------------- // stroke(0); white_list.forEach(e => { let x = e[0]; let y = e[1]; let p = x * size; let q = y * size; // 上マスが白ではない if (y > 0 && grid[x][y - 1] != 1) { line(p, q, p + size, q); } // 下マスが白ではない if (y < gridH - 1 && grid[x][y + 1] != 1) { line(p, q + size, p + size, q + size); } // 左マスが白ではない if (x > 0 && grid[x - 1][y] != 1) { line(p, q, p, q + size); } // 右マスが白 or 全面影ではない if (x < gridW - 1 && grid[x + 1][y] != 1 && grid[x + 1][y] != 6) { line(p + size, q, p + size, q + size); } }); } function drawPattern(x, y, pattern, colorFlg) { let p = x * size; let q = y * size; // (1) 白壁 if (pattern == 1) { if (colorFlg == true) { let rnd = random(); if(rnd < 0.25) { fill(88,112,88); } else if (rnd < 0.5) { fill(255,216,0); } else if (rnd < 0.75) { fill(88,116,152); } else { fill(232,104,80); } } else { fill(250); } noStroke(); rect(p, q, size, size); } // (2) 奥の壁 + 上面 else if (pattern == 2) { drawTOP(p, q); fill(250); stroke(250); triangle(p, q, p + size, q, p, q + size); stroke(30); point(p, q); line(p, q + size / 2, p + size / 2, q); line(p, q + size, p + size, q); } // (3) 上面 + 影 else if (pattern == 3) { drawTOP(p, q); fill(0); triangle(p, q + size, p + size, q, p + size, q + size); } // (4) 影 + 奥の壁 else if (pattern == 4) { drawWall(p, q); fill(0); stroke(0); triangle(p, q, p + size, q, p, q + size); } // (5) 上面 else if (pattern == 5) { drawTOP(p, q); } // (6) 影 else if (pattern == 6) { fill(0); stroke(0); rect(p, q, size, size); } // (7) 奥の壁 else if (pattern == 7) { drawWall(p, q); } // (8) 影 + 上面 else if (pattern == 8) { drawTOP(p, q); fill(0); triangle(p, q, p + size, q, p, q + size); } // エラー処理 else { print("ERROR: unknown pattern!!"); } } // top surface function drawTOP(p, q) { stroke(0); let num = 12; delta = size / num; for (let i = 0; i < num; i++) { line(p+1, q+1 + i * delta, p + size, q+1 + i * delta); } } // wall function drawWall(p, q) { stroke(0); line(p, q + size / 2, p + size / 2, q); line(p, q + size, p + size, q); line(p + size / 2, q + size, p + size, q + size / 2); } // sキー押下でファイル保存，エディタ画面から実行画面は右下のぐるぐる矢印のアイコンをクリックした後に機能します． function keyPressed() { if (key == "s" || key == "S") { let fileName = nf(year(), 4) + nf(month(), 2) + nf(day(), 2) + "_" + nf(hour(), 2) + nf(minute(), 2) + nf(second(), 2); saveCanvas(fileName + ".png"); } if (key == "r" || key == "R") { video.time(0); } }

週刊p5js - 16