Mathematics Stack Exchange is a question and answer site for people studying math at any level and professionals in related fields. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I decided to learn about the Canvas object in javascript by implementing a display of the Mandelbrot Set.

I am mimicking the Mandelbrot psuedocode found on wikipedia. The thrust of it is that the number of iterations it takes for a point to diverge is proportional to the color that is assigned to that point. However, in javascript, colors are represented in three dimensions, which one dimension (with values from 0 to 255) for the red, blue, and green channels. Obviously when I assign the same values to each channel, I get a boring image in shades of grey.

I was wondering, how would one map this "number of iterations to diverge" into the RGB space and make it look more interesting?

share|cite|improve this question
Perhaps use the HSV color space instead of RGB? – Chris Phan Dec 12 '11 at 20:57
@ChrisPhan, Your comments led me in the right direction. HSL made it super-easy to have better looking output. Do you guys think I should delete me question? – user973810 Dec 12 '11 at 21:45
Don't delete questions without good reason - especially if they provide an answer (even if it's in the comments). Someone in the future might make good use of the thread. – alex.jordan Dec 12 '11 at 21:49
up vote 0 down vote accepted

generated image

As Chris Phan pointed out in the comments, I used the HSL colour space and it looked great.

share|cite|improve this answer
What formulas did you use for HSL values to get this result? – Let_Me_Be Oct 23 '12 at 16:13

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.