The HSV color scheme: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 6: Line 6:
<jsxgraph width=600 height=500>
<jsxgraph width=600 height=500>
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-4,4,4,-4], keepaspectratio:true});
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 H = brd.create('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 S = brd.create('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 V = brd.create('slider',[[-3,2.5],[2,2.5],[0,1,1]], {name:'V',fillColor:'black',strokeColor:'black'});
          
          
var r1 = 2;
var r1 = 2;
Line 14: Line 14:
var lambda = 8;
var lambda = 8;


var c1 = brd.createElement('curve',[
var c1 = brd.create('curve',[
           function(t){return r1*Math.sin(t)+r2*Math.sin(lambda*t);},
           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;},
           function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t)-0.2;},
Line 22: Line 22:
           strokeColor:'black',strokeWidth:3,gradient:'radial',gradientsecondcolor:'white'});
           strokeColor:'black',strokeWidth:3,gradient:'radial',gradientsecondcolor:'white'});


var c2 = brd.createElement('curve',[
var c2 = brd.create('curve',[
           function(t){return Math.sin(t);},
           function(t){return Math.sin(t);},
           function(t){return Math.cos(t)-0.2;},
           function(t){return Math.cos(t)-0.2;},
Line 36: Line 36:
<jsxgraph width=600 height=500>
<jsxgraph width=600 height=500>
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-4,4,4,-4], keepaspectratio:true});
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 H = brd.create('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 S = brd.create('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 V = brd.create('slider',[[-3,2.5],[2,2.5],[0,1,1]], {name:'V',fillColor:'black',strokeColor:'black'});
          
          
var r1 = 2;
var r1 = 2;
Line 44: Line 44:
var lambda = 8;
var lambda = 8;


var c1 = brd.createElement('curve',[
var c1 = brd.create('curve',[
           function(t){return r1*Math.sin(t)+r2*Math.sin(lambda*t);},
           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;},
           function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t)-0.2;},
Line 52: Line 52:
           strokeColor:'black',strokeWidth:3,gradient:'radial',gradientsecondcolor:'white'});
           strokeColor:'black',strokeWidth:3,gradient:'radial',gradientsecondcolor:'white'});


var c2 = brd.createElement('curve',[
var c2 = brd.create('curve',[
           function(t){return Math.sin(t);},
           function(t){return Math.sin(t);},
           function(t){return Math.cos(t)-0.2;},
           function(t){return Math.cos(t)-0.2;},

Revision as of 07:52, 22 July 2010

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.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'});
</jsxgraph>

External links