forked from tholman/texter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
77 lines (62 loc) · 3.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!doctype html>
<html>
<head>
<title> Texter </title>
<!-- CSS -->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!-- JS -->
<script type="text/javascript" src="js/libs/dat.gui.min.js"></script>
<script type="text/javascript" src="js/libs/animationFrame.js"></script>
<script type="text/javascript" src="js/texter.js"></script>
</head>
<body>
<!-- Header -->
<div id="info-tab">
<div class="info first">
<b>Texter</b> is a little javascript experiment that lets you explore your creativity by drawing with words. This app is an extension of a demo from this <a href="http://generative-gestaltung.de/">book</a>
<p>
Made by: <a href="http://tholman.com"> Tim Holman </a> - <a href="http://twitter.com/twholman" title="You'll love my tweets, I promise ;)"> @twholman </a>
</p>
</div>
<div class="info">
This has been made using <i> Javascript </i> and the HTML5 <i> canvas </i> element. You can find the source on <a href="http://github.com/tholman/texter">Github</a>
<p>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://tholman.com/experiments/html5/texter" data-text="Texter - Draw pictures with text! - by @twholman -"> Tweet </a>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Ftholman.com%2Fexperiments%2Fhtml5%2Ftexter&send=false&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:107px; height:21px; margin-bottom: -1px;" allowTransparency="true"></iframe>
</p>
</div>
<div id="title">Texter</div>
</div>
<div id="back">
<a href="/experiments"> More experiments </a> <span>‹</span>
</div>
<script type="text/javascript" src="js/header.js"></script>
<!-- APP -->
<canvas id='canvas'></canvas>
<script>
var texter = new Texter();
texter.initialize();
var gui = new dat.GUI();
gui.add(texter, 'text').name( 'Text' ).onChange( function() { texter.onTextChange() } );
gui.add(texter, 'minFontSize', 3, 100).name( 'Minimum Size' );
gui.add(texter, 'maxFontSize', 3, 400).name( 'Maximum Size' );
gui.add(texter, 'angleDistortion', 0, 2).step(0.1).name( 'Random Angle' );
gui.addColor(texter, 'textColor').name( 'Text Color' ).onChange( function(value) { texter.applyNewColor( value ) } );
gui.addColor(texter, 'bgColor').name( 'Background Color' ).onChange( function(value) { texter.setBackground( value ) } );
gui.add(texter, 'clear').name( 'Clear' );
gui.add(texter, 'save').name( 'Save' );
</script>
<!-- Misc -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22825241-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>