Posted: 10th Nov 2021 22:55
I am thinking of making an app that has a desk and a window. The scene outside the window will vary and will be provided by images that I will fetch at run time.

When the user manipulates something on the desk, I want to make the outside image go out of focus for a second or so, and then bring the items on the desk a bit out of focus, simulating a depth of field, or where the users's attention is directed..

I am hoping that I can have two images that I can overlay over the two parts as needed. These special images would be mostly transparent but have enough non-transparent pixels in them to blur the image behind it.

Is this possible?
Is there a better way, by perhaps manipulating the images directly?
Other ideas?

I think this is all 2D BTW.
Posted: 10th Nov 2021 23:05
Make two images the same size with all the images together, make one image blurred the one with the blurred elements, and one that is not, show them as needed.

This is just one way I'm sure.
Posted: 11th Nov 2021 0:44
What you want is a Gaussian Blur shader
Posted: 11th Nov 2021 2:27
Thanks

@game_coder_here perhaps I did not make it clear enough, when I said I get the images at run time. That means I only see the image at run time, so I have to blur any given image dynamically.

@PartTimeCoder, thanks for the link, as least I now know a bit of what I am looking for.

I'll need to learn about shaders...
Posted: 11th Nov 2021 2:44
That means I only see the image at run time, so I have to blur any given image dynamically.


You can do this at runtime or anytime.

A shader does work great but Loading two images at runtime, I do that all the time.

But a shader would be a lot easer.
Posted: 11th Nov 2021 2:52
good grief, I have the linked sample working!
Took a bit of guessing of what to put where!

Thanks.

Edit: well it work on Windows, broadcast to Android results in a compilation error for the shader!
Posted: 11th Nov 2021 3:38
well there was a bug in the shader code that fortunately I could find a solution for, so here is a working example that toggles between blurred and not blurred:

First, put this code into a file called: nornalblur.ps and put that into the media folder.

+ Code Snippet
uniform sampler2D texture0;
varying vec2 posVarying;
varying vec2 uvVarying;
  
uniform vec2 agk_resolution;
uniform float BlurSize;
 
void main()
{
	float blurSizeH = BlurSize / agk_resolution.x;
	float blurSizeV = BlurSize / agk_resolution.y;
    vec4 sum = vec4(0.0);
    for (float x = -4.0; x <= 4.0; x++)
        for (float y = -4.0; y <= 4.0; y++)
            sum += texture2D(texture0,vec2(uvVarying.x + x * blurSizeH, uvVarying.y + y * blurSizeV))/ 81.0;
    gl_FragColor = sum;
}


Note that the assignment of values to blurSizeH and V must be within the main() or it wont compile on Android.

and the AppGameKit code:

+ Code Snippet
BGImage = loadimage("img_1517.jpg") // substitute your own file that is also in media folder
BGSprite = CreateSprite(BGImage)
SetSpriteSize(BGSprite,100,100)


NormalBlur=LoadSpriteShader("normalblur.ps")
blursize# = 1
shadertoggle = 1

SetSpriteShader(BGSprite, NormalBlur)

AddVirtualButton( 1, 10, 10, 10)

do

	If GetVirtualButtonPressed(1)
		if shadertoggle = 1
			shadertoggle=0
			setShaderConstantByName(NormalBlur, "BlurSize",  0  ,0,0,0) // zero blur
		else
			shadertoggle = 1
			setShaderConstantByName(NormalBlur, "BlurSize",  blursize# ,0,0,0)
		endif
	endif
    Sync()
loop


Use your own file as a background image
Posted: 11th Nov 2021 3:40
Try adding this line to the head of the shader file

precision mediump float;


I believe its an GLSL V's GLES issue

Edit: you beat me to it