Skip to content

Instantly share code, notes, and snippets.

@tompng

tompng/spiral.html

Last active March 26, 2021 16:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tompng/071dcdb3ffff775349719f9d34febe91 to your computer and use it in GitHub Desktop.
Save tompng/071dcdb3ffff775349719f9d34febe91 to your computer and use it in GitHub Desktop.
Download ZIP
対数螺旋&長方形
Raw
spiral.html
<body></body>
<script>
const a = 1.5388620467909049 // Math.log(a)*a*a*a = Math.PI/2
// const a = (1+5**0.5)/2
console.log(a*a*a*Math.log(a)*2)
const cx = 1 / (a * a + 1) / a
const cy = 1 / (a * a + 1)
const th0 = Math.PI + Math.atan(1 / a / a / a)
const r0 = Math.hypot(a * a * a, 1) / (a * a + 1)
function point(th) {
const r = r0 * Math.pow(a, -th / Math.PI * 2)
return [cx + r * Math.cos(-th+th0), cy + r * Math.sin(-th+th0)]
}
canvas = document.createElement('canvas')
canvas.width = 1024
canvas.height = 1024
document.body.appendChild(canvas)
g = canvas.getContext('2d')
g.scale(canvas.width / 2, canvas.height / 2)
g.translate(1, 1)
g.scale(1000/1024, 1000/1024)
g.scale(1, -1)
g.lineWidth = 0.004
g.lineCap = 'round'
g.beginPath()
g.moveTo(...point(0))
const d = 0.02
for (let th = 0; th < 8*Math.PI; th+=d) {
g.bezierCurveTo(
...point(th + 1 / 3* d),
...point(th + 2 / 3* d),
...point(th + d)
)
}
g.stroke()
const b = a - 1 / a
g.globalAlpha = 0.5
g.beginPath()
for (let x = -b, y = 0, r = 1, i = 0; i < 10; i++) {
g.rect(x, y, b*r, r)
x+=b*r;y+=r;r/=a
g.rect(x, y, r, -b*r)
x+=r;y-=b*r;r/=a
g.rect(x, y, -b*r, -r)
x-=b*r;y-=r;r/=a
g.rect(x, y, -r, b*r)
x-=r;y+=b*r;r/=a
}
g.stroke()
g.beginPath()
g.arc(cx, cy, g.lineWidth / 2, 0, 2 * Math.PI, true)
g.fill()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment