akira
/
leonsans
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Add files via upload

pull/3/head
Jongmin Kim 6 years ago committed by GitHub
parent
a698aa462e
commit
9f22e935e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 2670 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      dist/leon.js
  2. 111
      examples/all.html
  3. 120
      examples/canvas-basic.html
  4. 144
      examples/color-pattern.html
  5. 113
      examples/colorful.html
  6. 109
      examples/gradient.html
  7. 94
      examples/grid.html
  8. 267
      examples/index.html
  9. 199
      examples/mask-tiling-pixi.html
  10. 230
      examples/metaball-pixi.html
  11. 232
      examples/morphing-pixi.html
  12. 94
      examples/pattern.html
  13. 227
      examples/plants-pixi.html
  14. 82
      examples/wave.html
  15. 124
      examples/webgl-basic-pixi.html
  16. 2
      src/index.js
  17. 521
      src/leonsans.js

1
dist/leon.js vendored
View File

File diff suppressed because one or more lines are too long

111
examples/all.html
Unescape View File

@ -0,0 +1,111 @@ @@ -0,0 +1,111 @@
<!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 - All</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
margin: 0;
padding: 0;
background-color: #f0f0f0;
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/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 leon, controll;
function init() {
generateCanvas();
controll = {
align: {},
box: false,
grids: false,
points: false,
drawing: () => {
let i, total = leon.drawing.length;
for (i = 0; i < total; i++) {
TweenMax.killTweensOf(leon.drawing[i]);
TweenMax.fromTo(leon.drawing[i], 2, {
value: 0
}, {
value: 1,
ease: Power3.easeOut
});
}
}
};
leon = new LeonSans({
text: 'abcdefghijklmn\nopqrstuvwxyz\nABCDEFGHIJK\nLMNOPQRST\nUVWXYZ\n0123456789\n?!$^&*(){}[]<>~\n:;,.\'"+=-_@#%',
color: ['#342f2e'],
size: getSize(90),
weight: 200,
tracking: 2,
leading: 1,
align: 'center'
});
const gui = new dat.GUI();
gui.add(leon, 'text');
gui.add(leon, 'size', 20, 1000);
gui.add(leon, 'weight', 1, 900);
gui.add(leon, 'tracking', -3, 10);
gui.add(leon, 'leading', -8, 10);
gui.add(controll, 'drawing');
gui.add(controll, 'box');
gui.add(controll, 'grids');
gui.add(controll, 'points');
requestAnimationFrame(animate);
}
function animate(t) {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, sw, sh);
const x = (sw - leon.rect.w) / 2;
const y = (sh - leon.rect.h) / 2;
leon.position(x + moveX, y + moveY);
ctx.save();
if (controll.grids) leon.grid(ctx);
if (controll.box) leon.box(ctx);
ctx.restore();
ctx.save();
leon.draw(ctx);
ctx.restore();
if (controll.points) {
ctx.save();
leon.point(ctx);
ctx.restore();
}
}
window.onload = () => {
init();
};
</script>
</body>
</html>

120
examples/canvas-basic.html
Unescape View File

@ -0,0 +1,120 @@ @@ -0,0 +1,120 @@
<!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 - Canvas Basic</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
margin: 0;
padding: 0;
background-color: #f0f0f0;
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/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 leon, controll;
function init() {
generateCanvas();
controll = {
color: {},
align: {},
drawing: () => {
let i, total = leon.drawing.length;
for (i = 0; i < total; i++) {
TweenMax.killTweensOf(leon.drawing[i]);
TweenMax.fromTo(leon.drawing[i], 1.6, {
value: 0
}, {
delay: i * 0.05,
value: 1,
ease: Power4.easeOut
});
}
}
};
leon = new LeonSans({
text: 'The quick brown\nfox jumps over\nthe lazy dog',
color: ['#342f2e'],
size: getSize(120),
weight: 300
});
const gui = new dat.GUI();
gui.add(leon, 'text');
gui.add(leon, 'size', 20, 1000);
gui.add(leon, 'weight', 1, 900);
gui.add(leon, 'tracking', -3, 10);
gui.add(leon, 'leading', -8, 10);
const alignControll = gui.add(controll, 'align', [ 'left', 'center', 'right'] );
gui.add(leon, 'maxWidth', 0, 2000);
gui.add(leon, 'breakWord');
gui.add(controll, 'drawing');
const colorControll = gui.add(controll, 'color', [ 'black', 'white', 'yellow', 'red - blue', 'mixed'] );
alignControll.onChange((value) => {
leon.align = value;
});
alignControll.setValue('left');
colorControll.onChange((value) => {
if (value == 'black') {
document.body.style.backgroundColor = '#f0f0f0';
leon.color = ['#342f2e'];
} else if (value == 'white') {
document.body.style.backgroundColor = '#000000';
leon.color = ['#ffffff'];
} else if (value == 'yellow') {
document.body.style.backgroundColor = '#57c4e2';
leon.color = ['#ffd93c'];
} else if (value == 'red - blue') {
document.body.style.backgroundColor = '#ffffff';
leon.color = [['#ff94a7', '#1c7dd1']];
} else if (value == 'mixed') {
document.body.style.backgroundColor = '#ffffff';
leon.color = ['#ff5892', '#7bc92f', ['#3eda4e', '#f4bf14', '#fa314c', '#074aee'], '#ffd93c', '#c0008b'];
}
});
colorControll.setValue('black');
requestAnimationFrame(animate);
}
function animate(t) {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, sw, sh);
const x = (sw - leon.rect.w) / 2;
const y = (sh - leon.rect.h) / 2;
leon.position(x + moveX, y + moveY);
leon.draw(ctx);
}
window.onload = () => {
init();
};
</script>
</body>
</html>

144
examples/color-pattern.html
Unescape View File

@ -0,0 +1,144 @@ @@ -0,0 +1,144 @@
<!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>LeonSans - Color Pattern</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
margin: 0;
padding: 0;
background-color: #121212;
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/dat-gui/0.7.6/dat.gui.js"></script>
</head>
<body>
<script src="../dist/leon.js"></script>
<script src="js/util.js"></script>
<script>
const speed = 10;
const fps = 1000 / 30;
const PI2 = 2 * Math.PI;
let cValue = 0, mode;
let leon, controll, time;
function init() {
generateCanvas();
controll = {
size: 200,
pathGap: 0,
patternWidth: 2,
visual: {},
drawing: () => {
let i, total = leon.drawing.length;
for (i = 0; i < total; i++) {
TweenMax.killTweensOf(leon.drawing[i]);
TweenMax.fromTo(leon.drawing[i], 2, {
value: 0
}, {
delay: i * 0.1,
value: 1,
ease: Power4.easeOut
});
}
}
};
leon = new LeonSans({
text: 'abcdefg',
size: getSize(200),
weight: 500,
pathGap: -1,
isPath: true
});
const gui = new dat.GUI();
gui.add(leon, 'text');
gui.add(leon, 'size', 10, 1000);
const weightControll = gui.add(controll, 'patternWidth', 1, 100);
gui.add(controll, 'drawing');
const visControll = gui.add(controll, 'pathGap', [ '-1', '0'] );
visControll.onChange((value) => {
mode = value;
if (mode == '-1') {
weightControll.setValue(40);
leon.pathGap = -1;
leon.tracking = 1;
} else if (mode == '0') {
weightControll.setValue(40);
leon.pathGap = 0;
leon.tracking = 1;
}
});
visControll.setValue('-1');
requestAnimationFrame(animate);
}
function update() {
ctx.clearRect(0, 0, sw, sh);
ctx.lineWidth = 0.2;
const w = controll.patternWidth * leon.scale;
const total = leon.data.length;
let i, p, pos, no = 0;
let d, j, j_total;
for (i = 0; i < total; i++) {
d = leon.data[i].paths;
j_total = Math.round(d.length * leon.drawing[i].value);
for (j = 0; j < j_total; j++) {
pos = d[j];
ctx.fillStyle = randomColor(no);
ctx.strokeStyle = randomColor(no);
ctx.beginPath();
ctx.arc(pos.x, pos.y, w, 0, PI2);
ctx.stroke();
no += 1;
}
}
cValue -= speed;
}
function randomColor(no) {
return "hsl(" + (no + cValue) + ',' + '70%,' + '50%)';
}
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);
if (t) {
if (!time) time = t;
if (t - time > fps) {
time = t;
update();
}
}
}
window.onload = () => {
init();
};
</script>
</body>
</html>

113
examples/colorful.html
Unescape View File

@ -0,0 +1,113 @@ @@ -0,0 +1,113 @@
<!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 - Colorful</title>
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
margin: 0;
padding: 0;
background-color: #f0f0f0;
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/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 leon, controll;
function init() {
generateCanvas();
controll = {
color: {},
roundCap: true,
multiply: true,
drawing: () => {
let i, total = leon.drawing.length;
for (i = 0; i < total; i++) {
TweenMax.killTweensOf(leon.drawing[i]);
TweenMax.fromTo(leon.drawing[i], 2, {
value: 0
}, {
value: 1,
ease: Cubic.easeOut
});
}
}
};
leon = new LeonSans({
text: 'The quick brown\nfox jumps over\nthe lazy dog',
color: ['#000000'],
size: getSize(120),
weight: 500
});
const gui = new dat.GUI();
gui.add(leon, 'text');
gui.add(leon, 'size', 20, 300);
gui.add(leon, 'weight', 1, 900);
gui.add(leon, 'tracking', -3, 10);
gui.add(leon, 'leading', -8, 10);
gui.add(controll, 'drawing');
const roundCapControll = gui.add(controll, 'roundCap');
const multiplyControll = gui.add(controll, 'multiply');
roundCapControll.onChange((value) => {
if (value) {
ctx.lineCap = "round";
} else {
ctx.lineCap = "butt";
}
});
multiplyControll.onChange((value) => {
if (value) {
ctx.globalCompositeOperation = 'multiply';
} else {
ctx.globalCompositeOperation = 'source-over';
}
});
requestAnimationFrame(animate);
roundCapControll.setValue(true);
multiplyControll.setValue(true);
}
function animate(t) {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, sw, sh);
const x = (sw - leon.rect.w) / 2;
const y = (sh - leon.rect.h) / 2;
leon.position(x + moveX, y + moveY);
leon.drawColorful(ctx);
}
window.onload = () => {
init();
};
</script>
</body>
</html>

109
examples/gradient.html
Unescape View File

@ -0,0 +1,109 @@ @@ -0,0 +1,109 @@
<!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 - Gradient</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
margin: 0;
padding: 0;
background-color: #f0f0f0;
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/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 leon, controll;
function init() {
generateCanvas();
controll = {
box: false,
grids: false,
points: false,
drawing: () => {
let i, total = leon.drawing.length;
for (i = 0; i < total; i++) {
TweenMax.killTweensOf(leon.drawing[i]);
TweenMax.fromTo(leon.drawing[i], 2, {
value: 0
}, {
value: 1,
ease: Power4.easeOut
});
}
}
};
leon = new LeonSans({
text: 'mug',
color: [
['#64d3ce', '#2a92ce'],
['#e7c4c4', '#aae898', '#e1ea73', '#ff8974'],
['#fd46aa', '#8ad781']
],
size: getSize(500),
weight: 140
});
const gui = new dat.GUI();
gui.add(leon, 'text');
gui.add(leon, 'size', 20, 1000);
gui.add(leon, 'weight', 1, 900);
gui.add(controll, 'drawing');
gui.add(controll, 'box');
gui.add(controll, 'grids');
gui.add(controll, 'points');
requestAnimationFrame(animate);
}
function animate(t) {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, sw, sh);
const x = (sw - leon.rect.w) / 2;
const y = (sh - leon.rect.h) / 2;
leon.position(x + moveX, y + moveY);
ctx.save();
if (controll.grids) leon.grid(ctx);
if (controll.box) leon.box(ctx);
ctx.restore();
ctx.save();
leon.draw(ctx);
ctx.restore();
if (controll.points) {
ctx.save();
leon.point(ctx);
ctx.restore();
}
}
window.onload = () => {
init();
};
</script>
</body>
</html>

94
examples/grid.html
Unescape View File

@ -0,0 +1,94 @@ @@ -0,0 +1,94 @@
<!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 - Grids</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
margin: 0;
padding: 0;
background-color: #f0f0f0;
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/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 leon, controll;
function init() {
generateCanvas();
controll = {
box: true,
grids: true,
points: true,
};
leon = new LeonSans({
text: 'Ttypog',
color: ['#342f2e'],
size: getSize(300),
weight: 400
});
const gui = new dat.GUI();
gui.add(leon, 'text');
gui.add(leon, 'size', 100, 1000);
gui.add(leon, 'weight', 1, 900);
gui.add(leon, 'tracking', -3, 10);
gui.add(leon, 'leading', -8, 10);
gui.add(controll, 'box');
gui.add(controll, 'grids');
gui.add(controll, 'points');
requestAnimationFrame(animate);
}
function animate(t) {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, sw, sh);
const x = (sw - leon.rect.w) / 2;
const y = (sh - leon.rect.h) / 2;
leon.position(x + moveX, y + moveY);
ctx.save();
if (controll.grids) leon.grid(ctx);
if (controll.box) leon.box(ctx);
ctx.restore();
ctx.save();
leon.draw(ctx);
ctx.restore();
if (controll.points) {
ctx.save();
leon.point(ctx);
ctx.restore();
}
}
window.onload = () => {
init();
};
</script>
</body>
</html>

267
examples/index.html
Unescape View File

@ -0,0 +1,267 @@ @@ -0,0 +1,267 @@
<!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 examples</title>
<style>
html,
body {
outline: 0;
margin: 0;
padding: 0;
height: 100%;
color: #ffffff;
font-size: 14px;
line-height: 30px;
-webkit-text-size-adjust: 100%;
font-family: 'Helvetica', sans-serif;
font-weight: 400;
}
#menu-m {
position: fixed;
z-index: 4;
width: 60px;
height: 56px;
left: 0;
top: 0;
background-color: #222222;
cursor: pointer;
}
#menu-m > p {
display: block;
width: 30px;
height: 2px;
background-color: #ffffff;
position: absolute;
left: 15px;
}
#menu-m > p:nth-child(1) {
top: 5px;
}
#menu-m > p:nth-child(2) {
top: 12px;
}
#menu-m > p:nth-child(3) {
top: 19px;
}
#menu-bg {
position: fixed;
z-index: 2;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color:rgba(0,0,0,0.3);
display: none;
}
#menu {
position: fixed;
z-index: 6;
left: 0px;
width: 170px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background-color: #222222;
}
#menu.show {
transform: translate(170px, 0);
}
#header {
margin: 0;
}
#version {
font-size: 9px;
line-height: 9px;
color: rgba(255,255,255,0.5);
padding: 0 0 0 20px;
}
#list {
margin: -10px 0 20px 0;
}
h2 {
font-size: 18px;
font-weight: 400;
margin: 40px 0 6px 0;
padding: 0 0 0 20px;
}
h2 > a {
font-size: 12px;
}
.item {
padding: 0 0 0 20px;
display: block;
}
.item:hover {
opacity: 1;
background-color: #000;
}
.item.selected {
opacity: 1;
background-color: #000;
}
a {
color: #ffffff;
opacity: 0.6;
text-decoration: none;
}
#iframe {
position: absolute;
border: 0px;
right: 0;
right: 0;
width: calc(100% - 170px);
height: 100%;
overflow: auto;
}
@media (max-width: 600px) {
#iframe {
width: 100%;
}
#menu {
left: -170px;
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="../dist/leon.js"></script>
</head>
<body>
<div id="menu-m">
<p></p>
<p></p>
<p></p>
</div>
<div id="menu-bg"></div>
<div id="menu">
<canvas id="header"></canvas>
<div id="version">VERSION 1.5</div>
<div id="list">
<h2>Canvas</h2>
<a class="item" href="all.html" target="iframe">all</a>
<a class="item" href="canvas-basic.html" target="iframe">basic</a>
<a class="item" href="gradient.html" target="iframe">gradient</a>
<a class="item" href="grid.html" target="iframe">grid</a>
<a class="item" href="pattern.html" target="iframe">pattern</a>
<a class="item" href="wave.html" target="iframe">wave</a>
<a class="item" href="colorful.html" target="iframe">colorful</a>
<a class="item" href="color-pattern.html" target="iframe">color pattern</a>
<h2>WebGL <a href="https://www.pixijs.com/" target="_blank">(PIXI.js)</a></h2>
<a class="item" href="webgl-basic-pixi.html" target="iframe">basic</a>
<a class="item" href="metaball-pixi.html" target="iframe">metaball</a>
<a class="item" href="morphing-pixi.html" target="iframe">morphing</a>
<a class="item" href="plants-pixi.html" target="iframe">plants</a>
<a class="item" href="mask-tiling-pixi.html" target="iframe">mask + tiling</a>
</div>
</div>
<iframe id="iframe" name="iframe" allowfullscreen="" allowvr="" onmousewheel=""></iframe>
<script>
window.onload = () => {
let isShow = false;
const menuM = document.getElementById('menu-m');
const menuBg = document.getElementById('menu-bg');
const menu = document.getElementById('menu');
menuM.addEventListener( 'click', (event) => {
onClickMenu();
});
menuBg.addEventListener( 'click', (event) => {
onClickMenu();
});
function onClickMenu() {
isShow = !isShow;
if (isShow) {
menuBg.style.display = 'block';
menu.className = 'show';
} else {
menuBg.style.display = 'none';
menu.className = '';
}
}
const sw = 170;
const sh = 50;
const iframe = document.getElementById('iframe');
const canvas = document.getElementById('header');
const ctx = canvas.getContext("2d");
canvas.width = sw * 2;
canvas.height = sh * 2;
canvas.style.width = sw + 'px'
canvas.style.height = sh + 'px'
ctx.scale(2, 2);
const leon = new LeonSans({
text: 'Leon Sans',
color: ['#ffffff'],
size: 26,
weight: 300
});
leon.on('update', (model) => {
ctx.clearRect(0, 0, sw, sh);
leon.position(20, 20);
leon.draw(ctx);
});
const list = document.getElementById('list');
const arr = list.getElementsByClassName('item');
const total = arr.length;
const links = {};
let cur = null;
let i;
for (i = 0; i < total; i++) {
const vv = arr[i].href.split('/');
const name = vv[vv.length - 1].split('.')[0];
links[name] = arr[i];
arr[i].addEventListener( 'click', (event) => {
const vv = event.target.href.split('/');
const name = vv[vv.length - 1].split('.')[0];
checkMenu(name);
});
}
if (window.location.hash !== '') {
const name = window.location.hash.substring(1);
const url = name + '.html';
iframe.src = url;
checkMenu(name);
} else {
const name = 'all';
iframe.src = name + '.html';
checkMenu(name);
}
function checkMenu(name) {
if (cur) links[cur].classList.remove('selected');
cur = name;
links[cur].classList.add('selected');
window.location.hash = name;
iframe.focus();
};
};
</script>
</body>
</html>

199
examples/mask-tiling-pixi.html
Unescape View File

@ -0,0 +1,199 @@ @@ -0,0 +1,199 @@
<!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>

230
examples/metaball-pixi.html
Unescape View File

@ -0,0 +1,230 @@ @@ -0,0 +1,230 @@
<!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 - Metaball 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, texture, particleCon;
let leon, controll, weightControll;
const particleTotal = 10000;
let particles = [];
function init() {
generatePixi(0x000000);
texture = PIXI.Texture.from('data/drop-alpha.png');
particleCon = new PIXI.ParticleContainer(particleTotal, {
vertices: false,
scale: true,
position: true,
rotation: false,
uvs: false,
alpha: false
});
stage.addChild(particleCon);
let p, i;
for (i = 0; i < particleTotal; i++) {
p = new PIXI.Sprite(texture);
p.x = sw / 2;
p.y = sh / 2;
p.anchor.set(0.5);
p.scale.x = p.scale.y = 0;
particleCon.addChild(p);
particles.push(p);
}
const blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blur = 10;
blurFilter.autoFit = true;
const fragSource = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'uniform sampler2D uSampler;',
'uniform float threshold;',
'uniform float mr;',
'uniform float mg;',
'uniform float mb;',
'void main(void)',
'{',
' vec4 color = texture2D(uSampler, vTextureCoord);',
' vec3 mcolor = vec3(mr, mg, mb);',
' if (color.a > threshold) {',
' gl_FragColor = vec4(mcolor, 1.0);',
' } else {',
' gl_FragColor = vec4(vec3(0.0), 0.0);',
' }',
'}'
].join('\n');
const uniformsData = {
threshold: 0.5,
mr: 255.0/255.0,
mg: 255.0/255.0,
mb: 255.0/255.0,
};
const thresholdFilter = new PIXI.Filter(null, fragSource, uniformsData);
stage.filters = [blurFilter, thresholdFilter];
stage.filterArea = renderer.screen;
controll = {
weight: 3,
color: {},
outline: true,
drawing: () => {
let i;
for (i = 0; i < particleTotal; i++) {
TweenMax.killTweensOf(particles[i].scale);
TweenMax.set(particles[i].scale, {
x: 0,
y: 0
});
TweenMax.to(particles[i].scale, 3, {
delay: 0.001 * i,
x: particles[i].saveScale,
y: particles[i].saveScale,
ease: Circ.easeOut
});
}
}
};
leon = new LeonSans({
text: 'TOP\n678',
size: getSize(400),
weight: 700,
pathGap: -1,
isPath: true,
tracking: 0
});
leon.on('update', (model) => {
update();
});
const gui = new dat.GUI();
gui.add(leon, 'text');
const sizeControll = gui.add(leon, 'size', 200, 1000);
gui.add(leon, 'tracking', -6, 10);
gui.add(leon, 'leading', -8, 10);
weightControll = gui.add(controll, 'weight', 1, 9);
gui.add(controll, 'drawing');
const colorControll = gui.add(controll, 'color', [ 'white', 'black', 'red'] );
sizeControll.onChange((value) => {
sizeWeight();
});
weightControll.onChange((value) => {
update();
});
colorControll.onChange((value) => {
if (value == 'white') {
renderer.backgroundColor = 0x000000;
uniformsData.mr = 255.0/255.0;
uniformsData.mg = 255.0/255.0;
uniformsData.mb = 255.0/255.0;
} else if (value == 'black') {
renderer.backgroundColor = 0xffffff;
uniformsData.mr = 0.0/255.0;
uniformsData.mg = 0.0/255.0;
uniformsData.mb = 0.0/255.0;
} else if (value == 'red') {
renderer.backgroundColor = 0xe4c143;
uniformsData.mr = 244.0/255.0;
uniformsData.mg = 46.0/255.0;
uniformsData.mb = 33.0/255.0;
}
});
colorControll.setValue('white');
requestAnimationFrame(animate);
sizeWeight();
TweenMax.delayedCall(0.1, () => {
controll.drawing();
});
}
function sizeWeight() {
let w;
if (leon.size > 400) {
w = (1.5 - 3) / (1000 - 400) * (leon.size - 400) + 3;
} else {
w = (3 - 6) / (400 - 200) * (leon.size - 200) + 6;
}
weightControll.setValue(w);
}
function update() {
const total = leon.paths.length;
const sw2 = sw / 2;
const sh2 = sh / 2;
let i, p, pos, scale;
for (i = 0; i < particleTotal; i++) {
p = particles[i];
TweenMax.killTweensOf(p.scale);
if (i < total) {
pos = leon.paths[i];
if (pos.type == 'a') {
scale = controll.weight * 0.025* leon.scale;
} else {
scale = controll.weight * 0.01* leon.scale;
}
p.saveScale = scale;
p.x = pos.x;
p.y = pos.y;
p.scale.x = p.scale.y = scale;
} else {
p.saveScale = 0;
p.x = -1000;
p.y = -1000;
p.scale.x = p.scale.y = 0;
}
}
}
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>

232
examples/morphing-pixi.html
Unescape View File

@ -0,0 +1,232 @@ @@ -0,0 +1,232 @@
<!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 - Morphing 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://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.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, texture, particleCon;
let leon, controll;
const particleTotal = 5000;
let particles = [];
let myText = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789?!$^&*(){}[]<>~:;,.\'"+=-_@#%'.split('');
const textTotal = myText.length;
let curText = -1;
let DELAY_TIME = 0.8;
function init() {
generatePixi(0xfec82e);
myText = shuffle(myText);
texture = PIXI.Texture.from('data/drop-alpha.png');
particleCon = new PIXI.ParticleContainer(particleTotal, {
vertices: false,
scale: true,
position: true,
rotation: false,
uvs: false,
alpha: false
});
stage.addChild(particleCon);
let p, i;
for (i = 0; i < particleTotal; i++) {
p = new PIXI.Sprite(texture);
p.x = sw / 2;
p.y = sh / 2;
p.anchor.set(0.5);
p.scale.x = p.scale.y = 0;
particleCon.addChild(p);
particles.push(p);
}
const blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blur = 10;
blurFilter.autoFit = true;
const fragSource = [
'precision mediump float;',
'varying vec2 vTextureCoord;',
'uniform sampler2D uSampler;',
'uniform float threshold;',
'uniform float mr;',
'uniform float mg;',
'uniform float mb;',
'void main(void)',
'{',
' vec4 color = texture2D(uSampler, vTextureCoord);',
' vec3 mcolor = vec3(mr, mg, mb);',
' if (color.a > threshold) {',
' gl_FragColor = vec4(mcolor, 1.0);',
' } else {',
' gl_FragColor = vec4(vec3(0.0), 0.0);',
' }',
'}'
].join('\n');
const uniformsData = {
threshold: 0.5,
mr: 255.0/255.0,
mg: 255.0/255.0,
mb: 255.0/255.0,
};
const thresholdFilter = new PIXI.Filter(null, fragSource, uniformsData );
const outlineFilterBlue = new PIXI.filters.OutlineFilter(1, 0x000000);
stage.filters = [blurFilter, thresholdFilter, outlineFilterBlue];
stage.filterArea = renderer.screen;
controll = {
weight: 6,
outline: true
};
leon = new LeonSans({
text: '',
size: 600,
weight: 700,
pathGap: -1,
isPath: true
});
leon.on('update', (data) => {
update(data);
});
const gui = new dat.GUI();
gui.add(leon, 'size', 400, 1000);
gui.add(controll, 'weight', 3, 9);
const otControll = gui.add(controll, 'outline');
otControll.onChange((value) => {
if (value) {
stage.filters = [blurFilter, thresholdFilter, outlineFilterBlue];
} else {
stage.filters = [blurFilter, thresholdFilter];
}
});
requestAnimationFrame(animate);
showText();
}
function nextText() {
TweenMax.killDelayedCallsTo(showText);
TweenMax.delayedCall(DELAY_TIME, showText);
}
function showText() {
curText += 1;
if (curText == textTotal) curText = 0;
leon.text = myText[curText];
nextText();
}
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;
}
function update(model) {
const total = model.paths.length;
const sw2 = sw / 2;
const sh2 = sh / 2;
let i, p, pos, scale;
for (i = 0; i < particleTotal; i++) {
p = particles[i];
TweenMax.killTweensOf(p);
if (i < total) {
pos = model.paths[i];
if (pos.type == 'a') {
scale = controll.weight * 0.02* leon.scale;
} else {
scale = controll.weight * 0.01* leon.scale;
}
TweenMax.to(p, 0.4, {
x: sw2,
y: sh2,
ease: Sine.easeIn
});
TweenMax.to(p, 0.5, {
delay: 0.3,
x: pos.x,
y: pos.y,
ease: Expo.easeOut
});
TweenMax.to(p.scale, 0.5, {
delay: 0.3,
x: scale,
y: scale,
ease: Expo.easeOut
});
} else {
TweenMax.to(p, 0.3, {
x: sw2,
y: sh2,
ease: Sine.easeIn
});
TweenMax.to(p.scale, 0.3, {
x: 0,
y: 0,
ease: Sine.easeIn
});
}
}
}
function animate(t) {
requestAnimationFrame(animate);
const x = (sw - leon.rect.w) / 2;
const y = (sh - leon.rect.h) / 2;
leon.position(x, y);
renderer.render(stage);
}
window.onload = () => {
init();
};
</script>
</body>
</html>

94
examples/pattern.html
Unescape View File

@ -0,0 +1,94 @@ @@ -0,0 +1,94 @@
<!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 - Pattern</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
margin: 0;
padding: 0;
background-color: #502c8d;
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/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 leon, controll;
function init() {
generateCanvas();
controll = {
color: {},
align: {},
patternWidth: 40,
patternHeight: 10,
drawing: () => {
let i, total = leon.drawing.length;
for (i = 0; i < total; i++) {
TweenMax.killTweensOf(leon.drawing[i]);
TweenMax.fromTo(leon.drawing[i], 2, {
value: 0
}, {
delay: i * 0.05,
value: 1,
ease: Power4.easeOut
});
}
}
};
leon = new LeonSans({
text: 'The quick brown\nfox jumps over\nthe lazy dog',
size: getSize(120),
weight: 400,
isPath: true,
pathGap: 0.2
});
const gui = new dat.GUI();
gui.add(leon, 'text');
gui.add(leon, 'size', 20, 300);
gui.add(leon, 'pathGap', 0, 1);
gui.add(controll, 'patternWidth', 1, 200);
gui.add(controll, 'patternHeight', 1, 100);
gui.add(controll, 'drawing');
requestAnimationFrame(animate);
}
function animate(t) {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, sw, sh);
const x = (sw - leon.rect.w) / 2;
const y = (sh - leon.rect.h) / 2;
leon.position(x + moveX, y + moveY);
leon.pattern(ctx, controll.patternWidth, controll.patternHeight);
}
window.onload = () => {
init();
};
</script>
</body>
</html>

227
examples/plants-pixi.html
Unescape View File

@ -0,0 +1,227 @@ @@ -0,0 +1,227 @@
<!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>

82
examples/wave.html
Unescape View File

@ -0,0 +1,82 @@ @@ -0,0 +1,82 @@
<!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 - Wave</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
margin: 0;
padding: 0;
background-color: #000000;
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/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 leon, controll;
function init() {
generateCanvas();
const controll = {
color: {},
align: {},
};
leon = new LeonSans({
text: 'The quick brown\nfox jumps over\nthe lazy dog',
color: ['#ffffff'],
size: getSize(120),
weight: 1,
isWave: true,
pathGap: 0.3,
amplitude: 0.5,
fps: 30
});
const gui = new dat.GUI();
gui.add(leon, 'text');
gui.add(leon, 'size', 20, 300);
gui.add(leon, 'weight', 1, 300);
gui.add(leon, 'pathGap', 0, 1);
gui.add(leon, 'amplitude', 0, 1);
gui.add(leon, 'fps', 10, 60);
requestAnimationFrame(animate);
}
function animate(t) {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, sw, sh);
const x = (sw - leon.rect.w) / 2;
const y = (sh - leon.rect.h) / 2;
leon.position(x + moveX, y + moveY);
leon.wave(ctx, t);
}
window.onload = () => {
init();
};
</script>
</body>
</html>

124
examples/webgl-basic-pixi.html
Unescape View File

@ -0,0 +1,124 @@ @@ -0,0 +1,124 @@
<!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 - WebGL Basic 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 graphics;
let leon, controll;
function init() {
generatePixi(0x000000);
graphics = new PIXI.Graphics();
stage.addChild(graphics);
controll = {
color: {},
align: {},
drawing: () => {
leon.updateDrawingPaths();
let i, total = leon.drawing.length;
for (i = 0; i < total; i++) {
TweenMax.killTweensOf(leon.drawing[i]);
TweenMax.fromTo(leon.drawing[i], 1.6, {
value: 0
}, {
delay: i * 0.05,
value: 1,
ease: Power4.easeOut
});
}
},
};
leon = new LeonSans({
text: 'The quick brown\nfox jumps over\nthe lazy dog',
color: [0xffffff],
size: getSize(120),
weight: 300
});
const gui = new dat.GUI();
gui.add(leon, 'text');
gui.add(leon, 'size', 10, 2000);
gui.add(leon, 'weight', 1, 900);
gui.add(leon, 'tracking', -3, 10);
gui.add(leon, 'leading', -8, 10);
const alignControll = gui.add(controll, 'align', [ 'left', 'center', 'right'] );
gui.add(leon, 'maxWidth', 0, 2000);
gui.add(leon, 'breakWord');
gui.add(controll, 'drawing');
const colorControll = gui.add(controll, 'color', [ 'black', 'white', 'yellow' , 'mixed'] );
alignControll.onChange((value) => {
leon.align = value;
});
alignControll.setValue('left');
colorControll.onChange((value) => {
if (value == 'black') {
renderer.backgroundColor = 0xf0f0f0;
leon.color = [0x342f2e];
} else if (value == 'white') {
renderer.backgroundColor = 0x000000;
leon.color = [0xffffff];
} else if (value == 'yellow') {
renderer.backgroundColor = 0x57c4e2;
leon.color = [0xffd93c];
} else if (value == 'mixed') {
document.body.style.backgroundColor = '#ffffff';
leon.color = [0xff5892, 0xbc92f, 0xffd93c, 0xc0008b];
}
});
colorControll.setValue('white');
requestAnimationFrame(animate);
}
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);
graphics.clear();
leon.drawPixi(graphics);
renderer.render(stage);
}
window.onload = () => {
init();
};
</script>
</body>
</html>

2
src/index.js
Unescape View File

@ -0,0 +1,2 @@ @@ -0,0 +1,2 @@
const LeonSans = require('./LeonSans').default;
module.exports = LeonSans;

521
src/leonsans.js
Unescape View File

@ -0,0 +1,521 @@ @@ -0,0 +1,521 @@
import {
Dispatcher
} from './core/dispatcher.js';
import {
MIN_FONT_WEIGHT,
MAX_FONT_WEIGHT,
shuffle
} from './core/util.js';
import {
Lines
} from './draw/canvas/lines.js';
import {
Points
} from './draw/canvas/points.js';
import {
Grids
} from './draw/canvas/grids.js';
import {
Wave
} from './draw/canvas/wave.js';
import {
Pattern
} from './draw/canvas/pattern.js';
import {
Color
} from './draw/canvas/color.js';
import {
Colorful
} from './draw/canvas/colorful.js';
import {
PixiLines
} from './draw/pixi/lines.js';
import {
PixiColor
} from './draw/pixi/color.js';
import {
Model
} from './core/model.js';
export default class LeonSans extends Dispatcher {
constructor({
text = '',
size = 500,
weight = MIN_FONT_WEIGHT,
color = ['#000000'],
colorful = ['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31'],
tracking = 0,
leading = 0,
align = 'left',
pathGap = 0.5,
amplitude = 0.5,
width = 0,
breakWord = false,
fps = 30,
isPath = false,
isWave = false,
} = {}) {
super();
this.size_ = size;
this.weight_ = weight;
this.color_ = color;
this.colorful_ = shuffle(colorful);
this.tracking_ = tracking;
this.leading_ = leading;
this.pathGap_ = pathGap;
this.amplitude_ = amplitude;
this.width_ = width;
this.breakWord_ = breakWord;
this.fps_ = fps;
this.fpsTime_ = 1000 / this.fps_;
this.isPath_ = isPath;
this.isWave_ = isWave;
this.model = new Model();
this.str_ = null;
this.time_ = null;
this.isFps_ = false;
this.isForceRander_ = false;
this.updateID_ = 0;
this.dPathsID_ = null;
this.pPathsID_ = null;
this.wPathsID_ = null;
this.guideID_ = null;
this.text = text;
this.model.align = align;
}
on(event, callback) {
super.on(event, callback);
this.update();
}
off(event, callback) {
super.off(event, callback);
}
get text() {
return this.str_;
}
set text(str) {
if (this.str_ == str) return;
this.str_ = str;
this.update();
}
get size() {
return this.size_;
}
set size(v) {
if (this.size_ == v) return;
this.size_ = v;
this.update();
this.isForceRander_ = true;
}
get weight() {
return this.weight_;
}
set weight(v) {
if (v < MIN_FONT_WEIGHT) {
v = MIN_FONT_WEIGHT;
} else if (v > MAX_FONT_WEIGHT) {
v = MAX_FONT_WEIGHT;
}
if (this.weight_ == v) return;
this.weight_ = v;
this.update();
this.isForceRander_ = true;
}
get color() {
return this.color_;
}
set color(v) {
if (this.color_ == v) return;
this.color_ = v;
}
get tracking() {
return this.tracking_;
}
set tracking(v) {
if (this.tracking_ == v) return;
this.tracking_ = v;
this.update();
this.isForceRander_ = true;
}
get leading() {
return this.leading_;
}
set leading(v) {
if (this.leading_ == v) return;
this.leading_ = v;
this.update();
this.isForceRander_ = true;
}
get align() {
return this.model.align;
}
set align(v) {
if (this.model.align != v) {
this.model.align = v;
this.updateID_++;
this.updateSignal();
}
}
get pathGap() {
return this.pathGap_;
}
set pathGap(v) {
if (this.pathGap_ != v) {
this.pathGap_ = v;
this.updatePatternPaths(true);
this.updateWavePaths(true);
this.isForceRander_ = true;
}
}
get amplitude() {
return this.amplitude_;
}
set amplitude(v) {
this.amplitude_ = v;
}
get rect() {
return this.model.rect;
}
set maxWidth(v) {
if (this.width_ == v) return;
this.width_ = v;
this.update();
}
get maxWidth() {
return this.width_;
}
set breakWord(v) {
if (this.breakWord_ == v) return;
this.breakWord_ = v;
this.update();
}
get breakWord() {
return this.breakWord_;
}
get isPath() {
return this.isPath_;
}
set isPath(v) {
this.isPath_ = v;
this.updatePatternPaths(true);
}
get isWave() {
return this.isWave_;
}
set isWave(v) {
this.isWave_ = v;
this.updateWavePaths(true);
}
get fps() {
return this.fps_;
}
set fps(v) {
this.fps_ = v;
this.fpsTime_ = 1000 / this.fps_;
}
get lineWidth() {
return this.model.lineWidth;
}
get scale() {
return this.model.scale;
}
get drawing() {
return this.model.drawing;
}
get data() {
return this.model.data;
}
get paths() {
return this.model.paths;
}
get drawingPaths() {
return this.model.drawingPaths;
}
get wavePaths() {
return this.model.wavePaths;
}
position(x = 0, y = 0) {
if (this.model.position(x, y)) {
this.updateID_++;
this.updateSignal();
}
}
update() {
this.updateID_++;
this.model.update(
this.str_,
this.width_,
this.breakWord_,
this.weight_,
this.size_,
this.tracking_,
this.leading_
);
if (this.isPath_ || this.isWave_) {
this.updatePatternPaths();
this.updateWavePaths();
} else {
this.updateSignal();
}
}
updateGuide() {
if (this.guideID_ != this.updateID_) {
this.guideID_ = this.updateID_;
this.model.updateGuide();
}
}
/**
* Update paths for drawing in WebGL (PIXI.js). It's very expensive, only call when it needs.
*/
updateDrawingPaths() {
if (this.dPathsID_ != this.updateID_) {
this.dPathsID_ = this.updateID_;
this.model.updateDrawingPaths();
}
}
/**
* Update paths for pattern
* @param {boolean} force - Force execution
*/
updatePatternPaths(force) {
if (this.isPath_ && (force || this.pPathsID_ != this.updateID_)) {
this.pPathsID_ = this.updateID_;
this.model.updatePatternPaths(this.pathGap_);
this.isForceRander_ = true;
this.updateSignal();
}
}
/**
* Update paths for wave effect
* @param {boolean} force - Force execution
*/
updateWavePaths(force) {
if (this.isWave_ && (force || this.wPathsID_ != this.updateID_)) {
this.wPathsID_ = this.updateID_;
this.model.updateWavePaths(this.pathGap_);
this.isForceRander_ = true;
this.updateSignal();
}
}
updateSignal() {
this.model.updateLinesForRect();
this.model.updatePathsForRect();
this.dispatch('update', this.model);
}
reset() {
this.size_ = 500;
this.weight_ = MIN_FONT_WEIGHT;
this.color_ = ['#000000'];
this.tracking_ = 0;
this.leading_ = 0;
this.pathGap_ = 0.5;
this.amplitude_ = 0.5;
this.width_ = 0;
this.breakWord_ = false;
this.fps_ = 30;
this.fpsTime_ = 1000 / this.fps_;
this.isPath_ = false;
this.isWave_ = false;
this.str_ = null;
this.time_ = null;
this.isFps_ = false;
this.isForceRander_ = false;
this.updateID_ = 0;
this.dPathsID_ = null;
this.pPathsID_ = null;
this.wPathsID_ = null;
this.guideID_ = null;
this.model.reset();
}
dispose() {
this.reset();
this.model = null;
}
/**
* Draw text in WebGL with PIXI.js
* @param {PIXI.Graphics} graphics
*/
drawPixi(graphics) {
const total = this.model.data.length;
let i, d, color;
for (i = 0; i < total; i++) {
d = this.model.data[i];
color = PixiColor(i, d, this.color_);
PixiLines(graphics, d, this.lineWidth, color);
}
}
/**
* Draw text in the Canvas element.
* @param {CanvasRenderingContext2D} ctx
*/
draw(ctx) {
ctx.lineWidth = this.lineWidth;
const total = this.model.data.length;
let i, d;
for (i = 0; i < total; i++) {
d = this.model.data[i];
Color(ctx, i, d, this.color_);
Lines(ctx, d);
}
}
/**
* Draw the colorful effect.
* @param {CanvasRenderingContext2D} ctx
*/
drawColorful(ctx) {
ctx.lineWidth = this.lineWidth;
Colorful(ctx, this.model, this.colorful_);
}
/**
* Draw the wave effect.
* @param {CanvasRenderingContext2D} ctx
* @param {DOMHighResTimeStamp} t time stemp from requestAnimationFrame()
*/
wave(ctx, t) {
ctx.lineWidth = this.lineWidth;
if (t) {
if (!this.time_) this.time_ = t;
const p = t - this.time_;
if (p > this.fpsTime_ || this.isForceRander_) {
this.time_ = t;
this.isFps_ = true;
} else {
this.isFps_ = false;
}
}
this.isForceRander_ = false;
const total = this.model.data.length;
let i, d;
for (i = 0; i < total; i++) {
d = this.model.data[i];
Color(ctx, i, d, this.color_);
Wave(ctx, d, this.model.scale, this.amplitude_, this.weight_, this.isFps_);
}
}
/**
* Draw rectangle shapes at each path point.
* @param {CanvasRenderingContext2D} ctx
* @param {number} w pattern width
* @param {number} h pattern height
*/
pattern(ctx, w, h) {
const tw = w * this.model.scale;
const th = h * this.model.scale;
const total = this.model.data.length;
let i, d;
for (i = 0; i < total; i++) {
d = this.model.data[i];
Pattern(ctx, d, tw, th);
}
}
/**
* Draw grid for each type.
* @param {CanvasRenderingContext2D} ctx
*/
grid(ctx) {
this.updateGuide();
const total = this.model.data.length;
let i, d;
for (i = 0; i < total; i++) {
d = this.model.data[i];
Grids(ctx, d);
}
}
/**
* Draw circles at each drawing point and lines for each type.
* @param {CanvasRenderingContext2D} ctx
*/
point(ctx) {
const total = this.model.data.length;
let i, d;
for (i = 0; i < total; i++) {
d = this.model.data[i];
Points(ctx, d);
}
}
/**
* Draw outline box for the text.
* @param {CanvasRenderingContext2D} ctx
* @private
*/
box(ctx) {
ctx.lineWidth = 1;
ctx.beginPath();
ctx.strokeStyle = "#0b90dc";
ctx.rect(this.model.rect.x, this.model.rect.y, this.model.rect.w, this.model.rect.h);
ctx.stroke();
}
}
Write Preview
Loading…
Cancel
Save