Image Circular Wrap in iOS

Question

I have a problem - I want to create a circular wrap function which will wrap an image as depicted below:

This is available in OSX however is not available on iOS.

My logic so far has been:

Split the image up into x sections and for each section:

1. Rotate alpha degrees
2. Scale the image in the x axis to create a diamond shaped 'warped' effect of the image
3. Rotate back 90 - atan((h / 2) / (w / 2))
4. Translate the offset

My problem is that this seems inaccurate and I have been unable to mathematically figure out how to do this correctly - any help would be massively appreciated.

Link to OSX docs for CICircularWrap:

https://developer.apple.com/library/archive/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/filter/ci/CICircularWrap

Answer 1

Since CICircularWrap is not supported on iOS (EDIT: it is now - check answer below), one has to code his own effect for now. Probably the simplest way is to compute the transformation from polar to cartesian coordinate systems and then interpolate from the source image. I've come up with this simple (and frankly quite slow - it can be much optimised) algorithm:

    #import <QuartzCore/QuartzCore.h>

    CGContextRef CreateARGBBitmapContext (size_t pixelsWide, size_t pixelsHigh)
    {
        CGContextRef    context = NULL;
        CGColorSpaceRef colorSpace;
        void *          bitmapData;
        int             bitmapByteCount;
        int             bitmapBytesPerRow;

        // Declare the number of bytes per row. Each pixel in the bitmap in this
        // example is represented by 4 bytes; 8 bits each of red, green, blue, and
        // alpha.
        bitmapBytesPerRow   = (int)(pixelsWide * 4);
        bitmapByteCount     = (int)(bitmapBytesPerRow * pixelsHigh);

        // Use the generic RGB color space.
        colorSpace = CGColorSpaceCreateDeviceRGB();
        if (colorSpace == NULL)
        {
            fprintf(stderr, "Error allocating color space\n");
            return NULL;
        }

        // Allocate memory for image data. This is the destination in memory
        // where any drawing to the bitmap context will be rendered.
        bitmapData = malloc( bitmapByteCount );
        if (bitmapData == NULL)
        {
            fprintf (stderr, "Memory not allocated!");
            CGColorSpaceRelease( colorSpace );
            return NULL;
        }

        // Create the bitmap context. We want pre-multiplied ARGB, 8-bits
        // per component. Regardless of what the source image format is
        // (CMYK, Grayscale, and so on) it will be converted over to the format
        // specified here by CGBitmapContextCreate.
        context = CGBitmapContextCreate (bitmapData,
                                         pixelsWide,
                                         pixelsHigh,
                                         8,      // bits per component
                                         bitmapBytesPerRow,
                                         colorSpace,
                                         kCGImageAlphaPremultipliedFirst);
        if (context == NULL)
        {
            free (bitmapData);
            fprintf (stderr, "Context not created!");
        }

        // Make sure and release colorspace before returning
        CGColorSpaceRelease( colorSpace );

        return context;
    }

    CGImageRef circularWrap(CGImageRef inImage,CGFloat bottomRadius, CGFloat topRadius, CGFloat startAngle, BOOL clockWise, BOOL interpolate)
    {
        if(topRadius < 0 || bottomRadius < 0) return NULL;

        // Create the bitmap context
        int w = (int)CGImageGetWidth(inImage);
        int h = (int)CGImageGetHeight(inImage);

        //result image side size (always a square image)
        int resultSide = 2*MAX(topRadius, bottomRadius);
        CGContextRef cgctx1 = CreateARGBBitmapContext(w,h);
        CGContextRef cgctx2 = CreateARGBBitmapContext(resultSide,resultSide);

        if (cgctx1 == NULL || cgctx2 == NULL)
        {
            return NULL;
        }

        // Get image width, height. We'll use the entire image.
        CGRect rect = {{0,0},{w,h}};

        // Draw the image to the bitmap context. Once we draw, the memory
        // allocated for the context for rendering will then contain the
        // raw image data in the specified color space.
        CGContextDrawImage(cgctx1, rect, inImage);

        // Now we can get a pointer to the image data associated with the bitmap
        // context.
        int *data1 = CGBitmapContextGetData (cgctx1);
        int *data2 = CGBitmapContextGetData (cgctx2);

        int resultImageSize = resultSide*resultSide;
        double temp;
        for(int *p = data2, pos = 0;pos<resultImageSize;p++,pos++)
        {
            *p = 0;
            int x = pos%resultSide-resultSide/2;
            int y = -pos/resultSide+resultSide/2;
            CGFloat phi = modf(((atan2(x, y)+startAngle)/2.0/M_PI+0.5),&temp);
            if(!clockWise) phi = 1-phi;
            phi*=w;
            CGFloat r = ((sqrtf(x*x+y*y))-topRadius)*h/(bottomRadius-topRadius);
            if(phi>=0 && phi<w && r>=0 && r<h)
            {
                if(!interpolate || phi >= w-1 || r>=h-1)
                {
                    //pick the closest pixel
                    *p = data1[(int)r*w+(int)phi];
                }
                else
                {
                    double dphi = modf(phi, &temp);
                    double dr = modf(r, &temp);

                    int8_t* c00 = (int8_t*)(data1+(int)r*w+(int)phi);
                    int8_t* c01 = (int8_t*)(data1+(int)r*w+(int)phi+1);
                    int8_t* c10 = (int8_t*)(data1+(int)r*w+w+(int)phi);
                    int8_t* c11 = (int8_t*)(data1+(int)r*w+w+(int)phi+1);

                    //interpolate components separately
                    for(int component = 0; component < 4; component++)
                    {
                        double avg = ((*c00 & 0xFF)*(1-dphi)+(*c01 & 0xFF)*dphi)*(1-dr)+((*c10 & 0xFF)*(1-dphi)+(*c11 & 0xFF)*dphi)*dr;
                        *p += (((int)(avg))<<(component*8));
                        c00++; c10++; c01++; c11++;
                    }
                }
            }
        }

        CGImageRef result = CGBitmapContextCreateImage(cgctx2);

        // When finished, release the context
        CGContextRelease(cgctx1);
        CGContextRelease(cgctx2);
        // Free image data memory for the context
        if (data1) free(data1);
        if (data2) free(data2);

        return result;
    }

Use the circularWrap function with parameters:

• CGImageRef inImage the source image
• CGFloat bottomRadius the bottom side of the source image will transform into a circle with this radius
• CGFloat topRadius the same for the top side of the source image, this can be larger or smaler than the bottom radius. (results in wraping around top/bottom of the image)
• CGFloat startAngle the angle in which the left and right sides of the source image will transform. BOOL clockWise direction of rendering
• BOOL interpolate a simple anti-aliasing algorithm. Only the inside of the image is interpolated

some samples (top left is the source image):
with code:

    image1 = [UIImage imageWithCGImage:circularWrap(sourceImage.CGImage,0,300,0,YES,NO)];
    image2 = [UIImage imageWithCGImage:circularWrap(sourceImage.CGImage,100,300,M_PI_2,NO,YES)];
    image3 = [UIImage imageWithCGImage:circularWrap(sourceImage.CGImage,300,200,M_PI_4,NO,YES)];
    image4 = [UIImage imageWithCGImage:circularWrap(sourceImage.CGImage,250,300,0,NO,NO)];

enjoy! :)

Answer 2

Apple have added CICircularWrap to iOS 9

https://developer.apple.com/library/mac/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html#//apple_ref/doc/filter/ci/CICircularWrap

Wraps an image around a transparent circle.

Localized Display Name

Circular Wrap Distortion

Availability

Available in OS X v10.5 and later and in iOS 9 and later.