Update gradientLine.html

Math.PI > magic number
This commit is contained in:
Marco van Dijk 2026-02-27 15:51:31 +01:00 committed by GitHub
parent 8125089e7d
commit 03ffcfbd28
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -18,7 +18,7 @@
var ctx = c.getContext("2d"); var ctx = c.getContext("2d");
var width = 320; var width = 320;
var height = 200; var height = 200;
var rotate = 1; var rotate = 0;
var h = -1; var h = -1;
var s = -1; var s = -1;
var l = -1; var l = -1;
@ -78,8 +78,8 @@
ctx.fillStyle = bg; ctx.fillStyle = bg;
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
// Update rotation of line (wrap to avoid precision loss) // Update rotation of line (wrap at full revolution)
rotate = (rotate + speed) % 6283.185; rotate = (rotate + speed * 0.001) % (2 * Math.PI);
// Calculate useful anchor points // Calculate useful anchor points
startPoint = { startPoint = {
@ -114,7 +114,7 @@
// Draw rectangle // Draw rectangle
ctx.beginPath(); ctx.beginPath();
ctx.translate(midPoint.x, startPoint.y); ctx.translate(midPoint.x, startPoint.y);
ctx.rotate(0.001 * rotate); ctx.rotate(rotate);
ctx.translate(-midPoint.x, -startPoint.y); ctx.translate(-midPoint.x, -startPoint.y);
ctx.rect(startPoint.x, startPoint.y, distance, height); ctx.rect(startPoint.x, startPoint.y, distance, height);
ctx.fillStyle = grd; ctx.fillStyle = grd;