{"id":25,"date":"2026-02-06T22:55:46","date_gmt":"2026-02-06T22:55:46","guid":{"rendered":"https:\/\/modularmath.org\/?page_id=25"},"modified":"2026-02-08T18:41:05","modified_gmt":"2026-02-08T18:41:05","slug":"visualizations","status":"publish","type":"page","link":"https:\/\/modularmath.org\/?page_id=25","title":{"rendered":"Visualizations"},"content":{"rendered":"\n<!-- Modular Concepts Ticker -->\n<div style=\"width: 100%; overflow: hidden; background: #001f3f; border-bottom: 2px solid #00ffe7;\">\n  <div style=\"display: flex; width: max-content; white-space: nowrap; animation: scrollTicker 18s linear infinite; font-family: 'Courier New', monospace; font-size: 0.95rem; color: #00ffe7; padding: 8px 0;\">\n    \u2022 Mod \ud835\udc5b \u2022 Residue Classes \u2022 Totients \u2022 Prime Cycles \u2022 Euler\u2019s Theorem \u2022 M\u00f6bius Strips \u2022 Modular Time \u2022 Winding Numbers \u2022 Group Theory \u2022 Congruence \u2022 Residue Fields \u2022 Symmetry Modulo Logic \u2022 \u03c6(n) = n \u00d7 \u220f(1 \u2212 1\/p) \u2022 Mod \ud835\udc5b \u2022 Residue Classes \u2022 \n  <\/div>\n<\/div>\n\n<style>\n@keyframes scrollTicker {\n  0%   { transform: translateX(0); }\n  100% { transform: translateX(-100%); }\n}\n<\/style>\n\n<!-- \ud83d\udd25 Warm Modular Spiral Spacer -->\n<div style=\"position: relative; height: 80px; overflow: hidden; background: radial-gradient(circle at center, #1a0000, #330000); margin-bottom: 40px;\">\n  <svg viewBox=\"0 0 1440 80\" preserveAspectRatio=\"none\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\">\n    <path d=\"M0,60 Q360,20 720,60 T1440,60 L1440,80 L0,80 Z\" fill=\"none\" stroke=\"url(#warmGradient)\" stroke-width=\"2\">\n      <animate attributeName=\"d\" dur=\"4s\" repeatCount=\"indefinite\" values=\"\n        M0,60 Q360,20 720,60 T1440,60 L1440,80 L0,80 Z;\n        M0,60 Q360,40 720,20 T1440,60 L1440,80 L0,80 Z;\n        M0,60 Q360,20 720,60 T1440,60 L1440,80 L0,80 Z\n      \"\/>\n    <\/path>\n    <defs>\n      <linearGradient id=\"warmGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n        <stop offset=\"0%\" style=\"stop-color:#ff6600; stop-opacity:0.8\" \/>\n        <stop offset=\"50%\" style=\"stop-color:#ff3366; stop-opacity:0.8\" \/>\n        <stop offset=\"100%\" style=\"stop-color:#ffd700; stop-opacity:0.8\" \/>\n      <\/linearGradient>\n    <\/defs>\n  <\/svg>\n<\/div>\n<div style=\"padding: 20px; background:#1b1b1b; color: #e0f7fa; max-width: 330px; margin: 0 auto; border-radius: 10px; font-family:'Segoe UI', sans-serif;\">\n  <button class=\"accordion\" style=\"background-color:#00acc1;\">\ud83d\udd04 What is the Modular Resonance Array?<\/button>\n  <div class=\"panel\">\n    <p>This animated array shows layered rotational harmonics, much like cymatic rings or orbital shells. Each node spins along its ring based on modular velocity, creating an evolving geometric resonance. It&#8217;s a metaphor for modular arithmetic, feedback topology, and prime field dynamics \u2014 an elegant visual of cyclic symmetries in mathematics and physics.<\/p>\n  <\/div>\n<\/div>\n<!-- \/wp:post-content -->\n\n<!-- wp:html -->\n<!-- wp:html -->\n<div style=\"padding: 40px 0; background: #111;\">\n  <h2 style=\"text-align:center; color:#ccc; font-family:'Segoe UI', sans-serif;\">\ud83d\udd04 Modular Resonance Array<\/h2>\n  <canvas id=\"resonanceCanvas\" width=\"320\" height=\"320\" style=\"display:block; margin: 0 auto; background:transparent;\"><\/canvas>\n<\/div>\n\n<div style=\"padding: 40px 0; background: #f0f0f0;\">\n  <h2 style=\"text-align:center; color:#333; font-family:'Segoe UI', sans-serif;\">\ud83c\udf00 Modular Spiral Visualizer<\/h2>\n  <p style=\"text-align:center;\">Explore patterns in numbers and primes using modular spirals.<\/p>\n  <div style=\"text-align:center; margin: 20px 0;\">\n    <label for=\"modulus\" style=\"font-size: 1.2em; font-weight: bold; margin-right: 10px;\">Modulus (n):<\/label>\n    <input\n      type=\"number\"\n      id=\"modulus\"\n      value=\"30\"\n      min=\"1\"\n      max=\"200\"\n      onchange=\"drawSpiral()\"\n      style=\"\n        padding: 10px 15px;\n        font-size: 1.1em;\n        border: 2px solid #00bcd4;\n        border-radius: 8px;\n        outline: none;\n        box-shadow: 0 0 14px rgba(0, 188, 212, 0.7);\n        transition: box-shadow 0.3s ease;\n      \"\n      onfocus=\"this.style.boxShadow='0 0 18px rgba(0, 255, 255, 0.9)'\"\n      onblur=\"this.style.boxShadow='0 0 14px rgba(0, 188, 212, 0.7)'\"\n    >\n  <\/div>\n  <canvas id=\"spiralCanvas\" width=\"320\" height=\"320\" style=\"display:block; margin: 20px auto; border:1px solid #aaa; background:white;\"><\/canvas>\n<\/div>\n\n<script>\n  \/\/ \ud83c\udfaf Modular Resonance Array\n  const resCanvas = document.getElementById(\"resonanceCanvas\");\n  const resCtx = resCanvas.getContext(\"2d\");\n  const resCenterX = resCanvas.width \/ 2;\n  const resCenterY = resCanvas.height \/ 2;\n\n  const rings = [\n    { radius: 50, count: 6, speed: 0.02, color: \"#00ffe7\" },\n    { radius: 90, count: 8, speed: -0.015, color: \"#ffc107\" },\n    { radius: 130, count: 10, speed: 0.01, color: \"#e91e63\" }\n  ];\n\n  const nodes = [];\n  rings.forEach(ring => {\n    for (let i = 0; i < ring.count; i++) {\n      nodes.push({\n        angle: (2 * Math.PI * i) \/ ring.count,\n        ...ring\n      });\n    }\n  });\n\n  function animateResonance() {\n    resCtx.clearRect(0, 0, resCanvas.width, resCanvas.height);\n\n    \/\/ Center dot\n    resCtx.beginPath();\n    resCtx.arc(resCenterX, resCenterY, 3, 0, 2 * Math.PI);\n    resCtx.fillStyle = \"#fff\";\n    resCtx.fill();\n\n    \/\/ Rings\n    rings.forEach(ring => {\n      resCtx.beginPath();\n      resCtx.arc(resCenterX, resCenterY, ring.radius, 0, 2 * Math.PI);\n      resCtx.strokeStyle = ring.color + \"66\";\n      resCtx.lineWidth = 0.6;\n      resCtx.stroke();\n    });\n\n    \/\/ Nodes\n    nodes.forEach(node => {\n      const x = resCenterX + node.radius * Math.cos(node.angle);\n      const y = resCenterY + node.radius * Math.sin(node.angle);\n      resCtx.beginPath();\n      resCtx.arc(x, y, 5, 0, 2 * Math.PI);\n      resCtx.fillStyle = node.color;\n      resCtx.fill();\n      node.angle += node.speed;\n    });\n\n    requestAnimationFrame(animateResonance);\n  }\n\n  animateResonance();\n\n  \/\/ \ud83c\udf00 Modular Spiral Visualizer\n  const spiralCanvas = document.getElementById(\"spiralCanvas\");\n  const spiralCtx = spiralCanvas.getContext(\"2d\");\n  const spiralCenterX = spiralCanvas.width \/ 2;\n  const spiralCenterY = spiralCanvas.height \/ 2;\n\n  function isPrime(num) {\n    if (num < 2) return false;\n    for (let i = 2; i <= Math.sqrt(num); i++) {\n      if (num % i === 0) return false;\n    }\n    return true;\n  }\n\n  function drawSpiral() {\n    const modulus = parseInt(document.getElementById('modulus').value);\n    const scale = 6;\n    const totalPoints = 1000;\n\n    spiralCtx.clearRect(0, 0, spiralCanvas.width, spiralCanvas.height);\n\n    for (let i = 1; i < totalPoints; i++) {\n      const angle = (2 * Math.PI * (i % modulus)) \/ modulus;\n      const radius = scale * Math.sqrt(i);\n\n      const x = spiralCenterX + radius * Math.cos(angle);\n      const y = spiralCenterY + radius * Math.sin(angle);\n\n      spiralCtx.beginPath();\n      spiralCtx.arc(x, y, isPrime(i) ? 3.5 : 2, 0, 2 * Math.PI);\n      spiralCtx.fillStyle = isPrime(i) ? \"#d90429\" : \"#2b2d42\";\n      spiralCtx.fill();\n    }\n  }\n\n  drawSpiral();\n<\/script>\n<!-- \/wp:html -->\n<!-- \/wp:html -->\n\n<!-- wp:html -->\n<div style=\"padding: 20px; background:#fff8e1; color: #4e342e; max-width: 720px; margin: 0 auto; border-radius: 10px; font-family:'Segoe UI', sans-serif;\">\n  <button class=\"accordion\" style=\"background-color:#ffb300; color: #212121;\">\ud83c\udf00 What does the Modular Spiral Visualizer do?<\/button>\n  <div class=\"panel\">\n    <p>This interactive spiral maps numbers using modular coordinates \u2014 each dot's angle is based on its modulus, and its distance from center grows with the square root. Prime numbers are marked distinctly, revealing elegant patterns, clusters, and rotational symmetry in number theory. Adjust the modulus to explore hidden structures in the integers.<\/p>\n  <\/div>\n<\/div>\n<!-- \/wp:html -->\n\n<!-- wp:html -->\n<style>\n  .accordion {\n    cursor: pointer;\n    padding: 12px 20px;\n    width: 100%;\n    border: none;\n    text-align: left;\n    font-size: 1em;\n    border-radius: 6px;\n    transition: background-color 0.3s ease;\n    font-weight: bold;\n  }\n\n  .panel {\n    padding: 0 18px;\n    background-color: rgba(255,255,255,0.1);\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.4s ease-out;\n    border-left: 4px solid #00bcd4;\n    margin-top: 10px;\n  }\n\n  .panel p {\n    margin: 12px 0;\n    line-height: 1.5em;\n  }\n<\/style>\n\n<script>\n  document.querySelectorAll(\".accordion\").forEach((acc) => {\n    acc.addEventListener(\"click\", function () {\n      this.classList.toggle(\"active\");\n      const panel = this.nextElementSibling;\n      if (panel.style.maxHeight) {\n        panel.style.maxHeight = null;\n      } else {\n        panel.style.maxHeight = panel.scrollHeight + \"px\";\n      }\n    });\n  });\n<\/script>\n<!-- Modular Pulse Wave Animation -->\n<div style=\"width: 100%; height: 40px; overflow: hidden; position: relative; background: #000; border-top: 2px solid #00ffe7;\">\n  <div id=\"pulseWave\" style=\"position: absolute; width: 200%; height: 100%; display: flex; animation: waveScroll 10s linear infinite;\">\n    <div style=\"flex: 1; background: linear-gradient(90deg, #00ffe7, #b10dc9, #ffd700, #00ffe7); animation: pulse 3s ease-in-out infinite;\"><\/div>\n    <div style=\"flex: 1; background: linear-gradient(90deg, #00ffe7, #b10dc9, #ffd700, #00ffe7); animation: pulse 3s ease-in-out infinite;\"><\/div>\n  <\/div>\n<\/div>\n\n<style>\n@keyframes waveScroll {\n  0% { transform: translateX(0%); }\n  100% { transform: translateX(-50%); }\n}\n@keyframes pulse {\n  0%, 100% { filter: brightness(1); }\n  50% { filter: brightness(1.6); }\n}\n<\/style>\n<!-- \/wp:html -->","protected":false},"excerpt":{"rendered":"<p>Where numbers become motion and equations take shape\u2014this is math you can see. Dive into spirals, cycles, and harmonic fields that transform abstract theory into vibrant visual experience.<\/p>\n","protected":false},"author":1,"featured_media":41,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","footnotes":""},"class_list":["post-25","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/modularmath.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":6,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions\/120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/media\/41"}],"wp:attachment":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}