Speaking of passion. This one has been bugging me for a couple of days now.
You might not know this eye-candy under its real name, but I am pretty damn sure you have seen it around:
The so-called Ishihara Color Test was first designed by Dr. Shinobu Ishihara, a professor at the University at Tokyo and published in 1917. The plates that are used in this test each contain a circle filled with dots of random size and color, all having the same space between them. I came across one of them a few days ago and decided to create an Ishihara Plate on my own. What appeared to be an hour of work turned out to be a painful process that bore fruit eventually.
Obviously, I didn’t want to draw all the circles manually. What I was looking for was a secret trick, a special technique or at least a simple plugin. Correct me if I am wrong, but it seems there is no Photoshop or Illustrator plugin out there to align dots within the boundaries of a certain shape while randomizing their radii and positions. The half-tones filter effect in PS is far from the desired result, even the neat alignment flexibility of Illustrator didn’t lead to anything useful.
My next approach was to create spheres in a 3D environment and make them collide in a dynamics simulation. I modeled a small ashtray and converted it to a passive rigid body to give the spheres some boundaries. I used the dynamic engine of Maya and let the simulation calculate about 2000 frames.
Due to the roundness of the spheres, a new issue popped up: seen from the top, big spheres were able to overlap smaller ones even though they were not overlapping in 3D space. So I deleted the spheres and created small cylinders, akin to casino chips. They couldn’t overlap as easily, but they tend to lie down on each other…
To avoid this, I broke the connection between the dynamics solver and the rotation properties of the spheres, which gave much better results. Still, the calculation time was unbearable, especially when our solver has to keep track of 200 colliding cylinders.
I knew I had to move the whole thing to 2D to find the ideal compromise between usability and speed. To be flexible with the resolution of my resulting Ishihara Plate I figured it would be best to render it out as vector data. I started working on a simple particle engine containing a “mother dot” that emitted new surrounding dots. Programming in Actionscript 2, I made the particles bounce off from each other, but there were still some issues with the movements which led to vibrating dots. A hell of a lot of trigonometry, a lot of distress. I let go of the problem for a whole day to get back to it with a fresh mind. Just a simple collision detection wouldn’t do, the final solution had to involve friction, bounciness, mass and other physical properties. Throughout the process of finding a suitable physics engine for flash, I familiarized myself with FLADE, Box2D, APE and my personal favorite, the Fisix Engine. Just a few lines of code lead to great results and the syntax is child’s play! I created a surrounding circle as container for the dynamics calculation and bound a circle creation handler to the mouse click. To export the data as vectors, I chose to write an SVG file directly out of Actionscript 3. See the result here:
It is pretty easy to handle, just follow the instructions on the page. Once you saved your SVG file, you can open it up in Adobe Illustrator and work on the optimized vector data.
You can take a look at the code or use it for your own purposes. I uploaded a package containing the flash source files, a sample SVG file and the same image colored as an Illustrator file. The SVG save needs at least Flash Player 10. In case you need to use FP 9, I included a PHP file and an alternative ActionScript file to work around this problem. You can download it here.
Any Questions? Comment!
Dan Borufka
finally.. have been lookin for ages to find somethin like that *thumbsup*
WOW, thank you.I always wanted to write in my site something like that. Can I take part of your post to my blog?
Good post, I can’t say that I agree with everything that was said, but very good information overall:)
Wow, great tool – been looking for something that would do random circle patterns within a ‘shape’. Would REALLY be useful if could generate the circles within/around custom boundaries/obstructions. Haven’t a clue about actionscript though so went looking in the .FLA file for the boundary circle to see if could modify it only to find it’s all done in AS. :-S – is it possible to make the generated circles fit within or repel from a custom shape – i.e. an irregular vector object created in illustrator?
Maybe you could edit the webpage name JAKE&DAN Ishihara Color Test Plate Generator to more generic for your webpage you write. I enjoyed the blog post nevertheless.
hi there! i´m crazy looking for something like that!!! but my knowlegde in photoshop is not the best and i´ve got no experience at all with illustrator. the thing is: i did for some fashion students in milan a photoshooting and all their clothes were colourfull, so i wanna call the photoshooting DALTONIC and i´d like to write daltonic inside a Ishihara plate. i´m trying since a while but cannot do it! if you can help me, please write me! kisses
I think the best way to go for yo is to export an Ishihara plate from our tool and then edit it in Illustrator – try to keep your circles small and the plate big, as you’ll need space to get all characters there. In Illustrator, use the standard type tool as blueprint and then place circles over it. Once you have the circles layed out to shape the type you can remove the original and just keep the plate.
my dreams just came true. thanks for sharing your genius-ness.
Sorry, but how the “save as .svg” works?? coz, I find that I can’t click the “save as .svg” part… hehe
Try to empty our cache and reload the I.P. Generator – we had a bugfix a few months ago.
Hi,
I am so happy to have stumbled across this hopefully you can help me with my problem. The this is i had these tests as a child and ti turns out i am colour-bling, mainly red-green now i am 18 and i want to design a plate with text if possible as a template for a tattoo. Here comes my problem, with my colour blindness i cannot design one i am finding it impossible and i was wondering if anyone could help me if possible
Let us know what you need, Lyam.
hey sorry it took a while to reply basically I took a picture od an normal ishihara plate with the number 2 on it to an artist and one refused to do it and the other had problems and i was wondering if there was anyway you could possibly create one with bigger circles and slighttly bigger spaces between the circles so that it wouldnt look a mess when it ages. I was hoping a similar colour scheem to the number 2 plate on http://colorvisiontesting.com/ishihara.htm but if i would be easier in simplar colours im fine with that too… I was just wondering what you though and if it is possible to have it bigger and simpler whilst keeping the ishihara effect. Thanks Lyam
Lyam,
are you looking for someone to create the plates for you or are you looking for specific features of the Ishihara Plate Generator?
As to the ladder one, you can change the size of circles by holding down the Ctrl key and moving the cursor. To change the space between circle simply open the finished plate in Illustrator (or any other vector editing tool), join the circles with the Pathfinder and then use Object > Path > Offset Path.
If you are looking for someone to do it for you, send us your mail address so we can get in touch!
Best,
J&D
I was actually lookinf for someone to make it for me if it was at all possible my email is lyambrabson@yahoo.com
hi Dan,
i’m looking for your urgent help. i’m searching for an engine that i can produce the Ishihara plates with the numbers (63, 75, 138) i want. but it’s not easy and i have no hints at all. i try your Ishihara plates generator, but i’m too stupid that i can’t make one. would you please tell me how i can do it fastly as i’m in very urgent to include those in my project. so please please please save me. many thanks!
Have you considered updating this so it will auto generate a random Ishihara template, randomly populate the circles with color based on the ‘type’ of color blindness, and arrange the bubbles to align text supplied by a user? It seems like this is the first and most difficult piece. I’m going to see if I can build off what you’ve already done, but I’m colorblind too so there are going to be a few parts of this that will be particularly difficult. “So, is it displaying the text properly and I just can’t see it…or is it gibberish?”