JavaScript
var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(500, 500);
const TEXTURE = 'https://d1g6u5sj133j06.cloudfront.net/cdb/textures/floor_and_wall/thumbnails/WoodPlanksFloors0011_19_S.jpg';
var W = 167;
var H = 160;
var X = 0;
var Y = 0;
var TRIANGLES = [
//[ [X, Y], [W*0.35, Y], [X, H*0.25] ], // 1
[ [X, Y], [W*0.35, Y], [X, H*0.05] ], // 1A
[ [X, H*0.05], [W*0.35, Y], [X, H*0.25] ], // 1B
[ [W*0.35, Y], [W*0.6535, H*0.35], [X, H*0.25] ], // 2
[ [W*0.35, Y], [W, H*0.5], [W, H*0.75] ], // 3
// [ [W*0.35, Y], [W, Y], [W, H*0.5] ], // 4
[ [W*0.35, Y], [W, Y], [W, H*0.15] ], // 4A
[ [W*0.35, Y], [W, H*0.15], [W, H*0.5] ], // 4B
[ [X, H*0.25], [W*0.6535, H*0.35], [W*0.0835, H*0.5] ], // 5
[ [X, H*0.25], [W*0.25, H], [X, H*0.75] ], // 6
[ [W*0.0835, H*0.5], [W*0.25, H], [W*0.6535, H*0.35] ], // 7
[ [W*0.25, H], [W*0.6535, H*0.35], [W, H*0.75] ], // 8
[ [X, H*0.75], [X, H], [W*0.25, H] ], // 9
[ [W*0.25, H], [W, H*0.75], [W, H*0.9] ], // 10
[ [W*0.25, H], [W, H*0.9], [W, H] ] // 11
];
function randomColor () {
let r = Math.round(Math.random() * 0xff),
g = Math.round(Math.random() * 0xff),
b = Math.round(Math.random() * 0xff);
return r << 16 | g << 8 | b;
}
function setup () {
var sprite = new PIXI.TilingSprite(PIXI.loader.resources.planks.texture, 640, 480);
var paths = TRIANGLES.map(triangle => {
return triangle.reduce((p, pt) => {
return p.concat(pt.map(p => p*3));
}, []);
});
var mask = new PIXI.Graphics();
paths.forEach(path => {
mask.beginFill(randomColor(), 0.5);
mask.drawPolygon(path);
});
sprite.mask = mask;
sprite.addChild(mask);
stage.addChild(sprite);
sprite.x = 0; // 100;
sprite.y = 0; // 100;
sprite.interactive = true;
sprite.click = function () {
sprite.mask = sprite.mask ? null : mask;
renderer.render(stage);
}
...