wmmead logo

Project 19

Having stepped away from this project for a year or so, it was fun to come back and revive it and think about new possible directions to take it. I hava a lot of ideas, and will continue to push it forward over the next few months.

In my first step back, I decided to take on adding random gradients to the project. This is a completely new direction, and one I have been thinking about for a while. There are a few other ideas that you will see wending their way into the project in upcoming iterations.

Code Snippets for 19

Adding gradients meant that I needed to convert my hex colors in my color scheme to RGB colors. Rather than do this manually, I used this simple JavaScript converter to do it for me on the fly.
JavaScript Hex Converter
function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

function convertRGBA(hex){
	var chance = getRandomInt(0, 2);
	if(chance == 2){
		//console.log("solid gradient");
		return "rgba(" + hexToR(hex) + ", " + hexToG(hex) + ", " + hexToB(hex) + ", " + ", 1 )";
	}
	else{
		//console.log("transparent gradient");
		return "rgba(" + hexToR(hex) + ", " + hexToG(hex) + ", " + hexToB(hex) + ", " + Math.random() + ")";
	}	
}
Adding a gradient to a box is pretty simple, once you figure out the css gradient syntax. I pick two colors from the current color scheme, convert the hex format to rgb format and generate the gradient. I decided to keep the gradients at 180 degrees, since the elements are rotated anyway. That might change in the future.
addGradientBox function
function addGradientBox( element, width, height ) {
	element.style.width = width + "px";
	element.style.height = height + "px";
	
	var currentColorScheme = colors.slice(0);
	var color1Pos = getRandomInt(0, (currentColorScheme.length - 1));
	var color1 = currentColorScheme[color1Pos];
	
	currentColorScheme.splice(color1Pos, 1);
	var color2 = currentColorScheme[Math.floor(Math.random()*currentColorScheme.length)];
	element.style.background = "linear-gradient(180deg, " + convertRGBA(color1) + " 0%, " + convertRGBA(color2) + " 100%)";
}
The code for making a gradient circle is similar.
addGradientCircle function
function addGradientCircle( element, width ) {
	element.style.width = width + "px";
	element.style.height = width + "px";
	element.style.borderRadius = "50%";
	var currentColorScheme = colors.slice(0);
	var color1Pos = getRandomInt(0, (currentColorScheme.length - 1));
	var color1 = currentColorScheme[color1Pos];
	
	currentColorScheme.splice(color1Pos, 1);
	var color2 = currentColorScheme[Math.floor(Math.random()*currentColorScheme.length)];
	element.style.background = "linear-gradient(180deg, " + convertRGBA(color1) + " 0%, " + convertRGBA(color2) + " 100%)";
}