JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.talitasia.com/pixi.js"></script>
<div id="container"></div>
JavaScript
window.init = function() {
var events = {
start: 'mousedown',
end: 'mouseup',
over: 'mouseover',
out: 'mouseout'
};
var len = 20;
var radio = 40;
var initial = {x: 100, y: 100};
var apothem = Math.sqrt(Math.pow(radio, 2) - Math.pow(radio / 2, 2));
document.body.style.width = initial.x + apothem * 2 * len + apothem + 'px';
document.body.style.height = initial.y + radio * 2 * (len / 2) + radio * (len / 2) + 'px';
var stage = new PIXI.Stage(0xFFFFFF, true);
var renderer = new PIXI.autoDetectRenderer(document.body.offsetWidth, document.body.offsetHeight);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
for (x = 0; x < len; x++) {
for (y = 0; y < len; y++) {
var coord = {
x: initial.x + apothem * 2 * x - apothem * (y % 2),
y: initial.y + (radio + radio / 2) * y
};
var graphics = new PIXI.Graphics();
graphics.lineWidth = 2;
graphics.beginFill(0xFF0000);
graphics.rectPolygon(6, radio, coord.x, coord.y, true);
graphics.endFill();
graphics.mousedown = graphics.touchstart = function(evt) {
this.clear();
renderer.render(stage); // slooooowww
};
stage.addChild(graphics);
}
}
renderer.render(stage);
};
(function() {
PIXI.Graphics.prototype.rectPolygon = function(numberOfSides, radius, Xcenter, Ycenter, interactive) {
interactive = interactive || false;
this.moveTo(Math.floor(Xcenter + radius * Math.sin(0)), Math.floor(Ycenter + radius * Math.cos(0)));
var points = [];
for (var i = 1; i <= numberOfSides; i += 1) {
var coord = {
x: Math.floor(Xcenter + radius * Math.sin(i * 2 * Math.PI / numberOfSides)),
y: Math.floor(Ycenter + radius * Math.cos(i * 2 *...