meta data for this page
  •  

Differences

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

Link to this comparison view

Next revision 		Previous revision
en:design_guide_color [2020/11/28 02:59]
JSCAD Editor created 		en:design_guide_color [2021/05/29 08:48] (current)
JSCAD Editor
Line 1: Line 1:
 ==== Color ==== ==== Color ====
  
-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, i.e. one with color.
  
-//NOTE: 2D shapes cannot exhibit colors today. This is a known issue.//+Colors are not only important for visual rendering but also controlling the selection of filaments during 3D printing. Therefore, colors should be applied as the last step in designs to insure proper printing.
  
 <code javascript> <code javascript>
-let a = color("Red",sphere()) +const myshape = colorize([1, 0, 0], sphere()) // RGB red 
-let b = color([1, 0.5, 0.3],sphere()) +const myshape = colorize([1, 0.5, 0.3], sphere()) // color 
-let c = color([1, 0.5, 0.3, 0.6],sphere(10),cube(20)) +const myshape = colorize([1, 0.5, 0.3, 0.6], sphere()) // color plus alpha transparency
-</code> +
- +
-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// +
- +
-<code javascript> +
-let a = object.setColor(css2rgb('dodgerblue')) +
-let b = sphere().setColor(1, 0.5, 0.3) +
-let c = sphere().setColor([1, 0.5, 0.3, 0.7])+
 </code> </code>
  
Line 25: Line 15:
 === Color Space Conversion === === Color Space Conversion ===
  
-Following functions to convert between color spaces.+There are several functions to convert between color spaces, including color names.
  
 <code javascript> <code javascript>
-let rgb = css2rgb('navy') +const wildcylinder = colorize(colorNameToRgb('fuchsia'), cylinder())
-let rgb = html2rgb('#RRGGBB')+
  
-let rgb = hsl2rgb(h,s,l) // or hsl2rgb([h,s,l]) +const bluesphere = colorize(hexToRgb('#000080'), sphere()) // navy blue
-let rgb = hsv2rgb(h,s,v) // or hsv2rgb([h,s,v])+
  
-let hsv = rgb2hsv(r,g,b) // or rgb2hsv([r,g,b]) +const mysphere = colorize(hslToRgb([0.9166666666666666, 1, 0.5]), sphere()) 
-let hsl = rgb2hsl(r,g,b) // or rgb2hsl([r,g,b]) + 
-let html = rgb2html(r,g,b)+const mysphere = colorize(hsvToRgb([0.9166666666666666, 1, 1]), sphere())
 </code> </code>
  
 whereas whereas
-  * r,g,b (red, green, blue) +  * r,g,b (red, green, blue) of [[https://en.wikipedia.org/wiki/RGB_color_model | RGB color model]] 
-  * h,s,l (hue, saturation, lightness) +  * h,s,l (hue, saturation, lightness) of [[https://en.wikipedia.org/wiki/HSL_and_HSV | HSL color model]] 
-  * h,s,v (hue, saturation, value)+  * h,s,v (hue, saturation, value) of [[https://en.wikipedia.org/wiki/HSL_and_HSV | HSV color model]] 
 + 
 +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'.