mirror of
https://github.com/stronk-dev/SignalRGB_Effects.git
synced 2025-07-04 11:05:08 +02:00
Init
This commit is contained in:
commit
146e8e7074
24
LICENSE
Normal file
24
LICENSE
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
This is free and unencumbered software released into the public domain.
|
||||||
|
|
||||||
|
Anyone is free to copy, modify, publish, use, compile, sell, or
|
||||||
|
distribute this software, either in source code form or as a compiled
|
||||||
|
binary, for any purpose, commercial or non-commercial, and by any
|
||||||
|
means.
|
||||||
|
|
||||||
|
In jurisdictions that recognize copyright laws, the author or authors
|
||||||
|
of this software dedicate any and all copyright interest in the
|
||||||
|
software to the public domain. We make this dedication for the benefit
|
||||||
|
of the public at large and to the detriment of our heirs and
|
||||||
|
successors. We intend this dedication to be an overt act of
|
||||||
|
relinquishment in perpetuity of all present and future rights to this
|
||||||
|
software under copyright law.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||||
|
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
|
||||||
|
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
|
||||||
|
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
|
||||||
|
OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
|
||||||
|
For more information, please refer to <https://unlicense.org>
|
||||||
9
README.md
Normal file
9
README.md
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
# Custom RGB effects for SignalRGB
|
||||||
|
Default folder is `C:\Users\<username>\Documents\WhirlwindFX\Effects`
|
||||||
|
|
||||||
|
### gradientBall.html
|
||||||
|
Rotates a ball from the center of the canvas, much like the free Radar RGB effect. This version has a gradient between the foreground and background to ensure smooth transitions between colours
|
||||||
|
|
||||||
|
### gradientLine.html
|
||||||
|
Rotates a line from the center of the canvas, much like the free Radar RGB effect. This version has a gradient between the foreground and background to ensure smooth transitions between colours
|
||||||
|
|
||||||
116
gradientBall.html
Normal file
116
gradientBall.html
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
<head>
|
||||||
|
<title>Gradient Rotating Ball</title>
|
||||||
|
<meta
|
||||||
|
description="Rotates a ball from the center of the canvas, much like the Radar RGB FX. This version has a gradient between the foreground and background to ensure smooth transitions between colours" />
|
||||||
|
<meta publisher="stronk" />
|
||||||
|
<meta property="speed" label="Speed" type="number" min="0" max="100" default="5">
|
||||||
|
<meta property="radius" label="Size" type="number" min="1" max="200" default="100">
|
||||||
|
<meta property="distance" label="Offset" type="number" min="0" max="200" default="75">
|
||||||
|
<meta property="bg" label="Background Colour" type="color" default="#00141e" min="0" max="360" />
|
||||||
|
<meta property="fg" label="Foreground Colour" type="color" default="#2aff5d" min="0" max="360" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body style="margin: 0; padding: 0;">
|
||||||
|
<canvas id="exCanvas" width="320" height="200"></canvas>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var c = document.getElementById("exCanvas");
|
||||||
|
var ctx = c.getContext("2d");
|
||||||
|
var width = 320;
|
||||||
|
var height = 200;
|
||||||
|
var rotate = 1;
|
||||||
|
var h = -1;
|
||||||
|
var s = -1;
|
||||||
|
var l = -1;
|
||||||
|
|
||||||
|
function hexToHSL(H) {
|
||||||
|
// Convert hex to RGB first
|
||||||
|
let r = 0, g = 0, b = 0;
|
||||||
|
if (H.length == 4) {
|
||||||
|
r = "0x" + H[1] + H[1];
|
||||||
|
g = "0x" + H[2] + H[2];
|
||||||
|
b = "0x" + H[3] + H[3];
|
||||||
|
} else if (H.length == 7) {
|
||||||
|
r = "0x" + H[1] + H[2];
|
||||||
|
g = "0x" + H[3] + H[4];
|
||||||
|
b = "0x" + H[5] + H[6];
|
||||||
|
}
|
||||||
|
// Then to HSL
|
||||||
|
r /= 255;
|
||||||
|
g /= 255;
|
||||||
|
b /= 255;
|
||||||
|
let cmin = Math.min(r, g, b),
|
||||||
|
cmax = Math.max(r, g, b),
|
||||||
|
delta = cmax - cmin,
|
||||||
|
h = 0,
|
||||||
|
s = 0,
|
||||||
|
l = 0;
|
||||||
|
|
||||||
|
if (delta == 0)
|
||||||
|
h = 0;
|
||||||
|
else if (cmax == r)
|
||||||
|
h = ((g - b) / delta) % 6;
|
||||||
|
else if (cmax == g)
|
||||||
|
h = (b - r) / delta + 2;
|
||||||
|
else
|
||||||
|
h = (r - g) / delta + 4;
|
||||||
|
|
||||||
|
h = Math.round(h * 60);
|
||||||
|
|
||||||
|
if (h < 0)
|
||||||
|
h += 360;
|
||||||
|
|
||||||
|
l = (cmax + cmin) / 2;
|
||||||
|
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
|
||||||
|
s = +(s * 100).toFixed(1);
|
||||||
|
l = +(l * 100).toFixed(1);
|
||||||
|
|
||||||
|
return [h, s, l];
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
// Extract HSL so that we can add opacity
|
||||||
|
if (h == -1 || s == -1 || l == -1) {
|
||||||
|
[h, s, l] = hexToHSL(fg);
|
||||||
|
}
|
||||||
|
// Reset canvas
|
||||||
|
ctx.fillStyle = bg;
|
||||||
|
ctx.fillRect(0, 0, width, height);
|
||||||
|
|
||||||
|
// Calculate anchor point
|
||||||
|
midPoint = {
|
||||||
|
x: (width / 2),
|
||||||
|
y: (height / 2) - distance
|
||||||
|
};
|
||||||
|
|
||||||
|
// Increment rotation
|
||||||
|
rotate += speed
|
||||||
|
|
||||||
|
// Define gradient for ball
|
||||||
|
var grd = ctx.createRadialGradient(midPoint.x, midPoint.y, 0, midPoint.x, midPoint.y, radius);
|
||||||
|
grd.addColorStop(0, `hsla(${h}, ${s}%, ${l}%, 1.0)`);
|
||||||
|
grd.addColorStop(0.5, `hsla(${h}, ${s}%, ${l}%, 0.3)`);
|
||||||
|
grd.addColorStop(0.65, `hsla(${h}, ${s}%, ${l}%, 0.15)`);
|
||||||
|
grd.addColorStop(0.755, `hsla(${h}, ${s}%, ${l}%, 0.075)`);
|
||||||
|
grd.addColorStop(0.8285, `hsla(${h}, ${s}%, ${l}%, 0.037)`);
|
||||||
|
grd.addColorStop(0.88, `hsla(${h}, ${s}%, ${l}%, 0.019)`);
|
||||||
|
grd.addColorStop(1, `hsla(${h}, ${s}%, ${l}%, 0)`);
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
// Rotate Ball around center
|
||||||
|
ctx.translate(midPoint.x, midPoint.y);
|
||||||
|
ctx.translate(0, distance);
|
||||||
|
ctx.rotate(0.001 * rotate);
|
||||||
|
ctx.translate(-midPoint.x, -midPoint.y);
|
||||||
|
ctx.translate(0, -distance);
|
||||||
|
// Draw Ball
|
||||||
|
ctx.arc(midPoint.x, midPoint.y, midPoint.x - 2, 0, Math.PI * 2, false);
|
||||||
|
ctx.fillStyle = grd;
|
||||||
|
ctx.fill();
|
||||||
|
ctx.closePath();
|
||||||
|
|
||||||
|
window.requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
window.requestAnimationFrame(update);
|
||||||
|
</script>
|
||||||
126
gradientLine.html
Normal file
126
gradientLine.html
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<head>
|
||||||
|
<title>Gradient Rotating Line</title>
|
||||||
|
<meta
|
||||||
|
description="Rotates a line from the center of the canvas, much like the free Radar RGB effect. This version has a gradient between the foreground and background to ensure smooth transitions between colours" />
|
||||||
|
<meta publisher="stronk" />
|
||||||
|
<meta property="speed" label="Speed" type="number" min="0" max="100" default="10">
|
||||||
|
<meta property="distance" label="Line Width" type="number" min="1" max="320" default="100">
|
||||||
|
<meta property="bg" label="Background Colour" type="color" default="#00141e" min="0" max="360" />
|
||||||
|
<meta property="fg" label="Foreground Colour" type="color" default="#2aff5d" min="0" max="360" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body style="margin: 0; padding: 0;">
|
||||||
|
<canvas id="exCanvas" width="320" height="200"></canvas>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var c = document.getElementById("exCanvas");
|
||||||
|
var ctx = c.getContext("2d");
|
||||||
|
var width = 320;
|
||||||
|
var height = 200;
|
||||||
|
var rotate = 1;
|
||||||
|
var h = -1;
|
||||||
|
var s = -1;
|
||||||
|
var l = -1;
|
||||||
|
|
||||||
|
|
||||||
|
function hexToHSL(H) {
|
||||||
|
// Convert hex to RGB first
|
||||||
|
let r = 0, g = 0, b = 0;
|
||||||
|
if (H.length == 4) {
|
||||||
|
r = "0x" + H[1] + H[1];
|
||||||
|
g = "0x" + H[2] + H[2];
|
||||||
|
b = "0x" + H[3] + H[3];
|
||||||
|
} else if (H.length == 7) {
|
||||||
|
r = "0x" + H[1] + H[2];
|
||||||
|
g = "0x" + H[3] + H[4];
|
||||||
|
b = "0x" + H[5] + H[6];
|
||||||
|
}
|
||||||
|
// Then to HSL
|
||||||
|
r /= 255;
|
||||||
|
g /= 255;
|
||||||
|
b /= 255;
|
||||||
|
let cmin = Math.min(r, g, b),
|
||||||
|
cmax = Math.max(r, g, b),
|
||||||
|
delta = cmax - cmin,
|
||||||
|
h = 0,
|
||||||
|
s = 0,
|
||||||
|
l = 0;
|
||||||
|
|
||||||
|
if (delta == 0)
|
||||||
|
h = 0;
|
||||||
|
else if (cmax == r)
|
||||||
|
h = ((g - b) / delta) % 6;
|
||||||
|
else if (cmax == g)
|
||||||
|
h = (b - r) / delta + 2;
|
||||||
|
else
|
||||||
|
h = (r - g) / delta + 4;
|
||||||
|
|
||||||
|
h = Math.round(h * 60);
|
||||||
|
|
||||||
|
if (h < 0)
|
||||||
|
h += 360;
|
||||||
|
|
||||||
|
l = (cmax + cmin) / 2;
|
||||||
|
s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
|
||||||
|
s = +(s * 100).toFixed(1);
|
||||||
|
l = +(l * 100).toFixed(1);
|
||||||
|
|
||||||
|
return [h, s, l];
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
if (h == -1 || s == -1 || l == -1) {
|
||||||
|
[h, s, l] = hexToHSL(fg);
|
||||||
|
}
|
||||||
|
// Reset canvas
|
||||||
|
ctx.fillStyle = bg;
|
||||||
|
ctx.fillRect(0, 0, width, height);
|
||||||
|
|
||||||
|
// Update rotation of line
|
||||||
|
rotate += speed;
|
||||||
|
|
||||||
|
// Calculate useful anchor points
|
||||||
|
startPoint = {
|
||||||
|
x: (width / 2) - (distance / 2),
|
||||||
|
y: (height / 2)
|
||||||
|
};
|
||||||
|
endPoint = {
|
||||||
|
x: startPoint.x + distance,
|
||||||
|
y: startPoint.y + height
|
||||||
|
};
|
||||||
|
midPoint = {
|
||||||
|
x: startPoint.x + (endPoint.x - startPoint.x) * 0.5,
|
||||||
|
y: startPoint.y + (endPoint.y - startPoint.y) * 0.5
|
||||||
|
};
|
||||||
|
|
||||||
|
// Define gradient for line
|
||||||
|
var grd = ctx.createLinearGradient(startPoint.x, 0, endPoint.x, 0);
|
||||||
|
grd.addColorStop(0, `hsla(${h}, ${s}%, ${l}%, 0)`);
|
||||||
|
grd.addColorStop(0.06, `hsla(${h}, ${s}%, ${l}%, 0.019)`);
|
||||||
|
grd.addColorStop(0.08575, `hsla(${h}, ${s}%, ${l}%, 0.037)`);
|
||||||
|
grd.addColorStop(0.1225, `hsla(${h}, ${s}%, ${l}%, 0.075)`);
|
||||||
|
grd.addColorStop(0.175, `hsla(${h}, ${s}%, ${l}%, 0.15)`);
|
||||||
|
grd.addColorStop(0.25, `hsla(${h}, ${s}%, ${l}%, 0.3)`);
|
||||||
|
grd.addColorStop(0.5, `hsla(${h}, ${s}%, ${l}%, 1.0)`);
|
||||||
|
grd.addColorStop(0.750, `hsla(${h}, ${s}%, ${l}%, 0.3)`);
|
||||||
|
grd.addColorStop(0.825, `hsla(${h}, ${s}%, ${l}%, 0.15)`);
|
||||||
|
grd.addColorStop(0.8775, `hsla(${h}, ${s}%, ${l}%, 0.075)`);
|
||||||
|
grd.addColorStop(0.91425, `hsla(${h}, ${s}%, ${l}%, 0.037)`);
|
||||||
|
grd.addColorStop(0.94, `hsla(${h}, ${s}%, ${l}%, 0.019)`);
|
||||||
|
grd.addColorStop(1.0000, `hsla(${h}, ${s}%, ${l}%, 0)`);
|
||||||
|
|
||||||
|
// Draw rectangle
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.translate(midPoint.x, startPoint.y);
|
||||||
|
ctx.rotate(0.001 * rotate);
|
||||||
|
ctx.translate(-midPoint.x, -startPoint.y);
|
||||||
|
ctx.rect(startPoint.x, startPoint.y, distance, height);
|
||||||
|
ctx.fillStyle = grd;
|
||||||
|
ctx.fill();
|
||||||
|
ctx.closePath();
|
||||||
|
|
||||||
|
window.requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
window.requestAnimationFrame(update);
|
||||||
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user