stronk/SignalRGB_Effects
1
0
Fork 0
mirror of https://github.com/stronk-dev/SignalRGB_Effects.git synced 2026-04-20 13:25:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: stronk:02f6c978b13eddc1a18822bad4fd12125bb4229e
Branches Tags
stronk:master
..
compare: stronk:03ffcfbd283cb3bb71452991af82722413ca6863
Branches Tags
stronk:master

4 Commits
02f6c978b1 ... 03ffcfbd28

Author SHA1 Message Date
Marco van Dijk
03ffcfbd28
Update gradientLine.html 
Math.PI > magic number
 2026-02-27 15:51:31 +01:00
Marco van Dijk
8125089e7d
Update gradientBall.html 
Math.PI > magic number
 2026-02-27 15:51:11 +01:00
Marco van Dijk
ee9ee66285
Fix gradientLine.html 
bug could cause it to spin EXTREMELY quickly
 2026-02-27 15:44:37 +01:00
Marco van Dijk
44aa8a136a
Fix gradientBall.html 
bug could cause it to spin EXTREMELY quickly
 2026-02-27 15:43:59 +01:00
2 changed files with 13 additions and 11 deletions
Show Stats Expand all files Collapse all files

11
gradientBall.html
View File

@ -19,7 +19,7 @@
var ctx = c.getContext("2d");
var width = 320;
var height = 200;
var rotate = 1;
var rotate = 0;
var h = -1;
var s = -1;
var l = -1;
@ -74,7 +74,8 @@
if (h == -1 || s == -1 || l == -1) {
[h, s, l] = hexToHSL(fg);
}
// Reset canvas
// Reset canvas transform and clear
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillStyle = bg;
ctx.fillRect(0, 0, width, height);
@ -84,8 +85,8 @@
y: (height / 2) - distance
};
// Increment rotation
rotate += speed
// Increment rotation (wrap at full revolution)
rotate = (rotate + speed * 0.001) % (2 * Math.PI);
// Define gradient for ball
var grd = ctx.createRadialGradient(midPoint.x, midPoint.y, 0, midPoint.x, midPoint.y, radius);
@ -100,7 +101,7 @@
ctx.beginPath();
// Rotate canvas around the ball
ctx.translate(midPoint.x, midPoint.y + distance);
ctx.rotate(0.001 * rotate);
ctx.rotate(rotate);
ctx.translate(-midPoint.x, -midPoint.y - distance);
// Draw Ball
ctx.arc(midPoint.x, midPoint.y, radius, 0, Math.PI * 2, false);

13
gradientLine.html
View File

@ -18,7 +18,7 @@
var ctx = c.getContext("2d");
var width = 320;
var height = 200;
var rotate = 1;
var rotate = 0;
var h = -1;
var s = -1;
var l = -1;
@ -73,12 +73,13 @@
if (h == -1 || s == -1 || l == -1) {
[h, s, l] = hexToHSL(fg);
}
// Reset canvas
// Reset canvas transform and clear
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillStyle = bg;
ctx.fillRect(0, 0, width, height);
// Update rotation of line
rotate += speed;
// Update rotation of line (wrap at full revolution)
rotate = (rotate + speed * 0.001) % (2 * Math.PI);
// Calculate useful anchor points
startPoint = {
@ -113,7 +114,7 @@
// Draw rectangle
ctx.beginPath();
ctx.translate(midPoint.x, startPoint.y);
ctx.rotate(0.001 * rotate);
ctx.rotate(rotate);
ctx.translate(-midPoint.x, -startPoint.y);
ctx.rect(startPoint.x, startPoint.y, distance, height);
ctx.fillStyle = grd;
@ -123,4 +124,4 @@
window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);
</script>
</script>