# EmptyCrate

#### About Me | Contact Me | Training | C++ Weekly (YouTube) | Awesome C++ T-Shirts

I was inspired by my recent attempt at creating a parallel Mandelbrot generator for Minnow to learn some javascript and make a javascript version of it. Here is an actual example of this code in use. The javascript itself is pretty simple:

``````function point(t_x, t_y)
{
this.x = t_x;
this.y = t_y;
}
function color(t_r, t_g, t_b)
{
this.r = t_r;
this.g = t_g;
this.b = t_b;
}

function get_color(t_point, t_center, t_width, t_height, t_scale)
{
var xscaled = t_point.x/(t_width/t_scale) + (t_center.x - (t_scale/2.0 ));
var yscaled = t_point.y/(t_height/t_scale) + (t_center.y - (t_scale/2.0 ));

var x = xscaled;
var y = yscaled;

var iteration = 0;
var max_iteration = 2000;

var stop_iteration = max_iteration;

while ( iteration < stop_iteration )
{
if ((x*x) + (y*y) > (2.0*2.0) && stop_iteration == max_iteration)
{
stop_iteration = iteration + 5
}

var xtemp = (x*x) - (y*y) + xscaled;
y = (2.0*x*y) + yscaled;
x = xtemp;
iteration += 1
}

if (iteration == max_iteration)
{
return new color(0.0,0.0,0.0)
} else {
var value = ((iteration + 1) - (Math.log(Math.log(Math.abs(x * y))))/Math.log(2.0));
var red = 0.0;
var green = 0.0;
var blue = 0.0;

var colorval = Math.floor(value * 10.0);

if (colorval < 256)
{
red = colorval/256.0;
} else {
colorband = Math.floor((colorval - 256) % 1024 / 256);
mod256 = colorval % 256;
if (colorband == 0)
{
red = 1.0;
green = mod256 / 255.0;
blue = 0.0;
} else if (colorband == 1) {
red = 1.0;
green = 1.0;
blue = mod256 / 255.0;
} else if (colorband == 2) {
red = 1.0;
green = 1.0;
blue = 1.0 - (mod256/255.0);
} else {
red = 1.0;
green = 1.0 - (mod256/255.0);
blue = 0.0;
}
}
return new color(red, green, blue);
}
}

function region_calc(t_tl, t_br, t_width, t_height, t_center, t_scale, t_context)
{
for (var y = t_tl.y; y < t_br.y; y++)
{
for (var x = t_tl.x; x < t_br.x; x++)
{
var p = new point(x,y);
set_pixel(p, get_color(p, t_center, t_width, t_height, t_scale), t_context);
}
}
}

function set_pixel(t_point, t_color, t_context)
{
t_context.fillStyle = "rgb("+Math.floor(t_color.r*255)+","+Math.floor(t_color.g*255)+","+Math.floor(t_color.b*255)+")";
t_context.fillRect(t_point.x, t_point.y, 1, 1);
}

function draw()
{
var m_width = document.getElementById("width").value;
var m_height = document.getElementById("height").value;
var m_x = document.getElementById("xloc").value;
var m_y = document.getElementById("yloc").value;
var m_scale = document.getElementById("scale").value;

var canvas = document.getElementById("canvas");
canvas.width = m_width;
canvas.height = m_height;
var ctx = canvas.getContext("2d");
region_calc(new point(0,0), new point(m_width, m_height), m_width, m_height, new point(m_x, m_y), m_scale, ctx);
}
``````
Related