const ASPECT_W = 748.0; const ASPECT_H = 291.4; const MARGIN_Y = 24; // 上下の余白（px） // 上部のロゴ群（IDD / メインロゴ）を合わせた // レイアウト全体の外接ボックス（デザイン座標, キャンバス中心からのオフセット px）。 // この範囲がキャンバス内に必ず収まるよう、毎フレーム全体を等倍で拡縮・移動する。 const DESIGN_W = 748.0; // 上部ロゴ群の横幅 const DESIGN_H = 291.4; // 上部ロゴ群の縦幅 const DESIGN_CX = -100.0; // 外接ボックス中心の X（中心からのずれ） const DESIGN_CY = -543.0; // 外接ボックス中心の Y（中心からのずれ） const FIT_MARGIN = 0.92; // 画面に対する余白（1=ぴったり, 0.92=少し内側） // デザイン全体をキャンバスに収めるための「拡縮率」と「中心オフセット」を返す。 // scale: デザイン1px が画面で何pxになるか / ox,oy: 画面中心に対する平行移動（画面px） function fitTransform() { const sc = Math.min(width / DESIGN_W, height / DESIGN_H) * FIT_MARGIN; return { sc, ox: -DESIGN_CX * sc, oy: -DESIGN_CY * sc }; } // 配置・アニメの調整値。元プロジェクトの該当パラメータのみを残す const params = { // ロゴ枠線なぞりアニメ（Qで再生） logoAnimDrawMs: 1400, // 輪郭を描き終えるまでの時間（ms） logoAnimFadeMs: 2200, // 描き終えてから線が消えるまでの時間（ms） logoAnimWeight: 2, // 線の太さ（表示px目安） logoAnimOffsetX: 0, // 線だけをずらす量（px, +で右へ） logoAnimOffsetY: -10, // 線だけをずらす量（px, +で下へ） // ロゴ文字1（IDD） lettersShow: true, lettersScale: 0.85, lettersX: 43, lettersY: -543, iShow: true, iX: 0, iY: 0, iScale: 1.0, iRot: 0, iAlpha: 255, d1Show: true, d1X: 0, d1Y: 0, d1Scale: 1.0, d1Rot: 0, d1Alpha: 255, d2Show: true, d2X: 0, d2Y: 0, d2Scale: 1.0, d2Rot: 0, d2Alpha: 255, // ロゴ文字2（IDDD） l2Show: false, l2Scale: 0.9, l2X: -217, l2Y: 174, l2iShow: true, l2iX: 0, l2iY: 0, l2iScale: 1.0, l2iRot: 0, l2iAlpha: 255, l2d1Show: true, l2d1X: 0, l2d1Y: 0, l2d1Scale: 1.0, l2d1Rot: 0, l2d1Alpha: 255, l2d2Show: true, l2d2X: 0, l2d2Y: 0, l2d2Scale: 1.0, l2d2Rot: 0, l2d2Alpha: 255, l2d3Show: true, l2d3X: 0, l2d3Y: 0, l2d3Scale: 1.0, l2d3Rot: 0, l2d3Alpha: 255, // アンパサンド（&） ampShow: false, ampX: 174, ampY: 283, ampScale: 1.01, ampRot: 0, ampAlpha: 255, // "design"（d/e/s/i/g/n） deShow: false, deScale: 0.85, deX: -43, deY: 587, ddShow: true, ddX: 0, ddY: 0, ddScale: 1.0, ddRot: 0, ddAlpha: 255, deeShow: true, deeX: 0, deeY: 0, deeScale: 1.0, deeRot: 0, deeAlpha: 255, dsShow: true, dsX: 0, dsY: 0, dsScale: 1.0, dsRot: 0, dsAlpha: 255, diShow: true, diX: 0, diY: 0, diScale: 1.0, diRot: 0, diAlpha: 255, dgShow: true, dgX: 0, dgY: 0, dgScale: 1.0, dgRot: 0, dgAlpha: 255, dnShow: true, dnX: 0, dnY: 0, dnScale: 1.0, dnRot: 0, dnAlpha: 255, // メインロゴ（単一） lmShow: true, lmX: -326, lmY: -543, lmScale: 0.31, lmRot: 0, lmAlpha: 255, // "system"（s/y/s/t/e/m） syShow: false, syScale: 0.69, syX: 217, syY: 739, ss1Show: true, ss1X: 0, ss1Y: 0, ss1Scale: 1.0, ss1Rot: 0, ss1Alpha: 255, syyShow: true, syyX: 0, syyY: 0, syyScale: 1.0, syyRot: 0, syyAlpha: 255, ss2Show: true, ss2X: 0, ss2Y: 0, ss2Scale: 1.0, ss2Rot: 0, ss2Alpha: 255, stShow: true, stX: 0, stY: 0, stScale: 1.0, stRot: 0, stAlpha: 255, seShow: true, seX: 0, seY: 0, seScale: 1.0, seRot: 0, seAlpha: 255, smShow: true, smX: 0, smY: 0, smScale: 1.0, smRot: 0, smAlpha: 255, }; // 分割した文字SVGのDOM要素（ベクターのまま表示してジャギーを防ぐ） let domI, domD1, domD2; const SVG_W = 544.25; const SVG_H = 214.79; // メインロゴ（logomain.svg） let domLM; const LM_W = 955; const LM_H = 940; // 各ロゴ要素ごとの「輪郭ポリライン」一覧（枠線なぞりアニメ用）。 // outlineByDom: Map const letterOutlines = new Map(); // 枠線なぞりアニメの状態（Qで再生）。時間/太さは params で調整。 let logoAnimActive = false; let logoAnimStartMs = 0; // このフレームで配置した各文字の描画情報（輪郭線をまとめて後から描くため貯める） let logoPlacements = []; // 線専用のオーバーレイ canvas（ロゴより手前に重ねる）とその 2D context let overlayCanvas = null; let overlayCtx = null; function setup() { const canvas = createCanvas(...canvasSize()); canvas.parent('canvas-wrap'); // 線専用オーバーレイ canvas を、ロゴより手前に重ねて作る setupOverlay(); // SVG（ロゴ文字）を DOM 要素として作成しキャンバスに重ねる（ベクターのまま＝鮮明） domI = makeLetterDom('https://www.idd.tamabi.ac.jp/d26025/assets/I.svg'); domD1 = makeLetterDom('https://www.idd.tamabi.ac.jp/d26025/assets/D1.svg'); domD2 = makeLetterDom('https://www.idd.tamabi.ac.jp/d26025/assets/D2.svg'); domLM = makeLetterDom('https://www.idd.tamabi.ac.jp/d26025/assets/logomain.svg'); } function draw() { // 背景は黒。ロゴだけを見せる background(0); // ロゴ文字（DOM）を配置・更新する drawLetters(); // ロゴの輪郭線アニメを最前面に描く drawLetterOutlines(); } // 上部ロゴ群に合わせた横長キャンバスのサイズを返す function canvasSize() { if (fullscreen()) { return [windowWidth, windowHeight]; } let h = windowHeight - MARGIN_Y * 2; let w = h * (ASPECT_W / ASPECT_H); if (w > windowWidth) { w = windowWidth; h = w * (ASPECT_H / ASPECT_W); } return [w, h]; } // 線専用のオーバーレイ canvas を .canvas-wrap 内に作る。 // ロゴ（.letter）より後に追加 + z-index で最前面にし、線をロゴ本体の上に出す。 function setupOverlay() { const wrap = document.querySelector('.canvas-wrap'); if (!wrap) return; overlayCanvas = document.createElement('canvas'); overlayCanvas.className = 'overlay-lines'; overlayCanvas.width = width; overlayCanvas.height = height; wrap.appendChild(overlayCanvas); overlayCtx = overlayCanvas.getContext('2d'); } // オーバーレイのサイズをメイン canvas に合わせる（リサイズ時に呼ぶ） function resizeOverlay() { if (!overlayCanvas) return; overlayCanvas.width = width; overlayCanvas.height = height; } // SVG をとして .canvas-wrap 内に絶対配置で作る（色は元のグラデのまま安全）。 // 併せて、枠線なぞりアニメ用に SVG の path 輪郭をサンプリングして保持する。 function makeLetterDom(src) { const el = createImg(src, 'logo'); el.parent('canvas-wrap'); el.class('letter'); // 輪郭サンプリング（非同期。fetch → DOMParse → getPointAtLength） sampleSvgOutline(src, el.elt); return el; } // SVG の各 path を等間隔サンプリングして輪郭ポリラインを作り、letterOutlines に保存。 function sampleSvgOutline(src, imgEl) { fetch(src) .then((r) => r.text()) .then((svgText) => { const doc = new DOMParser().parseFromString(svgText, 'image/svg+xml'); const svg = doc.querySelector('svg'); if (!svg) return; // viewBox の幅・高さ（要素表示サイズへのスケールに使う） const vb = (svg.getAttribute('viewBox') || '0 0 1 1').split(/\s+/).map(Number); const vbW = vb[2] || 1; const vbH = vb[3] || 1; // getPointAtLength を使うため、一時的に DOM に挿入（非表示）して計測する svg.style.position = 'absolute'; svg.style.left = '-99999px'; svg.style.width = vbW + 'px'; svg.style.height = vbH + 'px'; document.body.appendChild(svg); const geoms = svg.querySelectorAll('path, polygon, polyline'); const contours = []; let totalLen = 0; const STEP = 8; // サンプリング間隔（viewBox 単位, px）。粗めで負荷減 const MAX_PTS = 200; // 1輪郭あたりの最大点数（重さの上限） geoms.forEach((g) => { if (typeof g.getTotalLength !== 'function') return; // polygon 等で未対応なら飛ばす let L = 0; try { L = g.getTotalLength(); } catch (e) { L = 0; } if (!L || L < 1) return; const pts = []; const n = Math.min(MAX_PTS, Math.max(2, Math.ceil(L / STEP))); for (let i = 0; i <= n; i++) { try { const p = g.getPointAtLength((i / n) * L); pts.push({ x: p.x, y: p.y }); } catch (e) { /* 1点失敗は無視 */ } } if (pts.length >= 2) { contours.push({ pts, len: L }); totalLen += L; } }); document.body.removeChild(svg); letterOutlines.set(imgEl, { contours, totalLen, vbW, vbH }); }) .catch((e) => console.warn('輪郭サンプリング失敗:', src, e)); } // 全ロゴの枠線なぞりアニメを再生（Qで呼ぶ） function playLogoAnim() { logoAnimActive = true; logoAnimStartMs = millis(); } // ロゴ群を DOM 要素として配置・更新する（汎用）。 // group: { show, scale, x, y, svgW, svgH, letters[] } // letters[]: { dom, show, x, y, s, rot, a } function drawLogoGroup(group) { // デザイン全体を画面に収める拡縮・移動（全ロゴ共通） const fit = fitTransform(); for (const L of group.letters) { if (!L.dom) continue; const el = L.dom.elt; // 群全体オフ or 個別オフなら隠す if (!group.show || !L.show) { el.style.display = 'none'; continue; } el.style.display = 'block'; // デザイン座標（中心からのずれ px）→ 画面座標へ。 // 画面中心 + 収め用オフセット + デザインオフセット×収め率 const cx = width / 2 + fit.ox + (group.x + L.x) * fit.sc; const cy = height / 2 + fit.oy + (group.y + L.y) * fit.sc; // 元のスケールにも収め率を掛けて全体を縮める const scale = group.scale * L.s * fit.sc; // SVG の元サイズに合わせて幅を固定（高さは比率で追従） el.style.width = group.svgW + 'px'; el.style.height = group.svgH + 'px'; // translate でSVG中心を cx,cy に合わせる（要素左上が原点なので半分戻す） el.style.transform = `translate(${cx}px, ${cy}px) translate(-50%, -50%) ` + `rotate(${L.rot}deg) scale(${scale})`; el.style.opacity = (L.a / 255).toString(); // 枠線なぞりアニメ中は、この文字の配置を記録しておき、後でまとめて線を描く if (logoAnimActive) { logoPlacements.push({ el, cx, cy, sc: scale, rot: L.rot, svgW: group.svgW, svgH: group.svgH }); } } } // 記録した各文字の輪郭線を、オーバーレイ canvas（ロゴより手前）にまとめて描く。 function drawLetterOutlines() { if (!overlayCtx) return; // 毎フレーム、オーバーレイをクリア overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height); if (!logoAnimActive) return; for (const p of logoPlacements) { try { drawLetterOutline(p.el, p.cx, p.cy, p.sc, p.rot, p.svgW, p.svgH); } catch (e) { console.warn('outline 描画失敗:', e); } } } // 1文字分の輪郭を白い線でなぞって、オーバーレイ canvas に描く（Canvas2D で DOM の transform を再現）。 // progress に応じて各輪郭を totalLen の途中まで描き、最後はフェードして消す。 function drawLetterOutline(imgEl, cx, cy, sc, rotDeg, svgW, svgH) { const data = letterOutlines.get(imgEl); if (!data || data.totalLen <= 0) return; const ctx = overlayCtx; if (!ctx) return; // 全体進行：0→1 で描画、その後フェード const elapsed = millis() - logoAnimStartMs; const drawMs = Math.max(1, params.logoAnimDrawMs); const fadeMs = Math.max(1, params.logoAnimFadeMs); const drawT = constrain(elapsed / drawMs, 0, 1); const fade = elapsed <= drawMs ? 1 : constrain(1 - (elapsed - drawMs) / fadeMs, 0, 1); if (fade <= 0) return; // この文字で「今描いてよい長さ」（viewBox 単位） const drawLen = data.totalLen * easeInOut(drawT); // viewBox → 表示サイズへのスケール（0除算ガード） const sx = data.vbW ? svgW / data.vbW : 1; const sy = data.vbH ? svgH / data.vbH : 1; // 輪郭点（viewBox座標）→ 画面座標への合成スケール const totalScale = sc * Math.max(sx, sy) || 1; ctx.save(); // DOM の transform と同じ：中心へ移動（線だけ X/Y ずらす）→ 回転 → スケール → 左上原点へ → viewBox へ ctx.translate(cx + params.logoAnimOffsetX, cy + params.logoAnimOffsetY); ctx.rotate((rotDeg * Math.PI) / 180); ctx.scale(sc, sc); ctx.translate(-svgW / 2, -svgH / 2); ctx.scale(sx, sy); ctx.strokeStyle = `rgba(255,255,255,${fade})`; ctx.lineWidth = constrain(params.logoAnimWeight / totalScale, 0.0001, 50); ctx.lineCap = 'round'; ctx.lineJoin = 'round'; let remaining = drawLen; for (const ct of data.contours) { if (remaining <= 0) break; const pts = ct.pts; if (!pts || pts.length < 2) { remaining -= ct.len; continue; } const ratio = constrain(remaining / ct.len, 0, 1); const upto = Math.max(1, Math.floor((pts.length - 1) * ratio)); ctx.beginPath(); ctx.moveTo(pts[0].x, pts[0].y); for (let i = 1; i <= upto; i++) ctx.lineTo(pts[i].x, pts[i].y); ctx.stroke(); remaining -= ct.len; } ctx.restore(); } // easeInOut（smoothstep） function easeInOut(t) { t = constrain(t, 0, 1); return t * t * (3 - 2 * t); } // ロゴ文字を更新する（全群を配置 → アニメ中なら輪郭描画情報を貯める） function drawLetters() { // 枠線なぞりアニメの終了判定（描画 + フェードが終わったら止める） if (logoAnimActive && millis() - logoAnimStartMs > params.logoAnimDrawMs + params.logoAnimFadeMs) { logoAnimActive = false; } // このフレームの配置記録をリセット（drawLogoGroup が貯め直す） logoPlacements = []; // ロゴ1（IDD） drawLogoGroup({ show: params.lettersShow, scale: params.lettersScale, x: params.lettersX, y: params.lettersY, svgW: SVG_W, svgH: SVG_H, letters: [ { dom: domI, show: params.iShow, x: params.iX, y: params.iY, s: params.iScale, rot: params.iRot, a: params.iAlpha }, { dom: domD1, show: params.d1Show, x: params.d1X, y: params.d1Y, s: params.d1Scale, rot: params.d1Rot, a: params.d1Alpha }, { dom: domD2, show: params.d2Show, x: params.d2X, y: params.d2Y, s: params.d2Scale, rot: params.d2Rot, a: params.d2Alpha }, ], }); // メインロゴ（単一） drawLogoGroup({ show: params.lmShow, scale: 1, x: 0, y: 0, svgW: LM_W, svgH: LM_H, letters: [ { dom: domLM, show: true, x: params.lmX, y: params.lmY, s: params.lmScale, rot: params.lmRot, a: params.lmAlpha }, ], }); } function windowResized() { resizeCanvas(...canvasSize()); // オーバーレイ canvas もメインに合わせる resizeOverlay(); } // F キーでフルスクリーン、Q キー（またはクリック）でロゴ枠線なぞりアニメを再生 function keyPressed() { if (key === 'f' || key === 'F') { fullscreen(!fullscreen()); // フルスクリーン反映後にキャンバスをリサイズ（反映は非同期） setTimeout(() => { resizeCanvas(...canvasSize()); resizeOverlay(); }, 100); } if (key === 'q' || key === 'Q') { playLogoAnim(); } } // クリックでもアニメを再生 function mousePressed() { playLogoAnim(); }

12647025_aoikuroki