Image Vectors – ConvolutionFilter Fun

// June 4th, 2009 // Experiments, Generative art, Source code & tutorials

As a ActionScript Developer, I was aware that there was a ConvolutionFilter in flash, but I pretty much ignored it because it didn’t seem very useful.  But a couple of days ago I was playing with the nice ConvolutionFilter explorer by Sakri and I noticed it can expose some interesting info about a bitmap.

I managed to extract some sort of direction vectors for the pixels:

Source code (with spaghetti example below): Image_vector_source

It still is quite useless at this point, but with that vector info you can create some pretty cool effects. For example, something similar like the Quasimado Spaghetti Incident pictures: (Click on the image to see the drawing in action)

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

8 Responses to “Image Vectors – ConvolutionFilter Fun”

  1. sakri says:

    damn! That’s a lot more than I ever got out of convolution filter :D Nice work!

  2. Mark Knol says:

    Wow that is pretty amazing. Love the spagetti-moves!

    BTW Did you used a convolution filter to get the highlights from the photo?

  3. Kris says:

    Thanks for the comments :)

    @Mark:
    No, I first put the image in grey scale and remove the contrast a bit to get rid of the highlights and the dark spots:
    http://www.neuroproductions.be/uploads/blog/examples/convolution/convolution1.jpg

    Then I create 2 bitmaps with the convolution filter where I detect the horizontal and the vertical edges:
    http://www.neuroproductions.be/uploads/blog/examples/convolution/convolution2.jpg

    After that I copy a channel (red and green) from each of the 2 bitmaps in one bitmap:
    http://www.neuroproductions.be/uploads/blog/examples/convolution/convolution3.jpg

    With getPixel() you can now retrieve the green and red value of a specific pixel. The red value represents the horizontal direction and the green value the vertical direction

  4. Well, the reason why it looks so similar is probably because you use the same convolution that I am using to detect the angles inside an image. I have been showing this technique for quite a while now in my “Tinkerer’s Box” talk. Well, congratulations for stumbling across it yourself.

  5. Kris says:

    Hello Mario,
    I saw your “Tinkerer’s Box” session at FITC Amsterdam 2009, but I don’t remember that method? Did you show it there? Maybe I remembered it unconsciously…

    The idea to get directions from pixel values I got from Cay Garrido :
    http://www.neuroproductions.be/experiments/generative-art-lines/

  6. nicoptere says:

    hi,
    beutiful and very inspiring.
    what about using a third component (the blue offset?lightness?) to emulate depth and throw in a 3D model?

  7. hebchop says:

    I’ve been tinkering w/ the loop for different effects. I love this. Thank you.

  8. [...] y a un peu plus d’un an Neuroprod faisait des trucs avec des images. Et ça m’a donné envie de jouer. Sauf que les histoires de direction de l’image je [...]

Leave a Reply