Glossy effect

Just starting out? Need help? Post your questions and find answers here.
Post Reply
User avatar
Michael Vogel
Addict
Addict
Posts: 2677
Joined: Thu Feb 09, 2006 11:27 pm
Contact:
Contact Michael Vogel

Glossy effect

Post by Michael Vogel »

I'd like to create a glossy effect for squared and round images, here's an example how the overlay could look like:
Example

Here's a first start, but how to tune this a little bit more?

Code: Select all

Enumeration
	#ImageGadget
	#ImageBackground
	#ImageGlass
EndEnumeration

PixelSize=256
#DrawOpaque=$FF000000

OpenWindow(0,0,0,PixelSize*2,PixelSize,"Glas")
ImageGadget(#ImageGadget,0,0,PixelSize*2,PixelSize,0)

CreateImage(#ImageGadget,PixelSize*2,PixelSize,32,#PB_Image_Transparent)

For ScreenType=0 To 1
	
	; Initializing "empty" image... (is there a shorter way for doing this?)
	; CreateImage(#ImageGlass,PixelSize,PixelSize,32,#PB_Image_Transparent)
 	CreateImage(#ImageGlass,PixelSize,PixelSize,32,#White)
 	StartDrawing(ImageOutput(#ImageGlass))
 	DrawingMode(#PB_2DDrawing_AlphaChannel)
 	Box(0,0,PixelSize,PixelSize,#White)
 	StopDrawing()
 	
 	; Create highlighted area
	StartVectorDrawing(ImageVectorOutput(#ImageGlass))
	If ScreenType
		AddPathCircle(PixelSize/2,PixelSize/2,PixelSize/2)
		ClipPath()
	EndIf
	MovePathCursor(0,0,#PB_Path_Default)
	AddPathLine(PixelSize,0,#PB_Path_Default)
	AddPathLine(PixelSize,PixelSize/3,#PB_Path_Default)
	AddPathArc(PixelSize/4,PixelSize/6,0,PixelSize*0.75,PixelSize)
	AddPathLine(0,PixelSize*0.75,#PB_Path_Default)
	ClosePath()
	VectorSourceLinearGradient(0,0,0,PixelSize)
	VectorSourceGradientColor($70ffffff,1.0);	$80ffffff
	VectorSourceGradientColor($30ffffff,0.0) ;	$50ffffff
	FillPath()
	StopVectorDrawing()
	
	; Background
	CreateImage(#ImageBackground,PixelSize*2,PixelSize,32,#PB_Image_Transparent)
	StartDrawing(ImageOutput(#ImageBackground))
	DrawingMode(#PB_2DDrawing_AllChannels)
	If ScreenType
		Circle(PixelSize/2,PixelSize/2,PixelSize/2,#DrawOpaque|#Blue)
	Else
		Box(0,0,PixelSize,PixelSize,#DrawOpaque|#Blue)
	EndIf
	
	; Dont' use this effect now...
	;For i=0 To 9999
	;	x=Random(PixelSize-1)
	;	y=Random(PixelSize-1)
	;	c=Random(50)
	;	Circle(x,y,2,Point(x,y)!($10101*c))
	;Next i
	
	StopDrawing()
	
	; Merge background with glossy effect...
	StartDrawing(ImageOutput(#ImageGadget))
	DrawAlphaImage(ImageID(#ImageBackground),PixelSize*ScreenType,0)
	DrawAlphaImage(ImageID(#ImageGlass),PixelSize*ScreenType,0)
	StopDrawing()
	
Next ScreenType

SetGadgetState(#ImageGadget,ImageID(#ImageGadget))

Repeat : Select WaitWindowEvent() : Case #PB_Event_CloseWindow,#WM_CHAR : End : EndSelect : ForEver
Top
#NULL
Addict
Addict
Posts: 1440
Joined: Thu Aug 30, 2007 11:54 pm
Location: right here

Re: Glossy effect

Post by #NULL »

Maybe this is something to begin with :) :

Code: Select all

size = 200
radius = 80

win = OpenWindow(#PB_Any, 400, 400, size+20, size+20, "..")
AddKeyboardShortcut(win, #PB_Shortcut_Escape, 10)
img = CreateImage(#PB_Any, size, size, 32)

; StartDrawing(ImageOutput(img))
;   DrawingMode(#PB_2DDrawing_AllChannels)
;   Box(0, 0, OutputWidth(), OutputHeight(), $ff00ff00)
; StopDrawing()

StartVectorDrawing(ImageVectorOutput(img))

  VectorSourceColor($ffffffff)
  FillVectorOutput()
  
  backgroundAlpha = 55
  For i=0 To 1000
    AddPathCircle(Random(size), Random(size), Random(20))
    VectorSourceColor(RGBA(Random(255), Random(255), Random(255), Random(backgroundAlpha)))
    FillPath()
  Next    
  
  BeginVectorLayer()
    VectorSourceCircularGradient(100, 100, 80, -50, -50) ; top left white bling
    VectorSourceGradientColor($ffffffff, 0.0)
    VectorSourceGradientColor($ffffffff, 0.05)
    VectorSourceGradientColor($00aaaaaa, 0.5)
    VectorSourceGradientColor($00aaaaaa, 0.9)
    VectorSourceGradientColor($ffaaaaaa, 1.0)
    AddPathCircle(100, 100, radius)
    ;FillVectorOutput()
    FillPath()
  EndVectorLayer()
  
  BeginVectorLayer()
    VectorSourceCircularGradient(100, 100, 80, 65, 20) ; bottom right white bling
    VectorSourceGradientColor($ffffffff, 0.0)
    VectorSourceGradientColor($ffffffff, 0.05)
    VectorSourceGradientColor($00aaaaaa, 0.5)
    VectorSourceGradientColor($00aaaaaa, 0.9)
    VectorSourceGradientColor($ffaaaaaa, 1.0)
    AddPathCircle(100, 100, radius)
    ;FillVectorOutput()
    FillPath()
  EndVectorLayer()
  
  BeginVectorLayer()
    VectorSourceLinearGradient(100, 100, 100+70, 100-70) ; top right dark streak
    VectorSourceGradientColor($00000000, 0.0)
    VectorSourceGradientColor($00000000, 0.4)
    VectorSourceGradientColor($88000000, 0.7)
    VectorSourceGradientColor($00000000, 0.9)
    VectorSourceGradientColor($00000000, 1.0)
    AddPathCircle(100, 100, radius)
    ;FillVectorOutput()
    FillPath()
  EndVectorLayer()
  
  BeginVectorLayer()
    VectorSourceLinearGradient(100, 100, 100-20, 100+85) ; bottom left dark streak
    VectorSourceGradientColor($00000000, 0.0)
    VectorSourceGradientColor($00000000, 0.4)
    VectorSourceGradientColor($88000000, 0.7)
    VectorSourceGradientColor($00000000, 0.9)
    VectorSourceGradientColor($00000000, 1.0)
    AddPathCircle(100, 100, radius)
    FillPath()
  EndVectorLayer()
  
  AddPathCircle(100, 100, radius) ; darken outer egde
  VectorSourceColor($88444444)
  StrokePath(2)
  
StopVectorDrawing()

imgg = ImageGadget(#PB_Any, 10, 10, 200, 200, ImageID(img))
Repeat
  WaitWindowEvent()
Until Event() = #PB_Event_CloseWindow Or Event() = #PB_Event_Menu
Top
User avatar
Michael Vogel
Addict
Addict
Posts: 2677
Joined: Thu Feb 09, 2006 11:27 pm
Contact:
Contact Michael Vogel

Re: Glossy effect

Post by Michael Vogel »

Nice, the first of the four shading parts is a fine one.

But I'd like to do a non circular gradient - the following shows the shape form (far away from perfect), but it is done by repeating your routine multiple times...

Code: Select all

Enumeration
	#ImageGadget
	#ImageBackground
	#ImageGlass
EndEnumeration

PixelSize=256
#DrawOpaque=$FF000000

OpenWindow(0,0,0,PixelSize*2,PixelSize,"Glas")
ImageGadget(#ImageGadget,0,0,PixelSize*2,PixelSize,0)

CreateImage(#ImageGadget,PixelSize*2,PixelSize,32,#PB_Image_Transparent)

For ScreenType=0 To 1

	; Initializing "empty" image... (is there a shorter way for doing this?)
	; CreateImage(#ImageGlass,PixelSize,PixelSize,32,#PB_Image_Transparent)
	CreateImage(#ImageGlass,PixelSize,PixelSize,32,#White)
	StartDrawing(ImageOutput(#ImageGlass))
	DrawingMode(#PB_2DDrawing_AlphaChannel)
	Box(0,0,PixelSize,PixelSize,#White)
	StopDrawing()

	; Create highlighted area
	StartVectorDrawing(ImageVectorOutput(#ImageGlass))
	If ScreenType
		AddPathCircle(PixelSize/2,PixelSize/2,PixelSize/2)
		ClipPath()

		radius=PixelSize/2
		For i=-50 To 50 Step 2
			w.d=(i+135)*#PI/180
			z.d=0.9
			;AddPathCircle(radius-(Sin(w)*z*radius),radius+(Cos(w)*z*radius),10)
			;VectorSourceColor($88444444)
			VectorSourceCircularGradient(radius,radius,radius,-(Sin(w)*z*radius),(Cos(w)*z*radius)) ; top left white bling
			VectorSourceGradientColor($00ffffff, 0.0)
			VectorSourceGradientColor($04ffffff, 0.025)
			VectorSourceGradientColor($14ffffff, 0.075)
			VectorSourceGradientColor($00ffffff, 0.35-Abs(i)/500)
			VectorSourceGradientColor($00000000, 1.0)
			AddPathCircle(radius,radius,radius)
			;FillVectorOutput()
			FillPath()
		Next i

		VectorSourceCircularGradient(radius,radius,radius,radius*-0.65,radius*-0.65) ; top left white bling
		VectorSourceGradientColor($0, 0.0)
		VectorSourceGradientColor($00000000, 0.9)
		VectorSourceGradientColor($a0000000, 1.0)
		AddPathCircle(radius,radius,radius)
		;FillVectorOutput()
		FillPath()

	Else
		MovePathCursor(0,0,#PB_Path_Default)
		AddPathLine(PixelSize,0,#PB_Path_Default)
		AddPathLine(PixelSize,PixelSize/3,#PB_Path_Default)
		AddPathArc(PixelSize/4,PixelSize/6,0,PixelSize*0.75,PixelSize)
		AddPathLine(0,PixelSize*0.75,#PB_Path_Default)
		ClosePath()
		VectorSourceLinearGradient(0,0,0,PixelSize)
		VectorSourceGradientColor($70ffffff,1.0);	$80ffffff
		VectorSourceGradientColor($30ffffff,0.0) ;	$50ffffff
		FillPath()
	EndIf

	StopVectorDrawing()

	; Background
	CreateImage(#ImageBackground,PixelSize*2,PixelSize,32,#PB_Image_Transparent)
	StartDrawing(ImageOutput(#ImageBackground))
	DrawingMode(#PB_2DDrawing_AllChannels)
	If ScreenType
		Circle(PixelSize/2,PixelSize/2,PixelSize/2,#DrawOpaque|#Blue)
	Else
		Box(0,0,PixelSize,PixelSize,#DrawOpaque|#Blue)
	EndIf

	; Dont' use this effect now...
	;For i=0 To 9999
	;	x=Random(PixelSize-1)
	;	y=Random(PixelSize-1)
	;	c=Random(50)
	;	Circle(x,y,2,Point(x,y)!($10101*c))
	;Next i

	StopDrawing()

	; Merge background with glossy effect...
	StartDrawing(ImageOutput(#ImageGadget))
	DrawAlphaImage(ImageID(#ImageBackground),PixelSize*ScreenType,0)
	DrawAlphaImage(ImageID(#ImageGlass),PixelSize*ScreenType,0)
	StopDrawing()

Next ScreenType

SetGadgetState(#ImageGadget,ImageID(#ImageGadget))

Repeat : Select WaitWindowEvent() : Case #PB_Event_CloseWindow,#WM_CHAR : End : EndSelect : ForEver
Top
User avatar
RSBasic
Moderator
Moderator
Posts: 1218
Joined: Thu Dec 31, 2009 11:05 pm
Location: Gernsbach (Germany)
Contact:
Contact RSBasic

Re: Glossy effect

Post by RSBasic »

Very nice
Image
Image
Top
User avatar
mk-soft
Always Here
Always Here
Posts: 5393
Joined: Fri May 12, 2006 6:51 pm
Location: Germany

Re: Glossy effect

Post by mk-soft »

Does it perhaps make sense to draw the static background in an image only once and to redraw it only when resizing it?
Then you don't have to redraw the background with the Vector Library every time, for example if only the foreground changes.
My Projects ThreadToGUI / OOP-BaseClass / EventDesigner V3
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
Top
Post Reply

Return to “Coding Questions”