{"id":72,"date":"2026-02-06T15:08:54","date_gmt":"2026-02-06T15:08:54","guid":{"rendered":"https:\/\/theroyalscode.com\/students\/c_menhart\/?p=72"},"modified":"2026-02-06T15:08:54","modified_gmt":"2026-02-06T15:08:54","slug":"friday-2-6","status":"publish","type":"post","link":"https:\/\/theroyalscode.com\/students\/c_menhart\/2026\/02\/06\/friday-2-6\/","title":{"rendered":"friday 2\/6"},"content":{"rendered":"\n<p>for scipt.js is <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const canvas = document.getElementById(\"snakeCanvas\");\nconst ctx = canvas.getContext(\"2d\");\n\nlet w = window.innerWidth;\nlet h = window.innerHeight;\ncanvas.width = w;\ncanvas.height = h;\n\n\/\/ Snake trail points\nlet points = &#91;];\nconst maxPoints = 160;      \/\/ longer snake\nconst minDist = 4;          \/\/ spacing between points\n\n\/\/ Mouse position\nlet mouseX = w \/ 2;\nlet mouseY = h \/ 2;\n\n\/\/ Snake animation variables\nlet hue = 120;              \/\/ starting color\nlet hueSpeed = 0.4;         \/\/ color cycling speed\nlet glowStrength = 15;      \/\/ shadow blur\nlet breathing = 0;          \/\/ breathing animation\nlet autoSlither = false;    \/\/ toggle auto movement\nlet slitherAngle = 0;       \/\/ internal wave motion\n\n\/\/ FPS meter\nlet lastTime = performance.now();\nlet fps = 0;\n\n\/\/ Resize canvas\nwindow.addEventListener(\"resize\", () => {\n  w = window.innerWidth;\n  h = window.innerHeight;\n  canvas.width = w;\n  canvas.height = h;\n});\n\n\/\/ Mouse movement\nwindow.addEventListener(\"mousemove\", e => {\n  updatePointer(e.clientX, e.clientY);\n});\n\n\/\/ Touch support\nwindow.addEventListener(\"touchmove\", e => {\n  const t = e.touches&#91;0];\n  updatePointer(t.clientX, t.clientY);\n});\n\n\/\/ Click to teleport head\nwindow.addEventListener(\"click\", e => {\n  points.push({ x: e.clientX, y: e.clientY });\n});\n\n\/\/ Update pointer and add snake points\nfunction updatePointer(x, y) {\n  const last = points&#91;points.length - 1];\n\n  if (!last || distance(last.x, last.y, x, y) > minDist) {\n    points.push({ x, y });\n    if (points.length > maxPoints) points.shift();\n  }\n\n  mouseX = x;\n  mouseY = y;\n}\n\n\/\/ Distance helper\nfunction distance(x1, y1, x2, y2) {\n  const dx = x2 - x1;\n  const dy = y2 - y1;\n  return Math.sqrt(dx * dx + dy * dy);\n}\n\n\/\/ Draw snake\nfunction drawSnake() {\n  ctx.clearRect(0, 0, w, h);\n\n  if (points.length &lt; 2) return;\n\n  ctx.lineCap = \"round\";\n  ctx.lineJoin = \"round\";\n\n  \/\/ Breathing animation\n  breathing += 0.03;\n  const breath = Math.sin(breathing) * 2;\n\n  \/\/ Glow\n  ctx.shadowBlur = glowStrength;\n  ctx.shadowColor = \"rgba(120,255,140,0.8)\";\n\n  \/\/ Draw body segments\n  for (let i = 0; i &lt; points.length - 1; i++) {\n    const p1 = points&#91;i];\n    const p2 = points&#91;i + 1];\n\n    const t = i \/ points.length; \/\/ 0 \u2192 tail, 1 \u2192 head\n\n    \/\/ Width breathing + taper\n    const width = 4 + t * 12 + breath;\n\n    \/\/ Color cycling\n    const segmentHue = (hue + t * 60) % 360;\n\n    const grad = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);\n    grad.addColorStop(0, `hsla(${segmentHue}, 80%, 45%, 0.3)`);\n    grad.addColorStop(1, `hsla(${segmentHue}, 90%, 60%, 1)`);\n\n    ctx.strokeStyle = grad;\n    ctx.lineWidth = width;\n\n    ctx.beginPath();\n    ctx.moveTo(p1.x, p1.y);\n    ctx.lineTo(p2.x, p2.y);\n    ctx.stroke();\n  }\n\n  \/\/ Draw head\n  const head = points&#91;points.length - 1];\n  ctx.beginPath();\n  ctx.fillStyle = `hsla(${hue}, 100%, 70%, 1)`;\n  ctx.arc(head.x, head.y, 10 + breath * 0.5, 0, Math.PI * 2);\n  ctx.fill();\n\n  \/\/ Update color cycle\n  hue += hueSpeed;\n}\n\n\/\/ Auto slither movement (optional)\nfunction autoMove() {\n  if (!autoSlither) return;\n\n  slitherAngle += 0.05;\n  const radius = 80;\n\n  const x = w \/ 2 + Math.cos(slitherAngle) * radius;\n  const y = h \/ 2 + Math.sin(slitherAngle * 1.5) * radius;\n\n  updatePointer(x, y);\n}\n\n\/\/ FPS counter\nfunction drawFPS() {\n  const now = performance.now();\n  fps = 1000 \/ (now - lastTime);\n  lastTime = now;\n\n  ctx.fillStyle = \"white\";\n  ctx.font = \"14px monospace\";\n  ctx.fillText(`FPS: ${fps.toFixed(1)}`, 10, 20);\n}\n\n\/\/ Main loop\nfunction loop() {\n  autoMove();\n  drawSnake();\n  drawFPS();\n  requestAnimationFrame(loop);\n}\n\nloop();\n\n\/\/ Distance helper\nfunction distance(x1, y1, x2, y2) {\n  const dx = x2 - x1;\n  const dy = y2 - y1;\n  return Math.sqrt(dx * dx + dy * dy);\n}\n\n\/\/ Draw snake\nfunction drawSnake() {\n  ctx.clearRect(0, 0, w, h);\n\n  if (points.length &lt; 2) return;\n\n  ctx.lineCap = \"round\";\n  ctx.lineJoin = \"round\";\n\n  \/\/ Breathing animation\n  breathing += 0.03;\n  const breath = Math.sin(breathing) * 2;\n\n  \/\/ Glow\n  ctx.shadowBlur = glowStrength;\n  ctx.shadowColor = \"rgba(120,255,140,0.8)\";\n\n  \/\/ Draw body segments\n  for (let i = 0; i &lt; points.length - 1; i++) {\n    const p1 = points&#91;i];\n    const p2 = points&#91;i + 1];\n\n    const t = i \/ points.length; \/\/ 0 \u2192 tail, 1 \u2192 head\n\n    \/\/ Width breathing + taper\n    const width = 4 + t * 12 + breath;\n\n    \/\/ Color cycling\n    const segmentHue = (hue + t * 60) % 360;\n\n    const grad = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);\n    grad.addColorStop(0, `hsla(${segmentHue}, 80%, 45%, 0.3)`);\n    grad.addColorStop(1, `hsla(${segmentHue}, 90%, 60%, 1)`);\n\n    ctx.strokeStyle = grad;\n    ctx.lineWidth = width;\n\n    ctx.beginPath();\n    ctx.moveTo(p1.x, p1.y);\n    ctx.lineTo(p2.x, p2.y);\n    ctx.stroke();\n  }\n\n  \/\/ Draw head\n  const head = points&#91;points.length - 1];\n  ctx.beginPath();\n  ctx.fillStyle = `hsla(${hue}, 100%, 70%, 1)`;\n  ctx.arc(head.x, head.y, 10 + breath * 0.5, 0, Math.PI * 2);\n  ctx.fill();\n\n  \/\/ Update color cycle\n  hue += hueSpeed;\n}\n\n\/\/ Auto slither movement (optional)\nfunction autoMove() {\n  if (!autoSlither) return;\n\n  slitherAngle += 0.05;\n  const radius = 80;\n\n  const x = w \/ 2 + Math.cos(slitherAngle) * radius;\n  const y = h \/ 2 + Math.sin(slitherAngle * 1.5) * radius;\n\n  updatePointer(x, y);\n}\n\n\/\/ FPS counter\nfunction drawFPS() {\n  const now = performance.now();\n  fps = 1000 \/ (now - lastTime);\n  lastTime = now;\n\n  ctx.fillStyle = \"white\";\n  ctx.font = \"14px monospace\";\n  ctx.fillText(`FPS: ${fps.toFixed(1)}`, 10, 20);\n}\n\n\/\/ Main loop\nfunction loop() {\n  autoMove();\n  drawSnake();\n  drawFPS();\n  requestAnimationFrame(loop);\n}\n\nloop();\n<\/code><\/pre>\n\n\n\n<p>i used ai cause there wasn&#8217;t much videos i could find with it and for the index.html <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\" \/>\n  &lt;title>Point to Point Snake&lt;\/title>\n  &lt;link rel=\"stylesheet\" href=\"style.css\" \/>\n&lt;\/head>\n&lt;body>\n  &lt;canvas id=\"snakeCanvas\">&lt;\/canvas>\n  &lt;script src=\"script.js\">&lt;\/script>\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n\n\n\n<p>and for the style.cs<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  background: #111;\n  overflow: hidden;\n  cursor: none;\n}\n\n#snakeCanvas {\n  display: block;\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>for scipt.js is i used ai cause there wasn&#8217;t much videos i could find with it and for the index.html [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-72","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":1,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/posts\/72\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroyalscode.com\/students\/c_menhart\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}