{"id":1098,"date":"2026-04-20T15:35:18","date_gmt":"2026-04-20T06:35:18","guid":{"rendered":"http:\/\/www.mapse.eng.osaka-u.ac.jp\/psesa\/WP\/?page_id=1098"},"modified":"2026-04-25T18:08:46","modified_gmt":"2026-04-25T09:08:46","slug":"home","status":"publish","type":"page","link":"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1098\" class=\"elementor elementor-1098\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5847e099 e-con-full e-flex e-con e-parent\" data-id=\"5847e099\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e911452 elementor-widget elementor-widget-text-editor\" data-id=\"e911452\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\n<div id=\"hero\"><!-- \u80cc\u666f\u52d5\u753b -->\n\n  <div class=\"lab-title\">\n   <div class=\"lab-name\">\u4fe1\u983c\u6027\u8a55\u4fa1\u5b66\u9818\u57df<\/div>\n   <div class=\"lab-sub\">\u69cb\u9020\u5316\u30c7\u30b6\u30a4\u30f3\u8b1b\u5ea7<\/div>\n  <\/div>\n\n  <div class=\"bg\">\n    <img decoding=\"async\" src=\"image1.jpg\" \/> \n    <img decoding=\"async\" src=\"image2.jpg\" \/> \n    <img decoding=\"async\" src=\"image3.jpg\" \/> \n    <img decoding=\"async\" src=\"image4.jpg\" \/>\n  <\/div>\n  <div id=\"video-title\"><\/div>\n  <!-- \u9ed2\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4 -->\n  <div class=\"overlay\">\u00a0<\/div>\n  <!-- \u30ad\u30fc\u30ef\u30fc\u30c9 -->\n  <div class=\"hero-container\">\n    <a class=\"kw\" href=\"#\">CUDA<\/a> \n    <a class=\"kw\" href=\"#\">Simulation<\/a> \n    <a class=\"kw\" href=\"#\">HPC<\/a> \n    <a class=\"kw\" href=\"#\">FDM<\/a> \n    <a class=\"kw\" href=\"#\">DEM<\/a> \n    <a class=\"kw\" href=\"#\">CFD<\/a>\n  <\/div>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600&#038;family=Space+Grotesk:wght@400;600&#038;display=swap\" rel=\"stylesheet\">\n  controls=0\n<\/div>\n\n\n<style>\nbody {\n  margin: 0;\n  font-family: 'Inter', sans-serif;\n}\n#hero {\n  position: relative;   \/* \u2605\u3053\u308c\u304c\u52b9\u304f *\/\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n  background: radial-gradient(\n    circle at 30% 30%,\n    rgba(0, 120, 90, 0.15),\n    transparent 60%\n  ),\n  radial-gradient(\n    circle at 70% 70%,\n    rgba(0, 80, 120, 0.15),\n    transparent 60%\n  ),\n  black;\n}\n\n#video-title {\n  position: absolute;\n  bottom: 40px;\n  right: 40px;\n\n  padding: 10px 18px;\n  border-radius: 12px;\n\n  color: rgba(255,255,255,0.9);\n  font-size: 0.95rem;\n  letter-spacing: 0.6px;\n\n  \/* \u2605 \u30ac\u30e9\u30b9\u672c\u4f53 *\/\n  background: linear-gradient(\n    135deg,\n    rgba(255,255,255,0.15),\n    rgba(255,255,255,0.05)\n  );\n\n  backdrop-filter: blur(12px) saturate(140%);\n  -webkit-backdrop-filter: blur(12px) saturate(140%);\n\n  \/* \u2605 \u7e01\u306e\u5149\uff08\u91cd\u8981\uff09 *\/\n  border: 1px solid rgba(255,255,255,0.25);\n\n  \/* \u2605 \u7acb\u4f53\u611f *\/\n  box-shadow:\n    0 8px 25px rgba(0,0,0,0.4),\n    inset 0 1px 0 rgba(255,255,255,0.3);\n\n  \/* \u2605 \u51fa\u73fe\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u7528 *\/\n  opacity: 0;\n  transform: translateY(10px);\n\n  pointer-events: none;\n  z-index: 3;\n\n  transition:\n    opacity 0.4s ease,\n    transform 0.4s ease;\n}\n\n#video-title::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 12px;\n\n  background: linear-gradient(\n    120deg,\n    rgba(255,255,255,0.4),\n    rgba(255,255,255,0.05) 40%,\n    transparent 60%\n  );\n\n  opacity: 0.3;\n  pointer-events: none;\n}\n\n#video-title.active {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n#video-title.active {\n  opacity: 0.8;\n}\n\n.lab-title {\n  position: absolute;\n  top: 30px;\n  left: 30px;\n  z-index: 3;\n\n  padding: 22px 32px;\n  border-radius: 12px;\n  border-left: 4px solid transparent;\n\n  background:\n    linear-gradient(\n      135deg,\n      rgba(0, 80, 60, 0.6),\n      rgba(0, 40, 30, 0.4)\n    ),\n    linear-gradient(\n      to bottom,\n      #b8fff2,\n      #5fd3b5,\n      #2a8f78,\n      #5fd3b5,\n      #b8fff2\n    );\n\n  background-clip: padding-box, border-box;\n\n  backdrop-filter: blur(10px);\n\n  color: white;\n\n  box-shadow:\n    0 0 25px rgba(0,255,200,0.15),\n    inset 0 0 10px rgba(255,255,255,0.05);\n}\n\n.lab-name {\n  font-size: 2rem;\n  font-weight: 600;\n}\n\n.lab-sub {\n  font-size: 1.05rem;\n  opacity: 0.8;\n  margin-top: 4px;\n}\n\n.lab-title {\n  padding: 28px 40px;   \/* \u2605\u3057\u3063\u304b\u308a\u5927\u304d\u304f *\/\n  border-radius: 14px;\n\n  backdrop-filter: blur(12px);\n\n  background:\n    linear-gradient(\n      135deg,\n      rgba(0, 80, 60, 0.55),\n      rgba(0, 40, 30, 0.35)\n    ),\n    linear-gradient(\n      to bottom,\n      #b8fff2,\n      #5fd3b5,\n      #2a8f78,\n      #5fd3b5,\n      #b8fff2\n    );\n\n  border-left: 3px solid rgba(255,255,255,0.25);\n\n  box-shadow:\n    0 10px 30px rgba(0,0,0,0.45),\n    inset 0 1px 0 rgba(255,255,255,0.25);\n\n  \/* \u2605\u4f59\u8a08\u306a\u4e3b\u5f35\u3092\u6291\u3048\u308b *\/\n  letter-spacing: 0.5px;\n}\n\n.lab-title:hover {\n  transform: translateY(-2px);\n  transition: 0.3s;\n}\n\n.lab-name {\n  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;\n\n  font-size: 2rem;\n  font-weight: 600;\n  letter-spacing: 1px;\n}\n\n.lab-sub {\n  font-size: 1.05rem;\n  opacity: 0.8;\n  margin-top: 4px;\n}\n\n\/* \u80cc\u666f *\/\n.bg img {\n  z-index: 0;\n  position: absolute; \n  width: 40%;\n  opacity: 0.25;\n  filter: blur(2px);\n}\n\n.bg {\n  position: absolute;\n  inset: 0;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.hero-container {\n  position: relative;\n  z-index: 2;   \/* \u8ffd\u52a0\uff08\u3053\u308c\u304c\u4e00\u756a\u91cd\u8981\uff09 *\/\n}\n\n.bg img:nth-child(1) { top: 10%; left: 5%; }\n.bg img:nth-child(2) { top: 50%; left: 60%; }\n.bg img:nth-child(3) { top: 30%; left: 30%; }\n.bg img:nth-child(4) { top: 70%; left: 10%; }\n\n\/* \u30ad\u30fc\u30ef\u30fc\u30c9 *\/\n.kw {\n  position: absolute;\n  padding: 6px 14px;\n  border-radius: 10px 14px 10px 14px;\n\n  color: rgba(255,255,255,0.9);\n  font-family: 'Space Grotesk', sans-serif;\n  font-weight: 500;\n  letter-spacing: 0.5px;\n  font-size: 1.8rem;\n  text-decoration: none;\n  white-space: nowrap;\n\n  \/* \u2605 \u30ac\u30e9\u30b9\u611f *\/\n  background: linear-gradient(\n    135deg,\n    rgba(255,255,255,0.15),\n    rgba(255,255,255,0.05)\n  );\n\n  backdrop-filter: blur(8px) saturate(140%);\n  -webkit-backdrop-filter: blur(8px) saturate(140%);\n\n  border: 1px solid rgba(255,255,255,0.18);\n  animation: floatGlow 6s ease-in-out infinite;\n\n  \/* \u2605 \u767a\u5149\uff08\u63a7\u3048\u3081\uff09 *\/\n  text-shadow:\n    0 0 6px rgba(0,255,255,0.4);\n\n  box-shadow:\n    0 6px 18px rgba(0,0,0,0.35),\n    inset 0 1px 0 rgba(255,255,255,0.25);\n\n  opacity: 0.85;\n\n  transition:\n    transform 0.3s ease,\n    opacity 0.3s ease,\n    box-shadow 0.3s ease,\n    text-shadow 0.3s ease;\n}\n\n@keyframes floatGlow {\n  0%, 100% {\n    filter: brightness(1);\n  }\n  50% {\n    filter: brightness(1.2);\n  }\n}\n\n.kw:hover {\n  transform: scale(1.25);\n  opacity: 1;\n\n  color: #aaffff;\n\n  text-shadow:\n    0 0 10px rgba(0,255,255,0.9),\n    0 0 20px rgba(0,255,255,0.6);\n\n  box-shadow:\n    0 0 25px rgba(0,255,255,0.4),\n    0 8px 25px rgba(0,0,0,0.4);\n}\n\n.video iframe {\n  pointer-events: none;\n}\n\n.bg-video {\n  position: absolute;\n  width: 500px !important;  \/* \u2190 \u5f37\u5236\u4e0a\u66f8\u304d *\/\n  height: auto !important;\n\n  opacity: 0;\n  transition: opacity 1.5s ease;  \/* \u2190 \u30d5\u30a7\u30fc\u30c9\u6642\u9593 *\/\n  filter: brightness(0.7) contrast(1.1) saturate(0.8);\n\n  border-radius: 12px;\n  box-shadow: 0 0 20px rgba(0,0,0,0.5);\n\n  z-index: 0;\n  pointer-events: auto;\n\n  display: block;\n  max-width: none !important;\n}\n\n.overlay {\n  position: absolute; \n  inset: 0;\n\n  background: linear-gradient(\n    135deg,\n    rgba(0, 20, 15, 0.6),   \/* \u6df1\u3044\u30b0\u30ea\u30fc\u30f3 *\/\n    rgba(0, 10, 20, 0.6)    \/* \u6df1\u3044\u30d6\u30eb\u30fc *\/\n  );\n\n  z-index: 1; \n  pointer-events: none;\n}\n\n.overlay::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n\n  background: radial-gradient(\n    circle at 50% 50%,\n    rgba(0, 255, 200, 0.08),\n    transparent 60%\n  );\n\n  pointer-events: none;\n}\n\n<\/style> \n\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n  const hero = document.getElementById(\"hero\");\n  const keywords = document.querySelectorAll(\".kw\");\n\n  const positions = [];\n  const kwPositions = [];\n  const videos = [];\n  const contents = [\n  {\n    word: \"CUDA\",\n    url: \"https:\/\/www.youtube.com\/watch?v=XXXX\"\n  },\n  {\n    word: \"Simulation\",\n    url: \"https:\/\/www.youtube.com\/watch?v=YYYY\"\n  },\n  {\n    word: \"HPC\",\n    url: \"https:\/\/www.youtube.com\/watch?v=ZZZZ\"\n  },\n  {\n    word: \"FDM\",\n    url: \"https:\/\/www.youtube.com\/watch?v=AAAA\"\n  },\n  {\n    word: \"DEM\",\n    url: \"https:\/\/www.youtube.com\/watch?v=AAAA\"\n  },\n  {\n    word: \"CFD\",\n    url: \"https:\/\/www.youtube.com\/watch?v=AAAA\"\n  },\n  {\n    word: \"AI\",\n    url: \"https:\/\/www.youtube.com\/watch?v=AAAA\"\n  },\n  {\n    word: \"Optimization\",\n    url: \"https:\/\/www.youtube.com\/watch?v=AAAA\"\n  },\n  {\n    word: \"Parallel\",\n    url: \"https:\/\/www.youtube.com\/watch?v=AAAA\"\n  }\n\/\/\"GPU\", \"Modeling\",\n\/\/   \"Data Science\", \"Numerics\", \"Visualization\"\n\n];\nconst videoData = [\n  {\n    src: \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media1.mp4\",\n    title: \"Title1\"\n  },\n  {\n    src: \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media2.mp4\",\n    title: \"Title2\"\n  },\n  {\n    src: \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media3.mp4\",\n    title: \"Title3\"\n  },\n  {\n    src: \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media4.mp4\",\n    title: \"Title4\"\n  },\n  {\n    src: \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media5.mp4\",\n    title: \"Title5\"\n  },\n  {\n    src: \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media6.mp4\",\n    title: \"Title6\"\n  },\n  {\n    src: \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media7.mp4\",\n    title: \"Title7\"\n  },\n  {\n    src: \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media8.mp4\",\n    title: \"Title8\"\n  },\n  {\n    src: \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media9.mp4\",\n    title: \"Title9\"\n  },\n  {\n    src: \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media10.mp4\",\n    title: \"Title10\"\n  }\n  \/\/ \u8ffd\u52a0\u3057\u3066\u3044\u304f\n];\n\n\nfunction isTooCloseKW(x, y, others) {\n  const minDist = 120; \/\/ \u2190 \u52d5\u753b\u3088\u308a\u5c0f\u3055\u3081\n\n  return others.some(o => {\n    const dx = x - o.x;\n    const dy = y - o.y;\n    return Math.sqrt(dx*dx + dy*dy) < minDist;\n  });\n}\n\nfunction getRandomContent(currentWord) {\n\n  \/\/ \u2605\u4eca\u8868\u793a\u4e2d\u306e\u30ef\u30fc\u30c9\u4e00\u89a7\u3092\u53d6\u5f97\n  const usedWords = Array.from(document.querySelectorAll(\".kw\"))\n    .map(el => el.textContent);\n\n  const candidates = contents.filter(c =>\n    c.word !== currentWord &&\n    !usedWords.includes(c.word)\n  );\n\n  \/\/ \u2605\u4fdd\u967a\uff08\u5168\u90e8\u4f7f\u3063\u3066\u305f\u5834\u5408\uff09\n  const pool = candidates.length > 0 ? candidates : contents;\n\n  return pool[Math.floor(Math.random() * pool.length)];\n}\n\n  const videoSources = [\n    \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media1.mp4\",\n    \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media2.mp4\",\n    \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media3.mp4\",\n    \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media4.mp4\",\n    \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media5.mp4\",\n    \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media6.mp4\",\n    \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media7.mp4\",\n    \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media8.mp4\",\n    \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media9.mp4\",\n    \"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-content\/uploads\/2026\/04\/Media10.mp4\"\n  ];\n\n  function getRandomVideos(arr, num) {\n    const shuffled = [...arr].sort(() => 0.5 - Math.random());\n    return shuffled.slice(0, num);\n  }\n\n  const selectedVideos = getRandomVideos(videoData, 4);\n  selectedVideos.forEach(data => {\n\n    const video = document.createElement(\"video\");\n\n    video.src = data.src;\n    video.dataset.title = data.title;\n    video.autoplay = true;\n    video.loop = true;\n    video.muted = true;\n    video.playsInline = true;\n\n    video.className = \"bg-video\";\n\n    video.addEventListener(\"mouseenter\", () => {\n      showTitle(video.dataset.title);\n    });\n\n    video.addEventListener(\"mouseleave\", () => {\n      titleEl.classList.remove(\"active\");\n    });\n\n\n\n    hero.appendChild(video);\n    videos.push(video);\n\n    \/\/ \u2193 \u6b21\u3067\u52d5\u304b\u3059\n    video.addEventListener(\"loadeddata\", () => {\n      floatVideo(video);\n     \/\/ \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\n      requestAnimationFrame(() => {\n      video.style.opacity = 1;\n      });\n    });\n  });\n\n  const titleEl = document.getElementById(\"video-title\");\n\n  function showTitle(text) {\n    titleEl.textContent = text;\n    titleEl.classList.add(\"active\");\n\n    \/\/setTimeout(() => {\n      \/\/titleEl.classList.remove(\"active\");\n    \/\/}, 3000);\n  }\n\n\n  function isTooClose(x, y, others) {\n    const minDist = 300;\n\n    return others.some(o => {\n      const dx = x - o.x;\n      const dy = y - o.y;\n      return Math.sqrt(dx*dx + dy*dy) < minDist; \/\/ \u8ddd\u96e2\u3057\u304d\u3044\u5024\n    });\n  }\n\n  function floatVideo(video, initial = null) {\n    let x, y, vx, vy;\n    if(initial){\n      x = initial.x;\n      y = initial.y;\n      vx = initial.vx;\n      vy = initial.vy;\n    } else {\n      let tries = 0;\n      const w = 500;\n      const h = 300;\n\n      const maxX = Math.max(0, hero.clientWidth - w);\n      const maxY = Math.max(0, hero.clientHeight - h);\n\n      while (tries < 50) {\n        x = Math.random() * maxX;\n        y = Math.random() * maxY;\n\n        if (!isTooClose(x, y, positions)) {\n          break;\n        }\n        tries++;\n      }\n      positions.push({x,y});\n\n      vx = (Math.random() - 0.5) * 0.8;\n      vy = (Math.random() - 0.5) * 0.8;\n    }\n    video._motion = { x, y, vx, vy };\n\n    function move() {\n\n      let { x, y, vx, vy } = video._motion;\n      \n      const maxSpeed = 0.5;\n\n      vx = Math.max(-maxSpeed, Math.min(maxSpeed, vx));\n      vy = Math.max(-maxSpeed, Math.min(maxSpeed, vy));\n\n      x += vx;\n      y += vy;\n\n      const w = video.offsetWidth;\n      const h = video.offsetHeight;\n\n      if (x < 0 || x > hero.clientWidth - w) vx *= -1;\n      if (y < 0 || y > hero.clientHeight - h) vy *= -1;\n      video._motion = { x, y, vx, vy };\n\n      document.querySelectorAll(\".bg-video\").forEach(other => {\n        if (other === video) return;\n        if (!other._motion) return;\n\n        const rect1 = video.getBoundingClientRect();\n        const rect2 = other.getBoundingClientRect();\n\n        const dx = x - other._motion.x;\n        const dy = y - other._motion.y;\n        \n        const dist = Math.sqrt(dx*dx + dy*dy);\n\n        const minDist = 400; \/\/ \u2190 \u8abf\u6574\u30dd\u30a4\u30f3\u30c8\n\n        if (dist < minDist) {\n          \/\/ \u5c11\u3057\u3060\u3051\u96e2\u3059\uff08\u5f37\u3059\u304e\u308b\u3068\u66b4\u308c\u308b\uff09\n          vx += dx * 0.00015;\n          vy += dy * 0.00015;\n          vx *= 0.995;\n          vy *= 0.995;\n        }\n\n        video._motion = { x, y, vx, vy };\n      });\n\n      video.style.transform = `translate(${x}px, ${y}px)`;\n\n      requestAnimationFrame(move);\n    }\n\n    video.style.transform = `translate(${x}px, ${y}px)`;\n\n    move();\n    console.log(\"video placed at:\", x, y);\n  }\n\n  const keywordPool = [\n    \"CUDA\", \"Simulation\", \"HPC\", \"FDM\", \"DEM\", \"CFD\",\n    \"AI\", \"Optimization\", \"Parallel\", \"GPU\", \"Modeling\",\n    \"Data Science\", \"Numerics\", \"Visualization\"\n  ];\n\n  function getRandomKeyword(current) {\n    const candidates = keywordPool.filter(k => k !== current);\n    return candidates[Math.floor(Math.random() * candidates.length)];\n  }\n  function getInitialContents(num) {\n    const shuffled = [...contents].sort(() => 0.5 - Math.random());\n    return shuffled.slice(0, num);\n  }\n\n  const initialContents = getInitialContents(keywords.length);\n\n  keywords.forEach((k,i) => {\n    const c = initialContents[i];\n    \/\/const c = contents[i % contents.length];\n    k.textContent = c.word;\n    k.href = c.url;\n    k.target = \"_blank\";\n\n\n    let x, y;\n    let tries = 0;\n\n    while (tries < 50) {\n      x = Math.random() * hero.clientWidth;\n      y = Math.random() * hero.clientHeight;\n\n      if (!isTooCloseKW(x, y, kwPositions)) break;\n      tries++;\n    }\n\n    kwPositions.push({ x, y });\n    \/\/ \u2605\u521d\u671f\u914d\u7f6e\uff08\u3053\u308c\u304c\u91cd\u8981\uff09\n    k.style.left = x + \"px\";\n    k.style.top = y + \"px\";\n\n    let vx = (Math.random() - 0.5) * 0.5;\n    let vy = (Math.random() - 0.5) * 0.5;\n\n    function move() {\n      x += vx;\n      y += vy;\n\n    \tconst rect = k.getBoundingClientRect();\n      document.querySelectorAll(\".kw\").forEach(other => {\n        if (other === k) return;\n        if (!other._motion) return;\n\n        const dx = x - other._motion.x;\n       const dy = y - other._motion.y;\n\n        const dist = Math.sqrt(dx*dx + dy*dy);\n        const minDist = 140;\n\n        if (dist < minDist) {\n          vx += dx * 0.002;\n          vy += dy * 0.002;\n\n          vx *= 0.98;\n          vy *= 0.98;\n        }\n      });\n\n  \t  \/\/if (x < 0 || x > hero.clientWidth - rect.width) vx *= -1;\n  \t  \/\/if (y < 0 || y > hero.clientHeight - rect.height) vy *= -1;\n      let bounced = false;\n\n      if (x < 0) {\n        x = 0;\n        vx *= -1;\n        bounced = true;\n      }\n\n      if (x > hero.clientWidth - rect.width) {\n        x = hero.clientWidth - rect.width; \/\/ \u2605\u5185\u5074\u306b\u623b\u3059\n        vx *= -1;\n        bounced = true;\n      }\n\n      if (y < 0) {\n        y = 0;\n        vy *= -1;\n        bounced = true;\n      }\n\n      if (y > hero.clientHeight - rect.height) {\n        y = hero.clientHeight - rect.height;\n        vy *= -1;\n        bounced = true;\n      }\n      \/\/ \u2605\u53cd\u5c04\u3057\u305f\u3089\u30ad\u30fc\u30ef\u30fc\u30c9\u5909\u66f4\n      if (bounced) {\n        k.style.opacity = 0;\n\n        setTimeout(() => {\n          const newContent = getRandomContent(k.textContent);\n\n          k.textContent = newContent.word;\n          k.href = newContent.url;\n\n          const newRect = k.getBoundingClientRect();\n          if (x > hero.clientWidth - newRect.width) {\n            x = hero.clientWidth - newRect.width;\n          }\n\n          k.style.opacity = 0.8;\n        }, 200);\n      }\n\n      k.style.left = x + \"px\";\n      k.style.top = y + \"px\";\n\n      requestAnimationFrame(move);\n      k._motion = { x, y, vx, vy };\n    }\n\n    move();\n  });\n\n  function fadeOutAndRemove(video) {\n    video.style.opacity = 0;\n\n    setTimeout(() => {\n      video.remove();\n    }, 1500);\n  }\n\n  setInterval(() => {\n\n    if (videos.length === 0) return;\n\n    const index = Math.floor(Math.random() * videos.length);\n    const oldVideo = videos[index];\n\n    \/\/const newSrc = videoSources[Math.floor(Math.random() * videoSources.length)];\n    const currentSources = videos.map(v => v.src);\n    const lastSrc = oldVideo.src;\n\n    const candidates = videoData.filter(v =>\n      !currentSources.includes(v.src) && v.src !== oldVideo.src\n    );\n\n    const newData = candidates.length > 0\n      ? candidates[Math.floor(Math.random() * candidates.length)]\n      : videoData[Math.floor(Math.random() * videoData.length)];\n\n    const newVideo = document.createElement(\"video\");\n    newVideo.addEventListener(\"mouseenter\", () => {\n    showTitle(newVideo.dataset.title);\n    });\n    newVideo.addEventListener(\"mouseleave\", () => {\n      titleEl.classList.remove(\"active\");\n    });\n    newVideo.src = newData.src;\n    newVideo.autoplay = true;\n    newVideo.dataset.title = newData.title;\n    newVideo.loop = true;\n    newVideo.muted = true;\n    newVideo.playsInline = true;\n    newVideo.className = \"bg-video\";\n\n    \/\/showTitle(\"TEST\");\n\n    hero.appendChild(newVideo);\n    videos.push(newVideo);\n\n    newVideo.addEventListener(\"loadeddata\", () => {\n\n      \/\/ \u2605\u3053\u3053\u304c\u8d85\u91cd\u8981\uff08\u4f4d\u7f6e\u30b3\u30d4\u30fc\uff09\n      const rect = oldVideo.getBoundingClientRect();\n      const heroRect = hero.getBoundingClientRect();\n\n      let x = rect.left - heroRect.left;\n      let y = rect.top - heroRect.top;\n\n      newVideo.style.transform = `translate(${x}px, ${y}px)`;\n\n      \/\/ \ud83d\udc47\u3053\u3053\u304c\u4eca\u306e\u9055\u548c\u611f\u306e\u539f\u56e0\n      \/\/ floatVideo(newVideo); \u2190\u3053\u308c\u4e00\u65e6\u30b3\u30e1\u30f3\u30c8\u30a2\u30a6\u30c8\n      const motion = oldVideo._motion;\n\n      floatVideo(newVideo, motion);      \n\n      \/\/ \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\n      requestAnimationFrame(() => {\n      newVideo.style.opacity = 1;\n      });\n\n      fadeOutAndRemove(oldVideo);\n      videos.splice(index, 1);\n      \/\/showTitle(newVideo.dataset.title);\n\n    });\n  }, 8000);\n});\n<\/script>\n\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u4fe1\u983c\u6027\u8a55\u4fa1\u5b66\u9818\u57df \u69cb\u9020\u5316\u30c7\u30b6\u30a4\u30f3\u8b1b\u5ea7 \u00a0 CUDA Simulation HPC FDM DEM CFD controls=0<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1098","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-json\/wp\/v2\/pages\/1098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-json\/wp\/v2\/comments?post=1098"}],"version-history":[{"count":469,"href":"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-json\/wp\/v2\/pages\/1098\/revisions"}],"predecessor-version":[{"id":1637,"href":"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-json\/wp\/v2\/pages\/1098\/revisions\/1637"}],"wp:attachment":[{"href":"https:\/\/www-mapse.eng.osaka-u.ac.jp\/psesa\/WP\/wp-json\/wp\/v2\/media?parent=1098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}