meta data for this page
  •  

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
en:design_guide_color [2020/12/01 00:54]
JSCAD Editor 		en:design_guide_color [2021/05/29 08:48] (current)
JSCAD Editor
Line 2: Line 2:
  
 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. 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.
 +
 +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 myshape = color([1, 0, 0], sphere()) // red +const myshape = colorize([1, 0, 0], sphere()) // RGB red 
-let myshape = color([1, 0.5, 0.3], sphere()) // ?? +const myshape = colorize([1, 0.5, 0.3], sphere()) // color 
-let myshape = color([1, 0.5, 0.3, 0.6], sphere(10), cube(20)) // color plus alpha transparency+const myshape = colorize([1, 0.5, 0.3, 0.6], sphere()) // color plus alpha transparency
 </code> </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'. 
  
 //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.// //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.//
Line 15: 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'.