Difference between revisions of "The HSV color scheme"

From JSXGraph Wiki
Jump to navigationJump to search
 
(15 intermediate revisions by one other user not shown)
Line 5: Line 5:
 
Here, you can experiment with these values.
 
Here, you can experiment with these values.
 
<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;
        var r2 = 1/4.75;
+
var r2 = 1/4.75;
        var lambda = 8;
+
var lambda = 8;
        var phi = 0;
+
 
var c = brd.createElement('curve',[
+
var c1 = brd.create('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);},
           function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t+phi)-0.5;},
+
           function(t){return r1*Math.cos(t)+r2*Math.cos(lambda*t)-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()); },
 
           highlightFillcolor: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});
+
           strokeColor:'black',strokeWidth:3,gradient:'radial',gradientsecondcolor:'white'});
         
+
 
        var p = brd.createElement('point',[0,-0.5],{visible:false});
+
var c2 = brd.create('curve',[
        var ci = brd.createElement('circle',[p,1],  
+
          function(t){return Math.sin(t);},
                {fillcolor:function(){ return JXG.hsv2rgb(180+H.Value(),S.Value(),V.Value()); },
+
          function(t){return Math.cos(t)-0.2;},
                highlightFillcolor:function(){ return JXG.hsv2rgb(180+H.Value(),S.Value(),V.Value()); },
+
          0, 2*Math.PI],
                strokewidth:3,
+
          {fillcolor:function(){ return JXG.hsv2rgb(180+H.Value(),S.Value(),V.Value()); },
                strokeColor:'black'
+
          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===
 
===The underlying JavaScript code===
<source lang="xml">
+
<source lang="javascript">
<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:[-2,4,8,-4]});
+
var H = brd.create('slider',[[-3,3.5],[2,3.5],[0,1,360]], {name:'H',fillColor:'black',strokeColor:'black'});
var H = brd.createElement('slider',[[0,3.5],[5,3.5],[0,1,360]], {name:'H'});
+
var S = brd.create('slider',[[-3,3],[2,3],[0,1,1]], {name:'S',fillColor:'black',strokeColor:'black'});
var S = brd.createElement('slider',[[0,3],[5,3],[0,1,1]], {name:'S'});
+
var V = brd.create('slider',[[-3,2.5],[2,2.5],[0,1,1]], {name:'V',fillColor:'black',strokeColor:'black'});
var V = brd.createElement('slider',[[0,2.5],[5,2.5],[0,1,1]], {name:'V'});
+
       
var rct = brd.createElement('curve',[[-1,-1,5,5,-1],[-2,2,2,-2,-2]],
+
var r1 = 2;
                {strokeColor:'black',  
+
var r2 = 1/4.75;
                  fillcolor:function(){ return JXG.hsv2rgb(H.Value(),S.Value(),V.Value()); }
+
var lambda = 8;
                }
+
 
          );
+
var c1 = brd.create('curve',[
</jsxgraph>
+
          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>
 
</source>
  

Latest revision as of 09: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});

External links