//-------------------------------------------------- // // PixelDrawing // Hau-kun // 2025/10/19 // // CC BY-NC 4.0, with exceptions available upon request. // https://creativecommons.org/licenses/by-nc/4.0/deed.ja // // p5.js v.2.0.5 // This work uses p5.js, // which is licensed under the MIT License // https://p5js.org/ //-------------------------------------------------- // 周囲20x20ピクセル内に存在していいピクセル数の上限 // 100ぐらいで線、300ぐらいで面 const THRESHOLD = 100; let FR = 60; // フレームレート計算用 let $, BUFF; // バッファ const D = [[-1,0],[0,-1],[1,0],[0,1]]; // 上下左右の移動量 function setup() { createCanvas(W=720, 720); $ = createGraphics(W,W); background(0); frameRate(60); // 初期点 loadPixels() for(let j = 0; j < 100; j++){ var hsb = hsbToRgb(random(360), 70, 100); let i = getIndex(int(random(W)), int(random(W))); pixels[i] = hsb.r; pixels[i+1] = hsb.g; pixels[i+2] = hsb.b; } updatePixels() } function draw() { // 現在の状態をいったんバッファに退避 $.image(get(),0,0); $.loadPixels(); BUFF = $.pixels; loadPixels(); let P = pixels; for(let y = 0; y < W; y++){ for(let x = 0; x < W; x++){ let i = getIndex(x, y); let hsb = rgbToHsb(BUFF[i], BUFF[i+1], BUFF[i+2]); // 色が明るいところの上下左右について計算 if(hsb.b > 90){ if(R = random(1) > .5){ // 雑に乱数で処理するか決定（適当） let sat = hsb.s - random(10); let bri = hsb.b - random(1) ** 8 * 50 - 1; // たまーに暗くしたいので8乗 let rgb = hsbToRgb(hsb.h, sat, bri); // 自身の色を再定義 P[i + 0]=rgb.r; P[i + 1]=rgb.g; P[i + 2]=rgb.b; // 上下左右について計算 D.forEach(d => { if(isLiveX(x + d[0], y + d[1], 10, 1, THRESHOLD)){ hsb.h = (hsb.h + 360 + (random(1) < .5 ? 2 : -2)) % 360; // 適当グラデーション rgb = hsbToRgb(hsb.h, hsb.s, 100); //新しい色 let ni = getIndex(x + d[0], y + d[1]); P[ni + 0] = rgb.r; P[ni + 1] = rgb.g; P[ni + 2] = rgb.b; } }) } } } } updatePixels(); calcFramerate() } // 雑に平均フレームレート計算 function calcFramerate(){ let t = FR * 9; t += frameRate(); FR = int(t); FR /= 10; print(FR) } // ピクセル(x,y)の周囲aマス内について、色付きピクセルがmn～mx個内に収まっているか function isLiveX(x, y, a, mn, mx){ let count = 0; // 対象ピクセルが範囲外なら終了 if(x<0 || x >= W || y < 0 || y >= W){ return false; } // 対象ピクセルに色がついていれば終了 var i = getIndex(x, y); var hsb = rgbToHsb(BUFF[i], BUFF[i+1], BUFF[i+2]); if(hsb.b > 0){ return false; } // 周囲aマスについて色付きピクセル数を計算 for(let oy = -a; oy <= a; oy++){ for(let ox = -a; ox <= a; ox++){ if (ox != 0 || oy != 0){ if (x+ox >= 0 && x+ox =0 && y+oy 0) || (BUFF[i + 1] > 0) || (BUFF[i + 2] > 0); } // RGB→HSB変換（作：chatGPT先生） function rgbToHsb(r, g, b) { r /= 255; g /= 255; b /= 255; let mx = Math.max(r, g, b); let mn = Math.min(r, g, b); let d = mx - mn; let h, s, v = mx; if (d === 0) { h = 0; } else if (mx === r) { h = ((g - b) / d) % 6; } else if (mx === g) { h = (b - r) / d + 2; } else { h = (r - g) / d + 4; } h = Math.round(h * 60); if (h < 0) h += 360; s = mx === 0 ? 0 : d / mx; return { h: h, // 0–360 s: s * 100, // 0–100 b: v * 100 // 0–100 }; } // HSB→RGB変換（作：chatGPT先生） function hsbToRgb(h, s, v) { s /= 100; v /= 100; let c = v * s; let x = c * (1 - Math.abs((h / 60) % 2 - 1)); let m = v - c; let r, g, b; if (0 <= h && h < 60) { [r, g, b] = [c, x, 0]; } else if (60 <= h && h < 120) { [r, g, b] = [x, c, 0]; } else if (120 <= h && h < 180) { [r, g, b] = [0, c, x]; } else if (180 <= h && h < 240) { [r, g, b] = [0, x, c]; } else if (240 <= h && h < 300) { [r, g, b] = [x, 0, c]; } else { [r, g, b] = [c, 0, x]; } return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255) }; } // 座標(x,y)についてのpixelsのインデックス番号取得 function getIndex(x, y){ return y * W * 4 + x * 4; }