Procedural Graphic using GDI+

[UEZ]

I was inspired by a CSS example to create a procedural graphic without any shader or ray tracing technique.

Here the result using GDI+ only:

 

Blue Orb.au3

expandcollapse popup

;Inspired from https://codepen.io/bradleytaunt/details/VwvzKyb 
;Coded by UEZ build 2020-05-07

#include <GDIPlus.au3>
#include <GUIConstantsEx.au3>
#include <WindowsConstants.au3>

If @OSBuild < 7600 Then Exit MsgBox(BitOR($MB_TOPMOST, $MB_ICONERROR), "ERROR", "This demo requires GDIPlus v1.1", 10)

_GDIPlus_Startup()

Global Const $iW = 1200, $iH = 700, $iSize_globe = 450
Global Const $hGUI = GUICreate("GDI+ Procedural Gfx / Blue Orb v1.20 by UEZ", $iW, $iH, -1, -1, $WS_POPUP, $WS_EX_TOPMOST)

Global Const $hCanvas = _GDIPlus_GraphicsCreateFromHWND($hGUI)
Global Const $hImage = _GDIPlus_BitmapCreateFromScan0($iW, $iH)
Global Const $hGfx = _GDIPlus_ImageGetGraphicsContext($hImage)
_GDIPlus_GraphicsSetSmoothingMode($hGfx, $GDIP_SMOOTHINGMODE_ANTIALIAS8X8)
;~ _GDIPlus_GraphicsSetCompositingQuality($hGfx, $GDIP_COMPOSITINGQUALITYHIGHQUALITY)
_GDIPlus_GraphicsSetInterpolationMode($hGfx, $GDIP_INTERPOLATIONMODE_HIGHQUALITYBICUBIC)
_GDIPlus_GraphicsSetPixelOffsetMode($hGfx, $GDIP_PIXELOFFSETMODE_HALF)

;draw background
Global Const $hBrush_bg = _GDIPlus_LineBrushCreate($iW / 2, 0, $iW / 2, $iH / 2, 0xFF1E88E5, 0xFF1565C0, 2)
_GDIPlus_LineBrushSetSigmaBlend ($hBrush_bg, 0.95, 1) ;create blurry edge
_GDIPlus_GraphicsFillRect($hGfx, 0, 0, $iW, $iH, $hBrush_bg)

;draw blurred text
Global Const $hImage_text = _GDIPlus_BitmapCreateFromScan0($iW, $iH / 2)
Global Const $hGfx_text = _GDIPlus_ImageGetGraphicsContext($hImage_text)
Global Const $hPath_text = _GDIPlus_PathCreate()
Global Const $hFamily = _GDIPlus_FontFamilyCreate("Impact")
Global Const $hStringFormat = _GDIPlus_StringFormatCreate()
Global Const $hBrush_txt = _GDIPlus_LineBrushCreate($iW / 2, 0, $iW / 2, $iH / 2, 0xE0FFFFFF, 0xA01A237E) ;_GDIPlus_BrushCreateSolid(0xF02E86FB)
_GDIPlus_LineBrushSetSigmaBlend($hBrush_txt, 0.66, 1)
Global Const $hPen_txt = _GDIPlus_PenCreate(0x801A237E, 1)
_GDIPlus_StringFormatSetAlign($hStringFormat, 1)
_GDIPlus_StringFormatSetLineAlign($hStringFormat, 1)
_GDIPlus_GraphicsSetSmoothingMode($hGfx_text, $GDIP_SMOOTHINGMODE_ANTIALIAS8X8)
_GDIPlus_GraphicsSetTextRenderingHint($hGfx_text, $GDIP_TextRenderingHintAntialias)
_GDIPlus_GraphicsSetPixelOffsetMode($hGfx_text, $GDIP_PIXELOFFSETMODE_HALF)
_GDIPlus_GraphicsSetCompositingQuality($hGfx_text, $GDIP_COMPOSITINGQUALITYHIGHQUALITY)
Global $tLayout = _GDIPlus_RectFCreate()
$tLayout.width = $iW
$tLayout.height = $iH / 2
$tLayout.y = -$iH * 0.05
_GDIPlus_PathAddString($hPath_text, "AutoIt rulez!", $tLayout, $hFamily, 0, $iW / 8, $hStringFormat)
_GDIPlus_GraphicsFillPath($hGfx_text, $hPath_text, $hBrush_txt)
_GDIPlus_GraphicsDrawPath($hGfx_text, $hPath_text, $hPen_txt)
Global Const $hEffect_blur_text = _GDIPlus_EffectCreateBlur(20)
_GDIPlus_BitmapApplyEffect($hImage_text, $hEffect_blur_text)
_GDIPlus_GraphicsDrawImageRect($hGfx, $hImage_text, 0, 0, $iW, $iH / 2)

;draw shadow of the text
Global Const $hBrush_txt_shadow = _GDIPlus_BrushCreateSolid(0x40000000)
_GDIPlus_GraphicsClear($hGfx_text, 0)
_GDIPlus_PathReset($hPath_text)
$tLayout.width = $iW
$tLayout.height = $iH / 2
$tLayout.y = 0
_GDIPlus_PathAddString($hPath_text, "AutoIt rulez!", $tLayout, $hFamily, 0, $iW / 8, $hStringFormat)
_GDIPlus_GraphicsFillPath($hGfx_text, $hPath_text, $hBrush_txt_shadow)
Global Const $hEffect_blur_text_shadow = _GDIPlus_EffectCreateBlur(60)
_GDIPlus_BitmapApplyEffect($hImage_text, $hEffect_blur_text_shadow)
_GDIPlus_GraphicsDrawImageRect($hGfx, $hImage_text, 0, $iH * 0.55, $iW, $iH / 8)

;draw shadow
Global Const $iW_shadow1 = $iSize_globe * 0.85, $iH_shadow1 = $iSize_globe * 0.1, $iW_shadow2 = $iSize_globe * 0.60, _
        $iW_shadow_Img = $iW_shadow1 * 2, $iH_shadowImg = $iH_shadow1 * 4
Global Const $hImage_shadow = _GDIPlus_BitmapCreateFromScan0($iW_shadow_Img, $iH_shadowImg)
Global Const $hGfx_shadow = _GDIPlus_ImageGetGraphicsContext($hImage_shadow)
_GDIPlus_GraphicsSetSmoothingMode($hGfx_shadow, $GDIP_SMOOTHINGMODE_ANTIALIAS8X8)
Global Const $hBrush_shadow = _GDIPlus_BrushCreateSolid(0x66000000)
_GDIPlus_GraphicsFillEllipse($hGfx_shadow, ($iW_shadow_Img - $iW_shadow1) / 2, ($iH_shadowImg / 4 + $iH_shadow1), $iW_shadow1, $iH_shadow1, $hBrush_shadow)
_GDIPlus_BrushSetSolidColor($hBrush_shadow, 0xB3000000)
_GDIPlus_GraphicsFillEllipse($hGfx_shadow, ($iW_shadow_Img - $iW_shadow2) / 2, ($iH_shadowImg / 4 + $iH_shadow1), $iW_shadow2, $iH_shadow1, $hBrush_shadow)
Global Const $hEffect_blur_shadow = _GDIPlus_EffectCreateBlur(32)
_GDIPlus_BitmapApplyEffect($hImage_shadow, $hEffect_blur_shadow)
_GDIPlus_GraphicsDrawImageRect($hGfx, $hImage_shadow, ($iW - $iW_shadow_Img) / 2, $iH / 2 + $iH_shadow1 * 2.20, $iW_shadow_Img, $iH_shadowImg)

;draw globe
Global Const $hPath_globe = _GDIPlus_PathCreate()
_GDIPlus_PathAddEllipse($hPath_globe, ($iW - $iSize_globe) / 2, ($iH - $iSize_globe) / 2, $iSize_globe, $iSize_globe)
Global Const $hLBrush_globe1 = _GDIPlus_LineBrushCreate($iW / 2, ($iH - $iSize_globe) / 2, $iW / 2, ($iH + $iSize_globe) / 2, 0, 0, 1)
Global $aInterpolations[5][2]
$aInterpolations[0][0] = 4
$aInterpolations[1][0] = 0xFFFFFFFF
$aInterpolations[1][1] = 0
$aInterpolations[2][0] = 0xFFEEEEEE
$aInterpolations[2][1] = 0.10
$aInterpolations[3][0] = 0xFF2E86FB
$aInterpolations[3][1] = 0.50
$aInterpolations[4][0] = 0xFF1A237E
$aInterpolations[4][1] = 1.0
_GDIPlus_LineBrushSetPresetBlend($hLBrush_globe1, $aInterpolations)
_GDIPlus_GraphicsFillPath($hGfx, $hPath_globe, $hLBrush_globe1)
Global Const $iSize_globe2 = $iSize_globe * 0.85, $iSize_globe2_Img = $iSize_globe2 * 1.5
Global Const $hImage_globe2 = _GDIPlus_BitmapCreateFromScan0($iSize_globe2_Img, $iSize_globe2_Img)
Global Const $hGfx_globe2 = _GDIPlus_ImageGetGraphicsContext($hImage_globe2)
Global Const $hBrush_globe2 = _GDIPlus_BrushCreateSolid(0x7F000000)
;draw shadow and blur it
Global Const $px = ($iSize_globe2_Img - $iSize_globe2) / 2, $py = ($iSize_globe2_Img - $iSize_globe2) / 2
_GDIPlus_GraphicsFillEllipse($hGfx_globe2, $px, $py + ($iSize_globe - $iSize_globe2) * 0.25, $iSize_globe2, $iSize_globe2, $hBrush_globe2)
Global Const $hEffect_blur_shadow2 = _GDIPlus_EffectCreateBlur(15)
_GDIPlus_BitmapApplyEffect($hImage_globe2, $hEffect_blur_shadow2)
;draw 2nd smaller globe and blur it, too
Global Const $hLBrush_globe2 = _GDIPlus_LineBrushCreate($iW / 2, $py, $iW / 2, $py + $iSize_globe2, 0, 0)
Dim $aInterpolations[4][2]
$aInterpolations[0][0] = 3
$aInterpolations[1][0] = 0xFFFFFFFF
$aInterpolations[1][1] = 0
$aInterpolations[2][0] = 0xFF2E86FB
$aInterpolations[2][1] = 0.60
$aInterpolations[3][0] = 0xFF283593
$aInterpolations[3][1] = 1.0
_GDIPlus_LineBrushSetPresetBlend($hLBrush_globe2, $aInterpolations)
_GDIPlus_GraphicsFillEllipse($hGfx_globe2, $px, $py, $iSize_globe2, $iSize_globe2, $hLBrush_globe2)
Global Const $hImage_globe2_blur = _Blur($hImage_globe2, $iSize_globe, $iSize_globe) ;windows gdi+ blur doesn't work properly
_GDIPlus_GraphicsDrawImageRect($hGfx, $hImage_globe2_blur, ($iW - $iSize_globe2_Img) / 2 - ($iSize_globe - $iSize_globe2) / 8, ($iH - $iSize_globe2_Img) / 2, $iSize_globe2_Img, $iSize_globe2_Img)
GUISetState()

_GDIPlus_GraphicsDrawImageRect($hCanvas, $hImage, 0, 0, $iW, $iH)
;~ _GDIPlus_ImageSaveToFile($hImage, @ScriptDir & "\Blue Orb v1.20.png")

;clean-up ressources
_GDIPlus_FontFamilyDispose($hFamily)
_GDIPlus_StringFormatDispose($hStringFormat)
_GDIPlus_EffectDispose($hEffect_blur_text)
_GDIPlus_EffectDispose($hEffect_blur_text_shadow)
_GDIPlus_EffectDispose($hEffect_blur_shadow)
_GDIPlus_EffectDispose($hEffect_blur_shadow2)
_GDIPlus_PathDispose($hPath_text)
_GDIPlus_PathDispose($hPath_globe)
_GDIPlus_PenDispose($hPen_txt)
_GDIPlus_BrushDispose($hBrush_txt)
_GDIPlus_BrushDispose($hBrush_txt_shadow)
_GDIPlus_BrushDispose($hBrush_bg)
_GDIPlus_BrushDispose($hLBrush_globe1)
_GDIPlus_BrushDispose($hLBrush_globe2)
_GDIPlus_BrushDispose($hBrush_globe2)
_GDIPlus_ImageDispose($hImage)
_GDIPlus_ImageDispose($hImage_text)
_GDIPlus_ImageDispose($hImage_shadow)
_GDIPlus_ImageDispose($hImage_globe2)
_GDIPlus_ImageDispose($hImage_globe2_blur)
_GDIPlus_GraphicsDispose($hCanvas)
_GDIPlus_GraphicsDispose($hGfx_text)
_GDIPlus_GraphicsDispose($hGfx_shadow)
_GDIPlus_GraphicsDispose($hGfx_globe2)
_GDIPlus_Shutdown()

Do
Until GUIGetMsg() = $GUI_EVENT_CLOSE

GUIDelete($hGUI)
Exit

Func _Blur($hBitmap, $iW, $iH, $fScale = 0.0525, $dx1 = 0, $dy1 = 0, $dx2 = 0, $dy2 = 0, $qual = 6) ; by eukalyptus
    Local $hBmpSmall = _GDIPlus_BitmapCreateFromScan0($iW, $iH)
    Local $hGfxSmall = _GDIPlus_ImageGetGraphicsContext($hBmpSmall)
    _GDIPlus_GraphicsSetPixelOffsetMode($hGfxSmall, $GDIP_PIXELOFFSETMODE_HALF)
    Local $hBmpBig = _GDIPlus_BitmapCreateFromScan0($iW, $iH)
    Local $hGfxBig = _GDIPlus_ImageGetGraphicsContext($hBmpBig)
    _GDIPlus_GraphicsSetPixelOffsetMode($hGfxBig, $GDIP_PIXELOFFSETMODE_HALF)

    _GDIPlus_GraphicsScaleTransform($hGfxSmall, $fScale, $fScale)
    _GDIPlus_GraphicsSetInterpolationMode($hGfxSmall, $qual)

    _GDIPlus_GraphicsScaleTransform($hGfxBig, 1 / $fScale, 1 / $fScale)
    _GDIPlus_GraphicsSetInterpolationMode($hGfxBig, $qual)

    _GDIPlus_GraphicsDrawImageRect($hGfxSmall, $hBitmap, 0, $dx1, $iW, $iH + $dy1)
    _GDIPlus_GraphicsDrawImageRect($hGfxBig, $hBmpSmall, 0, $dx2, $iW, $iH + $dy2)

    _GDIPlus_BitmapDispose($hBmpSmall)
    _GDIPlus_GraphicsDispose($hGfxSmall)
    _GDIPlus_GraphicsDispose($hGfxBig)
    Return $hBmpBig
EndFunc   ;==>_Blur

 

I hope you like it.

 

Feel free to post your examples here, too. 

Edited May 7, 2020 by UEZ

[UEZ]

I was able to create a 4096 bytes version using FreeBasic and UPX - with Crinkler even 2103 Bytes!

Click me to download the executables if you are interessted.

 

Edited May 14, 2020 by UEZ