const COLS = 6; const ROWS = 6; const NUM_IMAGES = 10; const SHAPES = [ 'spikeyRect', 'stackOvals3', 'blobGrid', 'spikeBurstOval', 'combW', 'sparkle4diag', 'flower4', 'spikeStar', 'roundAsterisk', 'roundPlus', ]; const NUM_ITEMS = NUM_IMAGES + SHAPES.length; const CANVAS_W = 842; const CANVAS_H = 1190; const GRID_H = CANVAS_H / 2; const BLUE = [0, 54, 255]; const LIME = [181, 248, 0]; const WHITE = [255, 255, 255]; const COLORS = [BLUE, WHITE]; // 図形・文字に使う色（背景はLIME） const PX = 4; // ピクセル描画時の1ピクセルサイズ let imgs = []; let cells = []; let cellSize; let offsetX; let paused = false; let shapeScale = 0.88; let pixBuf; // 低解像度バッファ（ピクセル描画用） let sharpBuf; // 高解像度バッファ（シャープ描画用） let recolorBuf; // SVG再着色用バッファ const IMAGE_URLS = [ 'https://stat.neort.io/externalResource/d8gqm913k37jh9v3lajg.png', // logo_01 'https://stat.neort.io/externalResource/d8gqma13k37jh9v3lakg.png', // logo_02 'https://stat.neort.io/externalResource/d8gqmbp3k37jh9v3lalg.png', // logo_03 'https://stat.neort.io/externalResource/d8gqmcp3k37jh9v3lamg.png', // logo_04 'https://stat.neort.io/externalResource/d8gqme13k37jh9v3lang.png', // logo_05 'https://stat.neort.io/externalResource/d8gqmep3k37jh9v3laog.png', // logo_06 'https://stat.neort.io/externalResource/d8gqmfh3k37jh9v3lapg.png', // logo_07 'https://stat.neort.io/externalResource/d8gqmg93k37jh9v3laqg.png', // logo_08 'https://stat.neort.io/externalResource/d8gqmh13k37jh9v3larg.png', // logo_09 'https://stat.neort.io/externalResource/d8gqmhh3k37jh9v3lasg.png', // logo_10 ]; function preload() { for (let url of IMAGE_URLS) { imgs.push(loadImage(url)); } } function setup() { createCanvas(CANVAS_W, CANVAS_H); cellSize = GRID_H / ROWS; offsetX = (CANVAS_W - cellSize * COLS) / 2; const lowRes = max(4, floor(cellSize / PX)); pixBuf = createGraphics(lowRes, lowRes); pixBuf.pixelDensity(1); pixBuf.noSmooth(); sharpBuf = createGraphics(floor(cellSize * 2), floor(cellSize * 2)); sharpBuf.pixelDensity(1); recolorBuf = createGraphics(floor(cellSize * 2), floor(cellSize * 2)); recolorBuf.pixelDensity(1); for (let row = 0; row < ROWS; row++) for (let col = 0; col < COLS; col++) cells.push(new Cell(col, row)); } function draw() { background(255); // 全体は白 noStroke(); fill(...LIME); rect(0, 0, CANVAS_W, GRID_H); // 上半分（A4エリア）だけ緑 for (let c of cells) { if (!paused) c.update(); c.show(); } } function mousePressed() { paused = !paused; } function keyPressed() { if (key === ' ') paused = !paused; } // 低解像度バッファ用カプセル描画 function capsuleG(x1, y1, x2, y2, w, g) { g.circle(x1, y1, w); g.circle(x2, y2, w); const dx = x2 - x1, dy = y2 - y1; const dist = sqrt(dx * dx + dy * dy); const a = atan2(dy, dx); g.push(); g.translate((x1 + x2) / 2, (y1 + y2) / 2); g.rotate(a); g.rectMode(CENTER); g.rect(0, 0, dist, w); g.pop(); } // 全図形を低解像度バッファ(g)に描画 function drawShapeToCtx(name, s, col, g) { const r = s / 2; g.fill(...col); g.noStroke(); if (name === 'spikeyRect') { const w = s * 0.88, h = s * 0.58, sN = 7, sH = h * 0.30; const scN = 5, scR = w / (scN * 2.2); g.beginShape(); g.vertex(-w/2, h/2 - scR*0.4); g.vertex(w/2, h/2 - scR*0.4); g.vertex(w/2, -h/2 + sH); for (let i = sN; i >= 0; i--) { const x = map(i, 0, sN, -w/2, w/2); const xm = map(i-0.5, 0, sN, -w/2, w/2); g.vertex(x, -h/2 + sH); if (i > 0) g.vertex(xm, -h/2); } g.endShape(CLOSE); g.fill(255); for (let i = 0; i < scN; i++) { g.circle(-w/2 + (w/scN)*(i+0.5), h/2 - scR*0.1, scR*2); } } else if (name === 'stackOvals3') { const ow = s*0.90, oh = s*0.22, sp = s*0.30; g.ellipse(0, -sp, ow, oh); g.ellipse(0, 0, ow, oh); g.ellipse(0, sp, ow, oh); } else if (name === 'blobGrid') { const cr = s*0.25, dx = cr*1.58, dy = cr*1.55; for (let row = 0; row < 2; row++) for (let col2 = 0; col2 < 3; col2++) g.circle((col2-1)*dx, (row-0.5)*dy, cr*2); } else if (name === 'spikeBurstOval') { const n=14, rx=s*0.44, ry=s*0.30, irx=rx*0.65, iry=ry*0.65; g.beginShape(); for (let i = 0; i < n*2; i++) { const a = (TWO_PI/(n*2))*i - HALF_PI; const out = i%2===0; g.vertex(cos(a)*(out?rx:irx), sin(a)*(out?ry:iry)); } g.endShape(CLOSE); } else if (name === 'combW') { const bw=s*0.28, bh=s*0.40, dy=s*0.13, cr2=s*0.09; const xs=[-s*0.30,-s*0.10,s*0.10,s*0.30]; g.rectMode(CENTER); for (let i = 0; i < 4; i++) g.rect(xs[i], i%2===0?-dy:dy, bw, bh, cr2); } else if (name === 'sparkle4diag') { const o=r*0.95, c2=r*0.08; g.push(); g.rotate(PI/4); g.beginShape(); g.vertex(0, -o); g.bezierVertex( c2,-c2, c2,-c2, o,0); g.bezierVertex( c2, c2, c2, c2, 0,o); g.bezierVertex(-c2, c2, -c2, c2,-o,0); g.bezierVertex(-c2,-c2, -c2,-c2, 0,-o); g.endShape(CLOSE); g.pop(); } else if (name === 'flower4') { const pr=r*0.50, off=pr*0.72; g.circle(0,-off,pr*2); g.circle(off,0,pr*2); g.circle(0,off,pr*2); g.circle(-off,0,pr*2); } else if (name === 'spikeStar') { const n=12; g.beginShape(); for (let i = 0; i < n*2; i++) { const a=(TWO_PI/(n*2))*i - HALF_PI; const rad = i%2===0 ? r*0.92 : r*0.28; g.vertex(cos(a)*rad, sin(a)*rad); } g.endShape(CLOSE); } else if (name === 'roundAsterisk') { const aw=s*0.24, al=r*0.82; for (let i = 0; i < 6; i++) { const a=(TWO_PI/6)*i; capsuleG(0,0,cos(a)*al,sin(a)*al, aw, g); } } else if (name === 'roundPlus') { const aw=s*0.26, al=r*0.82; for (let i = 0; i < 4; i++) { const a=HALF_PI*i; capsuleG(0,0,cos(a)*al,sin(a)*al, aw, g); } } } class Cell { constructor(col, row) { this.x = offsetX + col * cellSize + cellSize / 2; this.y = row * cellSize + cellSize / 2; this.currentItem = this._pick(); this.nextItem = this._pickNext(); this.col = random(COLORS); this.pixelated = random() < 0.5; this.sizeScale = random(0.55, 1.1); this.phase = 'idle'; this.progress = 0; this.timer = random(60, 180); this.rotDir = random() < 0.5 ? 1 : -1; this.rot = 0; this.glitchTimer = 0; this.gx1 = 0; this.gy1 = 0; // 青ゴーストのオフセット（固定） this.gx2 = 0; this.gy2 = 0; // 白ゴーストのオフセット（固定） } _pick() { return random() < 0.5 ? floor(random(NUM_IMAGES)) : NUM_IMAGES + floor(random(SHAPES.length)); } _pickNext() { let n; do { n = this._pick(); } while (n === this.currentItem); return n; } update() { if (this.phase === 'idle') { this.timer--; if (this.timer <= 0) { this.phase = 'shrinking'; this.progress = 0; this.rotDir = random() < 0.5 ? 1 : -1; } } else if (this.phase === 'shrinking') { this.progress += 0.04; this.rot = this.rotDir * this.progress * PI; if (this.progress >= 1) { this.progress = 0; this.rot = 0; this.currentItem = this.nextItem; this.nextItem = this._pickNext(); this.col = random(COLORS); this.pixelated = random() < 0.5; this.sizeScale = random(0.55, 1.1); this.phase = 'growing'; this.rotDir = random() < 0.5 ? 1 : -1; } } else if (this.phase === 'growing') { this.progress += 0.04; this.rot = this.rotDir * (1 - this.progress) * PI; if (this.progress >= 1) { this.progress = 1; this.rot = 0; this.phase = 'idle'; this.timer = random(60, 300); } } // グリッチランダム発火（アイドル中に低確率で） if (this.glitchTimer > 0) { this.glitchTimer--; } else if (random() < 0.02) { this.glitchTimer = floor(random(8, 30)); // オフセットをこのタイミングで固定する this.gx1 = floor(random(-22, 22)); this.gy1 = floor(random(-4, 4)); this.gx2 = floor(random(-22, 22)); this.gy2 = floor(random(-4, 4)); } } show() { const padding = cellSize * 0.05; const base = cellSize - padding * 2; // 文字は大きめ、図形は小さめのレンジ const imgSize = this.currentItem < NUM_IMAGES ? base * this.sizeScale * 1.35 : base * this.sizeScale; let sc = 1; if (this.phase === 'shrinking') sc = 1 - this.progress; else if (this.phase === 'growing') sc = this.progress; push(); translate(this.x, this.y); rotate(this.rot); scale(sc); if (this.currentItem < NUM_IMAGES) { const rc = recolorBuf; const rs = rc.width; // グリッチゴースト（SVG）青＋白の2枚を固定オフセットで if (this.glitchTimer > 0) { for (let [gcol, gx, gy] of [[BLUE, this.gx1, this.gy1], [WHITE, this.gx2, this.gy2]]) { rc.clear(); rc.image(imgs[this.currentItem], 0, 0, rs, rs); rc.drawingContext.globalCompositeOperation = 'source-in'; rc.noStroke(); rc.fill(...gcol); rc.rect(0, 0, rs, rs); rc.drawingContext.globalCompositeOperation = 'source-over'; drawingContext.globalAlpha = 0.55; imageMode(CENTER); image(rc, gx, gy, imgSize, imgSize); drawingContext.globalAlpha = 1.0; } } // 通常描画 rc.clear(); rc.image(imgs[this.currentItem], 0, 0, rs, rs); rc.drawingContext.globalCompositeOperation = 'source-in'; rc.noStroke(); rc.fill(...this.col); rc.rect(0, 0, rs, rs); rc.drawingContext.globalCompositeOperation = 'source-over'; imageMode(CENTER); image(rc, 0, 0, imgSize, imgSize); } else { const shapeName = SHAPES[this.currentItem - NUM_IMAGES]; const ghostCol = this.col === BLUE ? WHITE : BLUE; // グリッチゴースト（図形）青＋白の2枚を固定オフセットで if (this.glitchTimer > 0) { for (let [gcol, gx, gy] of [[BLUE, this.gx1, this.gy1], [WHITE, this.gx2, this.gy2]]) { drawingContext.globalAlpha = 0.55; push(); translate(gx, gy); if (this.pixelated) { const lr = pixBuf.width; pixBuf.clear(); pixBuf.push(); pixBuf.translate(lr/2, lr/2); drawShapeToCtx(shapeName, lr * shapeScale, gcol, pixBuf); pixBuf.pop(); noSmooth(); imageMode(CENTER); image(pixBuf, 0, 0, imgSize, imgSize); smooth(); } else { const hr = sharpBuf.width; sharpBuf.clear(); sharpBuf.push(); sharpBuf.translate(hr/2, hr/2); drawShapeToCtx(shapeName, hr * shapeScale, gcol, sharpBuf); sharpBuf.pop(); imageMode(CENTER); image(sharpBuf, 0, 0, imgSize, imgSize); } pop(); drawingContext.globalAlpha = 1.0; } } if (this.pixelated) { // ピクセル描画：低解像度バッファで描いて拡大 const lr = pixBuf.width; pixBuf.clear(); pixBuf.push(); pixBuf.translate(lr / 2, lr / 2); drawShapeToCtx(shapeName, lr * shapeScale, this.col, pixBuf); pixBuf.pop(); noSmooth(); imageMode(CENTER); image(pixBuf, 0, 0, imgSize, imgSize); smooth(); } else { // シャープ描画：高解像度バッファで描いてそのまま表示 const hr = sharpBuf.width; sharpBuf.clear(); sharpBuf.push(); sharpBuf.translate(hr / 2, hr / 2); drawShapeToCtx(shapeName, hr * shapeScale, this.col, sharpBuf); sharpBuf.pop(); imageMode(CENTER); image(sharpBuf, 0, 0, imgSize, imgSize); } } pop(); } }

多様な形を持つ空間