How to animate a trigonometric function without leaving the edges

Question

2.00/5 (1 vote)

See more:

hello, please how I can make this animation does not continue long
to get to the far right

in XAML :

HTML

<Canvas Height="262" Name="MyCanvas"  Width="481" />

in Code :

C#

double time = 0;
double dt = 0.05;
Polyline pl;

public MainWindow()
{
    InitializeComponent();
}

private void buStart_Click(object sender, RoutedEventArgs e)
{
    pl = new Polyline();
    pl.Stroke = Brushes.Red;
    pl.StrokeThickness = 1;
    MyCanvas.Children.Add(pl);
    CompositionTarget.Rendering += StartAnimation;
}
private void StartAnimation(object sender, EventArgs e)
{
    Double PosX = pl.ActualWidth;
    if (PosX < MyCanvas.ActualWidth)
    {
        pl.Points.Add(new Point(time*20, Math.Sin(time)*20));
        time += dt;
    }
    else
    {
       // I do not know what to put here, is it possible : ?
         pl.Points.RemoveAt(1); ¿ ..... ?
          pl.Points.Add(new Point(time * 20, Math.Sin(time) * 20));
          time += dt;
       // CompositionTarget.Rendering -= StartAnimation;
    }
}

Posted 17-Aug-12 10:49am

lagartus

Updated 17-Aug-12 11:29am

Kenneth Haugland

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 17-Aug-12 17:00pm

What's the problem, to make is slower? More points in time or less speed, of course...
--SA

2 solutions

Solution 1

Well I dont completely understand your question, I fyou want to restart the animation you could do this:

C#

private void StartAnimation(object sender, EventArgs e)
{
    Double PosX = pl.ActualWidth;
    if (PosX < MyCanvas.ActualWidth)
    {
        pl.Points.Add(new Point(time*20, Math.Sin(time)*20));
        time += dt;
    }
    else
    {
       // I do not know what to put here, is it possible : ?
         pl.Points.Clear();
         time = 0;
          pl.Points.Add(new Point(time * 20, Math.Sin(time) * 20));
          time += dt;
       // CompositionTarget.Rendering -= StartAnimation;
    }
}

You should consider using DispatcherTimer or the Storyboard if you want to do this. But you should provide additional information if I should help you :)

Posted 17-Aug-12 11:35am

Kenneth Haugland

Comments

Wendelius 17-Aug-12 17:41pm

I think Storyboard would be a perfect solution, but with the information given by the OP this looks feasible. My 5.

Kenneth Haugland 17-Aug-12 17:47pm

Thanks Mika :)

[no name] 17-Aug-12 17:56pm

I want to animate the sine function, similar to this project :

http://www.codeproject.com/Articles/16350/High-Speed-Feature-Rich-and-Easy-To-Use-Graphs-and

please help me

Kenneth Haugland 17-Aug-12 18:01pm

I dont understand what you want, do you want to shift the phase, is that it?

Espen Harlinn 18-Aug-12 12:36pm

Given OP's input, this would be reasonable

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Matt T Heffron · Accepted Answer · 2012-08-17T12:43:00

I think he wants the sine to animate through the canvas, like a "strip-chart recorder".
Like this?

C#

public partial class MainWindow : Window
{
  double time = 0;
  double dtFactor = 0.05;
  Polyline pl;
  TranslateTransform translate;

  public MainWindow()
  {
    InitializeComponent();
  }

  private void buStart_Click(object sender, RoutedEventArgs e)
  {
    pl = new Polyline();
    pl.Stroke = Brushes.Red;
    pl.StrokeThickness = 1;
    MyCanvas.Children.Add(pl);
    translate = new TranslateTransform(0.0, MyCanvas.ActualHeight / 2);
    pl.RenderTransform = translate;
    CompositionTarget.Rendering += StartAnimation;
  }
  private void StartAnimation(object sender, EventArgs e)
  {
    Double PosX = pl.ActualWidth;
    if (PosX >= MyCanvas.ActualWidth)
    {
      pl.Points.RemoveAt(0);
      translate.X--;
    }
    pl.Points.Add(new Point(time, Math.Sin(time * dtFactor) * 0.4 * MyCanvas.ActualHeight));
    time++;
  }

}