5 ms·

I reimplemented the algorithm from [1] in JavaScript using canvas.getImageData for fitness computation. It's far from perfect, but it seems to work. So far I'm

• icefox 18y ago
  You should have it automatically upload images so everyone doesn't have to start at nothing.
• buymorechuck 18y ago
  Very cool. I'm running WebKit nightly 49090 and it's blazingly fast -- 1683965 fitness in 30 minutes
  • jrnkntl 18y ago
    That would be 39090. I'm sure 49090 would be even more faster, in a year or so =)
    • buymorechuck 18y ago
      Oops! Yes =)
  • bd 18y ago
    I envy you :). You may try to run it on different images, I just added new experimental feature: you can set your own target image. This does crash JavaScript sometimes on some images (for unknown reasons). If this happens, just reload the page.
    • jodrellblank 18y ago
      I was trying to do that by saving locally, but FireFox refuses to allow getImageData on an image loaded from the filesystem by a web page loaded from the filesystem, with an NS_ERROR_DOM_SECURITY_ERR Anyway, I will now try with your set-your-own-image version.
      • bd 18y ago
        You can run it locally if it is on your local webserver (http://localhost http://localhost) instead of just filesystem (file://). That's how I work on it (XAMPP). http://en.wikipedia.org/wiki/Xampp http://en.wikipedia.org/wiki/Xampp
• bprater 18y ago
  Didn't know an .getImageData() existed! (Sometime I need to look at the bleeding edge APIs.) Very cool hack!
• jodrellblank 18y ago
  From the description, your algorithm sounds like it would hit this case very quickly: A polygon overlaps another polygon and improves fitness by N. It gets mutated and fitness goes down, so that is not kept. The polygon stays in a local maxima position, when one mutation lowering fitness might allow much better fitness in future. Yet the images look like that doesn't happen - have you deliberately avoided it, or isn't it a problem in practise?
  • bd 18y ago
    I don't do anything smart. These are just brute force mutations, always the same. The only parameter tuning I did was to try several numbers of vertices per polygon for about 15 minutes and from there on I just used the one (6 vertices) that produced image I liked the most. 10 vertices produced too much noise, 4 vertices was kind of rough. I started coding with possible variable number of vertices (that seems to be the case in the original algorithm), but it was just too slow in JavaScript. Anyway, optimization can eventually collapse vertices, so basically I just hardcoded an upper bound. And mutations are kind of soft, always just one element (R,G,B,A,X,Y). I guess there is some place for improvement, for example by using HSV comparision for fitness. Though this may be slow. Raw canvas image data are RGBA. Ah yes, I remember also that at the beginning it didn't want to converge at all when starting with random colors. It works when it can gradually build up from a blank slate.
    • ynd 18y ago
      for example by using HSV comparision for fitness I tried with HSB. It didn't produce good results. The image was always too dark. In HSB, colors that are far apart in our perception can have close distance. For example two colors with the same Brightness, Saturation but a different Hue. Using HSB in the DNA was perfect. It's hard to mutate a RGB color in the right direction. You have to get 3 composants right. In HSB a single modification can change everything. BTW, I coded a Java version after seeing the original. It works, but first, it doesn't converge very fast, second, it's stuck at: http://i33.tinypic.com/2yycdc8.jpg http://i33.tinypic.com/2yycdc8.jpg On the bright side, I can easily switch the population size to 50. Java is very good at this. I piggy back on automatic hardware acceleration for rendering. How did you get yours to converge sooo fast?!
• cubicle67 18y ago
  What a timesink :) I've created a number of variations on this, including a black&white one which does a good job of Darwin. The biggest improvement I've made is in limiting the size of the mutation. Now I have a 1 in 50 chance of executing your mutation code, else the changes are limited to within about 10% of their existing value. This gave me a very nice Velociraptor. I'm also playing with triangles instead of polygons, but I'm impatient and trying to run them all simultaneously. Time to upgrade...
• Tichy 18y ago
  How do you compute the similarity, pixel by pixel?
  • bd 18y ago
    Yes, I try to do it as cheaply as possible. abs(r1-r2) + abs(g1-g2) + abs(b1-b2)
    • wlievens 18y ago
      Typically, distance between multiple samples of stuff uses the minimize-the-sum-of-squares technique, maybe it applies here too?