HSBA32: Difference between revisions

From QB64 Phoenix Edition Wiki
Jump to navigation Jump to search
(Created page with "{{DISPLAYTITLE:_HSBA32}} The '''_HSBA32''' function specifies a color using the [https://www.learnui.design/blog/the-hsb-color-system-practicioners-primer.html HSB colorspace] and returns the 32-bit ''ARGB'' color value representing the color with the specified hue, saturation, brightness and opacity level (alpha channel). {{PageSyntax}} : {{Parameter|color32value~&}} = _HSBA32({{Parameter|hue#}}, {{Parameter|saturation#}}, {{Parameter|brightness#}}, {{Parameter|al...")
 
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 12: Line 12:
** Mixed colors can be build by specifying values between the 6 base color angles.
** Mixed colors can be build by specifying values between the 6 base color angles.
* {{Parameter|saturation#}} specifies the saturation [[DOUBLE]] of the desired color from 0 to 100 percent.
* {{Parameter|saturation#}} specifies the saturation [[DOUBLE]] of the desired color from 0 to 100 percent.
** 100% is the richest color possible, as closer you come to 0%, as more the color is fading ending at dull gray.
** 100% is the richest color possible, as closer the value comes to 0% as more faded is the color, ending at dull gray.
** The intensity of the gray (i.e. black >> darkgray >> midgray >> lightgray >> white) depends on the {{Parameter|brightness#}} value.
** The intensity of the gray (i.e. black >> darkgray >> midgray >> lightgray >> white) depends on the given {{Parameter|brightness#}} value.
* {{Parameter|brightness#}} specifies the brightness [[DOUBLE]] of the desired color from 0 to 100 percent.
* {{Parameter|brightness#}} specifies the brightness [[DOUBLE]] of the desired color from 0 to 100 percent.
** 100% is the brightest (highest intensity), as closer you come to 0%, as darker is the color always ending in black regardless of the given {{Parameter|hue#}} and {{Parameter|saturation#}}.
** 100% is the brightest (highest intensity), as closer the value comes to 0% as darker is the color, always ending in black regardless of the given {{Parameter|hue#}} and {{Parameter|saturation#}}.
* {{Parameter|alpha#}} specifies the opacity [[DOUBLE]] of the desired color from 0 to 100 percent.
* {{Parameter|alpha#}} specifies the opacity [[DOUBLE]] of the desired color from 0 to 100 percent.
** 100% results into a fully opaque color, 0% is a fully transparent color.
** 100% results into a fully opaque color, 0% is a fully transparent color.
Line 28: Line 28:
* You may use [[_HSB32]] if you don't need control over the alpha channel, but just want opaque colors.
* You may use [[_HSB32]] if you don't need control over the alpha channel, but just want opaque colors.
* When ([[_UNSIGNED]]) [[LONG]] values are [[PUT]] to file, the ''ARGB'' values become ''BGRA''. Use [[LEFT$]]([[MKL$]]({{Parameter|color32value~&}}), 3) to place 3 colors.
* When ([[_UNSIGNED]]) [[LONG]] values are [[PUT]] to file, the ''ARGB'' values become ''BGRA''. Use [[LEFT$]]([[MKL$]]({{Parameter|color32value~&}}), 3) to place 3 colors.
;Naming differences
:* The HSB (B=Brightness) colorspace is also known as HSV (V=Value) and sometimes even called HSI (I=Intensity), but that's all just different names for the same thing.
:* However, this function is not suitable for the HSL (L=Lightness) colorspace, which is widely used in the Web/CSS.
;Precision drawbacks
:* When converting between colorspaces, rounding errors can occur.
:* While the HSB colorspace has virtually infinite precision using floating point values, RGB is limited to 8-bit integers (0-255) only, which can lead to quantization errors.
:* In fact, not all colors in HSB can be accurately represented in RGB, but the opposite is possible.
:* It can be guaranteed, that the [[_HUE32]], [[_SATURATION32]] and [[_BRIGHTNESS32]] values retrieved from any arbitrary RGB color will reproduce the exact same RGB color when passed back through [[_HSB32]].




Line 80: Line 88:
                 {{Cl|END IF}}
                 {{Cl|END IF}}
             {{Cl|ELSEIF}} rad# = {{Text|200|#F580B1}} {{Cl|_ANDALSO}} (hei# = {{Text|0|#F580B1}} {{Cl|OR (boolean)|OR}} hei# = {{Text|200|#F580B1}}) {{Cl|THEN}}
             {{Cl|ELSEIF}} rad# = {{Text|200|#F580B1}} {{Cl|_ANDALSO}} (hei# = {{Text|0|#F580B1}} {{Cl|OR (boolean)|OR}} hei# = {{Text|200|#F580B1}}) {{Cl|THEN}}
                 {{Cl|PSET}} ({{Text|330|#F580B1}} + x%, -z% + {{Text|340|#F580B1}}), {{Text|&HFFFFFFFF|#F580B1}}
                 {{Cl|PSET}} ({{Text|330|#F580B1}} + x%, -z% + {{Text|340|#F580B1}}), {{Text|&HFFFFFFFF|#F580B1}}
                 {{Cl|IF}} hei# = {{Text|0|#F580B1}} {{Cl|THEN}}
                 {{Cl|IF}} hei# = {{Text|0|#F580B1}} {{Cl|THEN}}
                     {{Cl|IF}} ang# = {{Text|5|#F580B1}} {{Cl|THEN}} bspx% = {{Text|330|#F580B1}} + x%: bspy% = -z% + {{Text|340|#F580B1}}
                     {{Cl|IF}} ang# = {{Text|5|#F580B1}} {{Cl|THEN}} bspx% = {{Text|330|#F580B1}} + x%: bspy% = -z% + {{Text|340|#F580B1}}
Line 92: Line 100:
     {{Cl|NEXT}} ang#
     {{Cl|NEXT}} ang#
{{Cl|NEXT}} hei#
{{Cl|NEXT}} hei#
{{Cl|LINE}} (bspx%, bspy%)-(bmpx%, bmpy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (bspx%, bspy%)-(bmpx%, bmpy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (bmpx%, bmpy%)-(bepx%, bepy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (bmpx%, bmpy%)-(bepx%, bepy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (tspx%, tspy%)-(tmpx%, tmpy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (tspx%, tspy%)-(tmpx%, tmpy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (tmpx%, tmpy%)-(tepx%, tepy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (tmpx%, tmpy%)-(tepx%, tepy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (bspx%, bspy%)-(tspx%, tspy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (bspx%, bspy%)-(tspx%, tspy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (bmpx%, bmpy%)-(tmpx%, tmpy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (bmpx%, bmpy%)-(tmpx%, tmpy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (bepx%, bepy%)-(tepx%, tepy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|LINE}} (bepx%, bepy%)-(tepx%, tepy%), {{Text|&HFFFFFFFF|#F580B1}}
{{Cl|END}}
{{Cl|END}}


Line 116: Line 124:
* [[HEX$ 32 Bit Values]]
* [[HEX$ 32 Bit Values]]
* [[SaveImage SUB]]
* [[SaveImage SUB]]
* [http://www.w3schools.com/html/html_colornames.asp Hexadecimal Color Values]
* [https://www.w3schools.com/colors/colors_names.asp Hexadecimal Color Values]




{{PageNavigation}}
{{PageNavigation}}

Latest revision as of 18:47, 30 January 2025

The _HSBA32 function specifies a color using the HSB colorspace and returns the 32-bit ARGB color value representing the color with the specified hue, saturation, brightness and opacity level (alpha channel).


Syntax

color32value~& = _HSBA32(hue#, saturation#, brightness#, alpha#)


Parameters

  • hue# specifies the hue DOUBLE of the desired color from 0 to 360 degrees.
    • The color wheel starts with red(0), turns to yellow(60), green(120), cyan(180), blue(240), magenta(300) to red(360) again.
    • Mixed colors can be build by specifying values between the 6 base color angles.
  • saturation# specifies the saturation DOUBLE of the desired color from 0 to 100 percent.
    • 100% is the richest color possible, as closer the value comes to 0% as more faded is the color, ending at dull gray.
    • The intensity of the gray (i.e. black >> darkgray >> midgray >> lightgray >> white) depends on the given brightness# value.
  • brightness# specifies the brightness DOUBLE of the desired color from 0 to 100 percent.
    • 100% is the brightest (highest intensity), as closer the value comes to 0% as darker is the color, always ending in black regardless of the given hue# and saturation#.
  • alpha# specifies the opacity DOUBLE of the desired color from 0 to 100 percent.
    • 100% results into a fully opaque color, 0% is a fully transparent color.
    • Values in between that range determine the degree to which the new color will intermix (_BLEND) with existing screen colors.


Description

  • The value returned is always a 32-bit _UNSIGNED LONG ARGB color value, as is the POINT value.
  • Return variable types must be _UNSIGNED LONG or LONG, otherwise the resulting color may lose the _BLUE value.
  • Parameter values outside the allowed ranges are clipped.
  • This function returns _UNSIGNED LONG 32-bit hexadecimal values from &H00000000 to &HFFFFFFFF.
  • You may use _HSB32 if you don't need control over the alpha channel, but just want opaque colors.
  • When (_UNSIGNED) LONG values are PUT to file, the ARGB values become BGRA. Use LEFT$(MKL$(color32value~&), 3) to place 3 colors.
Naming differences
  • The HSB (B=Brightness) colorspace is also known as HSV (V=Value) and sometimes even called HSI (I=Intensity), but that's all just different names for the same thing.
  • However, this function is not suitable for the HSL (L=Lightness) colorspace, which is widely used in the Web/CSS.
Precision drawbacks
  • When converting between colorspaces, rounding errors can occur.
  • While the HSB colorspace has virtually infinite precision using floating point values, RGB is limited to 8-bit integers (0-255) only, which can lead to quantization errors.
  • In fact, not all colors in HSB can be accurately represented in RGB, but the opposite is possible.
  • It can be guaranteed, that the _HUE32, _SATURATION32 and _BRIGHTNESS32 values retrieved from any arbitrary RGB color will reproduce the exact same RGB color when passed back through _HSB32.


Availability


Examples

Example 1
Drawing a color wheel by looping through hue and saturation.
SCREEN _NEWIMAGE(640, 480, 32)

FOR ang# = 0 TO 360 STEP 0.25
    FOR rad# = 0 TO 200 STEP 0.25
        x% = rad# * COS(_D2R(ang#))
        y% = rad# * SIN(_D2R(ang#))
        PSET (320 + x%, 240 - y%), _HSBA32(ang#, rad# / 2, 100, 100)
    NEXT rad#
NEXT ang#

END

Example 2
Drawing a 3D model of the HSB colorspace with a cut to see inside.
SCREEN _NEWIMAGE(640, 480, 32)

FOR hei# = 0 TO 200 STEP 5
    FOR ang# = 5 TO 285 STEP 0.25
        FOR rad# = 0 TO 200 STEP 1
            x% = rad# * COS(_D2R(ang#))
            y% = rad# * SIN(_D2R(ang#))
            z% = hei#
            XYfrom3D x%, y%, z%
            PSET (330 + x%, -z% + 340), _HSBA32(ang#, rad# / 2, hei# / 2, 100)
            IF rad# = 0 _ANDALSO (hei# = 0 OR hei# = 200) THEN
                IF hei# = 0 THEN
                    IF ang# = 5 THEN bmpx% = 330 + x%: bmpy% = -z% + 340
                ELSE
                    IF ang# = 5 THEN tmpx% = 330 + x%: tmpy% = -z% + 340
                END IF
            ELSEIF rad# = 200 _ANDALSO (hei# = 0 OR hei# = 200) THEN
                PSET (330 + x%, -z% + 340), &HFFFFFFFF
                IF hei# = 0 THEN
                    IF ang# = 5 THEN bspx% = 330 + x%: bspy% = -z% + 340
                    IF ang# = 285 THEN bepx% = 330 + x%: bepy% = -z% + 340
                ELSE
                    IF ang# = 5 THEN tspx% = 330 + x%: tspy% = -z% + 340
                    IF ang# = 285 THEN tepx% = 330 + x%: tepy% = -z% + 340
                END IF
            END IF
        NEXT rad#
    NEXT ang#
NEXT hei#
LINE (bspx%, bspy%)-(bmpx%, bmpy%), &HFFFFFFFF
LINE (bmpx%, bmpy%)-(bepx%, bepy%), &HFFFFFFFF
LINE (tspx%, tspy%)-(tmpx%, tmpy%), &HFFFFFFFF
LINE (tmpx%, tmpy%)-(tepx%, tepy%), &HFFFFFFFF
LINE (bspx%, bspy%)-(tspx%, tspy%), &HFFFFFFFF
LINE (bmpx%, bmpy%)-(tmpx%, tmpy%), &HFFFFFFFF
LINE (bepx%, bepy%)-(tepx%, tepy%), &HFFFFFFFF
END

SUB XYfrom3D (x%, y%, z%)
x% = (x% + (y% * .5))
z% = (z% + (y% * .5))
END SUB


See also



Navigation:
Main Page with Articles and Tutorials
Keyword Reference - Alphabetical
Keyword Reference - By usage
Report a broken link