User Tools


Differences

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

Link to this comparison view

Next revision
Previous revision
design_guide_color [2018/03/08 13:33]
z3dev created
design_guide_color [2018/06/12 14:27] (current)
z3dev
Line 1: Line 1:
 ==== Color ==== ==== Color ====
  
-2D and 3D shapes ​can exhibit different colors. And just like the other transformations,​ adding color to a shape produces a new shape, one with color.+Shapes ​can exhibit different colors. And just like the other transformations,​ adding color to a shape produces a new shape, one with color. 
 + 
 +//NOTE: 2D shapes cannot exhibit colors today. This is a known issue.//
  
 <code javascript>​ <code javascript>​
-color([r,g,b], object, object2 ...); // for example, color([1,​1,​0],sphere()); +let a = color("​Red"​,​sphere()) 
-color([r,g,b], array); +let color([10.50.3],​sphere()) 
-color([r,g,b,a], object, object2 ​...); +let c = color([10.50.3, 0.6],sphere(10),cube(20))
-color([r,​g,​b,​a], array); +
-color(name, object, object2 ...); // for example, color('​red'​,sphere()); +
-color(nameaobject, object2 ​...); // for example, color('​red'​,0.5, sphere()); +
-color(name, array)+
-color(name, a, array);+
 </​code>​ </​code>​
  
-Whereas ​the named colors 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'​.
  
-using CSG objects'​ built in methods (r, g, b must be between 0 and 1, not 0 and 255):+The CSG library functions can also be used. //NOTEDeprecated in the V2 API//
  
 <code javascript>​ <code javascript>​
-object.setColor([r,g,b])+let a = object.setColor(css2rgb('​dodgerblue'​)) 
-object.setColor([r,g,b,a]); +let = sphere().setColor(10.50.3
-object.setColor(r,g,b)+let c = sphere().setColor([10.50.30.7])
-object.setColor(r,g,b,a); +
-object.setColor(css2rgb('​dodgerblue'​));+
 </​code>​ </​code>​
  
-Examples: +//Note: There are known issues with transparencyand depending on the order of colorsobjects may not seem transparentTry different '​alpha'​ values or colors.//
-<code javascript>​ +
-color([1,​0.5,​0.3],​sphere(1)); ​                     ​// openscad like +
-color([1,0.5,0.3],​sphere(1),​cube(2));​ +
-color("​Red",​sphere(),​cube().translate([2,​0,​0])); ​  // named color (case-insensitive)+
  
-sphere().setColor(1,​0.5,​0.3); ​                     // built in methods +=== Color Space Conversion ===
-sphere().setColor([1,​0.5,​0.3]); ​   +
-</​code>​+
  
-See the [https://​www.w3.org/​TR/​css3-color/#svg-color Extended Color Keywords] for all available colors. +Following functions to convert between ​color spaces.
- +
-Code excerpt: +
-<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 88: 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.