User Tools


Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
design_guide_color [2018/03/21 02:11]
z3dev
design_guide_color [2018/06/12 14:27] (current)
z3dev
Line 6: Line 6:
  
 <code javascript>​ <code javascript>​
-color([1,​0.5,​0.3],​sphere()) +let a = color("​Red",​sphere()) 
-color([1,​0.5,​0.3],​sphere(10),​cube(20)) +let b = color([1, 0.5, 0.3],​sphere()) 
-color("​Red",​sphere(),​cube().translate([2,​0,​0]))+let c = color([1, 0.5, 0.3, 0.6],​sphere(10),​cube(20))
 </​code>​ </​code>​
  
-Color names are case-insensitive,​ e.g. '​RED'​ is the same as '​red'​.+See the [[https://​www.w3.org/​TR/​css3-color/#​svg-color | Extended ​Color Keywords]] for all available colors. Color keywords ​are case-insensitive,​ e.g. '​RED'​ is the same as '​red'​.
  
 The CSG library functions can also be used. //NOTE: Deprecated in the V2 API// The CSG library functions can also be used. //NOTE: Deprecated in the V2 API//
  
 <code javascript>​ <code javascript>​
-sphere().setColor(1,​0.5,​0.3) +let a = object.setColor(css2rgb('​dodgerblue'​)) 
-sphere().setColor([1,​0.5,​0.3,​0.7]) +let b = sphere().setColor(1,​ 0.5, 0.3) 
-object.setColor(css2rgb('​dodgerblue'​));​+let c = sphere().setColor([1,​ 0.5, 0.3, 0.7])
 </​code>​ </​code>​
  
-The CSG library functions use RGB values between 0 and 1, not 0 and 255.+//Note: There are known issues with transparency, ​and depending on the order of colorsobjects may not seem transparent. Try different '​alpha'​ values or colors.//
  
-See the [https://​www.w3.org/​TR/​css3-color/#​svg-color Extended ​Color Keywords] for all available colors.+=== Color Space Conversion ===
  
-Code excerpt: +Following functions to convert between ​color spaces.
-<code code> +
-o.push( ​color([1,​0,​0],​sphere()) ); +
-o.push( color([0,​1,​0],​cube()) ); +
-o.push( color([0,​0,​1],​cylinder()) );+
  
-o.push( color("​red",​sphere()) ); 
-o.push( color("​green",​ cube()) ); 
-o.push( color("​blue",​ cylinder()) ); 
- 
-for(var i=0; i&lt;1; i+=1/12) { 
-   ​o.push( cube().setColor(hsl2rgb(i,​1,​0.5)) ); 
-} 
-</​code>​ 
- 
-Code: 
 <code javascript>​ <code javascript>​
-function main() { +let rgb css2rgb('​navy'​
-   var o []; +let rgb = html2rgb('#​RRGGBB'​)
-   for(var i=0; i&lt;8; i++{ +
-      ​o.push(cylinder({r:​3,​h:​20}). +
-         ​setColor( +
-            hsl2rgb(i/​8,​1,​0.5). ​ // hsl to rgb, creating rainbow [r,g,b] +
-            concat(1/8+i/8     // and add to alpha to make it [r,g,b,a] +
-         ​).translate([(i-3)*7.5,​0,​0]) +
-      ); +
-   } +
-   ​o.push(color("​red",​cube(5)).translate([-4,​-10,​0]));​ +
-   ​o.push(color("​red",​0.5,​cube(5)).translate([4,​-10,​0]));​ +
-   ​return o; +
-+
-</​code>​+
  
-Note: There are some Transparency_Sorting|OpenGL Transparency Limitationse.g. and depending on the order of colorsyou might not see through otherwise partially transparent objects.+let rgb = hsl2rgb(h,s,l) // or hsl2rgb([h,​s,​l]) 
 +let rgb = hsv2rgb(h,​s,​v) // or hsv2rgb([h,​s,​v])
  
-=== Color Space Conversion === +let hsv rgb2hsv(r,g,b) // or rgb2hsv([r,g,b]) 
- +let hsl rgb2hsl(r,g,b) // or rgb2hsl([r,g,b]) 
-Following functions to convert between color spaces. +let html rgb2html(r,g,b)
-<code javascript>​ +
-var hsl = rgb2hsl(r,g,b)// or rgb2hsl([r,g,b]); +
-var rgb hsl2rgb(h,​s,​l);​ // or hsl2rgb([h,​s,​l]);​ +
-var hsv = rgb2hsv(r,g,b)// or rgb2hsv([r,g,b]); +
-var rgb hsv2rgb(h,s,v); // or hsv2rgb([h,​s,​v]);+
 </​code>​ </​code>​
  
Line 75: Line 44:
   * h,s,v (hue, saturation, value)   * h,s,v (hue, saturation, value)
  
-E.g. to create a rainbow, t = 0..1 and .setColor(hsl2rgb(t,​1,​0.5)) 
- 
-See the http://​openjscad.org/#​examples/​slices/​tor.jscad Tor (multi-color) for an example.