[Silverlight] beiser curve animation (screen saver)

First view results: (click to enable full screen)

 

Let's look at the overall structure:

 

What is the besell curve? See: http://zh.wikipedia.org/wiki/%E8%B2%9D%E5%A1%9E%E7%88%BE%E6%9B%B2%E7%B7%9A

The process of drawing the fourth-order besell curve is demonstrated:

 

Let's talk about how to use Silverlight to generate such a beautiful curve. Fortunately, Silverlight has prepared the curve drawing interface, path shape for us. The data attribute can be used to draw various curves using the path tag syntax.

For example, use the following code:

<Canvas>    <Path Stroke="DarkGoldenRod" StrokeThickness="3"    Data="M 100,200 C 100,25 400,350 400,175 H 280"/></Canvas>

You can draw an image like

Now we need to use the C command of the path marking syntax to draw a third-level besell curve. The C command requires three points as the drawing parameters. CControlpoint1 Controlpoint2 Endpoint. The startpoint is omitted, because the starting point can be calculated from the context. For example, P0 is the starting point, P1 P2 is the control point, and P3 is the ending point.

 

If you draw a multi-segment continuous and smooth beiser curve, you must meet the condition that the P2-P3 of the previous section and the P0-P1 of the next section are continuous and collocated. That is P3 P0 'must be collinear, P2-P1' must be a straight line, rather than line. When using vector plot tools, the curve will satisfy this condition by default, but we need to calculate the corresponding points by ourselves. Therefore, we need to consider this condition when generating the corresponding points.

 

After clarifying these relationships, we will start to generate data: first move to the initial point, then draw the curve with C in sequence, and finally close the curve. How to generate data is better? To achieve this, I have tried multiple methods. The optimal method is to simulate the transfer of the 'endpoint of each segment 'in the simulation, and then determine the position of P3 P0' At the proportional point R. In this way, it becomes a problem of simulating the movement of several vertices and proportional point R. Here we use linear interpolation to achieve slow color changes. The core code is the step method:

        public void Step(double step)        {            Debug.Assert(_postion.Length == _vector.Length);            for (int i = 0; i < _postion.Length; i++)            {                if (i % 3 == 0)                {                    int j = i - 1;                    int k = i / 3;                    if (j < 0) j += _postion.Length;                    _postion[i].X = (_postion[j].X - _postion[i + 1].X) * Math.Abs(_r[k] - _splitPoint) + _postion[i + 1].X;                    _postion[i].Y = (_postion[j].Y - _postion[i + 1].Y) * Math.Abs(_r[k] - _splitPoint) + _postion[i + 1].Y;                    _r[k] = (_r[k] + 0.003) % (_splitPoint * 2);                }                else                {                    _postion[i].X += _vector[i].X * step;                    _postion[i].Y += _vector[i].Y * step;                    if (_postion[i].X < 0) _vector[i].X = Math.Abs(_vector[i].X);                    if (_postion[i].Y < 0) _vector[i].Y = Math.Abs(_vector[i].Y);                    if (_postion[i].X > _screenWidth) _vector[i].X = -Math.Abs(_vector[i].X);                    if (_postion[i].Y > _screenHeight) _vector[i].Y = -Math.Abs(_vector[i].Y);                }            }            var en = _postion.Select(s => new object[] { s.X, s.Y }).SelectMany(s => s);            if (_postion.Length != 0)            {                string data = string.Format(_format, en.ToArray());                SplineModel line = new SplineModel();                line.Data = data;                if (_currentColor >= _colorAnimation.Length)                {                    string name = _colorAnimation.Last();                    double A1 = int.Parse(name.Substring(1, 2), NumberStyles.HexNumber);                    double R1 = int.Parse(name.Substring(3, 2), NumberStyles.HexNumber);                    double G1 = int.Parse(name.Substring(5, 2), NumberStyles.HexNumber);                    double B1 = int.Parse(name.Substring(7, 2), NumberStyles.HexNumber);                    name = _availableColors[Tools.NextInt(_availableColors.Length)];                    double A2 = int.Parse(name.Substring(1, 2), NumberStyles.HexNumber);                    double R2 = int.Parse(name.Substring(3, 2), NumberStyles.HexNumber);                    double G2 = int.Parse(name.Substring(5, 2), NumberStyles.HexNumber);                    double B2 = int.Parse(name.Substring(7, 2), NumberStyles.HexNumber);                    _colorAnimation = new string[_colorInterval];                    for (int i = 0; i < _colorInterval; i++)                    {                        _colorAnimation[i] = string.Format("#{0:X2}{1:X2}{2:X2}{3:X2}",                            (int)((A2 - A1) * i / _colorInterval + A1),                            (int)((R2 - R1) * i / _colorInterval + R1),                            (int)((G2 - G1) * i / _colorInterval + G1),                            (int)((B2 - B1) * i / _colorInterval + B1)                         );                    }                    _currentColor = 0;                }                line.ColorName = _colorAnimation[_currentColor++];                _lines.Add(line);            }        }

Many of the details are not mentioned here. You need to read the code and understand it yourself. How is the interface designed and created? Only the basic control layout and VSM are used, and the mvvm mode is used. These are not the focus of this Article. If you do not know much about them, you can view their own materials for understanding.

 

Full pack: http://files.cnblogs.com/Aimeast/SLBezierSpline.zip