{"id":12,"date":"2026-02-04T02:10:49","date_gmt":"2026-02-04T02:10:49","guid":{"rendered":"https:\/\/modularmath.org\/?page_id=12"},"modified":"2026-02-08T18:54:41","modified_gmt":"2026-02-08T18:54:41","slug":"residue-fields","status":"publish","type":"page","link":"https:\/\/modularmath.org\/?page_id=12","title":{"rendered":"Residue Fields"},"content":{"rendered":"\n\n<div id=\"residueApp\" style=\"font-family: 'Segoe UI', sans-serif; max-width: 92vw; margin: auto; padding: 2rem; background:#fafafa; border-radius: 16px;\">\n\n  <!-- \ud83d\udd2e Quote -->\n  <blockquote style=\"text-align:center; font-style:italic; font-size:1.25em; color:#333; margin-bottom:2em;\">\n    &#8220;Modular residues are the invisible gears of numerical symmetry \u2014 turning chaos into predictable cycles.&#8221;\n  <\/blockquote>\n\n  <!-- \ud83d\udd22 Title -->\n  <h2 style=\"text-align: center; color:#111; font-size:1.8em;\">\ud83d\udd04 Residue Fields<\/h2>\n  <p style=\"text-align: center; font-size: 1em; color: #444; margin-bottom:1.5em;\">\n    Explore Euler\u2019s Totient Function &#038; Modular Residues\n  <\/p>\n\n  <!-- \ud83d\udd01 Modulus Input -->\n  <div style=\"text-align: center; margin-bottom: 1.5em;\">\n    <label for=\"modInput\" style=\"font-weight:bold;\">Modulus (m):<\/label><br>\n    <input type=\"range\" id=\"modSlider\" min=\"2\" max=\"200\" value=\"12\" style=\"width: 80%;\">\n    <input type=\"number\" id=\"modInput\" min=\"2\" max=\"200\" value=\"12\" style=\"width: 60px; margin-top: 0.5em;\">\n  <\/div>\n\n  <!-- \ud83c\udf00 Circle of Residues -->\n  <canvas id=\"residueCanvas\" width=\"320\" height=\"320\" style=\"max-width: 100%; height: auto; display: block; margin: auto; background: #111; border-radius: 12px;\"><\/canvas>\n  <p style=\"text-align:center; font-size:0.9em; color:#888;\">Coprime residues shown in <span style=\"color:#00ffe7;\">cyan<\/span><\/p>\n\n  <!-- \ud83d\udcd8 Modular Arithmetic Explainer -->\n  <details style=\"margin: 2em 0; padding:12px; background:#eef6ff; border-radius:10px; border:1px solid #cce0f5;\">\n    <summary style=\"font-weight:bold; font-size:16px; color:#005fa3;\">\u2753 What does this mean?<\/summary>\n    <div style=\"margin-top:12px; font-size:15px; color:#333;\">\n      Think of a 12-hour clock \u2014 it wraps around. That\u2019s <strong>modular arithmetic<\/strong>: numbers wrap when they exceed a limit.\n      <br><br>\n      For example, <code>14 mod 12 = 2<\/code>. It\u2019s like walking in circles and ending up where you started.\n      <br><br>\n      Totatives (coprimes) are numbers with no common divisors with the modulus. They\u2019re the keys that unlock the full circle.\n    <\/div>\n  <\/details>\n\n  <!-- \ud83e\uddf1 Residue Grid -->\n  <p id=\"totientInfo\" style=\"text-align: center; margin: 1em 0; font-weight:bold;\"><\/p>\n  <div id=\"residueGrid\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)); gap: 6px; padding: 10px; background: #f4f4f4; border-radius: 10px;\"><\/div>\n\n  <!-- \ud83e\udde0 Euler's Theorem -->\n  <details style=\"margin: 2em 0; padding:12px; background:#fff6e6; border-radius:10px; border:1px solid #ffd699;\">\n    <summary style=\"font-weight:bold; font-size:16px; color:#b76b00;\">\ud83e\udde0 Euler\u2019s Theorem \u2014 Why Totatives Matter<\/summary>\n    <div style=\"margin-top:12px; font-size:15px; color:#333;\">\n      <p style=\"margin-bottom: 0.5em;\">Euler\u2019s Theorem states:<\/p>\n      <div style=\"background:#fff2dc; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:14px; color:#d35400; overflow-x:auto; white-space:nowrap;\">\n        a<sup>\u03c6(m)<\/sup> \u2261 1 mod m &nbsp;&nbsp;(if gcd(a, m) = 1)\n      <\/div>\n      <p style=\"margin-top:1em;\">\n        This underpins cryptographic systems like RSA where numbers &#8220;loop back&#8221; in predictable cycles.  \n        Try it below \u2014 choose a totative and raise it to \u03c6(m)!\n      <\/p>\n    <\/div>\n  <\/details>\n\n  <!-- \u26a1 Animated Try-a-Value Block -->\n  <div style=\"max-width:480px; margin:2rem auto; padding:1.5rem; background:#111; border-radius:16px; box-shadow:0 0 15px rgba(0,255,231,0.15); color:#fff;\">\n\n    <h3 style=\"text-align:center; margin-bottom:1rem; color:#00ffe7;\">\u26a1 Totient Power Result<\/h3>\n\n    <div style=\"display:flex; justify-content:center; align-items:center; gap:12px; margin-bottom:1rem;\">\n      <label for=\"aVal\" style=\"font-weight:bold;\">Enter a:<\/label>\n      <input type=\"number\" id=\"aVal\" value=\"5\" min=\"1\" style=\"padding:6px 10px; width:70px; border-radius:6px; border:none; font-size:1em;\">\n      <button onclick=\"runTotientCycle()\" style=\"background:#00ffe7; color:#111; padding:6px 14px; border:none; border-radius:6px; font-weight:bold; cursor:pointer;\">Compute<\/button>\n    <\/div>\n\n    <canvas id=\"modExpCanvas\" width=\"220\" height=\"220\" style=\"display:block; margin:1.2rem auto; background:#000; border-radius:50%;\"><\/canvas>\n\n    <div id=\"animatedResult\" style=\"text-align:center; font-size:1.2em; margin-top:0.5rem; color:#00ffa3;\"><\/div>\n  <\/div>\n\n  <!-- \ud83c\udf08 Particle Field -->\n  <h3 style=\"text-align:center; color:#00d8ff; margin-top:3em;\">Visual Field Flow<\/h3>\n  <canvas id=\"fieldCanvas\" width=\"280\" height=\"280\" style=\"max-width:85vw; height:auto; border-radius:10%; display:rounded; margin:0; background:#000;\"><\/canvas>\n\n<\/div>\n\n<!-- \ud83d\udd27 Scripts -->\n<script>\nfunction gcd(a, b) {\n  return b === 0 ? a : gcd(b, a % b);\n}\n\nfunction computeTotient(m) {\n  let count = 0;\n  for (let i = 1; i < m; i++) if (gcd(i, m) === 1) count++;\n  return count;\n}\n\nfunction drawRing(m) {\n  const canvas = document.getElementById(\"residueCanvas\");\n  const ctx = canvas.getContext(\"2d\");\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  const cx = canvas.width \/ 2, cy = canvas.height \/ 2, r = 120;\n\n  for (let i = 0; i < m; i++) {\n    const angle = 2 * Math.PI * i \/ m;\n    const x = cx + r * Math.cos(angle);\n    const y = cy + r * Math.sin(angle);\n    ctx.beginPath();\n    ctx.arc(x, y, 4, 0, 2 * Math.PI);\n    ctx.fillStyle = gcd(i, m) === 1 ? \"#00ffe7\" : \"#555\";\n    ctx.fill();\n    ctx.fillStyle = \"#fff\";\n    ctx.font = \"10px sans-serif\";\n    ctx.textAlign = \"center\";\n    ctx.fillText(i, x, y - 10);\n  }\n}\n\nfunction updateGrid(m) {\n  const grid = document.getElementById(\"residueGrid\");\n  const phi = computeTotient(m);\n  document.getElementById(\"totientInfo\").innerText = `Euler\u2019s Totient \u03c6(${m}) = ${phi}`;\n  grid.innerHTML = '';\n  for (let i = 0; i < m; i++) {\n    const isCoprime = gcd(i, m) === 1;\n    const cell = document.createElement(\"div\");\n    cell.innerText = i;\n    cell.style.padding = '6px';\n    cell.style.textAlign = 'center';\n    cell.style.background = isCoprime ? '#e0faff' : '#ddd';\n    cell.style.borderRadius = '4px';\n    grid.appendChild(cell);\n  }\n}\n\nfunction syncModulus(val) {\n  document.getElementById(\"modSlider\").value = val;\n  document.getElementById(\"modInput\").value = val;\n  drawRing(val);\n  updateGrid(val);\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const modInput = document.getElementById(\"modInput\");\n  const modSlider = document.getElementById(\"modSlider\");\n  modInput.addEventListener(\"input\", () => syncModulus(modInput.value));\n  modSlider.addEventListener(\"input\", () => syncModulus(modSlider.value));\n  syncModulus(modInput.value);\n});\n\n\/\/ \ud83d\udd01 Totient Power Animated Module\nfunction runTotientCycle() {\n  const a = parseInt(document.getElementById(\"aVal\").value);\n  const m = parseInt(document.getElementById(\"modInput\")?.value || 12);\n  const phi = computeTotient(m);\n  const result = BigInt(a) ** BigInt(phi) % BigInt(m);\n  animateModExpResult(a, phi, m, result);\n}\n\nfunction animateModExpResult(a, phi, m, result) {\n  const canvas = document.getElementById(\"modExpCanvas\");\n  const ctx = canvas.getContext(\"2d\");\n  const center = canvas.width \/ 2;\n  let step = 0;\n  const steps = 100;\n\n  const draw = () => {\n    ctx.clearRect(0, 0, canvas.width, canvas.height);\n    ctx.beginPath();\n    ctx.arc(center, center, 90, 0, 2 * Math.PI);\n    ctx.strokeStyle = \"#333\";\n    ctx.lineWidth = 12;\n    ctx.stroke();\n\n    const progress = (step \/ steps) * (2 * Math.PI);\n    ctx.beginPath();\n    ctx.arc(center, center, 90, 0, progress);\n    ctx.strokeStyle = \"#00ffe7\";\n    ctx.lineWidth = 12;\n    ctx.stroke();\n\n    if (step < steps) {\n      step++;\n      requestAnimationFrame(draw);\n    } else {\n      animateCounter(a, phi, m, result);\n    }\n  };\n  draw();\n}\n\nfunction animateCounter(a, phi, m, result) {\n  const display = document.getElementById(\"animatedResult\");\n  let i = 0n;\n  display.innerHTML = \"\";\n  const interval = setInterval(() => {\n    if (i >= result) {\n      display.innerHTML = `<strong>${a}<sup>${phi}<\/sup> mod ${m} = ${result}<\/strong>`;\n      clearInterval(interval);\n    } else {\n      display.innerHTML = `${a}<sup>${phi}<\/sup> mod ${m} = ${i}`;\n      i++;\n    }\n  }, 15);\n}\n\n\/\/ \ud83c\udf08 Particle Flow Field\nconst fieldCanvas = document.getElementById(\"fieldCanvas\");\nconst ctx = fieldCanvas.getContext(\"2d\");\nconst W = fieldCanvas.width, H = fieldCanvas.height;\nconst centerX = W \/ 2, centerY = H \/ 2;\nconst particles = [];\n\nfor (let i = 0; i < 200; i++) {\n  particles.push({\n    angle: Math.random() * Math.PI * 2,\n    radius: Math.random() * (W \/ 2 - 20),\n    speed: 0.001 + Math.random() * 0.0015,\n    phase: Math.random() * Math.PI * 2,\n    color: `hsl(${Math.random() * 280}, 70%, 55%)`\n  });\n}\n\nfunction drawField() {\n  ctx.fillStyle = \"rgba(0,0,0,0.15)\";\n  ctx.fillRect(0, 0, W, H);\n  particles.forEach(p => {\n    const x = centerX + p.radius * Math.cos(p.angle + Math.sin(p.phase));\n    const y = centerY + p.radius * Math.sin(p.angle + Math.cos(p.phase));\n    ctx.beginPath();\n    ctx.arc(x, y, 2.5 + Math.sin(p.phase) * 1.2, 0, Math.PI * 2);\n    ctx.fillStyle = p.color;\n    ctx.fill();\n    p.angle += p.speed;\n    p.phase += 0.005;\n  });\n  requestAnimationFrame(drawField);\n}\ndrawField();\n<\/script>\n<!-- Particle Flow Field Explainer -->\n<details style=\"max-width: 600px; margin: 30px auto; padding: 16px; border: 1px solid #00ffe7; border-radius: 8px; background: rgba(0, 0, 0, 0.3); font-family: 'Segoe UI', sans-serif; color: #fff;\">\n  <summary style=\"cursor: pointer; font-size: 1.2rem; font-weight: bold; color: #00ffe7;\">\ud83c\udf08 What is the Particle Flow Field?<\/summary>\n  <div style=\"margin-top: 12px; font-size: 1rem; line-height: 1.5;\">\n    This animated canvas simulates a radial <strong>flow field<\/strong> using particles orbiting a center point.\n    Each particle follows a unique spiral trajectory based on trigonometric transformations of its angle and phase.\n    <br><br>\n    <strong>\ud83c\udf00 How it works:<\/strong><br>\n    \u2013 Each particle is assigned a radius, speed, and color<br>\n    \u2013 Its position is recalculated frame-by-frame using sine and cosine functions<br>\n    \u2013 The result is a smooth, colorful dance mimicking field lines or orbital flow<br><br>\n    <strong>\ud83c\udfaf Why it matters:<\/strong><br>\n    Flow fields model continuous motion, resonant systems, and even modular energy states in visual terms. They&#8217;re often used to visualize dynamic systems\u2014just like how modular mathematics reveals structure through cycles.\n  <\/div>\n<\/details>\n\n","protected":false},"excerpt":{"rendered":"<p>Residue Fields: The Hidden Order in Remainders<\/p>\n<p>Step into the world where arithmetic wraps around itself. Residue fields are the foundation of modular systems\u2014tiny universes where numbers repeat, collide, and reveal surprising structure. This page explores how reducing numbers mod\u202fp doesn\u2019t just simplify\u2014they unlock entire new fields of mathematical symmetry.<\/p>\n","protected":false},"author":1,"featured_media":14,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Residue Fields - ModularMath<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/modularmath.org\/?page_id=12\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Residue Fields - ModularMath\" \/>\n<meta property=\"og:description\" content=\"Residue Fields: The Hidden Order in Remainders Step into the world where arithmetic wraps around itself. Residue fields are the foundation of modular systems\u2014tiny universes where numbers repeat, collide, and reveal surprising structure. This page explores how reducing numbers mod\u202fp doesn\u2019t just simplify\u2014they unlock entire new fields of mathematical symmetry.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/modularmath.org\/?page_id=12\" \/>\n<meta property=\"og:site_name\" content=\"ModularMath\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-08T18:54:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/modularmath.org\/wp-content\/uploads\/2026\/02\/img_2456.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/modularmath.org\\\/?page_id=12\",\"url\":\"https:\\\/\\\/modularmath.org\\\/?page_id=12\",\"name\":\"Residue Fields - ModularMath\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/modularmath.org\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/modularmath.org\\\/?page_id=12#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/modularmath.org\\\/?page_id=12#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/modularmath.org\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/img_2456.png\",\"datePublished\":\"2026-02-04T02:10:49+00:00\",\"dateModified\":\"2026-02-08T18:54:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/modularmath.org\\\/?page_id=12#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/modularmath.org\\\/?page_id=12\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/modularmath.org\\\/?page_id=12#primaryimage\",\"url\":\"https:\\\/\\\/modularmath.org\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/img_2456.png\",\"contentUrl\":\"https:\\\/\\\/modularmath.org\\\/wp-content\\\/uploads\\\/2026\\\/02\\\/img_2456.png\",\"width\":1024,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/modularmath.org\\\/?page_id=12#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/modularmath.org\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Residue Fields\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/modularmath.org\\\/#website\",\"url\":\"https:\\\/\\\/modularmath.org\\\/\",\"name\":\"ModularMath\",\"description\":\"Where Numbers Spiral into Meaning.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/modularmath.org\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Residue Fields - ModularMath","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/modularmath.org\/?page_id=12","og_locale":"en_US","og_type":"article","og_title":"Residue Fields - ModularMath","og_description":"Residue Fields: The Hidden Order in Remainders Step into the world where arithmetic wraps around itself. Residue fields are the foundation of modular systems\u2014tiny universes where numbers repeat, collide, and reveal surprising structure. This page explores how reducing numbers mod\u202fp doesn\u2019t just simplify\u2014they unlock entire new fields of mathematical symmetry.","og_url":"https:\/\/modularmath.org\/?page_id=12","og_site_name":"ModularMath","article_modified_time":"2026-02-08T18:54:41+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/modularmath.org\/wp-content\/uploads\/2026\/02\/img_2456.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/modularmath.org\/?page_id=12","url":"https:\/\/modularmath.org\/?page_id=12","name":"Residue Fields - ModularMath","isPartOf":{"@id":"https:\/\/modularmath.org\/#website"},"primaryImageOfPage":{"@id":"https:\/\/modularmath.org\/?page_id=12#primaryimage"},"image":{"@id":"https:\/\/modularmath.org\/?page_id=12#primaryimage"},"thumbnailUrl":"https:\/\/modularmath.org\/wp-content\/uploads\/2026\/02\/img_2456.png","datePublished":"2026-02-04T02:10:49+00:00","dateModified":"2026-02-08T18:54:41+00:00","breadcrumb":{"@id":"https:\/\/modularmath.org\/?page_id=12#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/modularmath.org\/?page_id=12"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/modularmath.org\/?page_id=12#primaryimage","url":"https:\/\/modularmath.org\/wp-content\/uploads\/2026\/02\/img_2456.png","contentUrl":"https:\/\/modularmath.org\/wp-content\/uploads\/2026\/02\/img_2456.png","width":1024,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/modularmath.org\/?page_id=12#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/modularmath.org\/"},{"@type":"ListItem","position":2,"name":"Residue Fields"}]},{"@type":"WebSite","@id":"https:\/\/modularmath.org\/#website","url":"https:\/\/modularmath.org\/","name":"ModularMath","description":"Where Numbers Spiral into Meaning.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/modularmath.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/12","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=12"}],"version-history":[{"count":6,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":129,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/modularmath.org\/index.php?rest_route=\/wp\/v2\/media\/14"}],"wp:attachment":[{"href":"https:\/\/modularmath.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}