How to change individual square colour with respect to music per beats continuously for making a visualizer in IPhone?

Question

I want to make a visualisation for my music player.so that i draw a grid view and i want to change each square colour randomly or continuously.

My Code for draw grid

- (void)drawRect:(CGRect)rect

 for (int i = 0; i < 4 ;i = i + 1) {
    for (int j = 0; j < 4; j = j + 1) {
        CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetLineWidth(context, 2.0);

CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);

CGRect rectangle = CGRectMake((j*(100+2))+2,(i*(100+2))+2,100,100);

CGContextAddRect(context, rectangle);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
        CGContextFillPath(context);
CGContextStrokePath(context);
    }
}
}

it look like

Answer 1

In my opinion you are overcomplicating yourself, and limiting future possibilities. If i were you, i would have a grid of UIViews or UIImageViews placed in an array. (You can do it programmatically or with the IB). (You can add the edges by modifying the border property in the view layer)

Then you can do all sort of things by setting their background colors independently, color evens, color odds, random all, anything you want since all you have to do is cycle through the array setting the colors accordingly per beat.

For the beats part is way more complicated than it seems. check this question, it offers a lot of tips on "music information retrieval".

How to detect the BPM of a song in php

Answer 2

I think you should have a single custom UIView.

Then call at short intervals setNeedsDisplayInRect: with the area of the view that you want to redraw.

Finally implement drawRect: and make sure to make optimize it by only redrawing the specified area, and doing it fast!

As for the music beats, better open a separate question ;)