/* OpenCodeとgithub copilotでmicrographics的なものを描きたかった…！こういったパーツの多い実装は助かりますねしかし結局「正八面体と〜球体があって〜アイコンはGoogle Fontsのマテリアルアイコンで〜文字化けはこういうやり方で〜」みたいに自分で指示出ししないといけないので、「こういう雰囲気のものをつくりたい！」と思ったらその像をしっかり言葉として表すスキルが必要になってくるという所感ですそもそもこういう様式をmicrographicsという名前だと知ったのも最近だし… */ const W = 800; const H = 450; const CARD_PAD = 28; const DIVIDER_X = 310; const MOJIBAKE_SRC = "譛霑代ラ繝ｳ繝悶Λ繧ｶ繝ｼ繧ｺ隕九※縺ｦ繧▲縺ｱ繧頑枚蟄怜喧縺代▲縺ｦ縺九▲縺薙＞縺↑繝ｼ縺ｨ諤昴＞縺ｾ縺励◆縲ゅ％縺ｮ譁ｫ繧偵ｗ縺門ｾｩ蜈＠縺ｦ縺ｋ縺昴％縺ｮ繧ｭ繝滂ｼ∽ｻ頑律縺ｮ驕句兇縺ｯ螟ｧ蜷峨□縺橸ｼ"; const MOJIBAKE_CHARS = [...new Set(MOJIBAKE_SRC.split(''))].filter(c => c.trim().length > 0); const ICON_POOL = [ // 家電・洗濯 'thermostat', 'local_laundry_service', 'iron', 'dry_cleaning', 'wash', 'hot_tub', 'kitchen', 'microwave', 'blender', 'coffee_maker', // 電力・エネルギー 'bolt', 'power', 'battery_charging_full', 'battery_0_bar', 'solar_power', 'wind_power', 'energy_savings_leaf', 'electric_meter', 'outlet', 'power_input', // ネットワーク・通信 'wifi', 'bluetooth', 'nfc', 'signal_cellular_alt', 'router', 'hub', 'device_hub', 'cable', 'settings_input_antenna', 'cell_tower', // センサー・計測 'sensors', 'thermostat_auto', 'water_drop', 'air', 'compress', 'speed', 'timer', 'straighten', 'monitor_heart', 'health_and_safety', // 素材・環境 'recycling', 'eco', 'water', 'grain', 'forest', 'gas_meter', 'propane', // デバイス・基板 'memory', 'developer_board', 'developer_mode', 'sim_card', 'sd_card', 'usb', 'data_object', 'terminal', 'integration_instructions', 'api', // サイエンス・工業 'biotech', 'science', 'psychology', 'psychology_alt', 'local_pharmacy', 'opacity', 'factory', 'precision_manufacturing', // システム・状態 'autorenew', 'check_circle', 'warning', 'settings', 'tune', 'build', 'construction', 'handyman', 'engineering', 'manage_accounts', ]; // 6スロット：参考コードの Icon クラス相当 class IconSlot { constructor() { this.name = random(ICON_POOL); this.isChanging = false; this.count = 0; this.maxCount = floor(random(8, 15)); } update() { if (!this.isChanging && random(100) < 0.4) { this.isChanging = true; } if (this.isChanging) { if (frameCount % 4 === 0) { this.name = random(ICON_POOL); } this.count++; if (this.count > this.maxCount) { this.isChanging = false; this.count = 0; this.maxCount = floor(random(8, 15)); } } } } let iconSlots = []; let sphereG; let rotX = 0; let rotY = 0; let glitchLines = []; let barcodeWidths = []; let barcodeLabel = ''; let glitchTimer = 0; const SPHERE_W = DIVIDER_X - CARD_PAD - 8; const SPHERE_H = H - CARD_PAD * 2 - 16; function setup() { createCanvas(W, H); frameRate(30); textFont('monospace'); sphereG = createGraphics(SPHERE_W, SPHERE_H, WEBGL); regenerateGlitch(); for (let i = 0; i < 6; i++) iconSlots.push(new IconSlot()); for (let i = 0; i < 90; i++) barcodeWidths.push(floor(random(1, 4))); const r = () => floor(random(10)); const p = (n, len) => String(n).padStart(len, '0'); barcodeLabel = `${r()}${r()} ${p(floor(random(1000000)), 6)} ${p(floor(random(1000000)), 6)} -- ${p(floor(random(100)), 2)}`; } function pickGlitchChar() { if (random() < 0.15) return ' '; return MOJIBAKE_CHARS[floor(random(MOJIBAKE_CHARS.length))]; } function regenerateGlitch() { glitchLines = []; for (let r = 0; r < 12; r++) { let lineStr = ''; const len = floor(random(14, 22)); for (let c = 0; c < len; c++) lineStr += pickGlitchChar(); glitchLines.push(lineStr); } } function draw() { // ── 背景 ────────────────────────────────────────────────────── background(232, 228, 218); // グリッチ行を1行だけ定期更新 glitchTimer++; for (const slot of iconSlots) slot.update(); if (glitchTimer % 18 === 0) { const idx = floor(random(glitchLines.length)); let lineStr = ''; const len = floor(random(14, 22)); for (let c = 0; c < len; c++) lineStr += pickGlitchChar(); glitchLines[idx] = lineStr; } // ── カード外枠 ──────────────────────────────────────────────── noFill(); stroke(40); strokeWeight(1.5); rect(CARD_PAD, CARD_PAD, W - CARD_PAD * 2, H - CARD_PAD * 2); // ── 仕切り線 ────────────────────────────────────────────────── stroke(40); strokeWeight(1); line(DIVIDER_X, CARD_PAD + 8, DIVIDER_X, H - CARD_PAD - 8); // ── 球体バッファを描いて貼り付け ───────────────────────────── drawSphereBuffer(); const sphereX = CARD_PAD + 8; const sphereY = CARD_PAD + 8; image(sphereG, sphereX, sphereY); // 上下の区切り線 stroke(100, 100, 100, 120); strokeWeight(0.5); line(sphereX, sphereY + SPHERE_H / 2, sphereX + SPHERE_W, sphereY + SPHERE_H / 2); // ── 右パネル ────────────────────────────────────────────────── drawInfoPanel(); rotY += 0.012; rotX += 0.005; } // ── WEBGL バッファ：上＝正八面体、下＝ワイヤー球体 ────────── function drawSphereBuffer() { const g = sphereG; g.clear(); const R = min(SPHERE_W, SPHERE_H) * 0.22; // 共通サイズ const halfH = SPHERE_H / 2; // 各エリアの高さ // ── 上半分：正八面体（ワイヤーフレーム） ──────────────────── g.push(); g.translate(0, -halfH / 2, 0); // 上半分の中心へ g.rotateX(rotX); g.rotateY(rotY); const V = [ g.createVector( 0, -R, 0), g.createVector( 0, R, 0), g.createVector( R, 0, 0), g.createVector(-R, 0, 0), g.createVector( 0, 0, R), g.createVector( 0, 0, -R), ]; const FACES = [ [0,2,4],[0,4,3],[0,3,5],[0,5,2], [1,4,2],[1,3,4],[1,5,3],[1,2,5], ]; g.noFill(); g.stroke(30); g.strokeWeight(1.2); for (const [a, b, c] of FACES) { g.beginShape(LINES); g.vertex(V[a].x, V[a].y, V[a].z); g.vertex(V[b].x, V[b].y, V[b].z); g.vertex(V[b].x, V[b].y, V[b].z); g.vertex(V[c].x, V[c].y, V[c].z); g.vertex(V[c].x, V[c].y, V[c].z); g.vertex(V[a].x, V[a].y, V[a].z); g.endShape(); } g.pop(); // ── 下半分：ワイヤーフレーム球体 ──────────────────────────── g.push(); g.translate(0, halfH / 2, 0); // 下半分の中心へ g.rotateX(rotX); g.rotateY(rotY); g.noFill(); g.stroke(30); g.strokeWeight(1.0); drawWireSphere(g, R, 6, 12); g.pop(); } // ── ワイヤーフレーム球体（graphics バッファ用） ─────────────── function drawWireSphere(g, R, stacks, slices) { for (let i = 1; i < stacks; i++) { const phi = map(i, 0, stacks, -HALF_PI, HALF_PI); const r = R * cos(phi); const y = R * sin(phi); g.beginShape(); for (let j = 0; j <= slices; j++) { const theta = map(j, 0, slices, 0, TWO_PI); g.vertex(r * cos(theta), y, r * sin(theta)); } g.endShape(); } for (let j = 0; j < slices; j++) { const theta = map(j, 0, slices, 0, TWO_PI); g.beginShape(); for (let i = 0; i <= stacks; i++) { const phi = map(i, 0, stacks, -HALF_PI, HALF_PI); const r = R * cos(phi); const y = R * sin(phi); g.vertex(r * cos(theta), y, r * sin(theta)); } g.endShape(); } } // ── 右情報パネル ────────────────────────────────────────────── function drawInfoPanel() { const px = DIVIDER_X + 16; const py = CARD_PAD + 14; const panelW = W - DIVIDER_X - CARD_PAD - 24; // ヘッダー noStroke(); fill(30); textFont('monospace'); textSize(7.5); textAlign(LEFT, TOP); text('MICROGRAPHICS 01', px, py); stroke(30); strokeWeight(0.5); line(px, py + 11, px + panelW, py + 11); // ── 文字化けテキストブロック（2段組） ──────────────────────── const gtY = py + 16; textFont('monospace, sans-serif'); textSize(8); textAlign(LEFT, TOP); const colW = panelW / 2; const perCol = 6; for (let i = 0; i < glitchLines.length; i++) { const col = floor(i / perCol); // 0: 左列, 1: 右列 const row = i % perCol; const lx = px + col * colW; const ly = gtY + row * 11; if (i % 3 === 0) fill(30); else if (i % 3 === 1) fill(80); else fill(120, 115, 100); text(glitchLines[i], lx, ly); } const sepY = gtY + perCol * 11 + 4; stroke(80); strokeWeight(0.5); line(px, sepY, px + panelW, sepY); // ── アイコン行 ──────────────────────────────────────────────── drawIcons(px, sepY + 10, panelW); const sep2Y = sepY + 46; stroke(80); strokeWeight(0.5); line(px, sep2Y, px + panelW, sep2Y); // ── バーコード ────────────────────────────────────────────── drawBarcode(px, sep2Y + 6, panelW); // ── 日時 ────────────────────────────────────────────────────── const sep3Y = sep2Y + 6 + 28 + 12; stroke(80); strokeWeight(0.5); line(px, sep3Y, px + panelW, sep3Y); drawDateTime(px, sep3Y + 6, panelW); // ── キャッチコピー ──────────────────────────────────────────── const sep4Y = sep3Y + 6 + 38 + 10; stroke(80); strokeWeight(0.5); line(px, sep4Y, px + panelW, sep4Y); const textAreaTop = sep4Y + 8; const textAreaH = H - CARD_PAD - 10 - textAreaTop; noStroke(); fill(20); textFont('monospace'); textStyle(BOLD); textSize(17); textLeading(26); textAlign(LEFT, TOP); text( 'Saikin micrographics to iu\nart style ga ki ni natte imasu.', px, textAreaTop + 6 ); textStyle(NORMAL); textLeading(12); fill(90); textSize(12); textLeading(14); textAlign(LEFT, BOTTOM); text( 'micrographics no style wo kangaeru to\nmojibake ha chotto chigau ki mo suru no desu ga,\nkakkoii shi mitame ga suki dakara\nirete shimai mashita.', px, H - CARD_PAD - 20 ); textLeading(12); } // ── 日時表示（YYYY MM DD HH MM SS） ────────────────────────── function drawDateTime(px, py, panelW) { const now = new Date(); const parts = [ { label: 'YY', val: String(now.getFullYear()).slice(-2) }, { label: 'MM', val: String(now.getMonth() + 1).padStart(2, '0') }, { label: 'DD', val: String(now.getDate()).padStart(2, '0') }, { label: 'HH', val: String(now.getHours()).padStart(2, '0') }, { label: 'MIN', val: String(now.getMinutes()).padStart(2, '0') }, { label: 'SEC', val: String(now.getSeconds()).padStart(2, '0') }, ]; const cellW = panelW / parts.length; const cellH = 38; for (let i = 0; i < parts.length; i++) { const cx = px + cellW * i; // ラベル（上段） noStroke(); fill(110, 105, 95); textFont('monospace'); textSize(6); textAlign(CENTER, TOP); text(parts[i].label, cx + cellW / 2, py + 5); // 値（中央） fill(20); textSize(16); textAlign(CENTER, CENTER); text(parts[i].val, cx + cellW / 2, py + cellH / 2 + 4); } // 日付と時刻の間に点線の縦仕切り stroke(100, 100, 100, 80); strokeWeight(0.5); const divX = px + cellW * 3; for (let dy = py + 4; dy < py + cellH - 4; dy += 5) { point(divX, dy); } } // ── サイン波 / コサイン波 ───────────────────────────────────── // ── Material Icons 行 ───────────────────────────────────────── function drawIcons(px, py, panelW) { const spacing = panelW / iconSlots.length; const iconSize = 22; for (let i = 0; i < iconSlots.length; i++) { const slot = iconSlots[i]; const ix = px + spacing * i + spacing / 2; const iy = py + iconSize / 2 + 2; // ケアラベル風の丸枠（変化中は少し薄く） noFill(); stroke(slot.isChanging ? 120 : 50); strokeWeight(0.8); ellipse(ix, iy, iconSize + 8, iconSize + 8); // Material Icons グリフ noStroke(); fill(slot.isChanging ? color(100) : color(30)); textFont('Material Icons'); textSize(iconSize); textAlign(CENTER, CENTER); text(slot.name, ix, iy); } } // ── バーコード ──────────────────────────────────────────────── function drawBarcode(px, py, panelW) { const bcH = 28; const totalW = panelW - 2; let x = px; let isBar = true; noStroke(); for (let i = 0; x < px + totalW && i < barcodeWidths.length * 3; i++) { const w = barcodeWidths[i % barcodeWidths.length]; if (isBar) { fill(20); rect(x, py, w, bcH); } x += w; isBar = !isBar; } noStroke(); fill(50); textFont('monospace'); textSize(6); textAlign(CENTER, TOP); text(barcodeLabel, px + totalW / 2, py + bcH + 3); }