Difference between revisions of "The HSV color scheme"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
Line 15: | Line 15: | ||
var phi = 0; | var phi = 0; | ||
− | var | + | var c1 = brd.createElement('curve',[ |
function(t){return r1*Math.sin(t)+r2*Math.sin(lambda*t+phi);}, | function(t){return r1*Math.sin(t)+r2*Math.sin(lambda*t+phi);}, | ||
− | function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t+phi)-0. | + | function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t+phi)-0.2;}, |
0, 2*Math.PI], | 0, 2*Math.PI], | ||
{fillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); }, | {fillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); }, | ||
Line 25: | Line 25: | ||
var c2 = brd.createElement('curve',[ | var c2 = brd.createElement('curve',[ | ||
function(t){return Math.sin(t);}, | function(t){return Math.sin(t);}, | ||
− | function(t){return Math.cos(t)-0. | + | function(t){return Math.cos(t)-0.2;}, |
0, 2*Math.PI], | 0, 2*Math.PI], | ||
{fillcolor:function(){ return JXG.hsv2rgb(180+H.Value(),S.Value(),V.Value()); }, | {fillcolor:function(){ return JXG.hsv2rgb(180+H.Value(),S.Value(),V.Value()); }, | ||
Line 35: | Line 35: | ||
<source lang="xml"> | <source lang="xml"> | ||
<jsxgraph width=600 height=500> | <jsxgraph width=600 height=500> | ||
− | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[- | + | var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-4,4,4,-4], keepaspectratio:true}); |
− | var H = brd.createElement('slider',[[ | + | var H = brd.createElement('slider',[[-3,3.5],[2,3.5],[0,1,360]], {name:'H',fillColor:'black',strokeColor:'black'}); |
− | var S = brd.createElement('slider',[[ | + | var S = brd.createElement('slider',[[-3,3],[2,3],[0,1,1]], {name:'S',fillColor:'black',strokeColor:'black'}); |
− | var V = brd.createElement('slider',[[ | + | var V = brd.createElement('slider',[[-3,2.5],[2,2.5],[0,1,1]], {name:'V',fillColor:'black',strokeColor:'black'}); |
− | var | + | |
− | + | var r1 = 2; | |
− | + | var r2 = 1/4.75; | |
− | + | var lambda = 8; | |
− | + | var phi = 0; | |
+ | |||
+ | var c1 = brd.createElement('curve',[ | ||
+ | function(t){return r1*Math.sin(t)+r2*Math.sin(lambda*t+phi);}, | ||
+ | function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t+phi)-0.2;}, | ||
+ | 0, 2*Math.PI], | ||
+ | {fillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); }, | ||
+ | highlightFillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); }, | ||
+ | strokeColor:'black',strokeWidth:3}); | ||
+ | |||
+ | var c2 = brd.createElement('curve',[ | ||
+ | function(t){return Math.sin(t);}, | ||
+ | function(t){return Math.cos(t)-0.2;}, | ||
+ | 0, 2*Math.PI], | ||
+ | {fillcolor:function(){ return JXG.hsv2rgb(180+H.Value(),S.Value(),V.Value()); }, | ||
+ | highlightFillcolor:function(){ return JXG.hsv2rgb(180+H.Value(),S.Value(),V.Value()); }, | ||
+ | strokeColor:'black',strokeWidth:3}); | ||
</jsxgraph> | </jsxgraph> | ||
</source> | </source> |
Revision as of 18:10, 24 September 2009
The HSV color scheme consists of three values:
- Hue (base color): between 0 and 360
- Saturation (purity): between 0 and 1
- Value (brightness): between 0 and 1
Here, you can experiment with these values.
The underlying JavaScript code
<jsxgraph width=600 height=500>
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-4,4,4,-4], keepaspectratio:true});
var H = brd.createElement('slider',[[-3,3.5],[2,3.5],[0,1,360]], {name:'H',fillColor:'black',strokeColor:'black'});
var S = brd.createElement('slider',[[-3,3],[2,3],[0,1,1]], {name:'S',fillColor:'black',strokeColor:'black'});
var V = brd.createElement('slider',[[-3,2.5],[2,2.5],[0,1,1]], {name:'V',fillColor:'black',strokeColor:'black'});
var r1 = 2;
var r2 = 1/4.75;
var lambda = 8;
var phi = 0;
var c1 = brd.createElement('curve',[
function(t){return r1*Math.sin(t)+r2*Math.sin(lambda*t+phi);},
function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t+phi)-0.2;},
0, 2*Math.PI],
{fillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); },
highlightFillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); },
strokeColor:'black',strokeWidth:3});
var c2 = brd.createElement('curve',[
function(t){return Math.sin(t);},
function(t){return Math.cos(t)-0.2;},
0, 2*Math.PI],
{fillcolor:function(){ return JXG.hsv2rgb(180+H.Value(),S.Value(),V.Value()); },
highlightFillcolor:function(){ return JXG.hsv2rgb(180+H.Value(),S.Value(),V.Value()); },
strokeColor:'black',strokeWidth:3});
</jsxgraph>