The HSV color scheme: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
No edit summary |
||
(22 intermediate revisions by one other user not shown) | |||
Line 1: | Line 1: | ||
The HSV color scheme consists of three values: | The [http://en.wikipedia.org/wiki/Color_wheel HSV color scheme] consists of three values: | ||
* Hue (base color): between 0 and 360 | * Hue (base color): between 0 and 360 | ||
* Saturation (purity): between 0 and 1 | * Saturation (purity): between 0 and 1 | ||
* Value (brightness): between 0 and 1 | * Value (brightness): between 0 and 1 | ||
Here, you can experiment with these values. | |||
<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. | var H = brd.create('slider',[[-3,3.5],[2,3.5],[0,1,360]], {name:'H',fillColor:'black',strokeColor:'black'}); | ||
var S = brd. | var S = brd.create('slider',[[-3,3],[2,3],[0,1,1]], {name:'S',fillColor:'black',strokeColor:'black'}); | ||
var V = brd. | var V = brd.create('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 c1 = brd.create('curve',[ | |||
function(t){return r1*Math.sin(t)+r2*Math.sin(lambda*t);}, | |||
function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t)-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,gradient:'radial',gradientsecondcolor:'white'}); | |||
var c2 = brd.create('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()); }, | |||
strokewidth:3, | |||
strokeColor:'black',gradient:'linear'}); | |||
var t = brd.create('text', [2,-3, function(){ return 'RGB='+JXG.hsv2rgb(H.Value(),S.Value(),V.Value());}], | |||
{fontSize:32}); | |||
</jsxgraph> | </jsxgraph> | ||
===The underlying JavaScript code=== | |||
<source lang="javascript"> | |||
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-4,4,4,-4], keepaspectratio:true}); | |||
var H = brd.create('slider',[[-3,3.5],[2,3.5],[0,1,360]], {name:'H',fillColor:'black',strokeColor:'black'}); | |||
var S = brd.create('slider',[[-3,3],[2,3],[0,1,1]], {name:'S',fillColor:'black',strokeColor:'black'}); | |||
var V = brd.create('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 c1 = brd.create('curve',[ | |||
function(t){return r1*Math.sin(t)+r2*Math.sin(lambda*t);}, | |||
function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t)-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,gradient:'radial',gradientsecondcolor:'white'}); | |||
var c2 = brd.create('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()); }, | |||
strokewidth:3, | |||
strokeColor:'black',gradient:'linear'}); | |||
var t = brd.create('text', [2,-3, function(){ return 'RGB='+JXG.hsv2rgb(H.Value(),S.Value(),V.Value());}], | |||
{fontSize:32}); | |||
</source> | |||
===External links=== | |||
* [http://en.wikipedia.org/wiki/Color_wheel http://en.wikipedia.org/wiki/Color_wheel] | |||
[[Category:Examples]] |
Latest revision as of 07:29, 9 June 2011
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
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-4,4,4,-4], keepaspectratio:true});
var H = brd.create('slider',[[-3,3.5],[2,3.5],[0,1,360]], {name:'H',fillColor:'black',strokeColor:'black'});
var S = brd.create('slider',[[-3,3],[2,3],[0,1,1]], {name:'S',fillColor:'black',strokeColor:'black'});
var V = brd.create('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 c1 = brd.create('curve',[
function(t){return r1*Math.sin(t)+r2*Math.sin(lambda*t);},
function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t)-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,gradient:'radial',gradientsecondcolor:'white'});
var c2 = brd.create('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()); },
strokewidth:3,
strokeColor:'black',gradient:'linear'});
var t = brd.create('text', [2,-3, function(){ return 'RGB='+JXG.hsv2rgb(H.Value(),S.Value(),V.Value());}],
{fontSize:32});