/****************************************************** * CUBE1: Wave start * CUBE2: Mosaic-Star start * CUBE3: Fish-like Mosaic (swim wiggle) start * - 各面は独立フェーズループ（wave→assemble→dissolve→…） * - スクロール無し。背景は黒 & キラキラ（星/点） * - CUBE3 はモチーフ位置は固定のまま、ピクセル単位の揺らぎで“泳ぐ” * - dissolve は「ピクセル固定のフリッカー解散」（動かない） ******************************************************/ let debugMode = false; //------------------------------------- // キャンバスサイズ //------------------------------------- const CANVAS_SIZES = { LED_CUBE1: { width: 2000, height: 1440 }, LED_CUBE2: { width: 1536, height: 768 }, LED_CUBE3: { width: 672, height: 480 }, }; let image1, image2, image3; // 参考画像（任意） let currentSize = ""; let graphicsLayers = []; let currentLayerIndex = 0; const BG = [0,0,0]; const PALETTE = ['#F9D24A','#F5A345','#E45B5B','#C23E6E','#8C4AA8','#5AB8FF','#7BD1FF','#F2EAE2']; //------------------------------------- // LED キューブ形状 //------------------------------------- // CUBE1 2000×1440 const CUBE_SPEC_1 = { w: 2000, h: 1440, size: 720 }; const LED_CUBE1 = [ // A（左端 200×720）※貼り付け先は x/y、切り出しは img_x/img_y { type:"rect", name:"r1", x:0, y:0, w:200, h:720, img_x:-520, img_y:0 }, // B (Front) { type:"rect", name:"r2", x:200, y:0, w:720, h:720, img_x:200, img_y:0 }, // C { type:"rect", name:"r3", x:920, y:0, w:720, h:720, img_x:920, img_y:0 }, // D { type:"rect", name:"r4", x:1640, y:0, w:360, h:720, img_x:1640, img_y:0 }, // 下段（Eの連結多角形） { type:"poly", name:"p1", points:[[560,1439],[560,1079],[200,1079],[200,720],[919,720],[919,1439],[560,1439]], img_x:200, img_y:720 } ]; // CUBE2 1536×768 const CUBE_SPEC_2 = { w: 1536, h: 768, size: 384 }; const LED_CUBE2 = [ { type:"rect", name:"r1", x:0, y:0, w:384, h:384, img_x:0, img_y:0 }, { type:"rect", name:"r2", x:384, y:0, w:384, h:384, img_x:384, img_y:0 }, { type:"rect", name:"r3", x:768, y:0, w:384, h:384, img_x:768, img_y:0 }, { type:"rect", name:"r4", x:1152, y:0, w:384, h:384, img_x:1152, img_y:0 }, { type:"rect", name:"r5", x:384, y:384,w:384, h:384, img_x:384, img_y:384 } ]; // CUBE3 672×480 const CUBE_SPEC_3 = { w: 672, h: 480, size: 288 }; const LED_CUBE3 = [ { type:"rect", name:"r1", x:192, y:0, w:288, h:288, img_x:192, img_y:0 }, { type:"rect", name:"r2", x:192, y:288, w:288, h:192, img_x:192, img_y:288 }, { type:"poly", name:"p1", points:[[64,0],[192,0],[192,288],[0,288],[0,224],[96,224],[96,96],[64,96]], img_x:-96, img_y:0 }, { type:"poly", name:"p2", points:[[480,287],[480,0],[607,0],[607,95],[575,95],[575,224],[671,224],[671,287],[480,287]], img_x:480, img_y:0 } ]; // フルスクリーンは動的 let CUBE_SPEC_4 = null; let LED_CUBE4 = null; // 現在のアクティブ let active = { shapes: LED_CUBE1, spec: CUBE_SPEC_1 }; //------------------------------------- // モチーフバンク（7x7） //------------------------------------- const P=(x,y,c)=>({x,y,c}); // ★星モチーフ const STAR_BANK = [ { id:'S0', pixels:[ P(3,0,'A'), P(2,1,'A'),P(3,1,'B'),P(4,1,'A'), P(1,2,'A'),P(2,2,'B'),P(3,2,'C'),P(4,2,'B'),P(5,2,'A'), P(0,3,'A'),P(1,3,'B'),P(2,3,'C'),P(3,3,'D'),P(4,3,'C'),P(5,3,'B'),P(6,3,'A'), P(2,4,'B'),P(3,4,'C'),P(4,4,'B'), P(3,5,'A') ]}, { id:'S1', pixels:[ P(3,0,'B'), P(2,1,'B'),P(3,1,'E'),P(4,1,'B'), P(1,2,'B'),P(2,2,'E'),P(3,2,'F'),P(4,2,'E'),P(5,2,'B'), P(2,3,'E'),P(3,3,'F'),P(4,3,'E'), P(3,4,'B') ]}, { id:'S2', pixels:[ P(3,0,'C'), P(1,2,'C'),P(2,2,'D'),P(3,2,'E'),P(4,2,'D'),P(5,2,'C'), P(0,3,'C'),P(1,3,'D'),P(2,3,'E'),P(3,3,'F'),P(4,3,'E'),P(5,3,'D'),P(6,3,'C'), P(3,4,'C') ]}, { id:'S3', pixels:[ P(3,1,'A'), P(2,2,'B'),P(3,2,'C'),P(4,2,'B'), P(1,3,'B'),P(2,3,'C'),P(3,3,'D'),P(4,3,'C'),P(5,3,'B'), P(2,4,'B'),P(3,4,'C'),P(4,4,'B'), P(3,5,'A') ]}, { id:'S4', pixels:[ P(3,0,'E'), P(2,1,'E'),P(3,1,'B'),P(4,1,'E'), P(1,2,'E'),P(2,2,'B'),P(3,2,'A'),P(4,2,'B'),P(5,2,'E'), P(3,4,'E'), P(3,5,'E') ]}, ]; // ★魚モチーフ（横向き） const FISH_BANK = [ { id:'F0', pixels:[ P(1,2,'B'),P(2,1,'B'),P(2,2,'C'),P(2,3,'B'), P(3,2,'C'),P(4,2,'C'),P(5,2,'B'),P(6,2,'B'), P(5,1,'B'),P(5,3,'B') ]}, { id:'F1', pixels:[ P(1,2,'D'),P(2,1,'D'),P(2,2,'E'),P(2,3,'D'), P(3,1,'E'),P(3,2,'E'),P(3,3,'E'), P(4,1,'E'),P(4,2,'E'),P(4,3,'E'), P(5,2,'D'),P(6,2,'D'), P(5,1,'D'),P(5,3,'D') ]}, { id:'F2', pixels:[ P(1,2,'F'),P(2,2,'B'),P(3,2,'C'),P(4,2,'C'),P(5,2,'B'),P(6,2,'B'), P(5,1,'B'),P(5,3,'B'),P(4,1,'C'),P(4,3,'C'), P(2,1,'B'),P(2,3,'B') ]}, { id:'F3', pixels:[ P(1,2,'A'),P(2,2,'B'),P(3,2,'E'),P(4,2,'E'),P(5,2,'B'),P(6,2,'A'), P(3,1,'C'),P(3,3,'C'),P(4,1,'D'),P(4,3,'D'), P(5,1,'B'),P(5,3,'B') ]}, { id:'F4', pixels:[ P(1,2,'B'),P(2,1,'C'),P(2,2,'C'),P(2,3,'C'), P(3,2,'E'),P(4,2,'E'),P(5,2,'B'), P(6,1,'B'),P(6,3,'B') ]}, ]; // ★幾何モチーフ const GENERAL_BANK = [ { id:'G0', pixels:[ P(1,0,'B'),P(3,0,'A'),P(5,0,'B'), P(0,1,'A'),P(2,1,'B'),P(4,1,'B'),P(6,1,'A'), P(1,2,'B'),P(3,2,'A'),P(5,2,'B'), P(3,3,'B'), P(1,4,'B'),P(3,4,'A'),P(5,4,'B'), P(0,5,'A'),P(2,5,'B'),P(4,5,'B'),P(6,5,'A'), P(1,6,'B'),P(3,6,'A'),P(5,6,'B'), ]}, { id:'G1', pixels:[ P(3,0,'F'), P(2,1,'F'),P(3,1,'A'),P(4,1,'F'), P(2,2,'F'),P(3,2,'A'),P(4,2,'F'), P(0,3,'F'),P(1,3,'F'),P(2,3,'A'),P(3,3,'A'),P(4,3,'A'),P(5,3,'F'),P(6,3,'F'), P(2,4,'F'),P(3,4,'A'),P(4,4,'F'), P(2,5,'F'),P(3,5,'A'),P(4,5,'F'), P(3,6,'F'), ]}, { id:'G2', pixels:[ P(3,0,'D'), P(2,1,'D'),P(3,1,'E'),P(4,1,'D'), P(1,2,'D'),P(2,2,'E'),P(3,2,'E'),P(4,2,'E'),P(5,2,'D'), P(0,3,'D'),P(1,3,'E'),P(2,3,'E'),P(3,3,'C'),P(4,3,'E'),P(5,3,'E'),P(6,3,'D'), P(1,4,'D'),P(2,4,'E'),P(3,4,'E'),P(4,4,'E'),P(5,4,'D'), P(2,5,'D'),P(3,5,'E'),P(4,5,'D'), P(3,6,'D'), ]}, { id:'G3', pixels:[ P(0,0,'E'),P(1,1,'E'),P(2,2,'E'),P(3,3,'E'),P(4,4,'E'),P(5,5,'E'),P(6,6,'E'), P(6,0,'B'),P(5,1,'B'),P(4,2,'B'),P(3,3,'B'),P(2,4,'B'),P(1,5,'B'),P(0,6,'B'), ]}, { id:'G4', pixels:[ P(3,0,'F'), P(2,1,'B'),P(3,1,'C'),P(4,1,'B'), P(1,2,'F'),P(2,2,'B'),P(3,2,'C'),P(4,2,'B'),P(5,2,'F'), P(0,3,'F'),P(1,3,'B'),P(2,3,'C'),P(3,3,'C'),P(4,3,'C'),P(5,3,'B'),P(6,3,'F'), P(1,4,'F'),P(2,4,'B'),P(3,4,'C'),P(4,4,'B'),P(5,4,'F'), P(2,5,'B'),P(3,5,'C'),P(4,5,'B'), P(3,6,'F'), ]}, { id:'G5', pixels:[ P(1,1,'A'),P(2,1,'B'),P(3,1,'C'),P(4,1,'B'),P(5,1,'A'), P(1,3,'A'),P(2,3,'B'),P(3,3,'C'),P(4,3,'B'),P(5,3,'A'), P(1,5,'A'),P(2,5,'B'),P(3,5,'C'),P(4,5,'B'),P(5,5,'A'), ]} ]; //------------------------------------- // p5 lifecycle //------------------------------------- function preload(){ if (!debugMode) return; try{ image1=loadImage("images/LED_CUBE1.png"); }catch(e){} try{ image2=loadImage("images/LED_CUBE2.png"); }catch(e){} try{ image3=loadImage("images/LED_CUBE3.png"); }catch(e){} } function setup(){ createCanvasSetup(); createGraphicsLayers(); } function draw(){ background(BG[0],BG[1],BG[2]); if (debugMode) drawDebugOverlay(); for (const l of graphicsLayers) l.update(); for (let i=0;iArray(rows).fill(false)); const ts=[]; for (let gy=0; gy this.waveDur) this.toAssemble(); if (this.phase==="assemble" && this.phaseFrame > this.assembleDur) this.toDissolve(); if (this.phase==="dissolve" && this.phaseFrame > this.dissolveDur && this._scatterGone()) this.toWave(); } // ---- Wave（非スクロール、曲線場）＋少量モザイク混在 drawWave(){ const t = frameCount * this.colorCycleSpeed; const sp=0.015, tt=frameCount*sp; const c=this.waveCfg; const ux1=cos(c.rot1), uy1=sin(c.rot1); const ux2=cos(c.rot2), uy2=sin(c.rot2); this.g.noStroke(); for (const b of this.tiles){ const x=(b.cx-this.g.width/2)/this.g.width; const y=(b.cy-this.g.height/2)/this.g.height; const s1 = sin((x*ux1 + y*uy1)*PI*c.freq1 + tt); const s2 = sin((x*ux2 + y*uy2)*PI*c.freq2 - tt*0.9); let v = pow(abs(s1),c.powA)*sign(s1)*0.6 + pow(abs(s2),c.powB)*sign(s2)*0.4; v = 0.5 + 0.5*v; if (v < c.thresh) continue; const col = shimmerColor(b.seed, t, this.twinkleSpeed, this.colorCycleSpeed); const a = 235 * map(v, c.thresh, 1.0, 0.35, 1.0, true); this.g.fill(red(col),green(col),blue(col), 255); this.g.rect(b.x,b.y,b.w,b.h); } // 波に少量モチーフ for (const m of this.waveMosaics){ const cx=m.x+3.5*m.s, cy=m.y+3.5*m.s; const nx=(cx-this.g.width/2)/this.g.width; const ny=(cy-this.g.height/2)/this.g.height; const s1=sin((nx*ux1+ny*uy1)*PI*c.freq1 + tt); const s2=sin((nx*ux2+ny*uy2)*PI*c.freq2 - tt*0.9); let v= pow(abs(s1),c.powA)*sign(s1)*0.6 + pow(abs(s2),c.powB)*sign(s2)*0.4; v=0.5+0.5*v; const amp=(vArray(cols).fill(null)); for (let gy=0; gyArray(cols).fill(false)); this.revealTime = Array(rows).fill().map(()=>Array(cols).fill(0)); } buildRevealLayers(cols, rows, mode){ const cx=(cols-1)/2, cy=(rows-1)/2; const layers=[]; if (mode==="centerOut"){ const rings={}; for (let gy=0; gyint(k)).sort((a,b)=>a-b); for (const k of keys) layers.push(shuffle(rings[k])); } else if (mode==="crossArms"){ const axisFirst=[], diagLater=[]; for (let gy=0; gy0 && this.revealedMask[gy][gx-1]) banned.add(this.motifGrid.grid[gy][gx-1].id); if (gy>0 && this.revealedMask[gy-1][gx]) banned.add(this.motifGrid.grid[gy-1][gx].id); if (gx= p.death) continue; aliveCount++; const cx = p.x + p.size*0.5; const cy = p.y + p.size*0.5; const nx = (cx - W/2) / W; const ny = (cy - H/2) / H; const tt = frameCount * 0.015; const s1 = sin((nx*ux1 + ny*uy1)*PI*C.freq1 + tt); const s2 = sin((nx*ux2 + ny*uy2)*PI*C.freq2 - tt*0.9); let v = pow(abs(s1),C.powA)*sign(s1)*0.6 + pow(abs(s2),C.powB)*sign(s2)*0.4; v = 0.5 + 0.5*v; if (v < thresh) continue; const tw = 0.5 + 0.5*sin(frameCount*p.sp + p.ph); const col = motifColor(p.colId, t, p.seed); const lifeK = pow(1 - (this.phaseFrame/p.death), 0.8); const a = 235 * lifeK * (0.65 + 0.35*tw) * map(v, thresh, 1.0, 0.2, 1.0, true); this.g.fill(red(col),green(col),blue(col), a); this.g.rect(p.x, p.y, p.size, p.size); } if (aliveCount===0 && prog>0.98){ this.toWave(); } } // dissolve 初期化：固定ピクセルの表（death/flicker 付き） prepareScatterPix(){ if (!this.motifGrid){ this.makeMotifGrid(); this.revealedMask = Array(this.motifGrid.rows).fill().map(()=>Array(this.motifGrid.cols).fill(true)); } const s=this.motifGrid.cell; const arr=[]; for (let gy=0; gythis.phaseFrame>=p.death); } // モチーフ描画（fishWiggle対応：位置固定で内部ピクセルが揺れる） drawMotif(g, def, baseX, baseY, s, t, alpha, seed, fishWiggle=false){ const swimT = frameCount * 0.18 + seed*0.3; for (const px of def.pixels){ const col = motifColor(px.c, t, seed + (px.x*17.3 + px.y*9.1)); let ox=0, oy=0; if (fishWiggle){ const u = px.x/6; // 0..1 const amp = (0.15 + 0.55*u) * s; oy = sin(swimT + u*PI*2.0 + px.y*0.3) * amp * 0.65; ox = cos(swimT*0.8 + u*PI*1.3) * amp * 0.10; } g.fill(red(col),green(col),blue(col), alpha); g.rect(baseX + px.x*s + ox, baseY + px.y*s + oy, s, s); } } drawBackground(){ const g=this.g; // stars g.push(); g.strokeCap(SQUARE); for (const s of this.stars){ s.ph+=s.sp; const k=0.5+0.5*(1+sin(s.ph))/2; const r=s.r*k, a=180*k; g.stroke(255,a); g.strokeWeight(s.w); g.line(s.x-r,s.y,s.x+r,s.y); g.line(s.x,s.y-r,s.x,s.y+r); if (k>0.8){ const d=r*0.7; g.line(s.x-d,s.y-d,s.x+d,s.y+d); g.line(s.x-d,s.y+d,s.x+d,s.y-d); } } g.pop(); // dots g.noStroke(); for (const d of this.dots){ d.ph+=d.sp; const k=0.4+0.6*(1+sin(d.ph))/2; g.fill(255, 180*k); g.circle(d.x,d.y,d.r); } } toAssemble(){ this.phase="assemble"; this.phaseFrame=0; this.motifGrid=null; this.revealLayers=null; this.revealedMask=null; this.revealTime=null; this.revealMode=this.pickRevealMode(); this.scatterPix=null; } toDissolve(){ this.phase="dissolve"; this.phaseFrame=0; this.scatterPix=null; } toWave(){ this.phase="wave"; this.phaseFrame=0; this.waveCfg=this.randomWaveCfg(); this.buildWaveMosaics(); this.scatterPix=null; } pickMotifExcept(banned){ const ids = this.bank.map((_,i)=>i).filter(i=>!banned.has(i)); return ids.length? random(ids)|0 : floor(random(this.bank.length)); } } //------------------------------------- // Layers 作成（CUBEごとに初期フェーズとバンク指定） //------------------------------------- function createGraphicsLayers(){ removeGraphicsLayers(); const size=active.spec.size; for (let i=0;i{ if (l?.g?.remove) l.g.remove(); }); graphicsLayers=[]; currentLayerIndex=0; } // ★CUBEごとの初期モード指定 function initialOptionForCurrentCube(){ let opt = { phase:"wave", bank:GENERAL_BANK, fishWiggle:false }; if (active.spec===CUBE_SPEC_1){ opt = { phase:"wave", bank:GENERAL_BANK, fishWiggle:false }; } else if (active.spec===CUBE_SPEC_2){ opt = { phase:"assemble", bank:STAR_BANK, fishWiggle:false }; } else if (active.spec===CUBE_SPEC_3){ opt = { phase:"assemble", bank:FISH_BANK, fishWiggle:true }; } else { const modes=["wave","assemble"]; const banks=[GENERAL_BANK, STAR_BANK, FISH_BANK]; opt = { phase: random(modes), bank: random(banks), fishWiggle: random()<0.34 }; } return opt; } //------------------------------------- // 画面・入力 //------------------------------------- function createCanvasSetup(){ const urlParams = new URLSearchParams(window.location.search); const sizeParam = urlParams.get("size"); if (sizeParam && CANVAS_SIZES[sizeParam]){ currentSize=sizeParam; if (sizeParam==="LED_CUBE1") setActive(1); if (sizeParam==="LED_CUBE2") setActive(2); if (sizeParam==="LED_CUBE3") setActive(3); } else { currentSize=""; } createCanvasWithSize(); if (!currentSize) setActive(4); } function createCanvasWithSize(){ let s; if (currentSize && CANVAS_SIZES[currentSize]) s=CANVAS_SIZES[currentSize]; else s={width:windowWidth, height:windowHeight}; if (window.canvas) window.canvas.remove(); pixelDensity(1); createCanvas(s.width,s.height); } function keyPressed(){ if (key==="1"){ currentSize="LED_CUBE1"; setActive(1); } else if (key==="2"){ currentSize="LED_CUBE2"; setActive(2); } else if (key==="3"){ currentSize="LED_CUBE3"; setActive(3); } else if (key==="4"){ currentSize=""; setActive(4); } if (["1","2","3","4"].includes(key)){ updateURLAndCanvas(); createGraphicsLayers(); } } function windowResized(){ if (!currentSize || !CANVAS_SIZES[currentSize]){ resizeCanvas(windowWidth, windowHeight); if (!currentSize){ setActive(4); createGraphicsLayers(); } } } function updateURLAndCanvas(){ const url=new URL(window.location); if (currentSize) url.searchParams.set("size", currentSize); else url.searchParams.delete("size"); window.history.replaceState({}, "", url); createCanvasWithSize(); } function setActive(n){ if (n===1) active={ shapes:LED_CUBE1, spec:CUBE_SPEC_1 }; if (n===2) active={ shapes:LED_CUBE2, spec:CUBE_SPEC_2 }; if (n===3) active={ shapes:LED_CUBE3, spec:CUBE_SPEC_3 }; if (n===4){ createFullscreenLayout(); active={ shapes:LED_CUBE4, spec:CUBE_SPEC_4 }; } } // フルスクリーンタイル function createFullscreenLayout(){ const W=windowWidth, H=windowHeight; LED_CUBE4=[]; CUBE_SPEC_4=null; const tile=max(128, floor(W/4)); const cols=ceil(W/tile), rows=ceil(H/tile); for (let r=0;r0;i--){ const j=floor(random(i+1)); [a[i],a[j]]=[a[j],a[i]]; } } function shuffle(arr){ const a=arr.slice(); shuffleArrayInPlace(a); return a; }

ryusei wave