Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit 3960cb7835ed9137840eccbfe98f3e8e91460602 @tholman committed Oct 19, 2012
Showing with 611 additions and 0 deletions.
  1. BIN .DS_Store
  2. +177 −0 css/style.css
  3. +77 −0 index.html
  4. BIN js/.DS_Store
  5. +73 −0 js/header.js
  6. +24 −0 js/libs/animationFrame.js
  7. +82 −0 js/libs/dat.gui.min.js
  8. +178 −0 js/texter.js
Binary file not shown.
@@ -0,0 +1,177 @@
+html, body {
+ width: 100%;
+ height: 100%;
+ margin: 0px;
+ overflow: hidden;
+}
+
+canvas {
+ position: absolute;
+ cursor: crosshair;
+ -webkit-user-select: none;
+}
+
+/* ----- INFO & SHARING ----- */
+
+#back {
+ font-family: Helvetica, Arial, "Lucida Grande";
+ position: fixed;
+ top: 7px;
+ width: 190px;
+ height: 36px;
+ box-shadow: 0px 0px 4px 0px #888;
+ line-height: 10px;
+ left: -153px;
+ background: #fff;
+ z-index: 1000;
+
+ -webkit-transition: left 250ms;
+ -moz-transition: left 250ms;
+ -o-transition: left 250ms;
+ -ms-trantion: left 250ms;
+ transition: left 250ms;
+}
+
+#back.open {
+ left: 0px;
+}
+
+#back a {
+ color: #1C86EE;
+ margin-left: 0px;
+ margin-right: 0px;
+ padding: 13px;
+ padding-right: 0px;
+ position: absolute;
+}
+
+#back a:hover {
+ color: hotpink;
+}
+
+#back span {
+ font-size: 50px;
+ line-height: 0px;
+ color: #444;
+ text-decoration: none;
+ font-family: Times;
+ position: absolute;
+ right: 10px;
+ top: 17px;
+ -webkit-margin-before: -3px;
+}
+
+#info-tab * {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box
+}
+
+#info-tab {
+
+ font-family: Helvetica, Arial, "Lucida Grande";
+
+ -webkit-box-shadow: 0px 0px 4px 0px #888;
+ box-shadow: 0px 0px 4px 0px #888;
+
+ -webkit-transition: left 300ms, -webkit-box-shadow 500ms;
+ -moz-transition: left 300ms, -moz-box-shadow 500ms;
+ -o-transition: left 300ms, -o-box-shadow 500ms;
+ -ms-trantion: left 300ms, -ms-box-shadow 500ms;
+ transition: left 300ms, box-shadow 500ms;
+
+ background-color: #ffffff;
+ height: 150px;
+ position: fixed;
+ padding-left: 5px;
+ line-height: 36px;
+ width: 630px;
+ margin-top: 11px;
+ font-size: 17px;
+ color: #444;
+ left: -598px;
+ z-index: 1000;
+ top: 40px;
+}
+
+#info-tab.open {
+ left: 0px;
+}
+
+#info-tab.highlight {
+ -webkit-box-shadow: 0px 0px 12px 0px #222;
+ box-shadow: 0px 0px 12px 0px #222;
+}
+
+#info-tab.open #title {
+ opacity: 0;
+}
+
+
+#info-tab #title {
+ -webkit-transition: opacity 300ms;
+ -moz-transition: opacity 300ms;
+ -o-transition: opacity 300ms;
+ -ms-trantion: opacity 300ms;
+ transition: opacity 300ms;
+
+
+ -webkit-transform: rotate( 90deg ) translateZ(0px);
+ -moz-transform: rotate( 90deg ) translateZ(0px);
+ -ms-transform: rotate( 90deg ) translateZ(0px);
+ -o-transform: rotate( 90deg ) translateZ(0px);
+ transform: rotate( 90deg ) translateZ(0px);
+
+ -webkit-transform-origin: 100% 0%;
+ -moz-transform-origin: 100% 0%;
+ -ms-transform-origin: 100% 0%;
+ -o-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+
+ float: right;
+ width: 150px;
+ height: 30px;
+ position: absolute;
+ text-align: center;
+ right: 0px;
+ bottom: -30px;
+}
+
+#info-tab .info {
+ margin-left: 18px;
+ font-size: 14px;
+
+ line-height: 16px;
+ height: 110px;
+ width: 282px;
+ float: left;
+ padding-right: 18px;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ color: #111;
+ margin-right: 5px;
+ position: relative;
+}
+
+#info-tab .first {
+ border-right: 1px solid #ddd;
+}
+
+#info-tab p {
+ position: absolute;
+ bottom: 0px;
+ font-size: 12px;
+ margin: 0px;
+}
+
+#info-tab a {
+ color: #1C86EE;
+}
+
+#info-tab a:hover {
+ color: hotpink;
+}
+
+#info-tab iframe {
+ vertical-align: bottom;
+}
@@ -0,0 +1,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&amp;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>
+ </p>
+ </div>
+ <div id="title">Texter</div>
+ </div>
+ <div id="back">
+ <a href="/experiments"> More experiments </a> <span>&lsaquo;</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>
Binary file not shown.
@@ -0,0 +1,73 @@
+var headers = [document.getElementById('back'), document.getElementById('info-tab')] ;
+var headerMouseDown = false;
+var headerToggleTimeOut = [];
+
+document.addEventListener( 'mousedown', function() {
+ headerMouseDown = true;
+}, false );
+
+document.addEventListener( 'mouseup', function() {
+ headerMouseDown = false;
+}, false );
+
+for (var i = 0; i < headers.length; i++ ) {
+
+ headerToggleTimeOut.push( -1 );
+
+ headers[i].addEventListener('mouseover', function() {
+
+ if (!headerMouseDown) {
+
+ interval = clearInterval( interval );
+
+ var _this = this;
+
+ clearTimeout( headerToggleTimeOut );
+
+ headerToggleTimeOut[i] = setTimeout( function() {
+ _this.setAttribute( 'class', 'open' )
+ }, 50 );
+ }
+
+ }, false);
+
+ headers[i].addEventListener('mouseout', function() {
+
+ var _this = this;
+
+ clearTimeout( headerToggleTimeOut );
+
+ headerToggleTimeOut[i] = setTimeout( function() {
+ _this.setAttribute( 'class', '' )
+ }, 50 );
+
+ }, false);
+}
+
+function pulseHeader() {
+
+ if (interval == undefined) { return };
+ headers[1].setAttribute( 'class', 'highlight');
+
+ setTimeout( function() {
+ if (interval == undefined) { return };
+ headers[1].setAttribute( 'class', '');
+
+ setTimeout( function() {
+ if (interval == undefined) { return };
+ headers[1].setAttribute( 'class', 'highlight');
+
+ setTimeout( function() {
+ if (interval == undefined) { return };
+ headers[1].setAttribute( 'class', '');
+
+ }, 400 );
+
+ }, 400 );
+
+ }, 400 );
+}
+
+var interval = setInterval( function() {
+ pulseHeader();
+}, 10000 );
@@ -0,0 +1,24 @@
+(function() {
+ var lastTime = 0;
+ var vendors = ['ms', 'moz', 'webkit', 'o'];
+ for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+ window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+ window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
+ || window[vendors[x]+'CancelRequestAnimationFrame'];
+ }
+
+ if (!window.requestAnimationFrame)
+ window.requestAnimationFrame = function(callback, element) {
+ var currTime = new Date().getTime();
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+ var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+ timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+
+ if (!window.cancelAnimationFrame)
+ window.cancelAnimationFrame = function(id) {
+ clearTimeout(id);
+ };
+}());
Oops, something went wrong.

0 comments on commit 3960cb7

Please sign in to comment.