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?

  • 1
    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.2011-12-12

2 Answers 2

1

generated image

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

  • 1
    What formulas did you use for HSL values to get this result?2012-10-23
1

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

  • 0
    Amazing. I love swift and your color gamut is very striking. Thank you a million.2016-11-02