Skip to content

Instantly share code, notes, and snippets.

@mahdiyari

mahdiyari/audio-effect-mahdiyari.html

Created September 27, 2021 18:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mahdiyari/60878f72e6eacf9bba4a2f8b5a1990e3 to your computer and use it in GitHub Desktop.
Save mahdiyari/60878f72e6eacf9bba4a2f8b5a1990e3 to your computer and use it in GitHub Desktop.
Download ZIP
An audio effect for SignalRGB - the best effect on 12v RGBs but can be used on any rgb
Raw
audio-effect-mahdiyari.html
<head>
<title>Audio Effect Mahdiyari</title>
<meta description="Audio Effect Mahdiyari" />
<meta publisher="MahdiYari" />
<meta property="comboOption" label="Mode" type="combobox" values="Rainbow,Single" default="Rainbow">
<meta property="color" label="Color" type="color" default="#e31337" min="0" max="360" />
<meta property="speed" label="Rainbow speed" type="number" default="10" min="1" max="50">
<meta property="brightnessScale" label="Brightness scale" type="number" default="10" min="1" max="10">
<meta property="delay" label="Update delay" type="number" default="0" min="0" max="500">
</head>
<body style="margin: 0; padding: 0; background: #000;">
<canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
console.clear();
var c = document.getElementById( "exCanvas" );
var ctx = c.getContext( "2d" );
var width = 320;
var height = 200;
var hue = 0;
var prevBrightness = 0;
async function sleep( time ) {
return new Promise( ( resolve, reject ) => {
setTimeout( () => {
resolve( 1 )
}, time )
} )
}
function hexToHsl(hex) {
var r = parseInt(hex.substr(1,2), 16);
var g = parseInt(hex.substr(3,2), 16);
var b = parseInt(hex.substr(5,2), 16);
r /= 255, g /= 255, b /= 255;
var max = Math.max( r, g, b ), min = Math.min( r, g, b );
var h, s, l = ( max + min ) / 2;
if ( max == min ) {
h = s = 0;
} else {
var d = max - min;
s = l > 0.5 ? d / ( 2 - max - min ) : d / ( max + min );
switch ( max ) {
case r: h = ( g - b ) / d + ( g < b ? 6 : 0 ); break;
case g: h = ( b - r ) / d + 2; break;
case b: h = ( r - g ) / d + 4; break;
}
h /= 6;
}
return [ h, s, l ];
}
async function update() {
if ( delay !== 0 ) {
await sleep( delay )
}
var level = engine.audio.level;
if ( level > -35 && level !== 0 ) {
var bright = ( 10 ** ( engine.audio.level / 10 ) ).toFixed( 2 ) * 100;
// a curve for the brightness
if ( bright < 5 ) {
bright = bright * 0.2
} else if ( bright < 8 ) {
bright = bright * 0.3
} else if ( bright < 10 ) {
bright = bright * 0.4
} else if ( bright < 13 ) {
bright = bright * 0.5
} else if ( bright < 15 ) {
bright = bright * 0.6
} else if ( bright < 18 ) {
bright = bright * 1
} else if ( bright < 20 ) {
bright = bright * 1.1
} else if ( bright < 37 ) {
bright = bright * 1.32
}
bright = bright * brightnessScale * 0.1
if ( bright > 50 ) {
bright = 50
}
if ( prevBrightness === 0 ) {
prevBrightness = bright
}
if ( bright < prevBrightness ) {
bright = bright - 0.05
prevBrightness = bright
}
if ( comboOption === 'Single' ) {
hue = hexToHsl(color)[0] * 360;
ctx.fillStyle = `hsl(${ hue }, 100%, ${ bright }%)`;
} else {
ctx.fillStyle = `hsl(${ hue }, 100%, ${ bright }%)`;
hue += 0.1 * speed;
if ( hue > 360 ) {
hue = 0;
}
}
ctx.fillRect( 0, 0, width, height );
} else {
var bright = prevBrightness - 1
if ( bright < 0 ) {
bright = 0
}
prevBrightness = bright
ctx.fillStyle = `hsl(${ hue }, 100%, ${ bright }%)`;
ctx.fillRect( 0, 0, width, height );
}
window.requestAnimationFrame( update );
}
window.requestAnimationFrame( update );
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment