Skip to content

Instantly share code, notes, and snippets.

@Swivelgames
Last active July 18, 2016 13:05
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 Swivelgames/3d0b9b78ab004078dcec5e498f90431e to your computer and use it in GitHub Desktop.
Save Swivelgames/3d0b9b78ab004078dcec5e498f90431e to your computer and use it in GitHub Desktop.
Random color gradient generator
import RGBAFader from "./RGBAFader.js";
var x = new RGBAFader();
var y = new RGBAFader();
var interval = setInterval( () => {
y.accuate();
x.accuate();
var rgbX = "rgb(";
for(var color of x.colors) {
rgbX += color.color+",";
}
rgbX = rgbX.slice(0,rgbX.length-1) + ")";
var rgbY = "rgb(";
for(var color of y.colors) {
rgbY += color.color+",";
}
rgbY = rgbY.slice(0,rgbY.length-1) + ")";
var bg = "linear-gradient(to top, "+rgbX+" 0%, "+rgbY+" 100%)";
document.body.style.background = bg;
}, 50);
class Color {
constructor(opts) {
this.color = opts.color;
this.options = Object.assign({},{
"amount": 1,
"increase": true,
"bounds": {
"high": 256,
"low": 0
}
},opts);
}
change() {
this.color += ((this.options.increase)?1:-1) * this.options.amount;
return this.checkBounds();
}
checkBounds() {
var opts = this.options, bounds = opts.bounds;
if(this.color >= bounds.high) this.color -= opts.amount;
else if(this.color <= bounds.low) this.color += opts.amount;
else return this;
this.options.increase = !opts.increase;
return this;
}
}
import Color from "./Color.js";
class RGBAFader {
constructor() {
this.colors = [
new Color(this.colorOpts()),
new Color(this.colorOpts()),
new Color(this.colorOpts())
];
}
accuate() {
for(var color of this.colors) {
color.change();
}
}
colorOpts(){
return {
"amount": ~~(Math.random() * 3),
"color": ~~(Math.random() * 255),
"bounds": {
"high": 255,
"low": 0
}
};
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment