1

Just a quick question.

Can this:

Polka Dot Image

be done with image processing on an iOS device? If yes, how?

Brad Larson
  • 170,088
  • 45
  • 397
  • 571
Morten Gustafsson
  • 1,869
  • 2
  • 24
  • 34

3 Answers3

4

Yes, although Core Graphics may not be the best way to do such filtering on an image. My recommendation would be to use an OpenGL ES 2.0 fragment shader. In fact, I just wrote one to do this:

Polka dot image conversion

This is the GPUImagePolkaDotFilter that I just added to my open source GPUImage framework . The easiest way to use it is to grab the framework and apply the filter to whatever you want (it's fast enough to run in real time on video).

If you'd just like to use the fragment shader, the following is my code for this:

 varying highp vec2 textureCoordinate;

 uniform sampler2D inputImageTexture;

 uniform highp float fractionalWidthOfPixel;
 uniform highp float aspectRatio;
 uniform highp float dotScaling;

 void main()
 {
     highp vec2 sampleDivisor = vec2(fractionalWidthOfPixel, fractionalWidthOfPixel / aspectRatio);

     highp vec2 samplePos = textureCoordinate - mod(textureCoordinate, sampleDivisor) + 0.5 * sampleDivisor;
     highp vec2 textureCoordinateToUse = vec2(textureCoordinate.x, (textureCoordinate.y * aspectRatio + 0.5 - 0.5 * aspectRatio));
     highp vec2 adjustedSamplePos = vec2(samplePos.x, (samplePos.y * aspectRatio + 0.5 - 0.5 * aspectRatio));
     highp float distanceFromSamplePoint = distance(adjustedSamplePos, textureCoordinateToUse);
     lowp float checkForPresenceWithinDot = step(distanceFromSamplePoint, (fractionalWidthOfPixel * 0.5) * dotScaling);

     gl_FragColor = vec4(texture2D(inputImageTexture, samplePos ).rgb * checkForPresenceWithinDot, 1.0);
 }
Brad Larson
  • 170,088
  • 45
  • 397
  • 571
  • What about using other shapes and not a circle? – DanielZanchi Dec 09 '22 at 18:39
  • @DanielZanchi - For a pure fragment shader like the one above, you'd need to modify the opacity-checking logic to reflect the shape you'd want. The above works well for a circle because it's pretty easy to calculate the distance from a central point and see whether or not a pixel falls within that (and thus, inside or outside of the radius of a circle). More complex shapes would require more complex logic, or some sort of templating mechanism. Since I wrote this, Core Image has gained many more capabilities that might make this easier to implement via that framework. – Brad Larson Dec 19 '22 at 22:55
  • Yes, I wouldn't know how to draw the shape (for example a heart) with a shader. I was thinking to pixelate and then I would have to replace the squares with the custom shape. – DanielZanchi Dec 21 '22 at 07:52
1

You should be able to do this just by looping and drawing the circles in black and white, and then using that image as a mask for your image.

Here's the first link I found on Google about CoreGraphics masking, which you can probably adapt for your needs: http://cocoawithlove.com/2009/09/creating-alpha-masks-from-text-on.html

I'd imagine drawing lots of circles is something you can figure out with some Googling of your own.

Anshu Chimala
  • 2,800
  • 2
  • 23
  • 22
  • Thanks for your reply. Thats a smart solution. Now I just need to "pixelate" the image... any suggestions ? – Morten Gustafsson Aug 02 '12 at 11:22
  • I don't know if there's a neat CoreGraphics API that pixelates for you (maybe there is, and I just can't find it). You could do the most naive implementation of just scaling the image down and then scaling it back up. If that's too inefficient for your needs, there's some discussion of more efficient algorithms here: http://stackoverflow.com/questions/1987054/whats-a-good-pixelation-algorithm-in-c-sharp-net – Anshu Chimala Aug 03 '12 at 07:50
-1

SHORT Answer is: YES, but exactly using which framework i'm not sure for the moment. Note: Yo have just asked if it is possible, i gave the anwer for your question, not for how to go

ilhnctn
  • 2,210
  • 3
  • 23
  • 41