## JavaScript ##
Still a student and my first time posting so my codes probably messy and I'm not 100% sure that my pictures have all the needed colors but I was super happy with my results so I figured I'd post them.
I know the contest is over but I really loved the results of these and I always loved the look of recursive backtracking generated mazes so I thought it might be cool to see what one would look like if it placed colored pixels. So I start by generating all the colors in an array then I do the recursive backtracking while popping colors off the array.
// Global variables
const FPS = 100;// FrameRate
var canvas = null;
var ctx = null;
window.onload = Init;
var bInstantDraw = true;
var MOVES_PER_UPDATE = 1000; //How many pixels get placed down
var bDone = false;
var width; //canvas width
var height; //canvas height
var colorSteps = 32;
var imageData;
var grid;
var colors;
var currentPos;
var prevPositions;
// This is called when the page loads
function Init()
{
canvas = document.getElementById( 'canvas'); // Get the HTML element with the ID of 'canvas'
width = canvas.width;
height = canvas.height;
ctx = canvas.getContext('2d'); // This is necessary, but I don't know exactly what it does
imageData = ctx.createImageData(width,height); //Needed to do pixel manipulation
grid = []; //Grid for the labyrinth algorithm
colors = []; //Array of all colors
prevPositions = []; //Array of previous positions, used for the recursive backtracker algorithm
for(var x = 0; x < width; x++)
{
grid.push(new Array());
for(var y = 0; y < height; y++)
{
grid[x].push(0); //Set up the grid
}
}
for(var r = 0; r < colorSteps; r++)
{
for(var g = 0; g < colorSteps; g++)
{
for(var b = 0; b < colorSteps; b++)
{
colors.push(new Color(r * Math.ceil(255 / (colorSteps - 1)), g * Math.ceil(255 / (colorSteps - 1)), b * Math.ceil(255 / (colorSteps - 1))));
//Fill the array with all colors
}
}
}
colors.sort(function(a,b)
{
if (a.r < b.r)
return -1;
if (a.r > b.r)
return 1;
if (a.g < b.g)
return 1;
if (a.g > b.g)
return -1;
if (a.b < b.b)
return -1;
if (a.b > b.b)
return 1;
return 0;
});
currentPos = new Point(Math.floor(Math.random() * width),Math.floor(Math.random() * height));
grid[currentPos.x][currentPos.y] = 1;
prevPositions.push(currentPos);
ChangePixel(imageData, currentPos.x, currentPos.y, colors.pop());
if(bInstantDraw)
{
do
{
var notMoved = true;
while(notMoved)
{
var availableSpaces = CheckForSpaces(grid);
if(availableSpaces.length > 0)
{
var test = availableSpaces[Math.floor(Math.random() * availableSpaces.length)];
prevPositions.push(currentPos);
currentPos = test;
grid[currentPos.x][currentPos.y] = 1;
ChangePixel(imageData, currentPos.x, currentPos.y, colors.pop());
notMoved = false;
}
else
{
if(prevPositions.length != 0)
{
currentPos = prevPositions.pop();
}
else
{
break;
}
}
}
}
while(prevPositions.length > 0)
ctx.putImageData(imageData,0,0);
//document.write('<img src="'+canvas.toDataURL("image/png")+'"/>');
}
else
{
setInterval(GameLoop, 1000 / FPS);
}
}
// Main program loop
function GameLoop()
{
Update();
Draw();
}
// Game logic goes here
function Update()
{
if(!bDone)
{
var counter = MOVES_PER_UPDATE;
while(counter > 0) //For speeding up the drawing
{
var notMoved = true;
while(notMoved)
{
var availableSpaces = CheckForSpaces(grid); //Find available spaces
if(availableSpaces.length > 0) //If there are available spaces
{
prevPositions.push(currentPos); //add old position to prevPosition array
currentPos = availableSpaces[Math.floor(Math.random() * availableSpaces.length)]; //pick a random available space
grid[currentPos.x][currentPos.y] = 1; //set that space to filled
ChangePixel(imageData, currentPos.x, currentPos.y, colors.pop()); //pop color of the array and put it in that space
notMoved = false;
}
else
{
if(prevPositions.length != 0)
{
currentPos = prevPositions.pop(); //pop to previous position where spaces are available
}
else
{
ctx.putImageData(imageData,0,0);
bDone = true;
break;
}
}
}
counter--;
}
}
}
function Draw()
{
// Clear the screen
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle='#000000';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.putImageData(imageData,0,0);
}
function CheckForSpaces(inGrid) //Checks for available spaces then returns back all available spaces
{
var availableSpaces = [];
if(currentPos.x > 0 && inGrid[currentPos.x - 1][currentPos.y] == 0)
{
availableSpaces.push(new Point(currentPos.x - 1, currentPos.y));
}
if(currentPos.x < width - 1 && inGrid[currentPos.x + 1][currentPos.y] == 0)
{
availableSpaces.push(new Point(currentPos.x + 1, currentPos.y));
}
if(currentPos.y > 0 && inGrid[currentPos.x][currentPos.y - 1] == 0)
{
availableSpaces.push(new Point(currentPos.x, currentPos.y - 1));
}
if(currentPos.y < height - 1 && inGrid[currentPos.x][currentPos.y + 1] == 0)
{
availableSpaces.push(new Point(currentPos.x, currentPos.y + 1));
}
return availableSpaces;
}
function ChangePixel(data, x, y, color) //Quick function to simplify changing pixels
{
data.data[((x + (y * width)) * 4) + 0] = color.r;
data.data[((x + (y * width)) * 4) + 1] = color.g;
data.data[((x + (y * width)) * 4) + 2] = color.b;
data.data[((x + (y * width)) * 4) + 3] = 255;
}
256x128 picture, colors sorted red->green->blue <br>
![RGB Sorted Colors][1]
256x128 picture, colors sorted blue->green->red <br>
![BGR Sorted Colors][2]
256x128 picture, colors sorted hue->luminance->saturation<br>
![HLS Sorted Colors][3]
And finally a GIF of one being generated <br>
![enter image description here][4]
[1]: https://i.sstatic.net/eoq7V.png
[2]: https://i.sstatic.net/L4rkN.png
[3]: https://i.sstatic.net/6pvC3.png
[4]: https://i.sstatic.net/q0Ir1.gif