# I need to rotate shapes(rectangle) but not from it's center.

• ### Question

• I know it has something to do with trigonometry but we are two years away to learn trigonometry in our school there is not any trigonometry chapter in our mathematics textbook. So, please guide me where to start from. I would like to know the concept of rotation than a ready to run code example.

Thankyou. :)

They say working hard is good but i say working smart is best...

Tuesday, November 6, 2012 11:09 AM

• But while calculation we need center coordinate of rotated rectangle.  This position depends on rectangle shape.  So most of case you need trigonometric function for these calculation.

This is a sequence to get rotated rectangle positon.

(1) original rectangle position

(2) original rectangle center (relative from rotation center)

(3) rotated rectangle center (relative from rotation center)

(4) rotated rectangle position

Nonki Takahashi

• Edited by Wednesday, November 7, 2012 4:20 AM
• Marked as answer by Wednesday, November 7, 2012 5:06 AM
Wednesday, November 7, 2012 2:51 AM
• Afraid its pretty much impossible without trig and matrices and cannot really teach these in a paragraph or 2.

This is how it could be done, I know you don't just want code, but explaining trig from scratch isn't realistic.

But basically we are finding the distance we must move the top left corner when the shape is rotated by an angle about its centre.

You will see the combination of Sin and Cos I use are effectively a rotation matrix - see here to get started perhaps.

`gww = GraphicsWindow.Widthgwh = GraphicsWindow.Heightshapewidth = 120shapeheight = 20hand = Shapes.AddRectangle(shapewidth,shapeheight)xc = gww/2yc = gwh/2rotation = 0Shapes.Move(hand,xc,yc)GraphicsWindow.DrawEllipse(xc,yc,2,2)GraphicsWindow.KeyDown = keydown'Blob at centre  of rotationGraphicsWindow.BrushColor = "Red"GraphicsWindow.PenWidth = 0centre = Shapes.AddEllipse(6,6)'Centre of rotation relative to shape centreshiftX = -shapewidth/4shiftY = 0Shapes.Move(centre,xc+shapewidth/2-3+shiftX,yc+shapeheight/2-3+shiftY)Sub keydown  lastkey = GraphicsWindow.LastKey  If lastkey = "Space" Then    rotate()  EndIfEndSubSub rotate  rotation = rotation + 5  If rotation > 360 Then    rotation = 0  EndIf  Shapes.Rotate(hand,rotation)  move()  ' i thought this part will leave the traces of top left corner and draw a complete circle but it didnot work :(  x = Shapes.GetLeft(hand)  y = Shapes.GetTop(hand)  GraphicsWindow.SetPixel(x,y,"Black")EndSubSub move  rot = Math.GetRadians(rotation)  offsetX = shiftX*Math.Cos(rot) - shiftY*Math.Sin(rot)  offsetY = shiftX*Math.Sin(rot) + shiftY*Math.Cos(rot)  Shapes.Move(hand,xc+shiftX-offsetX,yc+shiftY-offsetY)EndSub`

• Edited by Tuesday, November 6, 2012 10:45 PM
• Marked as answer by Wednesday, November 7, 2012 5:04 AM
Tuesday, November 6, 2012 8:06 PM

### All replies

• Shapes.Rotate(rectangle, angle) always rotates the rectangle from it's center.

So if you would like to rotate a rectangle at it's upper left corner, you need move the rectangle as follows after/before rotation.

Nonki Takahashi

Tuesday, November 6, 2012 2:27 PM
• ```gww = GraphicsWindow.Width
gwh = GraphicsWindow.Height
shapewidth = 120
xc = gww/2
yc = gwh/2
rotation = 0
Shapes.Move(hand,xc,yc)
GraphicsWindow.DrawEllipse(xc,yc,2,2)
GraphicsWindow.KeyDown = keydown

Sub keydown
lastkey = GraphicsWindow.LastKey
If lastkey = "Space" Then
move()
rotate()
EndIf
EndSub

Sub rotate
rotation = rotation + 5
If rotation > 360 Then
rotation = 0
EndIf
Shapes.Rotate(hand,rotation)
' i thought this part will leave the traces of top left corner and draw a complete circle but it didnot work :(
x = Shapes.GetLeft(hand)
y = Shapes.GetTop(hand)
GraphicsWindow.SetPixel(x,y,"Black")
EndSub
Sub move
'Simply move to center??? i am not sure
Shapes.Move(hand,xc,yc)
EndSub```

It did not worked :(

anyway Thank you so much  Nonki for reply :)

They say working hard is good but i say working smart is best...

Tuesday, November 6, 2012 4:19 PM
• Afraid its pretty much impossible without trig and matrices and cannot really teach these in a paragraph or 2.

This is how it could be done, I know you don't just want code, but explaining trig from scratch isn't realistic.

But basically we are finding the distance we must move the top left corner when the shape is rotated by an angle about its centre.

You will see the combination of Sin and Cos I use are effectively a rotation matrix - see here to get started perhaps.

`gww = GraphicsWindow.Widthgwh = GraphicsWindow.Heightshapewidth = 120shapeheight = 20hand = Shapes.AddRectangle(shapewidth,shapeheight)xc = gww/2yc = gwh/2rotation = 0Shapes.Move(hand,xc,yc)GraphicsWindow.DrawEllipse(xc,yc,2,2)GraphicsWindow.KeyDown = keydown'Blob at centre  of rotationGraphicsWindow.BrushColor = "Red"GraphicsWindow.PenWidth = 0centre = Shapes.AddEllipse(6,6)'Centre of rotation relative to shape centreshiftX = -shapewidth/4shiftY = 0Shapes.Move(centre,xc+shapewidth/2-3+shiftX,yc+shapeheight/2-3+shiftY)Sub keydown  lastkey = GraphicsWindow.LastKey  If lastkey = "Space" Then    rotate()  EndIfEndSubSub rotate  rotation = rotation + 5  If rotation > 360 Then    rotation = 0  EndIf  Shapes.Rotate(hand,rotation)  move()  ' i thought this part will leave the traces of top left corner and draw a complete circle but it didnot work :(  x = Shapes.GetLeft(hand)  y = Shapes.GetTop(hand)  GraphicsWindow.SetPixel(x,y,"Black")EndSubSub move  rot = Math.GetRadians(rotation)  offsetX = shiftX*Math.Cos(rot) - shiftY*Math.Sin(rot)  offsetY = shiftX*Math.Sin(rot) + shiftY*Math.Cos(rot)  Shapes.Move(hand,xc+shiftX-offsetX,yc+shiftY-offsetY)EndSub`

• Edited by Tuesday, November 6, 2012 10:45 PM
• Marked as answer by Wednesday, November 7, 2012 5:04 AM
Tuesday, November 6, 2012 8:06 PM
• If you don't use trigonometric function, so rotate only 0, 30, 45, 60, 90, ...[degree].

For other angle, use trigonometric function (sin, cos).

Be careful that trigonometric function needs [radian] but [degree] for Small Basic language.

Nonki Takahashi

Wednesday, November 7, 2012 1:06 AM
• But while calculation we need center coordinate of rotated rectangle.  This position depends on rectangle shape.  So most of case you need trigonometric function for these calculation.

This is a sequence to get rotated rectangle positon.

(1) original rectangle position

(2) original rectangle center (relative from rotation center)

(3) rotated rectangle center (relative from rotation center)

(4) rotated rectangle position

Nonki Takahashi

• Edited by Wednesday, November 7, 2012 4:20 AM
• Marked as answer by Wednesday, November 7, 2012 5:06 AM
Wednesday, November 7, 2012 2:51 AM
• Thank you Litdev sir, Nonki. It helped me a lot, Thanks alot.

They say working hard is good but i say working smart is best...

Wednesday, November 7, 2012 5:16 AM