#### Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

# How to 'smooth' out a variable?

Posts: 35

So, I'm trying to do an odd little project but I've run into a problem- my lack of math knowledge. Basically, what I want to achieve is this:

When you touch the screen, a rectangle fades in (from opacity 0 to around opacity 100). This I can do, since I just need to add 1 or something like that to the alpha variable until it gets to 100. I also want the rectangle to fade out when you let go of the screen, which I can do as well.

The problem is this part- I want the rectangle to get brighter the more you move your finger around the screen, and then dim the more your finger stays still. I thought about using the touch.DeltaX and touch.DeltaY variables for this, but since the delta changes so fast, it doesn't look very smooth. This is what I need help with. How can I make the variable change smoothly?

Thanks for anyone who can be bothered figuring this out!

Tagged:

## Comments

• Posts: 7,673

Something like this. Move your finger to brighten the rectangle, stop moving to dim it.

``````function setup()
a=0
end

function draw()
background(0)
fill(255,0,0,a)
rect(100,400,200,200)
if dim and a>0 then
a=a-.7
end
dim=true
end

function touched(t)
if t.state==MOVING and a<255 then
a=a+1
dim=false
end
end
``````
• edited July 2016 Posts: 35

Thanks a lot for that @dave1707, that's pretty much exactly what I needed, but there's still a small problem:

I want the alpha to fade from 0 to about 100 when you're touching the screen no matter if the touch is moving or not, but I want the alpha to be able to go over 100 if the touch DOES move. I was able to do this before, but now with the new code it's a bit tricky for me.

I tried using a second alpha variable for this and adding it to the first one, but I can't seem to get it to work- I think the dimming in the draw function is making it screw up and I can't seem to think of a fix.

Also, sorry for saying 'I want' so much, hopefully you don't feel like a slave reading my requests. I just can't think of what to do.

• edited July 2016 Posts: 35

I managed to think of a decent solution:

``````function setup()
a=0
a2=0
touching = false
x,y = 0,0
rectMode(CENTER)
end

function draw()
background(0)
fill(255,0,0,a+a2)
rect(x,y,200,200)
if touching then
a2 = math.min(100,a2+1)
end
if dim then
a=math.max(0,a-5)
end
if dim2 then
a2=math.max(0,a2-3)
end
dim=true
end

function touched(t)
x,y = t.x,t.y
if t.state==MOVING then
local diff = math.abs(t.deltaX)+math.abs(t.deltaY)
a=math.min(255,a+(diff/5))
dim=false
elseif t.state == ENDED then
touching = false
dim2 = true
elseif t.state == BEGAN then
touching = true
dim2 = false
end
end
``````

It's a bit lazy and messy though, if someone could think of a less bad way to do it, I'd appreciate that

• edited July 2016 Posts: 7,673

@MPan1 I think this does what you want. If you touch the screen but don't move your finger, variable `a` increments to 100. If you move your finger, variable `a` increments to 255. If you stop moving your finger but don't lift your finger, the variable `a` decrements to 100. If you lift your finger from the screen, the variable `a` decrement to 0.

``````function setup()
rectMode(CENTER)
x,y,a=0,0,0
end

function draw()
background(0)
fill(255,0,0,a)
rect(x,y,200,200)
if state=="began" then
if a<100 then
a=a+1
elseif a>0 then
a=a-1
end
elseif state=="moving" then
state="began"
if a<255 then
a=a+1
end
elseif state=="ended" and a>0 then
a=a-1
end
end

function touched(t)
x,y=t.x,t.y
if t.state==BEGAN then
state="began"
elseif t.state==MOVING then
state="moving"
elseif t.state==ENDED then
state="ended"
end
end
``````
• Posts: 35

Thanks dave, I think that's exactly what I needed. Good to see you managed it without the use of another variable. Well done, thanks for helping!

• Posts: 35

Can someone close/remove this thread please?

• Posts: 5,396

Why? It might be useful for someone else later.

Sign In or Register to comment.