You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
6.0 KiB
199 lines
6.0 KiB
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
|
||
|
|
<title>Leon Sans - MASK + Tiling PIXI</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
outline: 0;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
cursor: move;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.4/pixi.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<script src="../dist/leon.js"></script>
|
||
|
|
<script src="js/util.js"></script>
|
||
|
|
<script>
|
||
|
|
let container, loader, textures = [];
|
||
|
|
let tiling = [], cur = -1;
|
||
|
|
let leon, controll;
|
||
|
|
|
||
|
|
function init() {
|
||
|
|
generatePixi(0x000000);
|
||
|
|
|
||
|
|
container = new PIXI.Container();
|
||
|
|
stage.addChild(container);
|
||
|
|
|
||
|
|
loader = new PIXI.Loader();
|
||
|
|
loader.add('tile1', 'data/tile1.png')
|
||
|
|
.add('tile2', 'data/tile2.png')
|
||
|
|
.add('tile3', 'data/tile3.png')
|
||
|
|
.add('tile4', 'data/tile4.png')
|
||
|
|
.add('tile5', 'data/tile5.png')
|
||
|
|
.add('tile6', 'data/tile6.png');
|
||
|
|
|
||
|
|
loader.load((loader, resources) => {
|
||
|
|
textures.push(resources.tile1.texture);
|
||
|
|
textures.push(resources.tile2.texture);
|
||
|
|
textures.push(resources.tile3.texture);
|
||
|
|
textures.push(resources.tile4.texture);
|
||
|
|
textures.push(resources.tile5.texture);
|
||
|
|
textures.push(resources.tile6.texture);
|
||
|
|
textures = shuffle(textures);
|
||
|
|
|
||
|
|
loaded();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function loaded() {
|
||
|
|
controll = {
|
||
|
|
align: {},
|
||
|
|
};
|
||
|
|
|
||
|
|
leon = new LeonSans({
|
||
|
|
text: '012\n345',
|
||
|
|
size: getSize(400),
|
||
|
|
weight: 900,
|
||
|
|
tracking: 1,
|
||
|
|
leading: -1,
|
||
|
|
align: 'center'
|
||
|
|
});
|
||
|
|
leon.on('update', (model) => {
|
||
|
|
update();
|
||
|
|
});
|
||
|
|
|
||
|
|
const gui = new dat.GUI();
|
||
|
|
gui.add(leon, 'text');
|
||
|
|
gui.add(leon, 'size', 10, 1000);
|
||
|
|
gui.add(leon, 'weight', 1, 900);
|
||
|
|
|
||
|
|
requestAnimationFrame(animate);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function update() {
|
||
|
|
while(container.children[0]) {
|
||
|
|
container.removeChild(container.children[0]);
|
||
|
|
}
|
||
|
|
|
||
|
|
const total = leon.data.length;
|
||
|
|
let i, d, color, line, pos;
|
||
|
|
let j, j_total, lineW = leon.lineWidth;
|
||
|
|
|
||
|
|
let graphics, tilingSprite;
|
||
|
|
|
||
|
|
tiling = [];
|
||
|
|
|
||
|
|
for (i = 0; i < total; i++) {
|
||
|
|
d = leon.data[i];
|
||
|
|
|
||
|
|
graphics = new PIXI.Graphics();
|
||
|
|
container.addChild(graphics);
|
||
|
|
|
||
|
|
tilingSprite = new PIXI.TilingSprite(
|
||
|
|
textures[getNum()],
|
||
|
|
d.rect.w * 2,
|
||
|
|
d.rect.h * 2
|
||
|
|
);
|
||
|
|
tilingSprite.x = d.rect.x - d.rect.w /2;
|
||
|
|
tilingSprite.y = d.rect.y - d.rect.h / 2;
|
||
|
|
tilingSprite.tileScale.x = tilingSprite.tileScale.y = leon.scale * 0.5;
|
||
|
|
|
||
|
|
container.addChild(tilingSprite);
|
||
|
|
|
||
|
|
tilingSprite.mask = graphics;
|
||
|
|
tiling.push({
|
||
|
|
item: tilingSprite,
|
||
|
|
x: (Math.random() * 2 + 1 - 2) * 2,
|
||
|
|
y: (Math.random() * 2 + 1 - 2) * 2
|
||
|
|
});
|
||
|
|
|
||
|
|
j_total = d.lines.length;
|
||
|
|
for (j = 0; j < j_total; j++) {
|
||
|
|
line = d.lines[j];
|
||
|
|
pos = d.lines[j].pos;
|
||
|
|
|
||
|
|
if (pos.type == 'a') {
|
||
|
|
graphics.lineStyle(0, color, 0);
|
||
|
|
graphics.beginFill(color);
|
||
|
|
graphics.drawCircle(pos.x, pos.y, pos.radius);
|
||
|
|
graphics.endFill();
|
||
|
|
} else if (pos.type == 'm') {
|
||
|
|
graphics.lineStyle(lineW, color, 1);
|
||
|
|
graphics.moveTo(pos.x, pos.y);
|
||
|
|
} else if (pos.type == 'l') {
|
||
|
|
graphics.lineTo(pos.x, pos.y);
|
||
|
|
} else if (pos.type == 'b') {
|
||
|
|
graphics.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3);
|
||
|
|
}
|
||
|
|
if (line.closePath) {
|
||
|
|
graphics.closePath();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function animate(t) {
|
||
|
|
requestAnimationFrame(animate);
|
||
|
|
|
||
|
|
const x = (sw - leon.rect.w) / 2;
|
||
|
|
const y = (sh - leon.rect.h) / 2;
|
||
|
|
leon.position(x + moveX, y + moveY);
|
||
|
|
|
||
|
|
const total = tiling.length;
|
||
|
|
let i, p;
|
||
|
|
for (i = 0; i < total; i++) {
|
||
|
|
p = tiling[i];
|
||
|
|
p.item.tilePosition.x += p.x * leon.scale;
|
||
|
|
p.item.tilePosition.y += p.y * leon.scale;
|
||
|
|
}
|
||
|
|
|
||
|
|
renderer.render(stage);
|
||
|
|
}
|
||
|
|
|
||
|
|
function getNum() {
|
||
|
|
cur += 1;
|
||
|
|
if (cur == textures.length) {
|
||
|
|
cur = 0;
|
||
|
|
}
|
||
|
|
return cur;
|
||
|
|
}
|
||
|
|
|
||
|
|
function shuffle(oldArray) {
|
||
|
|
var newArray = oldArray.slice(),
|
||
|
|
len = newArray.length,
|
||
|
|
i = len, p, t;
|
||
|
|
while (i--) {
|
||
|
|
p = (Math.random()*len) | 0;
|
||
|
|
t = newArray[i];
|
||
|
|
newArray[i] = newArray[p];
|
||
|
|
newArray[p] = t;
|
||
|
|
}
|
||
|
|
return newArray;
|
||
|
|
}
|
||
|
|
|
||
|
|
window.onload = () => {
|
||
|
|
init();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|