EffectHub.com: your best source for gaming

Recommendation

More Effects...

console.clear();
var clog = console.log;

var BLUE, RED;

var params = {
    value: 4,
    range: [ 2, 8 ]
};

function setup() {
    createCanvas( windowWidth, windowHeight );
    
    BLUE = color('#1E2630');
    RED = color('#FB3550');

var controlKit = new ControlKit();
    controlKit.addPanel()
        .addSlider( params, 'value', 'range', {
            dp: 0,
            step: 1,
            onChange: draw,
            onFinish: draw
        } );

noStroke();
}

function draw() {
    background( BLUE );
    fill( red(RED), green(RED), blue(RED), map( params.value, 2, 8, 60, 5 ) );
    drawCircle( width/2, height/2, max(width/2,height/2) );
    noLoop();
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

CSS

HTML

Recommendation

Join Effecthub.com