4
$\begingroup$

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?

$\endgroup$
4
  • 1
    $\begingroup$ Perhaps use the HSV color space instead of RGB? $\endgroup$
    – PersonX
    Dec 12 '11 at 20:57
  • 2
    $\begingroup$ See stackoverflow.com/questions/5513690/map-rainbow-colors-to-rgb $\endgroup$
    – lhf
    Dec 12 '11 at 21:01
  • $\begingroup$ @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? $\endgroup$ Dec 12 '11 at 21:45
  • 1
    $\begingroup$ 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. $\endgroup$ Dec 12 '11 at 21:49
1
$\begingroup$

generated image

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

$\endgroup$
1
  • 2
    $\begingroup$ What formulas did you use for HSL values to get this result? $\endgroup$ Oct 23 '12 at 16:13
1
$\begingroup$

I use simple algorithm based on sine function and change frequency and phase shift for every color component - below fragment of code in Swift

red = UInt8((sin(self.freqRed * unit * mandelColor + self.phaseRed) + 1) / 2 * 255.0)
green = UInt8((sin(self.freqGreen * unit * mandelColor + self.phaseGreen) + 1) / 2 * 255.0)
blue = UInt8((sin(self.freqBlue * unit * mandelColor + self.phaseBlue) + 1) / 2 * 255.0)

Also attach sample picture

$\endgroup$
1
  • $\begingroup$ Amazing. I love swift and your color gamut is very striking. Thank you a million. $\endgroup$ Nov 2 '16 at 1:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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