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:03ffcfbd283cb3bb71452991af82722413ca6863
Branches Tags
stronk:master
..
compare: stronk:02f6c978b13eddc1a18822bad4fd12125bb4229e
Branches Tags
stronk:master

No commits in common. "03ffcfbd283cb3bb71452991af82722413ca6863" and "02f6c978b13eddc1a18822bad4fd12125bb4229e" have entirely different histories.
03ffcfbd28 ... 02f6c978b1

2 changed files with 11 additions and 13 deletions
Show Stats Expand all files Collapse all files

11
gradientBall.html
View File

@ -19,7 +19,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 = 0; var rotate = 1;
var h = -1; var h = -1;
var s = -1; var s = -1;
var l = -1; var l = -1;
@ -74,8 +74,7 @@
if (h == -1 || s == -1 || l == -1) { if (h == -1 || s == -1 || l == -1) {
[h, s, l] = hexToHSL(fg); [h, s, l] = hexToHSL(fg);
} }
// Reset canvas transform and clear // Reset canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillStyle = bg; ctx.fillStyle = bg;
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
@ -85,8 +84,8 @@
y: (height / 2) - distance y: (height / 2) - distance
}; };
// Increment rotation (wrap at full revolution) // Increment rotation
rotate = (rotate + speed * 0.001) % (2 * Math.PI); rotate += speed
// Define gradient for ball // Define gradient for ball
var grd = ctx.createRadialGradient(midPoint.x, midPoint.y, 0, midPoint.x, midPoint.y, radius); var grd = ctx.createRadialGradient(midPoint.x, midPoint.y, 0, midPoint.x, midPoint.y, radius);
@ -101,7 +100,7 @@
ctx.beginPath(); ctx.beginPath();
// Rotate canvas around the ball // Rotate canvas around the ball
ctx.translate(midPoint.x, midPoint.y + distance); ctx.translate(midPoint.x, midPoint.y + distance);
ctx.rotate(rotate); ctx.rotate(0.001 * rotate);
ctx.translate(-midPoint.x, -midPoint.y - distance); ctx.translate(-midPoint.x, -midPoint.y - distance);
// Draw Ball // Draw Ball
ctx.arc(midPoint.x, midPoint.y, radius, 0, Math.PI * 2, false); 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 ctx = c.getContext("2d");
var width = 320; var width = 320;
var height = 200; var height = 200;
var rotate = 0; var rotate = 1;
var h = -1; var h = -1;
var s = -1; var s = -1;
var l = -1; var l = -1;
@ -73,13 +73,12 @@
if (h == -1 || s == -1 || l == -1) { if (h == -1 || s == -1 || l == -1) {
[h, s, l] = hexToHSL(fg); [h, s, l] = hexToHSL(fg);
} }
// Reset canvas transform and clear // Reset canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillStyle = bg; ctx.fillStyle = bg;
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
// Update rotation of line (wrap at full revolution) // Update rotation of line
rotate = (rotate + speed * 0.001) % (2 * Math.PI); rotate += speed;
// Calculate useful anchor points // Calculate useful anchor points
startPoint = { startPoint = {
@ -114,7 +113,7 @@
// Draw rectangle // Draw rectangle
ctx.beginPath(); ctx.beginPath();
ctx.translate(midPoint.x, startPoint.y); ctx.translate(midPoint.x, startPoint.y);
ctx.rotate(rotate); ctx.rotate(0.001 * 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;
@ -124,4 +123,4 @@
window.requestAnimationFrame(update); window.requestAnimationFrame(update);
} }
window.requestAnimationFrame(update); window.requestAnimationFrame(update);
</script> </script>