Fisheye position warp

Monkey Forums/Monkey Programming/Fisheye position warp

Raz	(Posted 2015) [#1]

Hi all, sorry I've not quite sure of the precise term, but I'd like to "fisheye" a 2d array of coordinates.

Consider each intersection of this image as a fisheyed version of a flat uniform checkered grid.

I've seen it plenty of times in demoscene demos but don't actually know what it's called. Can anyone help?

nullterm

(Posted 2015) [#2]

Are you trying to do that with individual point (x,y)'s or with a whole image/screen (which might need a shader)?

Raz	(Posted 2015) [#3]

Just points thanks nullterm

0,0 1,0 2,0 3,0, 4,0
0,1 1,1 2,1 3,1, 4,1
0,2 1,2 2,2 3,2, 4,2
0,3 1,3 2,3 3,3, 4,3
0,4 1,4 2,4 3,4, 4,4

Nobuyuki

(Posted 2015) [#4]

You can perform a transformation in two dimensions by applying an easing curve to each dimension individually. I don't know which particular curve a fisheye lens calculation utilizes, however, a cubic interpolation curve that eases both on the in and out should be able to do it. Here is a piece of example code pulled from my framework:

	Method Ease:Float(p:Float, in:Bool, out:Bool)
		If in And out		
			If p < 0.5 Then Return 4 * Pow(p, 3)
			Return 4 * Pow(p - 1, 3) + 1

		ElseIf in
			Return (p * p * p)
		ElseIf out
			Return Pow(p - 1, 3.0) + 1
		Else
			Return p 'linear
		End If
	End Method

It maps a linear value from 0-1 to a cubic easing value. You can Lerp this value between the linear and cubic value to produce a softer effect, or increase the exponent to make the effect more pronounced, iirc.

alternate easing calcs for arcs: http://www.flong.com/texts/code/shapers_circ/

Nobuyuki

(Posted 2015) [#5]

Source code for this example:

Import mojo

Function Main:Int()
	New Game()
End Function

Class Game Extends App
	Field a:Float
	Field tx:Float[100][]
	Field ty:Float[100][]
	
	Method OnCreate:Int()
		SetUpdateRate 60
		
		Print Ease(1.0)
		Print Ease(0.75)
		
		For Local i:Int = 0 Until 100
			tx[i] = New Float[100]
			ty[i] = New Float[100]
		Next
	End Method
	
	Method OnUpdate:Int()
		a = MouseX() / Float(DeviceWidth())
	End Method
	
	Method OnRender:Int()
		Cls()
		
		SetAlpha(0.5)
		For Local y:Int = 0 Until 100
		For Local x:Int = 0 Until 100
			Local p:Float = Lerp(x / 100.0 * DeviceWidth(), Ease(x / 100.0) * DeviceWidth(), a)
			Local q:Float = Lerp(y / 100.0 * DeviceHeight(), Ease(y / 100.0) * DeviceHeight(), a)
		
			tx[x][y] = p
			ty[x][y] = q
			
			DrawRect(p - 1, q - 1, 2, 2)
		Next
		Next
		
		For Local y:Int = 0 Until 99
		For Local x:Int = 0 Until 99
			DrawLine(tx[x][y], ty[x][y], tx[x + 1][y], ty[x][y])
			DrawLine(tx[x][y], ty[x][y], tx[x][y], ty[x][y + 1])
		Next
		Next
		
		
	End Method
	
	Method Ease:Float(x:Float)


		'Circular
		Local y:Float = 0
		If x <= 0.5
			y = 0.5 - Sqrt(0.25 - x * x)
		Else
			y = 0.5 + Sqrt(0.25 - Pow(1 - x, 2.0))
		End If
		
		Return y

		'Sine
'		Local y:Float = 0
'			y = 0.5 * Sin(180 * x - 90) + 0.5
'		Return y


	End Method
	
	
Function Lerp:Float(startValue:Float, endValue:Float, percent:Float)
	Return startValue + (endValue - startValue) * percent
End	
End Class

ImmutableOctet(SKNG)

(Posted 2015) [#6]

@Raz: Not what you're looking for, but this got me messing around with shaders in Mojo 2:
~~EDIT 01: Fixed the mapping issue (At least partially).~~
EDIT 02: Well, it's kind of working:

I take it this page is what you were looking at? That tutorial calls the effect you want "Barrel Distortion". Shouldn't be too hard to add.

EDIT 03: See below for a Mojo 2 implementation; use at your own risk.

ImmutableOctet(SKNG)

(Posted 2015) [#7]

After messing around for a bit, I was able to write a basic shader to do what you're looking for. Obviously, this is Mojo2-only, or at least, it requires Mojo 2 to be the backend. I pretty much just followed this.

Preview image:

Raz	(Posted 2015) [#8]

Oh wow, thanks for your effects all :)

I'm sorry though I think I should have made myself a bit more clear though, I don't want a shader, I'd like to distort a 2d array of points. I did give your shader code a look but ... well... I'm simple :D

Here's a base app (that's currently not working at all, but you might see what I'm getting at), move the mouse to move the center of the distortion

Import mojo

Function Main:Int()
	New Game()
End Function

Class Point 
	Field x:Float
	Field y:Float
	
	Method New(tX:Float,tY:Float)
		x = tX
		y = tY
	End
	
End

Class Game Extends App

	Field k:Float = 0.00001
	Field cX:Int
	Field cY:Int
	Field p:Point[][]
	Const WIDTH:Int = 50
	Const HEIGHT:Int = 50
	Const GAP:Int = 10

	Method OnCreate:Int()
		SetUpdateRate 60
		
		p = New Point[WIDTH][]
		For Local i:Int = 0 Until WIDTH
			p[i] = New Point[HEIGHT]
			For Local j:Int = 0 Until HEIGHT
				p[i][j] = New Point(i * GAP, j * GAP)
			Next
		Next
		
		Return 0				
		
	End Method
	
	Method OnUpdate:Int()
	
		cX = MouseX()
		cY = MouseY()
	
		Return 0

	End Method
	
	Method OnRender:Int()
		Cls()
		
		SetAlpha(0.5)
		SetColor(255,255,255)
		
		For Local i:Int = 0 Until WIDTH
			For Local j:Int = 0 Until HEIGHT
				Local pX:Float = getRadialX(p[i][j].x,p[i][j].y, cX,cY,k)
				Local pY:Float = getRadialY(p[i][j].x,p[i][j].y, cX,cY,k)				
				'DrawPoint(p[i][j].x,p[i][j].y)
				DrawPoint(pX,pY)
			Next
		Next
		
		Return 0			
		
	End Method
	
	Method getRadialX:Float(x:Float,y:Float,cx:Float,cy:Float,k:Float)
	  'x = (x*xscale+xshift);
	  'y = (y*yscale+yshift);
	  Local res:Float = x+((x-cx)*k*((x-cx)*(x-cx)+(y-cy)*(y-cy)));
	  Return res;
	End Method
	
	Method getRadialY:Float(x:Float,y:Float,cx:Float,cy:Float,k:Float)
	  'x = (x*xscale+xshift);
	  'y = (y*yscale+yshift);
	  Local res:Float = y+((y-cy)*k*((x-cx)*(x-cx)+(y-cy)*(y-cy)));
	  Return res;
	End Method
	
End Class

Raz	(Posted 2015) [#9]

Ahh just seen your post too Nobu, will give it a go to see if I can adapt it for what I'm after

muddy_shoes

(Posted 2015) [#10]

@Raz Here's your code altered to apply the fragment shader's implied method.

Import mojo

Function Main:Int()
	New Game()
End Function

Class Point
	Field x:Float
	Field y:Float
	
	Method New(tX:Float,tY:Float)
		x = tX
		y = tY
	End
	
	Method Mul:Void( val:Float )
		x *= val
		y *= val	
	End
	
	Method Length:Float()
		Return Sqrt(x*x+y*y)
	End
	
	Function Sub:Void( p1:Point, p2:Point, result:Point)
		result.x = p1.x-p2.x
		result.y = p1.y-p2.y	
	End
End

Class Game Extends App

	Field k:Float = 0.00001
	Field cX:Int
	Field cY:Int
	Field p:Point[][]
	Const WIDTH:Int = 50
	Const HEIGHT:Int = 50
	Const GAP:Int = 10
	
	Const LENS_POWER:Float = 0.5
	Const LENS_RADIUS_PIXELS:Float = 200.0

	Method OnCreate:Int()
		SetUpdateRate 60
		
		p = New Point[WIDTH][]
		For Local i:Int = 0 Until WIDTH
			p[i] = New Point[HEIGHT]
			For Local j:Int = 0 Until HEIGHT
				p[i][j] = New Point(i * GAP, j * GAP)
			Next
		Next
		
		Return 0
		
	End Method
	
	Method OnUpdate:Int()
	
		cX = MouseX()
		cY = MouseY()
	
		Return 0

	End Method
	
	Method OnRender:Int()
		Cls()
		
		SetAlpha(0.5)
		SetColor(255,255,255)
		
		Local centre:Point = New Point(cX,cY)
		Local radialPoint:Point = New Point()
		
		For Local i:Int = 0 Until WIDTH
			For Local j:Int = 0 Until HEIGHT
				'calculate position relative to lens centre
				Point.Sub(p[i][j], centre, radialPoint)
				
				'scale distance so that 1.0 is the edge of the lens
				Local radialDist:Float = radialPoint.Length()/LENS_RADIUS_PIXELS
				
				'if inside the lens radius
				If( radialDist < 1.0 )
					'calculate warped distance
					Local warpedDistance:Float = Pow(radialDist,LENS_POWER)
					'calculate the scaling factor from the original
					Local scaleFactor:Float = warpedDistance/radialDist
					'and apply to position
					radialPoint.Mul(scaleFactor)
				End
				
				'add the centre pos back in
				Local pX:Float = radialPoint.x + centre.x
				Local pY:Float = radialPoint.y + centre.y
				
				DrawCircle(pX,pY,3)
			Next
		Next
		
		Return 0
		
	End Method

	
End Class

Raz	(Posted 2015) [#11]

Oh wow, thank you so much, that's exactly what I am after :)

Thanks all who took time to give me some help!