Find file
Fetching contributors…
Cannot retrieve contributors at this time
77 lines (62 sloc) 3.45 KB
<!doctype html>
<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>
<!-- 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="">book</a>
Made by: <a href=""> Tim Holman </a> - <a href="" title="You'll love my tweets, I promise ;)"> @twholman </a>
<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="">Github</a>
<a href="" class="twitter-share-button" data-url="" data-text="Texter - Draw pictures with text! - by @twholman -"> Tweet </a>
<iframe src=";send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:107px; height:21px; margin-bottom: -1px;" allowTransparency="true"></iframe>
<div id="title">Texter</div>
<div id="back">
<a href="/experiments"> More experiments </a> <span>&lsaquo;</span>
<script type="text/javascript" src="js/header.js"></script>
<!-- APP -->
<canvas id='canvas'></canvas>
var texter = new Texter();
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' );
<!-- Misc -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22825241-1']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);