I found this small application that i've been playing around with for the past little while. I was wondering, if i wanted to simply rotate the image in a circle? or make the entire image just bounce up and down, how would i modify this program to do so? Everything i've tried will just stretch the image - even if i do get it to move to the left or to the right. Any ideas on what i can do? Code is below
public partial class Form1 : Form
{
private int width = 15;
private int height = 15;
Image pic = Image.FromFile("402.png");
private Button abort = new Button();
Thread t;
public Form1()
{
abort.Text = "Abort";
abort.Location = new Point(190, 230);
abort.Click += new EventHandler(Abort_Click);
Controls.Add(abort);
SetStyle(ControlStyles.DoubleBuffer| ControlStyles.AllPaintingInWmPaint| ControlStyles.UserPaint, true);
t = new Thread(new ThreadStart(Run));
t.Start();
}
protected void Abort_Click(object sender, EventArgs e)
{
t.Abort();
}
protected override void OnPaint( PaintEventArgs e )
{
Graphics g = e.Graphics;
g.DrawImage(pic, 10, 10, width, height);
base.OnPaint(e);
}
public void Run()
{
while (true)
{
for(int i = 0; i < 200; i++)
{
width += 5;
Invalidate();
Thread.Sleep(30);
}
}
}
}
So I don't know what you're trying to achieve, but to get the fundies out of the way, WinForms is a GDI+ library and its meant more for GUI stuff, so something like animation will probably be handled better by a graphics library like SFML.
Anyways, there's a million ways to achieve what you want. In terms of moving something around in a circle, you're gonna need a little simple trig. For a bouncing motion, I would say following a sine curve would be the easiest way.
Here's some pseudo-code (not sure if this is syntax-perfect) for bouncing:
Field Definitions:
private double frame = 0;
OnPaint:
Graphics g = e.Graphics;
g.DrawImage(pic, 10, 10 + Math.sin(frame)*10, width, height);
frame+=.01;
base.OnPaint(e);
This way, every time the paint event is triggered, t will increase by .01 radians. The sin has a domain that will oscillate between -1 and 1, and you can multiply that by a factor of 10 to get that bouncing effect.
Frame represents your "keyframe". If you want to speed it up, increase the frame+=__ to a higher value. If you want to increase the range, change the offset Math.sin(frame)*__
Related
I have VS2012 and try to make a simple xna app for Windows Phone 7/8.
I have something like this:
public partial class GamePage : PhoneApplicationPage
{
ContentManager contentManager;
GameTimer timer;
SpriteBatch spriteBatch;
public Texture2D firstSprite { get; set; }
public Vector2 transition = new Vector2(0, 0);
public GamePage()
{
InitializeComponent();
contentManager = (Application.Current as App).Content;
timer = new GameTimer();
timer.UpdateInterval = TimeSpan.FromTicks(333333);
timer.Update += OnUpdate;
timer.Draw += OnDraw;
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(true);
spriteBatch = new SpriteBatch(SharedGraphicsDeviceManager.Current.GraphicsDevice);
firstSprite = this.contentManager.Load<Texture2D>("ikona");
timer.Start();
base.OnNavigatedTo(e);
}
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
timer.Stop();
SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(false);
base.OnNavigatedFrom(e);
}
float d = 0;
private void OnUpdate(object sender, GameTimerEventArgs e)
{
TouchCollection touchCollection = TouchPanel.GetState();
foreach (TouchLocation tl in touchCollection)
{
if (tl.State == TouchLocationState.Pressed && tl.Position.X < 240)
{
d = -10;
}
if (tl.State == TouchLocationState.Pressed && tl.Position.X > 240)
{
d = 10;
}
if (tl.State == TouchLocationState.Released)
d = 0;
}
transition += new Vector2(d, 0);
}
private void OnDraw(object sender, GameTimerEventArgs e)
{
SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.CornflowerBlue);
spriteBatch.Begin();
spriteBatch.Draw(firstSprite, transition, null, Color.White, 0, new Vector2(0, 0), 1f, SpriteEffects.None, 0);
spriteBatch.End();
}
}
Is it a good way do animate sprite? Will it be animated same way on every device? When I was testing it on lumia920 it wasn't very smooth, so I think I do it badly.
And second thing. I want to move picture left when I press left half of the screen and move right when I press right side. It partly works but when I press left (it moves left), then at the same time press right (it moves right), and then release right, picture stops. I thought it would move again left. How can I achieve this?
/edit/
And what about touch handling?
I'm not sure how it's animated as I'm not familiar with TouchCollection.
But using XNA to animate works like this for most of the solutions out there:
You have your texture which is a spritesheet I assume containing all the frames for your animated sprite.
You use a Rectangle which will hold Position and size on the screen.
You also use something called a source rectangle, which is a rectangle that represents an area inside your sprite, which will stretch in your position rectangle. Here is an image:
Rectangle A is your position + size rectangle, and rectangle B is your source rectangle.
To create an animation you say the following ( pseudo code ):
int timer = 0;
Rectangle position = new Rectangle(100, 100, 80, 80); // position 100x, 100y, and size is 80 width and height.
Rectangle source = new Rectangle(0, 0, 80, 80); // Position on the spritesheet is 0, 0 which should be first frame, and the frames are all 80*80 pixels in size.
private void OnUpdate(object sender, GameTimerEventArgs e)
{
timer += e.ElapsedTime.TotalMilliseconds;
if(timer > 30) // If it has been 0.03 seconds = 33 frames per second
{
timer = 0; // reset timer
source.X += 80; // Move x value to next frame
if(source.X > widthOfYourSpriteSheet) source.X = 0; // Reset the animation to the beginning when we are at the end
}
}
Your draw function will look pretty much the same, except for the sourcerectangle argument you will put in it.
Today im doing the pixels in the paint event to blink.
In form1 i have this code in a timer tick event that the interval is set to 1000ms.
private void timer1_Tick(object sender, EventArgs e)
{
CloudEnteringAlert.cloudColorIndex = (CloudEnteringAlert.cloudColorIndex + 1) % CloudEnteringAlert.cloudColors.Length;
pictureBox1.Invalidate();
}
In the CloudEntering class i have on the top:
public static Brush[] cloudColors = new[] { Brushes.Yellow, Brushes.Transparent };
Then in a paint method this paint method im calling from the form1 pictureBox1 paint event:
foreach (PointF pt in clouds)
{
e.FillEllipse(cloudColors[cloudColorIndex], pt.X * (float)currentFactor, pt.Y * (float)currentFactor, 7f, 7f);
}
So what i see now is one second the pixels are in yellow and one second the pixels are in Transparent.
Now what i want to do is:
Each pixel will start from radius 5.
Each pixel radius will get bigger to 25.
The animation will be from the top to the bottom.
Each pixel that got to radius 25 will start to get smaller back to radius 5.
When the first pixel is started from 5 will get to radius 15 the next one will start to get bigger.
So if the first pixel is start at 5 now its 15 the next one will start to get bigger and the first one will continue to 25 when the first one is 25 it will get smaller. The second one when its 15 the third one will get bigger and so on.
All the pixels will start at radius 5 but only the first one will start get bigger get to 15 then the next one and when the first is 25 it will get smaller .
This is the time between each pixel.
And each pixel radius size change should take 300ms !
How can i do it ?
You want to start by encapsulating all information needed to render a single ellipse into a separate class. That would be something like:
public class Ellipse
{
public PointF Center { get; set; }
public Brush Brush { get; set; }
public float Diameter { get; set; }
public float DiameterDelta { get; set; }
public Ellipse(float x, float y)
{
Center = new PointF(x, y);
Brush = Brushes.Blue;
Diameter = 5;
DiameterDelta = 1;
}
}
The Ellipse.DiameterDelta property is the delta value which will be used for animation, and it can be positive (when going from diameter 5 to diameter 25), or negative (when going backwards). The value of this property (I've used 1 above) together with the your Timer.Interval will influence the speed of your animation.
A better OOP design would probably advocate moving animation-related properties out of this class, but for simplicity sake, it's better to start with this.
In your timer event, you might have something like:
private void timer_Tick(object sender, EventArgs e)
{
// presuming that you made a separate user control
// which has a collection of ellipses in a `Clouds` property
foreach (var c in cloudBox.Clouds)
Animate(c);
cloudBox.Invalidate();
}
private void Animate(Ellipse c)
{
// update diameter
c.Diameter += c.DiameterDelta;
// when you reach bounds, change delta direction
if ((c.DiameterDelta < 0 && c.Diameter <= 5) ||
(c.DiameterDelta > 0 && c.Diameter >= 25))
c.DiameterDelta = -c.DiameterDelta;
}
To get a smooth, non flickering animation, you will most likely have to use a custom control with ControlStyles.AllPaintingInWmPaint and ControlStyles.OptimizedDoubleBuffer set in its constructor, so instead of a PictureBox, I would do something like:
public partial class CloudBox : UserControl
{
public CloudBox()
{
InitializeComponent();
SetStyle(
ControlStyles.AllPaintingInWmPaint |
ControlStyles.OptimizedDoubleBuffer |
ControlStyles.UserPaint |
ControlStyles.ResizeRedraw, true);
}
private readonly List<Ellipse> _clouds = new List<Ellipse>();
public List<Ellipse> Clouds
{
get { return _clouds; }
}
protected override void OnPaint(PaintEventArgs e)
{
e.Graphics.CompositingQuality = CompositingQuality.HighQuality;
e.Graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
e.Graphics.SmoothingMode = SmoothingMode.HighQuality;
foreach (var cloud in _clouds)
{
e.Graphics.FillEllipse(
cloud.Brush, cloud.Center.X, cloud.Center.Y,
cloud.Diameter, cloud.Diameter);
}
base.OnPaint(e);
}
}
I haven't tested this, but I believe you'll be able to fill in the details. Setting Timer.Interval to 10 or 20 ms should yield a pretty fluid animation IMHO.
[Edit] To instantiate the whole thing with some test data (I don't know where you get it from), you could use something like this in your Form.Load event handler:
for (int i = 0; i < 400; i += 50)
for (int j = 0; j < 400; j += 50)
cloudBox.Clouds.Add(new Ellipse(i, j));
I have a game where I need a wheel to spin, but I want to be able to set when I want it to stop which is fine if I can figure out how to slow it down without using a timer like I am then I can handle that part.
what I have so far is a rotateimage function which I found and using a timer (changing the interval) to slow it down. What I'm asking is in winforms is there a better way to do this because I have to let it spin faster a few times then slow down then stop.
I have found help for this is many different languages but not C# win forms. I wanted to know if it is possible.
private void timer1_Tick(object sender, EventArgs e)
{
image = new Bitmap(#"C:\wheel.png");
Wheel1.Image = (Bitmap)image.Clone();
wheelspeed1 = wheelspeed1 + 5;
angle = wheelspeed1;
RotateImage(Wheel1, image, angle);
Wheel1.Refresh();
if (timer1.Interval < 150)
{
timer1.Interval++;
}
else
timer1.Enabled = false;
}
public static Bitmap RotateImage(Image image, float angle)
{
return RotateImage(image, new PointF((float)image.Width / 2, (float)image.Height / 2), angle);
}
public static Bitmap RotateImage(Image image, PointF offset, float angle)
{
if (image == null)
throw new ArgumentNullException("image");
Bitmap rotatedBmp = new Bitmap(image.Width, image.Height);
rotatedBmp.SetResolution(image.HorizontalResolution, image.VerticalResolution);
Graphics g = Graphics.FromImage(rotatedBmp);
g.TranslateTransform(offset.X, offset.Y);
g.RotateTransform(angle);
g.TranslateTransform(-offset.X, -offset.Y);
g.DrawImage(image, new PointF(0, 0));
return rotatedBmp;
}
This makes it spin and slow down and stop but its a really bad way of doing it I know that. Also, it doesn't really allow me to let it spin fast for a while before slowing and stopping.
If you just want to spin at top speed for a bit before starting to slow down, create a counter. Then start spinning fast and decrement the counter at every interval. When that counter gets to 0, start increasing the interval.
So, something like:
private int _fastSpinCounter = 50; // spin fast for this many intervals
private void timer1_Tick(object sender, EventArgs e)
{
image = new Bitmap(#"C:\wheel.png");
Wheel1.Image = (Bitmap)image.Clone();
// not sure why you're increasing the rotation angle here
wheelspeed1 = wheelspeed1 + 5;
angle = wheelspeed1;
RotateImage(Wheel1, image, angle);
Wheel1.Refresh();
if (_fastSpinCounter > 0)
{
--_fastSpinCounter;
else if (timer1.Interval < 150)
{
timer1.Interval++;
}
else
timer1.Enabled = false;
}
On a related note, you really don't need to be loading that image at every timer tick. You could just load the bitmap once and keep it cached. As it is, you're failing to call Dispose on the image, which could cause you to have resource problems if the timer ticks especially fast.
I've been racking my brain trying to figure out how to animate an effect. This is related to a question I asked on math.stackexchange.com.
https://math.stackexchange.com/questions/91120/equal-division-of-rectangles-to-make-total/
As a side note, I didn't implement the drawing algorithm that was defined on the question above -- instead using my own in order to change the perspective to make it look more condensed.
I've been able to draw a stationary 3d style effect, but I am having trouble wrapping my brain around the logic to make the lines below look like they are coming towards you.
My code is as follows,
List<double> sizes = new List<double>();
private void Form1_Load(object sender, EventArgs e)
{
for (int y = 1; y < 10; y++)
{
double s = ((240 / 2) / y) / 4;
sizes.Add(s);
}
sizes.Add(0);
}
int offset = 0;
private void button1_Click(object sender, EventArgs e)
{
Bitmap b = new Bitmap(320, 480);
Graphics g = Graphics.FromImage(b);
Color firstColor = Color.DarkGray;
Color secondColor = Color.Gray;
Color c = firstColor;
int yOffset = 0;
for(int i = 0; i < sizes.Count; i++)
{
c = (i % 2 == 0) ? firstColor : secondColor;
int y = (int)Math.Round(b.Height - yOffset - sizes[i]);
int height = (int)Math.Round(sizes[i]);
g.FillRectangle(new SolidBrush(c), new Rectangle(0, y + offset, b.Width, height + offset));
yOffset += (int)sizes[i];
}
this.BackgroundImage = b;
offset+=1;
}
Each button click should cause the rectangles to resize and move closer. However, my rectangles aren't growing as they should. My logic draws fine, but simply doesn't work as far as moving goes.
So my question is:
Is there an existing algorithm for this effect that I am not aware of, or is this something pretty simple that I'm over thinking? Any help in correcting my logic or pointing me in the right direction would be very appreciated.
Interesting...
(video of the answer here: http://youtu.be/estq62yz7v0)
I would do it like that:
First, drop all RECTANGLE drawing and draw your effect line by line. Like so:
for (int y=start;y<end;y++)
{
color = DetermineColorFor(y-start);
DrawLine(left, y, right, y, color);
}
This is of course pseudo-code not to be troubled with GDI+ or something.
Everything is clear here, except on how to code DetermineColorFor() method. That method will have to return color of the line at specified PROJECTED height.
Now, on the picture, you have:
you point of view (X) - didn't know how to draw an eye
red line (that's your screen - projection plane)
your background (alternating stripes at the bottom)
and few projecting lines that should help you devise the DetermineColorFor() method
Hint - use triangle similarity to go from screen coordinates to 'bar' coordinates.
Next hint - when you are in 'bar' coordinates, use modulo operator to determine color.
I'll add more hints if needed, but it would be great if you solved this on your own.
I was somehow inspired by the question, and have created a code for the solution. Here it is:
int _offset = 0;
double period = 20.0;
private void timer1_Tick(object sender, EventArgs e)
{
for (int y = Height / 3; y < Height; y++)
{
using (Graphics g = CreateGraphics())
{
Pen p = new Pen(GetColorFor(y - Height / 3));
g.DrawLine(p, 0, y, Width, y);
p.Dispose();
}
}
_offset++;
}
private Color GetColorFor(int y)
{
double d = 10.0;
double h = 20.0;
double z = 0.0;
if (y != 0)
{
z = d * h / (double)y + _offset;
}
double l = 128 + 127 * Math.Sin(z * 2.0 * Math.PI / period);
return Color.FromArgb((int)l, (int)l, (int)l);
}
Experiment with:
d - distance from the eye to the projection screen
h - height of the eye from the 'bar'
period - stripe width on the 'bar'
I had a timer on the form and event properly hooked. Timer duration was 20ms.
Considering that you're talking here about 2D rendering, as much as I understodd, to me it seems that you're gonna to reenvent the wheel. Cause what you need, IMHO; is use Matrix Transformations already available in GDI+ for 2D rendering.
Example of aplying it in GDI+ : GDI+ and MatrixTranformations
For this they use System.Drawing.Drawing2D.Matrix class, which is inside Graphics.
The best ever 2D rendering framework I ever used is Piccolo2D framework which I used with great success in big real production project. Definitely use this for your 2D rendering projects, but first you need to study it little bit.
Hope this helps.
Is it possible to rotate a button or any control at a particular angle in WinForms? If so, how?
If you really want to (I have no idea why one would..*) you could try to use a Button subclass, maybe like that:
public partial class TurnButton : Button
{
public TurnButton()
{
InitializeComponent();
}
int angle = 0; // current rotation
Point oMid; // original center
protected override void OnLayout(LayoutEventArgs levent)
{
base.OnLayout(levent);
if (oMid == Point.Empty) oMid = new Point(Left + Width / 2, Top + Height / 2);
}
protected override void OnPaint(PaintEventArgs pe)
{
int mx = this.Size.Width / 2;
int my = this.Size.Height / 2;
SizeF size = pe.Graphics.MeasureString(Text, Font);
string t_ = Text;
Text = "";
base.OnPaint(pe);
if (!this.DesignMode)
{
Text = t_; pe.Graphics.TranslateTransform(mx, my);
pe.Graphics.RotateTransform(angle);
pe.Graphics.TranslateTransform(-mx, -my);
pe.Graphics.DrawString(Text, Font, SystemBrushes.ControlText,
mx - (int)size.Width / 2, my - (int)size.Height / 2);
}
}
protected override void OnClick(EventArgs e)
{
this.Size = new Size(Height, Width);
this.Location = new Point(oMid.X - Width / 2, oMid.Y - Height / 2);
angle = (angle + 90) % 360;
Text = angle + "°";
base.OnClick(e);
}
}
(* I have no idea why I wrote that, either ;-)
You can't rotate controls. That's simply not supported by the native API controls that WinForms uses.
And one might wonder why it even should be supported. What could you possibly be trying to do that you'd need to rotate a button control? It would be much easier to draw it in a different place with a different shape in the first place, rather than trying to rotate an existing control. (Do note that you can also resize and reposition a control at run-time, if that would fit your needs. Investigate the Size and Location properties.)
The only workaround is to draw the control's image to a bitmap, hide the control, and draw the bitmap onto the form in the location you want it to appear. Of course, that won't result in a control that the user can interact with. They won't be able to click an image of a button, because it's not a real button. If that's acceptable to you, you should probably be using an image in the first place, rather than a button.
This is similar to the question asked here:
Rotating a .NET panel in Windows Forms
The quick summary of answers from that question is that while it may be possible to do it, it would be very, very complicated.
A possible workaround in some cases would be this:
Use a tabControl , and resize it so you only have the button left. Set the allignment to left/right, and you have your button rotated 90/270 degrees.
public class VerticalButton : Button
{
public string VirticalText { get; set; }
protected override void OnPaint(PaintEventArgs pe)
{
base.OnPaint(pe);
StringFormat stringFormat = new StringFormat();
stringFormat.FormatFlags = StringFormatFlags.DirectionVertical;
SolidBrush solidBrush = new SolidBrush(this.ForeColor);
stringFormat.Alignment = StringAlignment.Center;
stringFormat.LineAlignment = StringAlignment.Center;
pe.Graphics.DrawString(VirticalText, this.Font, solidBrush,
new Rectangle(0, 0, Width, Height), stringFormat);
}
}