Differences
This shows you the differences between two versions of the page.
| 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 b = color([1, 0.5, 0.3],sphere()) |
| - | color([r,g,b,a], object, object2 ...); | + | let c = color([1, 0.5, 0.3, 0.6],sphere(10),cube(20)) |
| - | color([r,g,b,a], array); | + | |
| - | color(name, object, object2 ...); // for example, color('red',sphere()); | + | |
| - | color(name, a, object, 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. //NOTE: Deprecated 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 b = sphere().setColor(1, 0.5, 0.3) |
| - | object.setColor(r,g,b); | + | let c = sphere().setColor([1, 0.5, 0.3, 0.7]) |
| - | object.setColor(r,g,b,a); | + | |
| - | object.setColor(css2rgb('dodgerblue')); | + | |
| </code> | </code> | ||
| - | Examples: | + | //Note: There are known issues with transparency, and depending on the order of colors, objects may not seem transparent. Try 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<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<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 Limitations, e.g. and depending on the order of colors, you 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. | ||
