Trying to pan and zoom

[coconParticipant]

I would be interested to find a way to pan and zoom from the center of the screen or the cursor position.

[abakoboParticipant]

You can use inverted matrix to reverse the transformation. As for the camera in the center, I pasted a Canvas extension I often use to watch the world “by viewpoint at the center of the screen” so SetCameraByCenter(New Vec2f(0,0)) will place things drawn at 0,0 on the center of the screen. you can even rotate now!

Monkey

#Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Global gMyWindow:MyWindow Class MyWindow Extends Window Field pan : Vec2f Field zoom:Float = 1.0 Method New() Super.New("", 800, 600) Stuff.Create() pan=New Vec2f (Width/2,Height/2) 'now set as center to begin End Method OnRender(canvas:Canvas) Override App.RequestRender() If Keyboard.KeyDown(Key.Raw|Key.R) zoom = 1.0 pan = New Vec2f (Width/2,Height/2) End If Keyboard.KeyDown(Key.Raw|Key.Q) zoom -= 0.01 End If Keyboard.KeyDown(Key.Raw|Key.E) zoom += 0.01 End If Keyboard.KeyDown(Key.Raw|Key.A) Then pan.X -= 1*zoom 'it's nice to use Key.Raw for non qwerty keyboards.. If Keyboard.KeyDown(Key.Raw|Key.D) Then pan.X += 1*zoom If Keyboard.KeyDown(Key.Raw|Key.W) Then pan.Y += 1*zoom If Keyboard.KeyDown(Key.Raw|Key.S) Then pan.Y -= 1*zoom canvas.SetCameraByCenter(pan,zoom) 'no need to push and pop matrix if it's the only tranform of the OnRender() Call Stuff.Draw(canvas) If Mouse.ButtonPressed(MouseButton.Left) Local mouseWorldCoord:=-canvas.Matrix*Mouse.Location '- inverts the matrix (to reverse the transformation) '* applies the transformation to the vector (multiplies the vector by the matrix) Stuff.Hit(mouseWorldCoord) End End End Class Stuff Abstract Global Items:Vec2f[] Global Hits:Bool[] Function Create() Items = New Vec2f[100] Hits = New Bool[100] For Local i := 0 Until Items.Length Items[i] = New Vec2f(i * 20, Rnd(-100, 100)) Hits[i] = False Next End Function Hit(p:Vec2f) For Local i := 0 Until Items.Length Local x := Items[i].X Local y := Items[i].Y If Contains(x - 5, x + 5, y - 5, y + 5, p.x, p.y) Hits[i] = True Print("Hit Success: " + i) Exit End Next End Function Contains:Bool(minx:Float, maxx:Float, miny:Float, maxy:Float, x:Float, y:Float) Return x>=minx And x<maxx And y>=miny And y<maxy End Function Draw(canvas:Canvas) For Local i := 0 Until Items.Length If Not Hits[i] canvas.Color = Color.White Else canvas.Color = Color.Red End canvas.DrawRect(Items[i].X - 5, Items[i].Y - 5, 10, 10) Next End End Class Canvas Extension Method SetCameraByCenter(point_x:Float,point_y:Float,zoom:Float=1.0,rotation:Float=0.0) Translate(Viewport.Width/2,Viewport.Height/2) 'Modify this line to change to something else than center Scale(zoom,zoom) Rotate(rotation) Translate(-point_x,-point_y) End Method SetCameraByCenter(point:Vec2f,zoom:Float=1.0,rotation:Float=0) Translate(Viewport.Width/2,Viewport.Height/2) 'Modify this line to change to something else than center Scale(zoom,zoom) Rotate(rotation) Translate(-point) End End Function Main() New AppInstance gMyWindow = New MyWindow App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123

#Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Global gMyWindow:MyWindow     Class MyWindow Extends Window Field pan : Vec2f Field zoom:Float = 1.0 Method New() Super.New("", 800, 600) Stuff.Create() pan=New Vec2f (Width/2,Height/2) 'now set as center to begin End Method OnRender(canvas:Canvas) Override App.RequestRender() If Keyboard.KeyDown(Key.Raw|Key.R) zoom = 1.0 pan = New Vec2f (Width/2,Height/2) End If Keyboard.KeyDown(Key.Raw|Key.Q) zoom -= 0.01 End If Keyboard.KeyDown(Key.Raw|Key.E) zoom += 0.01 End If Keyboard.KeyDown(Key.Raw|Key.A) Then pan.X -= 1*zoom 'it's nice to use Key.Raw for non qwerty keyboards.. If Keyboard.KeyDown(Key.Raw|Key.D) Then pan.X += 1*zoom If Keyboard.KeyDown(Key.Raw|Key.W) Then pan.Y += 1*zoom If Keyboard.KeyDown(Key.Raw|Key.S) Then pan.Y -= 1*zoom canvas.SetCameraByCenter(pan,zoom) 'no need to push and pop matrix if it's the only tranform of the OnRender() Call Stuff.Draw(canvas) If Mouse.ButtonPressed(MouseButton.Left)   Local mouseWorldCoord:=-canvas.Matrix*Mouse.Location '- inverts the matrix (to reverse the transformation) '* applies the transformation to the vector (multiplies the vector by the matrix) Stuff.Hit(mouseWorldCoord) End   End End Class Stuff Abstract Global Items:Vec2f[] Global Hits:Bool[] Function Create() Items = New Vec2f[100] Hits = New Bool[100] For Local i := 0 Until Items.Length Items[i] = New Vec2f(i * 20, Rnd(-100, 100)) Hits[i] = False Next End Function Hit(p:Vec2f) For Local i := 0 Until Items.Length Local x := Items[i].X Local y := Items[i].Y If Contains(x - 5, x + 5, y - 5, y + 5, p.x, p.y) Hits[i] = True Print("Hit Success: " + i) Exit End Next End Function Contains:Bool(minx:Float, maxx:Float, miny:Float, maxy:Float, x:Float, y:Float) Return x>=minx And x<maxx And y>=miny And y<maxy End Function Draw(canvas:Canvas) For Local i := 0 Until Items.Length If Not Hits[i] canvas.Color = Color.White Else canvas.Color = Color.Red End canvas.DrawRect(Items[i].X - 5, Items[i].Y - 5, 10, 10) Next End End   Class Canvas Extension   Method SetCameraByCenter(point_x:Float,point_y:Float,zoom:Float=1.0,rotation:Float=0.0)   Translate(Viewport.Width/2,Viewport.Height/2) 'Modify this line to change to something else than center Scale(zoom,zoom) Rotate(rotation) Translate(-point_x,-point_y)   End Method SetCameraByCenter(point:Vec2f,zoom:Float=1.0,rotation:Float=0)   Translate(Viewport.Width/2,Viewport.Height/2) 'Modify this line to change to something else than center Scale(zoom,zoom) Rotate(rotation) Translate(-point)   End End Function Main() New AppInstance gMyWindow = New MyWindow App.Run() End

[coconParticipant]

Awesome!

After doing some tests and trying to figure out how to add rotations I resulted to this one.

Monkey

#Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Global gMyWindow:MyWindow Class MyWindow Extends Window Field pan : Vec2f ' to hold the panning Field zoom : Float = 1.0 ' to hold the zooming Field rot : Float = 0.0 ' to hold the rotation Field viewSpeed : Float = 2.0 ' the speed of panning Field canvasView: AffineMat3f ' to keep a copy of the view matrix Field messages : String[] ' to render some text on the screen Method New() Super.New("", 800, 600) Stuff.Create() pan = New Vec2f(Width / 2, Height / 2) messages = New String[3] End Method OnRender(canvas:Canvas) Override App.RequestRender() ' USER INPUT FOR VIEW ' user input for controlling the view values If True ' rotation and zoom won't have any problem ' but panning will have to be based on trigonometry calculations If Keyboard.KeyHit(Key.Raw | Key.R) pan = New Vec2f(Width / 2, Height / 2) zoom = 1.0 rot = 0.0 End If Keyboard.KeyDown(Key.Raw | Key.Q) Then zoom -= 0.01 If Keyboard.KeyDown(Key.Raw | Key.E) Then zoom += 0.01 If Keyboard.KeyDown(Key.Raw | Key.A) Local speed := viewSpeed * zoom pan.X -= Cos(rot) * speed pan.Y -= Sin(rot) * speed End If Keyboard.KeyDown(Key.Raw | Key.D) Local speed := viewSpeed * zoom pan.X += Cos(rot) * speed pan.Y += Sin(rot) * speed End If Keyboard.KeyDown(Key.Raw | Key.W) Local speed := viewSpeed * zoom pan.X += Cos(rot - MathHelper.DegreesToRadians(90)) * speed pan.Y += Sin(rot - MathHelper.DegreesToRadians(90)) * speed End If Keyboard.KeyDown(Key.Raw | Key.S) Local speed := viewSpeed * zoom pan.X -= Cos(rot - MathHelper.DegreesToRadians(90)) * speed pan.Y -= Sin(rot - MathHelper.DegreesToRadians(90)) * speed End If Keyboard.KeyDown(Key.Raw | Key.Z) Then rot -= 0.01 * zoom If Keyboard.KeyDown(Key.Raw | Key.C) Then rot += 0.01 * zoom End ' SCREEN TO WORLD HIT TEST ' demonstrate how convert the screen coords to world coords If True If Mouse.ButtonPressed(MouseButton.Left) Local mouseWorldCoord := -canvasView * Mouse.Location Print("Mouse: " + Mouse.Location) Print("Transformed: " + mouseWorldCoord) Stuff.Hit(mouseWorldCoord) End End ' DRAW THE WORLD If True ' I can do PushMatrix so after this ' operation is done it can be restored ' to the window based coordinate system canvas.PushMatrix() canvas.Translate(Width/2, Height/2) canvas.Rotate(rot) canvas.Scale(zoom, zoom) canvas.Translate(-pan) Stuff.Draw(canvas) ' I will have to keep a copy of the current transform ' in order to use it for the hit test canvasView = canvas.Matrix canvas.PopMatrix() End ' DRAW VARIOUS GUI STUFF If True canvas.Color = Color.Black messages[0] = "Pan: " + pan messages[1] = "Rotation: " + MathHelper.RadiansToDegrees(rot) messages[2] = "Zoom: " + zoom For Local i := 0 Until messages.Length canvas.DrawText(messages[i], 10, 10 + (i*12)) Next End End Method DrawLastHitOnGUI(canvas:Canvas) If Stuff.LastHit <> -1 Local p := Stuff.Items[Stuff.LastHit] canvas.DrawCircle(p.X-5, p.Y-5, 10) End End End Class Stuff Abstract Global Items:Vec2f[] Global Hits:Bool[] Global LastHit:Int Function Create() Items = New Vec2f[100] Hits = New Bool[100] For Local i := 0 Until Items.Length ' these coordinates are world based, nothing to do with monitor Items[i] = New Vec2f(i * 20, Rnd(0, 500)) Hits[i] = False Next LastHit = -1 End Function Hit(p:Vec2f) For Local i := 0 Until Items.Length Local x := Items[i].X Local y := Items[i].Y ' no problem to use rect collision since it happens in the world space If Contains(x - 10, x + 10, y - 10, y + 10, p.x, p.y) Hits[i] = True LastHit = i Print("Hit Index: " + i + ", Position: " + Items[i]) Exit End Next LastHit = -1 End Function Contains:Bool(minx:Float, maxx:Float, miny:Float, maxy:Float, x:Float, y:Float) Return x >= minx And x < maxx And y >= miny And y < maxy End Function Draw(canvas:Canvas) For Local i := 0 Until Items.Length If Not Hits[i] canvas.Color = Color.White Else canvas.Color = Color.Red End canvas.DrawRect(Items[i].X - 10, Items[i].Y - 10, 20, 20) Next End End Function Main() New AppInstance gMyWindow = New MyWindow App.Run() End Class MathHelper Abstract Function DegreesToRadians:Double(degrees:Double) Return degrees * (Pi / 180.0) End Function RadiansToDegrees:Double(radians:Double) Return radians * (180.0 / Pi) End End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181

#Import "<std>" #Import "<mojo>" Using std.. Using mojo..   Global gMyWindow:MyWindow   Class MyWindow Extends Window Field pan       : Vec2f ' to hold the panning Field zoom      : Float = 1.0 ' to hold the zooming Field rot       : Float = 0.0 ' to hold the rotation Field viewSpeed : Float = 2.0 ' the speed of panning Field canvasView: AffineMat3f   ' to keep a copy of the view matrix Field messages  : String[]      ' to render some text on the screen Method New() Super.New("", 800, 600) Stuff.Create() pan = New Vec2f(Width / 2, Height / 2) messages = New String[3] End Method OnRender(canvas:Canvas) Override App.RequestRender() ' USER INPUT FOR VIEW ' user input for controlling the view values If True ' rotation and zoom won't have any problem ' but panning will have to be based on trigonometry calculations If Keyboard.KeyHit(Key.Raw | Key.R) pan = New Vec2f(Width / 2, Height / 2) zoom = 1.0 rot = 0.0 End If Keyboard.KeyDown(Key.Raw | Key.Q) Then zoom -= 0.01 If Keyboard.KeyDown(Key.Raw | Key.E) Then zoom += 0.01 If Keyboard.KeyDown(Key.Raw | Key.A) Local speed := viewSpeed * zoom pan.X -= Cos(rot) * speed pan.Y -= Sin(rot) * speed End If Keyboard.KeyDown(Key.Raw | Key.D) Local speed := viewSpeed * zoom pan.X += Cos(rot) * speed pan.Y += Sin(rot) * speed End If Keyboard.KeyDown(Key.Raw | Key.W) Local speed := viewSpeed * zoom pan.X += Cos(rot - MathHelper.DegreesToRadians(90)) * speed pan.Y += Sin(rot - MathHelper.DegreesToRadians(90)) * speed End If Keyboard.KeyDown(Key.Raw | Key.S) Local speed := viewSpeed * zoom pan.X -= Cos(rot - MathHelper.DegreesToRadians(90)) * speed pan.Y -= Sin(rot - MathHelper.DegreesToRadians(90)) * speed End If Keyboard.KeyDown(Key.Raw | Key.Z) Then rot -= 0.01 * zoom If Keyboard.KeyDown(Key.Raw | Key.C) Then rot += 0.01 * zoom End ' SCREEN TO WORLD HIT TEST ' demonstrate how convert the screen coords to world coords If True If Mouse.ButtonPressed(MouseButton.Left) Local mouseWorldCoord := -canvasView * Mouse.Location Print("Mouse: " + Mouse.Location) Print("Transformed: " + mouseWorldCoord) Stuff.Hit(mouseWorldCoord) End End ' DRAW THE WORLD If True ' I can do PushMatrix so after this ' operation is done it can be restored ' to the window based coordinate system canvas.PushMatrix() canvas.Translate(Width/2, Height/2) canvas.Rotate(rot) canvas.Scale(zoom, zoom) canvas.Translate(-pan) Stuff.Draw(canvas) ' I will have to keep a copy of the current transform ' in order to use it for the hit test canvasView = canvas.Matrix canvas.PopMatrix() End ' DRAW VARIOUS GUI STUFF If True canvas.Color = Color.Black messages[0] = "Pan: " + pan messages[1] = "Rotation: " + MathHelper.RadiansToDegrees(rot) messages[2] = "Zoom: " + zoom For Local i := 0 Until messages.Length canvas.DrawText(messages[i], 10, 10 + (i*12)) Next End End Method DrawLastHitOnGUI(canvas:Canvas) If Stuff.LastHit <> -1 Local p := Stuff.Items[Stuff.LastHit] canvas.DrawCircle(p.X-5, p.Y-5, 10) End End End Class Stuff Abstract Global Items:Vec2f[] Global Hits:Bool[] Global LastHit:Int Function Create() Items = New Vec2f[100] Hits = New Bool[100] For Local i := 0 Until Items.Length ' these coordinates are world based, nothing to do with monitor Items[i] = New Vec2f(i * 20, Rnd(0, 500)) Hits[i] = False Next LastHit = -1 End Function Hit(p:Vec2f) For Local i := 0 Until Items.Length Local x := Items[i].X Local y := Items[i].Y ' no problem to use rect collision since it happens in the world space If Contains(x - 10, x + 10, y - 10, y + 10, p.x, p.y) Hits[i] = True LastHit = i Print("Hit Index: " + i + ", Position: " + Items[i]) Exit End Next LastHit = -1 End Function Contains:Bool(minx:Float, maxx:Float, miny:Float, maxy:Float, x:Float, y:Float) Return x >= minx And x < maxx And y >= miny And y < maxy End Function Draw(canvas:Canvas) For Local i := 0 Until Items.Length If Not Hits[i] canvas.Color = Color.White Else canvas.Color = Color.Red End canvas.DrawRect(Items[i].X - 10, Items[i].Y - 10, 20, 20) Next End End   Function Main() New AppInstance gMyWindow = New MyWindow App.Run() End   Class MathHelper Abstract Function DegreesToRadians:Double(degrees:Double) Return degrees * (Pi / 180.0) End Function RadiansToDegrees:Double(radians:Double) Return radians * (180.0 / Pi) End End

[Author]

Posts