let imgTa, imgMa, imgBi; let imgTaGray, imgMaGray, imgBiGray; let imgTaBlue, imgMaBlue, imgBiBlue; let images = []; let grid = []; let highlightMap = []; let t = 0; let lastInteraction = 0; let mouseActive = false function preload() { imgTa = loadImage('https://stat.neort.io/externalResource/d0rd6n4n70ri5hhd6ad0.png'); imgMa = loadImage('https://stat.neort.io/externalResource/d0rd6s4n70ri5hhd6ae0.png'); imgBi = loadImage('https://stat.neort.io/externalResource/d0rd6tcn70ri5hhd6af0.png'); } let button; function setup() { createCanvas(windowWidth, windowHeight); imageMode(CENTER); button = createButton('mix'); button.position(width / 2 - 50, height - 70); button.mousePressed(() => { button.style('transform', 'scale(0.95)'); regenerateGrid(); setTimeout(() => { button.style('transform', 'scale(1)'); }, 100); }); button.style('font-size', '16px'); button.style('padding', '10px 20px'); button.style('background-color', '#084f9b'); button.style('color', 'white'); button.style('border', 'none'); button.style('border-radius', '8px'); button.style('cursor', 'pointer'); button.style('transition', 'transform 0.1s ease'); imgTaGray = replaceBlack(imgTa, color(179, 179, 179)); imgMaGray = replaceBlack(imgMa, color(179, 179, 179)); imgBiGray = replaceBlack(imgBi, color(179, 179, 179)); imgTaBlue = replaceBlack(imgTa, color(8, 79, 155)); imgMaBlue = replaceBlack(imgMa, color(8, 79, 155)); imgBiBlue = replaceBlack(imgBi, color(8, 79, 155)); images = [imgTa, imgMa, imgBi]; regenerateGrid(); } function draw() { t++; if (!mouseActive && t - lastInteraction > 170) { regenerateGrid(); lastInteraction = t; } } function mouseMoved() { mouseActive = true; lastInteraction = t; clearTimeout(window._resetMouse); window._resetMouse = setTimeout(() => { mouseActive = false; }, 3000); } function regenerateGrid() { background(255); drawGridArt(); } function replaceBlack(img, newColor) { let newImg = createImage(img.width, img.height); img.loadPixels(); newImg.loadPixels(); for (let i = 0; i < img.pixels.length; i += 4) { let r = img.pixels[i]; let g = img.pixels[i + 1]; let b = img.pixels[i + 2]; let a = img.pixels[i + 3]; if (r < 50 && g < 50 && b < 50) { newImg.pixels[i] = red(newColor); newImg.pixels[i + 1] = green(newColor); newImg.pixels[i + 2] = blue(newColor); newImg.pixels[i + 3] = a; } else { newImg.pixels[i] = r; newImg.pixels[i + 1] = g; newImg.pixels[i + 2] = b; newImg.pixels[i + 3] = a; } } newImg.updatePixels(); return newImg; } function drawGridArt() { let cols = 8; let rows = 8; const cellW = 600 / cols; const cellH = 600 / rows; grid = Array(cols).fill().map(() => Array(rows).fill(null)); highlightMap = Array(cols).fill().map(() => Array(rows).fill(null)); let startX = (width - 600) / 2; let startY = (height - 600) / 2; // ランダム配置 for (let x = 0; x < cols; x++) { for (let y = 0; y < rows; y++) { grid[x][y] = random(images); } } // 横のタ→マ→ビチェック for (let x = 0; x < cols - 2; x++) { for (let y = 0; y < rows; y++) { if ( grid[x][y] === imgTa && grid[x + 1][y] === imgMa && grid[x + 2][y] === imgBi ) { highlightMap[x][y] = 'ta'; highlightMap[x + 1][y] = 'ma'; highlightMap[x + 2][y] = 'bi'; } } } // 縦のタ→マ→ビチェック for (let x = 0; x < cols; x++) { for (let y = 0; y < rows - 2; y++) { if ( grid[x][y] === imgTa && grid[x][y + 1] === imgMa && grid[x][y + 2] === imgBi ) { highlightMap[x][y] = 'ta'; highlightMap[x][y + 1] = 'ma'; highlightMap[x][y + 2] = 'bi'; } } } for (let x = 0; x < cols; x++) { for (let y = 0; y < rows; y++) { let cx = x * cellW + cellW / 2 + startX; let cy = y * cellH + cellH / 2 + startY; let type = highlightMap[x][y]; noTint(); if (type) { if (type === 'ta') image(imgTaBlue, cx, cy, cellW, cellH); if (type === 'ma') image(imgMaBlue, cx, cy, cellW, cellH); if (type === 'bi') image(imgBiBlue, cx, cy, cellW, cellH); } else { if (grid[x][y] === imgTa) image(imgTaGray, cx, cy, cellW, cellH); if (grid[x][y] === imgMa) image(imgMaGray, cx, cy, cellW, cellH); if (grid[x][y] === imgBi) image(imgBiGray, cx, cy, cellW, cellH); } } } }

「まる」で、未来のタネ