I was trying to create an effect similar to the iOS 7 translucency when you have notification center or control center over a screen and I thought the best way to do this was with a Gaussian blur and a partly transparent white rectangle. I looked at the blurs in the shader examples but they don’t quite do what I want. So, my question is, does anyone know how to do a Gaussian blur with a shader?
Gaussian blurr might be costly, depending on the size of the kernel. And there no FFT available to make it fast. Why not trying to 1/ resize the image by 1/10 then 2/ resize it back to normal size. This might make an acceptable blurr?
Ok. Then try this, i have added a little gauss blurr:
.
-- test gauss blurr
--displayMode(FULLSCREEN)
-- Use this function to perform your initial setup
function setup()
w,h = 322,322
img0 = image(w,h)
img1 = image(w,h)
spriteMode(CENTER)
setContext(img0)
sprite("Cargo Bot:Codea Icon",w/2,h/2)
setContext()
t0=os.clock()
img1 = blurr(img0)
t1=os.clock()
print(t1-t0)
end
function blurr(img)
local exp = math.exp
local floor = math.floor
local w,h = img.width, img.height
img1 = image( w,h )
local w2,h2 = floor(w/10), floor(h/10)
img2 = image( w2,h2 )
img3 = image( w2,h2 )
spriteMode(CENTER)
setContext(img2)
sprite(img,w2/2,h2/2,w2,h2)
setContext()
local a = 3
local sum = 0
for x = -a,a do
for y = -a,a do
local v = floor(255*exp( -(x*x +y*y)/(a*a) )/(a*a)/2)
if v>0 then sum = sum + v
end
end
end
blendMode(ADDITIVE)
setContext(img3)
local a = 3
for x = -a,a do
for y = -a,a do
local v = floor(255*exp( -(x*x +y*y)/(a*a) )/(a*a)/2) *255/sum
if v>0 then
tint(255,255,255,v)
tint(v)
sprite(img2,w2/2+x,h2/2+y)
end
end
end
setContext()
blendMode(NORMAL)
noTint()
setContext(img1)
sprite(img3,w/2,h/2,w,h)
setContext()
return img1
end
-- This function gets called once every frame
function draw()
-- This sets a dark background color
background(40, 40, 50)
sprite(img0,WIDTH/2- 10- w/2,HEIGHT/2)
sprite(img1,WIDTH/2+ 10+ w/2,HEIGHT/2)
end
@Jmv38 - That’s an old method. To get smoother shadows at a much faster rate, start by scaling up the shadow size, but drawing the image it the image’s original size divided by the shadow size. That gives you the same effect, without the need to make images, and (usually) with a smoother shadow. Let me know if that’s not clear.
Edit: Quick note: This works on any draw operation, unless you’re using PDF images, which is why I’m not using it in my app. 
@zoyt actually it is pretty fast (20ms) because i zoom the image by 1/10 before blurring and zooming back. I am not sure about the details of what you desscribe, maybe you could post a quick demo with the result on same image and os.clock duration?
@Jmv38, @JakAttak - Here’s an example of what I was talking about: You can quickly, without regenerating an image, alter the shadow of the square. You can do the same with blurring, but I decided to pick a shadow as an example.
-- Shadow Demo
function setup()
parameter.number("sizeX",10,500,100)
parameter.number("sizeY",10,500,100)
parameter.number("shadowDistance",0,50,10)
parameter.number("shadowSize",1,100,10)
end
function draw()
background(255)
translate(WIDTH/2,HEIGHT/2)
rectMode(CENTER)
smooth()
pushMatrix()
translate(Gravity.x*shadowDistance,Gravity.y*shadowDistance)
fill(0, 0, 0, 255)
scale(shadowSize)
rect(0,0,sizeX/shadowSize,sizeY/shadowSize)
popMatrix()
fill(255,0,0)
rect(0,0,sizeX,sizeY)
end
Tilt the device to move the shadow.
Thanks for the example Zoyt.
I have messed around with this before, but allways ends up with the visible diagonal you also produces in the example.
So how do we make a “real” soft shadow without using a transparent image from Photoshop or similar and not eating to much of our precious 60 FPS ?
Re Peter
By ‘real soft shadow’ what do you mean? Do you mean something similar to @John’s Stack3r? http://twolivesleft.com/Codea/Talk/discussion/559/stack3r
Just my 2 cents… If you are creating a transparent blurred panel (or whatever you are trying to do) you shouldn’t have to recreate it every frame? Surely it is a static image? Can you not just render it once and be done with it?
@Ignatz, @macflyerdk - Thanks.
@JakAttak - All along I thought that John was using my method, but now I’m starting to doubt it. I know he does downscale the image, but it looks like he messes around with the image in the code to make it a bit blurred, then he upscales it.
@Jordan - If you look at the shadows in my StackIt 3D prototype, those are made using this method. My app would’ve run really slowly if I drew everything into an image every frame, then upscaled it.