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
<!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> |