Skip to content

Commit

Permalink
feat: added hue and html surface colors and an example for it
Browse files Browse the repository at this point in the history
  • Loading branch information
@zackarydev @mojoaxel
zackarydev authored and mojoaxel committed Dec 19, 2019
1 parent 0d49da1 commit 1eec8af
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 29 deletions.
46 changes: 35 additions & 11 deletions examples/graph3d/16_styling_surface.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@
var graph = null;

function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}

// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById('style').value;

// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
Expand All @@ -28,11 +30,11 @@
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x,y);
data.add({id:counter++,x:x,y:y,z:value,style:value});
var value = custom(x,y);
data.add({id:counter++,x:x,y:y,z:value,style:value});
}
}

// specify options
var options = {
width: '600px',
Expand All @@ -43,24 +45,46 @@
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
surfaceColors: [
'#FF0000',
'#FF00FF',
'#FFF000',
'#00FF00',
'#000FFF',
],
};

if (style === 'hue') {
options.surfaceColors = {
hue: {
start: 40,
end: 180,
saturation: 50,
brightness: 100,
colorStops: 8, // How many colour gradients do we want
}
};
} else if(style === 'html') {
options.surfaceColors = [
'#FFFFFF',
'#6A0DAD',
'#000000',
];
} // else use defaults.

// Instantiate our graph object.
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);

document.getElementById('style').onchange = drawVisualization;
}
</script>

</head>

<body onload="drawVisualization();">
<p>
<label for="style"> Style:
<select id="style">
<option value="default">Default</option>
<option value="hue">Hue</option>
<option value="html">HTML Hex</option>
</select>
</label>
</p>
<div id="mygraph"></div>

<div id="info"></div>
Expand Down
29 changes: 12 additions & 17 deletions lib/graph3d/Graph3d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,14 +105,11 @@ Graph3d.DEFAULTS = {
},

surfaceColors : [
"#FFD480",
"#FFFF80",
"#D5FF80",
"#AAFF80",
"#80FF80",
"#80FFAA",
"#80FFD4",
"#80FFFF"
'#FF0000',
'#FFF000',
'#00FF00',
'#68E8FB',
'#000FFF',
],

cameraPosition : {
Expand Down Expand Up @@ -1905,26 +1902,24 @@ Graph3d.prototype._redrawSurfaceGraphPoint = function(ctx, point) {

var colors = this.surfaceColors;
if (colors && colors.length !== 0) {
var rgbColors = colors.map(this._hex2rgb);

var colorStops = rgbColors.length - 1;
var colorStops = colors.length - 1;
var startIndex = Math.floor(ratio * colorStops);
var endIndex = Math.ceil(ratio * colorStops);

var startRatio = startIndex / colorStops;
var endRatio = endIndex / colorStops;
var ratioWithin = (ratio - startRatio) / (endRatio - startRatio);

var minR = rgbColors[startIndex].r;
var maxR = rgbColors[endIndex].r;
var minR = colors[startIndex].r;
var maxR = colors[endIndex].r;
var r = minR + ratioWithin*(maxR - minR);

var minG = rgbColors[startIndex].g;
var maxG = rgbColors[endIndex].g;
var minG = colors[startIndex].g;
var maxG = colors[endIndex].g;
var g = minG + ratioWithin*(maxG - minG);

var minB = rgbColors[startIndex].b;
var maxB = rgbColors[endIndex].b;
var minB = colors[startIndex].b;
var maxB = colors[endIndex].b;
var b = minB + ratioWithin*(maxB - minB);

fillStyle = `RGB(${r}, ${g}, ${b})`;
Expand Down
45 changes: 45 additions & 0 deletions lib/graph3d/Settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,7 @@ function setSpecialSettings(src, dst) {
}

setDataColor(src.dataColor, dst);
setSurfaceColor(src.surfaceColors, dst);
setStyle(src.style, dst);
setShowLegend(src.showLegend, dst);
setCameraPosition(src.cameraPosition, dst);
Expand Down Expand Up @@ -468,6 +469,50 @@ function setDataColor(dataColor, dst) {
}
}

/**
* Converts an object that accepts a HUE keyword. This is converted to a certain amount of hex color stops. At which point:
* the HTML hex color codes is converted into an RGB color object.
*
* @param {Object | Array<string>} surfaceColors Either an object that describes the HUE, or an array of HTML hex color codes
* @param {Object} dst
*/
function setSurfaceColor(surfaceColors, dst) {
if(surfaceColors === undefined) {
return; // Nothing to do
}

if (dst.surfaceColors === undefined) {
dst.surfaceColors = {};
}

let rgbColors = [];

if(Array.isArray(surfaceColors)) {
rgbColors = surfaceColors.map(util.hexToRGB);
} else if (typeof surfaceColors === 'object') {
if(surfaceColors.hue === undefined) {
throw new Error('Unsupported type of surfaceColors');
}

const startHue = surfaceColors.hue.start;
const endHue = surfaceColors.hue.end;
const saturation = surfaceColors.hue.saturation;
const brightness = surfaceColors.hue.brightness;
const stops = surfaceColors.hue.colorStops;
const hueStepSize = (endHue - startHue) / stops;

let currentHue = startHue;
while (currentHue < endHue) {
rgbColors.push(util.HSVToRGB(currentHue/360, saturation/100, brightness/100));
currentHue += hueStepSize;
}
} else {
throw new Error('Unsupported type of surfaceColors');
}

dst.surfaceColors = rgbColors;
}

/**
*
* @param {Object} cameraPosition
Expand Down
13 changes: 12 additions & 1 deletion lib/graph3d/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,17 @@ let colorOptions = {
__type__ : { string, object, 'undefined': 'undefined' }
};

let surfaceColorsOptions = {
hue: {
start : { number },
end : { number },
saturation : { number },
brightness : { number },
colorStops : { number },
__type__ : { object },
},
__type__ : { array, object },
};

/**
* Order attempted to be alphabetical.
Expand Down Expand Up @@ -76,7 +87,7 @@ let allOptions = {
showYAxis : { boolean: bool },
showZAxis : { boolean: bool },
rotateAxisLabels : { boolean: bool },
surfaceColors : { array: string },
surfaceColors : surfaceColorsOptions,
xStep : { number, 'undefined': 'undefined' },
yStep : { number, 'undefined': 'undefined' },
zStep : { number, 'undefined': 'undefined' },
Expand Down

0 comments on commit 1eec8af

Please sign in to comment.