How to turn image on itself so only edge is seen?

Dan

Hi guys,

I'm trying to turn a flat 2D circle image on itself in stages so that the right hand edge moves around to the back & what you're left seeing at the end is just the side of the circle, which appears as just a straight line – so it's almost approaching a 3D spin in this respect.

To maybe explain better, if you hold a coin in your fore finger and thumb, so you're viewing its full face – then, push the right hand edge of the coin with the fore finger of your other hand, the coin will turn on a central, vertical axis so that eventually you are left looking at just its side – which is the straight line…this is the turning effect I've been trying to get.

I thought I might be able to do this by playing with the negative & positive values of the 'Shear()' method of the 'Matrix' class but have had no success.

Does anyone know of the way to get the desired effect is at all?

Thank you very much indeed,

Dan : )

NB: I know this post should really go in the 'GDI+ and DirectX' section of the forum. However, there seems to be a bug preventing new posts there, I've tried several times over the last week without success. Thanks, Dan.

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Dan15y ago
Hi Frogleg,

That's absolutely brilliant my friend : )

Thanks very much indeed. I really appreciate you going to the trouble to pass that over. It works really well : )

I'm sorry to be a pain… if I may, could I ask if anyone also knows how to get the exact same effect by using the .Shear() method?

The reason for this is that it would be really cool if the same effect could be maintained so that any image painted onto the circle, would also appear to spin round in the 'coin like way' as described above? At the moment, the circle shrinks in from the sides, which gives a very, very good impression indeed of it spinning. However, drawing an image on to the circle (which doesn't move of course) reveals that the circle is in fact shrinking rather than actually spinning round.

A big thanks to Frogleg though once again of course as that was a brilliant help and works really well.

I know I probably should have explained a bit more clearly before, it just hadn't occurred to me that the effect might be achieved by changing the shape of the circle rather than using a specialised method to actually spin it round.

Thanks again,
Dan : )
Frogleg15y ago
I also incorporated an image
Dan15y ago
Hi Frogleg,

Thanks very much indeed for that, I'll give it a try & let you know how I got on : )

Thanks again,
Dan : )
Suthish Nair15y ago
good one..
Frogleg15y ago
Just reshape the elipse

public partial class Form1 : Form
{
Rectangle rct;
int rctWidth = 100, rctLeft = 100, topC = +1, leftC = -2;
public Form1()
{
InitializeComponent();
}

private void Form1_Load(object sender, EventArgs e)
{

}

private void bttnStart_Click(object sender, EventArgs e)
{
pictureBox1.Refresh();
timer1.Start();
}

private void bttnStop_Click(object sender, EventArgs e)
{
timer1.Stop();
}

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawLine(Pens.Blue, 150, 0, 150, 300);
e.Graphics.FillEllipse(Brushes.Red, rct);
}

private void timer1_Tick(object sender, EventArgs e)
{

pictureBox1.Refresh();
rctWidth = rctWidth + leftC;
rctLeft = rctLeft + topC;

if (rctWidth == 0 && topC == +1)
{
topC = -1;
leftC = +2;
}
else if (rctWidth == 100 && topC == -1)
{
topC = +1;
leftC = -2;

}
rct = new Rectangle(rctLeft, 100, rctWidth, 100);
}
}
Dan15y ago
Hi Frogleg,

Thanks very much for the reply : )

The code is in a standard Windows Forms application.

Basically the circle (at the moment) is just a standard Ellipse with an even width & height, drawn with the Graphics.FillEllipse() method.

graphics1.FillEllipse(brush1, 100, 100, 100, 100);

The way I thought I could probably best get the effect I wanted was to:

a)      Create an instance of the Matrix object.

b)      Manipulate the .Shear() method of the Matrix instance – to get the turning effect (the .Shear() method allows manipulating graphics so that they are sort of twisted & put at an angle) - this is the bit I couldn't get right however.

c)      Lastly, set the .Transform() method of the Graphics instance (used to draw the Ellipse) to the Matrix instance - & so applying the turning effect to the Ellipse.

I hope that makes a bit more sense?

Thanks very much again, I appreciate you taking the time to reply.
Dan : )
Frogleg15y ago
How will you be drawing this "coin"
GDI - DirectX
On what ?
XNA - winform - WPF
If you have any sort of project - upload it