Question

I need to draw a waveform in an NSView. (I have all the samples in an array). The drawing must be efficient and really fast without clipping, flickering, etc, it must be smooth. The waveform will be “moving” according to the song position and some changes to the samples (DSP processing) will be shown as visual representation onto NSView in realtime.

I’m familiar drawing lines, arcs, etc onto canvas objects and I have developed apps doing such things but not on Mac OS X …

I want to ask if anyone can guide me where to start drawing! Core Animation, OpenGL, simple override drawing methods, ??, etc. Which would be the best practice – API to use?

Answer 1

I would keep it simple and create an NSView subclass with an audioData property that uses Cocoa drawing. You could call [view setAudioData:waveArray] which would in turn call [self setNeedsDisplay:YES].

In your drawRect: method you could then iterate through the samples and use NSRectFill() accordingly. Here sample‘s value is between 0 and 1.

- (void)drawRect:(NSRect)dirtyRect {
    [[NSColor blueColor]set];
    for (id sample in self.waveArray) {
        NSRect drawingRect = NSZeroRect;
        drawingRect.origin.x = [self bounds].origin.x;
        drawingRect.origin.y = [self bounds].origin.y + ([self.waveArray indexOfObject:sample]/([self.waveArray count] - 1.0));
        drawingRect.size.width = [self bounds].size.width/[self.waveArray count];
        drawingRect.size.height = [self bounds].size.height * [sample value];
        NSRectFill(drawingRect);
    }
}

This code isn’t exact, and you should be sure to make it more efficent by only drawing samples inside dirtyRect.