manual gradient
A gradient using HTML4 stuff, with some commands
HTML
<p> Enter command e.g. "push(0,255),clear,redraw,shift,reverse,map,sort" </p>
<form id="but">
<input type="text" id="console">
<input type="submit" value=" Run or press enter " >
<div id="errors"></div>
</form>
<div id="gradient"></div>
CSS
* {
margin: 0;
padding: 0;
}
#errors{color:red;}
#gradient {
position: relative;
margin: 20px auto 0 auto;
width: 400px;
height: 200px;
}
#gradient div {
position: absolute;
}
JavaScript
getEl = function(el) { return document.getElementById(el) };
con = getEl("console");
getEl("but").onsubmit= function(){
try{ eval("gradient."+con.value+";");}
catch(e){
getEl('errors').innerHTML=e.message;
}
return false;
};
function Gradient(el , stopArr){
this.wrapper = getEl(el);
this.stops = stopArr;
this.draw();
}
Gradient.prototype.draw = function(){
// simplifying width and height calculations for this exercise (assuming no borders)
wrapSize = this.wrapper.offsetHeight;
half = wrapSize / 2;
numStops = this.stops.length;
segmentSize = half/(numStops-1);
subSegSize = segmentSize/2;
// how many pixels did we proceed last time?
last= 0;
for (s = 0; s<numStops-1 ;s++){
deltaColor = this.stops[s+1]-this.stops[s];
//console.log("delta",deltaColor);
for (i =last; i<=last+segmentSize;i++){
g= document.createElement('div');
color = parseInt( this.stops[s] + (i-last)* deltaColor/segmentSize);
//console.log('color',color)
g.style.background= "rgb("+color+","+color+","+color+")";
g.style.left = i+"px";
g.style.top = i+"px";
g.style.width = wrapSize -i*4 + "px";
g.style.height = wrapSize - i*2 + "px";
//g.style.borderRadius = "50%";
...