For Best Results:
I've found that this works best for me when viewed in the google chrome browser. Google chrome has shown faster javascript execution times than firefox, which shows faster execution times than IE. Also, web workers seem to have more stable timing and faster timing on chrome than on firefox. At the time of this writing, IE did not support web workers, which forces it to run on the main thread, making the browser less responsive during rendering.
Your mileage may vary!
About:
This started out as an investigation into web workers, but manifested itself into something more. I hope you enjoy it. Feel free to use any images you generate for any purpose commercial or non commercial.
You can find more infomation about the mandelbrot set here: http://en.wikipedia.org/wiki/Mandelbrot_set
You can also find more information about how to render the Mandelbrot Set on my blog at: How to Render the Mandelbrot Set
Parameters:
- Resolution - Change the resolution of the image
- Worker Threads - This specifies how many threads to use when rendering. If you have multiple cores and/or multiple CPUs this will help increase rendering times. The threads used are "web workers" (you can google them for more information). In my experiments, having 0 worker threads (rendering on the main thread only) gives the fastest results, but if you use worker threads, it will make it so your browser is still responsive while rendering. So, web workers seem good for making things in the background while keeping the browser responsive, but they seem like not such a great option if you just want raw power distributed across multiple cores. I think the thread synchronization / communication overhead is killing any multithreaded gains.
- Colors - These let you change the colors that the image is rendered with. You can change the background color (BG) and you can also change the 4 color ranges. The mandlebrot set is made by iterating through a mathematical equation for each pixel and counting how many iterations it takes to cross a threshold. The number of iteraions is what determins the color of the pixel. This mandelbrot viewer does up to 1023 iterations and seperates the number of iterations into 4 color ranges. Range 1: 0-255 iterations, Range 2: 256-511 iterations, Range 3: 512 - 767 iterations, Range 4: 768 - 1023 iterations. You can specify the color (in html color codes) for the start and end of each color range, and the color of the pixel will be an interpolation between the 2 colors. Click "Re-render" to see your changes.
- Color Bias - You can specify the "bias" of each color range, with valid values between 0 and 1. A value of 0.5 will do nothing. A value less than 0.5 will make it so more pixels are closer to the starting color of the color range, and a value greater than 0.5 will make it so more pixels are closer to the end color of the color range. Click "Re-render" to see your changes.
- Blur - Since the images are pretty heavily aliased, I added this to help with the aliasing. It runs on the main thread after all worker threads have completed their work and does a simple box blur.
- Threads send data row by row - I added this option as a test to see if havign the threads return smaller amounts of data more often would affect performance. It doesn't really seem like it affects performance in this application.
- Render data as it comes in - If checked, it will display data as it's calculated, instead of waiting til it's completely done.