-
Notifications
You must be signed in to change notification settings - Fork 50
/
Copy pathindex.html
131 lines (124 loc) · 4.33 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>Texter - Draw with Words</title>
<meta name="description" content="A creative tool that allows you to draw with words.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 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/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>. If you feel like supporting me, you can always <a href="https://ko-fi.com/tholman" target="_blank">buy me a coffee</a>.
<p>
<a
href="https://twitter.com/share"
class="twitter-share-button"
data-url="http://tholman.com/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>