Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing a moving sine wave anti-aliased

I want to draw a moving sine wave with variable frequency and variable amplitude in a crisp and anti-aliased way. How is this possible?

like image 889
Sandeep Avatar asked May 19 '11 05:05

Sandeep


2 Answers

Well, I implemented sine wave into the UIView drawrect method as follows :

 float x=75;
 float yc=50;
 float w=0; 
  while (w<=rect.frame.size.width) {
    CGPathMoveToPoint(path, nil, w,y/2);
    CGPathAddQuadCurveToPoint(path, nil, w+x/4, -yc,w+ x/2, y/2);
    CGPathMoveToPoint(path, nil, w+x/2,y/2);
    CGPathAddQuadCurveToPoint(path, nil, w+3*x/4, y+yc, w+x, y/2);
    CGContextAddPath(context, path);
    CGContextDrawPath(context, kCGPathStroke);
    w+=x;
   }

Here x would be the width of each sine wave, while y is the height of the frame. This would draw number of sine waves to fit in the whole UIViewFrame. It would produce crisp looking sine wave and yc being control handle. Try it you might like it.

If the width ie. x is similar to the width of the frame then a single sine wave will be produced.

Number of complete sine wave = (width of frame) / ('x' width of each sine wave)

like image 146
Sandeep Avatar answered Sep 29 '22 07:09

Sandeep


Made a more complete, and swift version of GeneratorOfOne's version. This one also fills the bottom of the wave with a chosen color:

class WaveView: UIView {

    private var maskPath: UIBezierPath!
    @IBInspectable var fillColor: UIColor = UIColor.blueColor()
    @IBInspectable var cycles: CGFloat = 7

    override func drawRect(rect: CGRect) {

        var w: CGFloat = 0              // Starting position
        let width = rect.width
        let y: CGFloat = rect.height
        let yc: CGFloat = rect.height / 2
        let x = width/cycles

        let context = UIGraphicsGetCurrentContext();
        CGContextSetFillColorWithColor(context, UIColor.greenColor().CGColor);
        let path = CGPathCreateMutable();

        CGPathMoveToPoint(path, nil, 0, 0)

        while (w<=rect.width) {
            CGPathMoveToPoint(path, nil, w,y/2);
            CGPathAddQuadCurveToPoint(path, nil, w+x/4, -yc, (w+x/2), y/2);
            CGPathMoveToPoint(path, nil, w+x/2,y/2);
            CGPathAddQuadCurveToPoint(path, nil, w+3*x/4, y+yc, w+x, y/2);
            w+=x;
        }

        CGPathAddLineToPoint(path, nil, rect.width, rect.height)
        CGPathAddLineToPoint(path, nil, 0, rect.height)
        CGPathAddLineToPoint(path, nil, 0, y/2);
        CGPathCloseSubpath(path)

        maskPath = UIBezierPath(CGPath: path)
        maskPath.lineCapStyle = CGLineCap.Square
        maskPath.lineJoinStyle = CGLineJoin.Miter

        CGContextAddPath(context, path);
        CGContextSetFillColorWithColor(context, fillColor.CGColor)
        CGContextFillPath(context)
    }

}
like image 40
Paul Peelen Avatar answered Sep 29 '22 06:09

Paul Peelen