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.
227 lines
7.4 KiB
227 lines
7.4 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 - Plants 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, resource; |
|
let leafs = [], flowers = []; |
|
let leon, controll; |
|
const tintLeaf = [ |
|
0xFFFFFF, |
|
0xFFFF00, |
|
0xccff00, |
|
0x00ff1e, |
|
0xffb300, |
|
0xa2ff00 |
|
]; |
|
const tintFlower = [ |
|
0xFFFFFF, |
|
0xffeea1, |
|
0xffa1a1, |
|
0xeca1ff, |
|
0xa1dbff, |
|
0xffa1d6, |
|
0xd2ffa1, |
|
]; |
|
|
|
function init() { |
|
generatePixi(0xf0f0f0); |
|
|
|
container = new PIXI.Container(); |
|
stage.addChild(container); |
|
|
|
loader = new PIXI.Loader(); |
|
loader.add('branch_long', 'data/branch_long.png') |
|
.add('branch_circle', 'data/branch_circle.png') |
|
.add('flower1', 'data/flower1.png') |
|
.add('flower2', 'data/flower2.png') |
|
.add('flower3', 'data/flower3.png') |
|
.add('leaf1', 'data/leaf1.png') |
|
.add('leaf2', 'data/leaf2.png'); |
|
|
|
loader.load((loader, resources) => { |
|
resource = resources; |
|
|
|
flowers.push('flower1'); |
|
flowers.push('flower2'); |
|
flowers.push('flower3'); |
|
|
|
leafs.push('leaf1'); |
|
leafs.push('leaf1'); |
|
leafs.push('leaf2'); |
|
|
|
loaded(); |
|
}); |
|
} |
|
|
|
function loaded() { |
|
controll = { |
|
color: {}, |
|
}; |
|
|
|
leon = new LeonSans({ |
|
text: 'ONE', |
|
size: getSize(500), |
|
weight: 1, |
|
pathGap: -1, |
|
tracking: 0, |
|
isPath: true |
|
}); |
|
leon.on('update', (data) => { |
|
update(data); |
|
}); |
|
|
|
const gui = new dat.GUI(); |
|
gui.add(leon, 'text'); |
|
gui.add(leon, 'tracking', -3, 10); |
|
|
|
window.addEventListener('resize', resize, false); |
|
requestAnimationFrame(animate); |
|
} |
|
|
|
function resize() { |
|
sw = document.body.clientWidth; |
|
sh = document.body.clientHeight; |
|
|
|
renderer.resize(sw, sh); |
|
} |
|
|
|
function update() { |
|
while(container.children[0]) { |
|
TweenMax.killTweensOf(container.children[0]); |
|
container.removeChild(container.children[0]); |
|
} |
|
|
|
let points, saveFlowers = [], saveLeafs = []; |
|
let total = leon.model.data.length; |
|
let i, j, j_total, d, pos; |
|
for (i = 0; i < total; i++) { |
|
d = leon.model.data[i]; |
|
j_total = d.paths.length; |
|
points = []; |
|
for (j = 0; j < j_total; j++) { |
|
pos = d.paths[j]; |
|
|
|
if (pos.type == 'a') { |
|
const dot = new PIXI.Sprite(resource.branch_circle.texture); |
|
dot.anchor.set(0.5); |
|
dot.x = pos.x; |
|
dot.y = pos.y; |
|
const scale = 0.15 * leon.scale; |
|
dot.scale.x = dot.scale.y = scale; |
|
container.addChild(dot); |
|
} else if (pos.start == 1) { |
|
if (points.length > 0) { |
|
addBranch(points); |
|
} |
|
points = []; |
|
points.push(new PIXI.Point(pos.x, pos.y)); |
|
} else { |
|
points.push(new PIXI.Point(pos.x, pos.y)); |
|
} |
|
|
|
if (Math.random() > 0.99) { |
|
saveFlowers.push(pos); |
|
} |
|
|
|
if (Math.random() > 0.84) { |
|
saveLeafs.push(pos); |
|
} |
|
} |
|
|
|
if (points.length > 0) { |
|
addBranch(points); |
|
} |
|
} |
|
|
|
function addBranch(points) { |
|
const branch = new PIXI.SimpleRope(resource.branch_long.texture, points); |
|
container.addChild(branch); |
|
} |
|
|
|
total = saveLeafs.length; |
|
for (i = 0; i < total; i++) { |
|
pos = saveLeafs[i]; |
|
d = leafs[Math.floor(0.5 + (Math.random()*(leafs.length-1)))]; |
|
const leaf = new PIXI.Sprite(resource[d].texture); |
|
leaf.anchor.set(0.5, 1); |
|
leaf.x = pos.x; |
|
leaf.y = pos.y; |
|
const scale = 0.1 * (0.2 + Math.random() * (1.2 - 0.2)) * leon.scale; |
|
leaf.scale.x = leaf.scale.y = 0; |
|
leaf.rotation = (pos.rotation + (90 * (Math.PI / 180)) * (Math.random() > 0.5 ? 1 : -1)) + (Math.random() * (Math.PI / 2) - (Math.PI / 4)); |
|
container.addChild(leaf); |
|
leaf.tint = tintLeaf[Math.floor(0.5 + (Math.random()*(tintLeaf.length-1)))]; |
|
TweenMax.to(leaf.scale, 0.8, { |
|
delay: 0.004 * i, |
|
x: scale, |
|
y: scale, |
|
ease: Power3.easeOut |
|
}); |
|
} |
|
|
|
total = saveFlowers.length; |
|
for (i = 0; i < total; i++) { |
|
pos = saveFlowers[i]; |
|
d = flowers[Math.floor(0.5 + (Math.random()*(flowers.length-1)))]; |
|
const flower = new PIXI.Sprite(resource[d].texture); |
|
flower.anchor.set(0.5); |
|
flower.x = pos.x; |
|
flower.y = pos.y; |
|
const scale = 0.04 * (0.6 + Math.random() * (1.2 - 0.6)) * leon.scale; |
|
flower.scale.x = flower.scale.y = 0; |
|
flower.rotation = Math.random() * Math.PI * 2; |
|
container.addChild(flower); |
|
flower.tint = tintFlower[Math.floor(0.5 + (Math.random()*(tintFlower.length-1)))]; |
|
TweenMax.to(flower.scale, 0.8, { |
|
delay: 0.05 * i + 0.6, |
|
x: scale, |
|
y: scale, |
|
ease: Power3.easeOut |
|
}); |
|
} |
|
} |
|
|
|
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); |
|
|
|
renderer.render(stage); |
|
} |
|
|
|
window.onload = () => { |
|
init(); |
|
}; |
|
</script> |
|
</body> |
|
|
|
</html> |