diff --git a/index.html b/index.html
index a176ff7..0b6a91b 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
-
-
+
Dual Axis Rotation Illusion - By Frank Force
+
+
-
Dual Axis Rotation Illusion - By Frank Force
-Best Illusion of The Year - First Place Winner
+Best Illusion of The Year 2019 - First Place Winner
Spin Axis
@@ -39,6 +39,8 @@
"use strict";
+/** @type {HTMLCanvasElement} */
+const c = document.getElementById('c');
const x = c.getContext('2d');
const PI = Math.PI;
const S = Math.sin;
@@ -47,6 +49,7 @@
const width = 450;
const height = 300;
let t = 0;
+let timestamp;
function DrawCurvePoint(pos, color, radius=30, stroke=0)
{
@@ -59,11 +62,8 @@
stroke ? x.stroke() : x.fill();
}
-function Update()
+function Update(nextTimestamp)
{
- if (self !== top && !document.hasFocus())
- return;
-
// get settings
let spinAxis = document.querySelector('input[name="radio_spinAxis"]:checked').value;
let spinDirection = parseFloat(document.querySelector('input[name="radio_spinDirection"]:checked').value);
@@ -72,7 +72,13 @@
// clear canvas
c.width += 0;
x.lineWidth = 10;
- t += spinDirection/60;
+ if (timestamp === undefined)
+ {
+ timestamp = nextTimestamp;
+ }
+ const dt = (nextTimestamp - timestamp) / 16;
+ timestamp = nextTimestamp;
+ t += dt*spinDirection/60;
// draw curve
let I = 1e3;
@@ -81,16 +87,20 @@
if (!showDots)
{
- if (spinAxis == 'horizontal')
+ if (spinAxis === 'horizontal')
{
// draw fade
- x.fillStyle = '#F00';
- for(let i=-32; i<=32; ++i)
- {
- x.globalAlpha = 2-2*Math.abs(i)/32;
- x.fillRect(0, yCenter+i*8, 2e3, 8);
- }
- x.globalAlpha = 1;
+ const gradient = x.createLinearGradient(xCenter, 0, xCenter, c.height);
+ gradient.addColorStop(0, "transparent");
+ gradient.addColorStop(0.15, "transparent");
+ gradient.addColorStop(0.15, "rgba(255,0,0,0.06)");
+ gradient.addColorStop(0.3, "#F00");
+ gradient.addColorStop(0.7, "#F00");
+ gradient.addColorStop(0.85, "rgba(255,0,0,0.06)");
+ gradient.addColorStop(0.85, "transparent");
+ gradient.addColorStop(1, "transparent");
+ x.fillStyle = gradient;
+ x.fillRect(0, 0, c.width, c.height);
// draw the front part of the curve again
for(let i=I;i--;)
@@ -99,17 +109,21 @@
DrawCurvePoint(2*6*PI*i/I, "#000");
}
}
- else if (spinAxis == 'vertical')
+ else if (spinAxis === 'vertical')
{
// draw fade
- x.fillStyle = '#08F';
- for(let i=-32; i<=32; ++i)
- {
- x.globalAlpha = 2-2*Math.abs(i)/32;
- x.fillRect(xCenter+i*12, 0, 12, 2e3);
- }
- x.globalAlpha = 1;
-
+ const gradient = x.createLinearGradient(0, yCenter, c.width, yCenter);
+ gradient.addColorStop(0, "transparent");
+ gradient.addColorStop(0.2, "transparent");
+ gradient.addColorStop(0.2, "rgba(0,128,240,0.06)");
+ gradient.addColorStop(0.35, "#08F");
+ gradient.addColorStop(0.65, "#08F");
+ gradient.addColorStop(0.8, "rgba(0,128,240,0.06)");
+ gradient.addColorStop(0.8, "transparent");
+ gradient.addColorStop(1, "transparent");
+ x.fillStyle = gradient;
+ x.fillRect(0, 0, c.width, c.height);
+
// draw the front part of the curve again
for(let i=I;i--;)
{
@@ -120,7 +134,7 @@
}
else
{
- if (spinAxis == 'horizontal' || spinAxis == '')
+ if (spinAxis !== 'vertical')
{
// draw dots on overlaps
let color = '#F00';
@@ -129,7 +143,7 @@
DrawCurvePoint(11.00, color, 70, 1);
DrawCurvePoint(17.28, color, 70, 1);
}
- if (spinAxis == 'vertical' || spinAxis == '')
+ if (spinAxis !== 'horizontal')
{
// draw dots on overlaps
// this part is a bit hacky, it should use DrawCurvePoint
@@ -139,11 +153,12 @@
x.beginPath(), x.arc(xCenter+width*S(5.24+t*2/3), yCenter, 70, 0, 7), x.stroke();
}
}
-}
-setInterval(Update, 16);
+ requestAnimationFrame(Update);
+}
+requestAnimationFrame(Update);
-
\ No newline at end of file
+