<div id="drawing" class="drawing-example"></div>(function () {
const speed = 0.1;
const size = 16;
const spacing = 3.4;
const hexGridWidth = 10;
const hexGridHeight = 15;
// set up the drawing
const drawing = new hx.Drawing('#drawing');
drawing.enablePan();
drawing.enableZoom();
drawing.enablePerformanceGauge();
drawing.camera.zoomMin = 0.05;
drawing.camera.zoomMax = 3;
drawing.camera.zoom = 1 * drawing.dpr;
drawing.camera.position.x = size * (hexGridWidth - 0.5) * spacing / 2;
drawing.camera.position.y = size * (hexGridHeight - 0.5) / 2;
// create the grid
const hexagonCurve = (function() {
var j, results;
results = [];
for (i = j = 0; j < 6; i = ++j) {
results.push([
Math.sin((2 * i + 1) * Math.PI / 6) * size,
Math.cos((2 * i + 1) * Math.PI / 6) * size
]);
}
return results;
})();
const colors = [
'#3D3D3D',
'#74B06B',
'#D89C4D',
'#697584',
'#C24563',
'#98719D',
'#D0D0D0',
];
hexGrid = (function() {
var j, ref, results;
results = [];
for (x = j = 0, ref = hexGridWidth - 1; (0 <= ref ? j <= ref : j >= ref); x = 0 <= ref ? ++j : --j) {
results.push((function() {
var k, ref1, results1;
results1 = [];
for (y = k = 0, ref1 = hexGridHeight - 1; (0 <= ref1 ? k <= ref1 : k >= ref1); y = 0 <= ref1 ? ++k : --k) {
hex = drawing.create('shape');
hex.set('polygon', hexagonCurve);
hex.set('position.x', size * spacing * x + size * spacing / 2 * (y % 2));
hex.set('position.y', size * 1 * y);
hex.set('fill.enabled', true);
hex.set('fill.color', colors[1]);
object = {
generationsAlive: 0,
drawingObject: hex,
alive: Math.random() > 0.5,
nextAlive: false
};
results1.push(object);
}
return results1;
})());
}
return results;
})();
// utility methods for the grid
const getSurroundingCells = function(x, y) {
var ref, ref1, ref2, ref3, ref4, ref5, xx;
xx = x + (y % 2) - 1;
return [(ref = hexGrid[xx]) != null ? ref[y - 1] : void 0, (ref1 = hexGrid[x]) != null ? ref1[y - 2] : void 0, (ref2 = hexGrid[xx + 1]) != null ? ref2[y - 1] : void 0, (ref3 = hexGrid[xx]) != null ? ref3[y + 1] : void 0, (ref4 = hexGrid[x]) != null ? ref4[y + 2] : void 0, (ref5 = hexGrid[xx + 1]) != null ? ref5[y + 1] : void 0].filter(function(d) {
return d != null;
});
};
const getSecondarySurroundingCells = function(x, y) {
var ref, ref1, ref2, ref3, ref4, ref5, xx;
xx = x + (y % 2) - 1;
return [(ref = hexGrid[x - 1]) != null ? ref[y] : void 0, (ref1 = hexGrid[xx]) != null ? ref1[y - 3] : void 0, (ref2 = hexGrid[xx]) != null ? ref2[y + 3] : void 0, (ref3 = hexGrid[xx + 1]) != null ? ref3[y - 3] : void 0, (ref4 = hexGrid[xx + 1]) != null ? ref4[y + 3] : void 0, (ref5 = hexGrid[x + 1]) != null ? ref5[y] : void 0].filter(function(d) {
return d != null;
});
};
const iterateGrid = function(f) {
var j, ref, results;
results = [];
for (x = j = 0, ref = hexGridWidth - 1; (0 <= ref ? j <= ref : j >= ref); x = 0 <= ref ? ++j : --j) {
results.push((function() {
var k, ref1, results1;
results1 = [];
for (y = k = 0, ref1 = hexGridHeight - 1; (0 <= ref1 ? k <= ref1 : k >= ref1); y = 0 <= ref1 ? ++k : --k) {
results1.push(f(x, y, hexGrid[x][y]));
}
return results1;
})());
}
return results;
};
let last = (new Date()).getTime();
// main loop
drawing.on('update', function() {
// control the update rate
if ((new Date()).getTime() - last >= 100 / speed) {
last = (new Date()).getTime();
//hexagonal game of life rules: http://www.well.com/~dgb/hexrules.html
iterateGrid(function(x, y, cell) {
var c, j, k, len, len1, ref, ref1, total;
total = 0;
ref = getSurroundingCells(x, y);
for (j = 0, len = ref.length; j < len; j++) {
c = ref[j];
if (c.alive) {
total += 1;
}
}
ref1 = getSecondarySurroundingCells(x, y);
for (k = 0, len1 = ref1.length; k < len1; k++) {
c = ref1[k];
if (c.alive) {
total += 0.3;
}
}
return cell.nextAlive = total >= 2.0 && total < 3.3;
});
// draw
return iterateGrid(function(x, y, cell) {
cell.alive = cell.nextAlive;
cell.generationsAlive = cell.alive ? cell.generationsAlive + 1 : 0;
const color = colors[Math.min(cell.generationsAlive, 4) + 1];
return cell.drawingObject.set('fill.color', color, 250);
});
}
});
}()).drawing-example {
height: 300px;
}enableSidebar method. enableSidebar has been called. enableSidebar has been called. enableSidebar has been called. <div id="empty-drawing"></div>var drawing = new hx.Drawing('#empty-drawing');<div id="rectangle-drawing" class="docs-drawing"></div>var drawing = new hx.Drawing('#rectangle-drawing');
var rect = drawing.create('rectangle');
rect.set('position.x', -25)
rect.set('position.y', -25)
rect.set('width', 50);
rect.set('height', 50);
rect.set('fill.color', '#776655');<div id="controlled-drawing" class="docs-drawing"></div>var drawing = new hx.Drawing('#controlled-drawing');
drawing.enablePan();
drawing.enableZoom();
var rect = drawing.create('rectangle');
rect.set('position.x', -25)
rect.set('position.y', -25)
rect.set('width', 50);
rect.set('height', 50);
rect.set('fill.color', '#335544');var primitiveDrawing = new hx.Drawing('#drawing-example-primitives');
primitiveDrawing.enablePan();
primitiveDrawing.enableZoom();
primitiveDrawing.camera.setupBounds(0.25, 10, -100, -100, 100, 100);
var colors = [
'rgb(192,46,29)',
'rgb(241,108,32)',
'rgb(236,170,56)',
'rgb(92,167,147)',
'rgb(17,120,153)',
'rgb(13,60,85)'
];
// create a circle
var circle = primitiveDrawing.create('circle');
circle.set('position.x', -80);
circle.set('fill.color', colors[0]);
circle.set('radius', 10);
// create a rectangle
var rectangle = primitiveDrawing.create('rectangle');
rectangle.set('position.x', -60);
rectangle.set('position.y', -10);
rectangle.set('height', 20);
rectangle.set('width', 20);
rectangle.set('fill.color', colors[1]);
// create a text object
var text = primitiveDrawing.create('text');
text.set('position.x', -35);
text.set('color', colors[2]);
text.set('text', 'text');
text.set('align.y', 'middle');
// create a line
var line = primitiveDrawing.create('line');
line.set('start.x', -5);
line.set('end.x', 15);
line.set('color', colors[3]);
// create a grid
var grid = primitiveDrawing.create('grid');
grid.set('position.x', 20);
grid.set('position.y', -12.5);
grid.set('gridSize.x', 5);
grid.set('gridSize.y', 5);
grid.set('cellSize.x', 5);
grid.set('cellSize.y', 5);
grid.set('gridLines.color', colors[4]);
// create a shape (described with a cubic curve)
var shape = primitiveDrawing.create('shape');
shape.set('position.x', 60);
shape.set('fill.color', colors[5]);
var edges = 10;
var size = 10;
//construct a curve to draw
var curve = hx.range(edges+1).map(function(i){
return [
Math.sin((2*i + 1) * Math.PI / edges) * size,
Math.cos((2*i + 1) * Math.PI / edges) * size,
Math.sin((2*i + 2) * Math.PI / edges) * size*0.5,
Math.cos((2*i + 2) * Math.PI / edges) * size*0.5
]
});
shape.set('curve', curve);
// make the primitiveDrawing fit the canvas
primitiveDrawing.show(drawing, 2);.docs-drawing {
height: 200px;
}obj.set('property', value);var drawing = new hx.Drawing('#composite-example');
drawing.enablePan();
drawing.enableZoom();
drawing.camera.setupBounds(0.25, 10, -100, -100, 100, 100);
function createFace() {
var composite = drawing.create('composite');
composite.create('rectangle', 'face');
composite.create('rectangle', 'lefteye');
composite.create('rectangle', 'righteye');
composite.create('rectangle', 'lips');
composite.set('face.width', 10);
composite.set('face.height', 10);
composite.set('face.position.x', -5);
composite.set('face.position.y', -5);
composite.set('face.fill.color', '#996622');
composite.set('lefteye.width', 2);
composite.set('lefteye.height', 2);
composite.set('lefteye.position.x', -3);
composite.set('lefteye.position.y', -3);
composite.set('lefteye.fill.color', '#FFF');
composite.set('righteye.width', 2);
composite.set('righteye.height', 2);
composite.set('righteye.position.x', 1);
composite.set('righteye.position.y', -3);
composite.set('righteye.fill.color', '#FFF');
composite.set('lips.width', 6);
composite.set('lips.height', 1);
composite.set('lips.position.x', -3);
composite.set('lips.position.y', 2);
composite.set('lips.fill.color', '#FFF');
return composite;
}
var face1 = createFace();
var face2 = createFace();
var face3 = createFace();
// each composite objects that have been created can be acted on as if they are a single object
face1.set('face.fill.color', '#225599');
face1.set('position.x', 0);
face1.set('angle', -0.5);
face2.set('face.fill.color', '#552299');
face2.set('position.x', 20);
face2.set('scale', 1.5);
face3.set('face.fill.color', '#995522');
face3.set('position.x', 40);
face3.set('angle', 0.5);
// make the drawing fit the canvas
drawing.show(drawing, 1.5);drawing.camera.zoomMin = 0.5;
drawing.camera.zoomMax = 1.5;drawing.camera.xMin = -100;
drawing.camera.xMax = -100;
drawing.camera.yMin = 100;
drawing.camera.yMax = 100;<div id="basic-drawing"></div>var drawing = new hx.Drawing('#basic-drawing');
var colors = [
'rgb(192,46,29)',
'rgb(241,108,32)',
'rgb(236,170,56)',
'rgb(92,167,147)',
'rgb(17,120,153)',
'rgb(13,60,85)'
];
var circle = drawing.create('circle');
circle.set('fill.color', colors[5]);
function randomCol() {
return colors[Math.floor(Math.random()*6)];
}
drawing.on('update', function(i) {
if(i%120==0){
var x = (Math.random() - 0.5) * 200;
var y = (Math.random() - 0.5) * 150;
circle.set('position.x', x);
circle.set('position.y', y);
circle.set('fill.color', randomCol());
}
});<div id="animated-drawing"></div>var drawing = new hx.Drawing('#animated-drawing');
var colors = [
'rgb(192,46,29)',
'rgb(241,108,32)',
'rgb(236,170,56)',
'rgb(92,167,147)',
'rgb(17,120,153)',
'rgb(13,60,85)'
];
var circle = drawing.create('circle');
circle.set('fill.color', colors[5]);
function randomCol() {
return colors[Math.floor(Math.random()*6)];
}
drawing.on('update', function(i) {
if(i%120==0){
var x = (Math.random() - 0.5) * 200;
var y = (Math.random() - 0.5) * 150;
circle.set('position.x', x, 2000);
circle.set('position.y', y, 2000);
circle.set('fill.color', randomCol(), 2000);
}
});obj.set('property', value, duration);obj.set('property', value, duration, function(){
// gets called when the animation finishes
});<div id="selection-example" class="docs-drawing"></div>var drawing = new hx.Drawing('#selection-example');
drawing.enablePan();
drawing.enableZoom();
drawing.enableSelection();
drawing.camera.zoomMin = 0.25;
drawing.camera.zoomMax = 10.0;
drawing.camera.xMin = -100;
drawing.camera.yMin = -50;
drawing.camera.xMax = 100;
drawing.camera.yMax = 50;
// create a circle
var circle = drawing.create('circle');
circle.set('position.x', -25);
circle.set('fill.color', '#224466');
circle.set('radius', 10);
circle.set('selectable', true);
var circle = drawing.create('circle');
circle.set('position.x', 0);
circle.set('fill.color', '#446622');
circle.set('radius', 10);
circle.set('selectable', true);
var circle = drawing.create('circle');
circle.set('position.x', 25);
circle.set('fill.color', '#664422');
circle.set('radius', 10);
circle.set('selectable', true);
// make the drawing fit the canvas
drawing.show(drawing, 2);obj.set('selectable', true);drawing.enableSelection();selected method on the drawing: var selected = drawing.selected();var circle = drawing.create('circle');
...
drawing.select(circle);drawing.on('click', function(position){
// position is an object with x and y properties which give
// the screen coordinates relative to the drawing and wx and
// wy properties which give world coordinates.
console.log(position);
})drawing.enableSearchbox();drawing.on('search', function(searchString){
var obj = drawing.findBy(function(obj){
obj.get('attr.name') == searchString
});
if (obj) {
drawing.select(obj);
drawing.follow(obj);
}
});<div id="search-example" class="docs-drawing"></div>var searchDrawing = new hx.Drawing('#search-example');
searchDrawing.enablePan();
searchDrawing.enableZoom();
searchDrawing.enableSelection();
searchDrawing.enableSearchbox();
// helper for setting up the bounds for the camera
searchDrawing.camera.setupBounds(0.25, 10, -100, -50, 100, 50);
searchDrawing.on('search', function(searchTerm){
var obj = searchDrawing.find(searchTerm);
if (obj) {
searchDrawing.select(obj);
searchDrawing.show(obj);
}
});
// create a circle
var circle = searchDrawing.create('circle', 'circle-1');
circle.set('position.x', -25);
circle.set('fill.color', '#224466');
circle.set('radius', 10);
circle.set('selectable', true);
var circle = searchDrawing.create('circle', 'circle-2');
circle.set('position.x', 0);
circle.set('fill.color', '#446622');
circle.set('radius', 10);
circle.set('selectable', true);
var circle = searchDrawing.create('circle', 'circle-3');
circle.set('position.x', 25);
circle.set('fill.color', '#664422');
circle.set('radius', 10);
circle.set('selectable', true);
// make the searchDrawing fit the canvas
searchDrawing.show(searchDrawing, 2);<button id="toggle" class="hx-btn hx-btn-toggle hx-positive">Toggle Layers</button>
<div id="layers-example" class="docs-drawing"></div>var drawing = new hx.Drawing('#layers-example');
var colors = [
'rgb(192,46,29)',
'rgb(241,108,32)',
'rgb(236,170,56)',
'rgb(92,167,147)',
'rgb(17,120,153)',
'rgb(13,60,85)'
];
var layer1 = drawing.createLayer();
var layer2 = drawing.createLayer();
createArea = function(x, colIndex) {
var circle = layer1.create('circle');
circle.set('position.x', x);
circle.set('fill.color', colors[colIndex]);
circle.set('radius', 10);
circle.set('selectable', true);
hx.range(100).forEach(function(){
var miniCircle = layer2.create('circle');
var normal = colors[colIndex]
var lighter = hx.color(colors[colIndex]).lighten(0.5).toString()
var cr = function(x) {
return hx.color(normal).mix(hx.color(lighter), x).toString()
}
dist = Math.random()*9.5
angle = Math.random()*Math.PI*2
miniCircle.set('position.x', x + Math.cos(angle)*dist);
miniCircle.set('position.y', Math.sin(angle)*dist);
miniCircle.set('fill.color', cr(Math.random()));
miniCircle.set('radius', 0.5);
miniCircle.set('selectable', true);
});
}
createArea(-25, 1);
createArea(0, 2);
createArea(25, 3);
drawing.show(drawing, 1.1);
drawing.showLayer(layer1);
hx.select('#toggle').on('click', function(){
if(hx.select('#toggle').attr('data')=='true'){
drawing.showLayer(layer1);
} else {
drawing.showLayer(layer2);
}
}, true);<div id="layers-zoom-example" class="docs-drawing"></div>var drawing = new hx.Drawing('#layers-zoom-example');
var colors = [
'rgb(192,46,29)',
'rgb(241,108,32)',
'rgb(236,170,56)',
'rgb(92,167,147)',
'rgb(17,120,153)',
'rgb(13,60,85)'
];
drawing.enableZoom();
drawing.camera.zoomMin = 0.25;
drawing.camera.zoomMax = 10.0;
var layer1 = drawing.createLayer();
var layer2 = drawing.createLayer();
createArea = function(x, colIndex) {
var circle = layer1.create('circle');
circle.set('position.x', x);
circle.set('fill.color', colors[colIndex]);
circle.set('radius', 10);
circle.set('selectable', true);
hx.range(100).forEach(function(){
var miniCircle = layer2.create('circle');
var normal = colors[colIndex]
var lighter = hx.color(colors[colIndex]).lighten(0.5).toString()
var cr = function(x) {
return hx.color(normal).mix(hx.color(lighter), x).toString()
}
dist = Math.random()*9.5
angle = Math.random()*Math.PI*2
miniCircle.set('position.x', x + Math.cos(angle)*dist);
miniCircle.set('position.y', Math.sin(angle)*dist);
miniCircle.set('fill.color', cr(Math.random()));
miniCircle.set('radius', 0.5);
miniCircle.set('selectable', true);
});
}
createArea(-25, 1);
createArea(0, 2);
createArea(25, 3);
drawing.show(drawing, 1.1);
layer1.setAlphaCurve('ramp', 2, 1);
layer2.setAlphaCurve('ramp', 1, 2);