<!--
          _____                    _____                    _____                    _____                    _____                    _____                    _____                   _______                           
         /\    \                  /\    \                  /\    \                  /\    \                  /\    \                  /\    \                  /\    \                 /::\    \                          
        /::\    \                /::\    \                /::\    \                /::\    \                /::\    \                /::\    \                /::\    \               /::::\    \                         
       /::::\    \              /::::\    \              /::::\    \              /::::\    \              /::::\    \               \:::\    \              /::::\    \             /::::::\    \                        
      /::::::\    \            /::::::\    \            /::::::\    \            /::::::\    \            /::::::\    \               \:::\    \            /::::::\    \           /::::::::\    \                       
     /:::/\:::\    \          /:::/\:::\    \          /:::/\:::\    \          /:::/\:::\    \          /:::/\:::\    \               \:::\    \          /:::/\:::\    \         /:::/~~\:::\    \                      
    /:::/__\:::\    \        /:::/__\:::\    \        /:::/  \:::\    \        /:::/__\:::\    \        /:::/__\:::\    \               \:::\    \        /:::/  \:::\    \       /:::/    \:::\    \                     
   /::::\   \:::\    \      /::::\   \:::\    \      /:::/    \:::\    \      /::::\   \:::\    \      /::::\   \:::\    \              /::::\    \      /:::/    \:::\    \     /:::/    / \:::\    \                    
  /::::::\   \:::\    \    /::::::\   \:::\    \    /:::/    / \:::\    \    /::::::\   \:::\    \    /::::::\   \:::\    \    ____    /::::::\    \    /:::/    / \:::\    \   /:::/____/   \:::\____\                   
 /:::/\:::\   \:::\    \  /:::/\:::\   \:::\    \  /:::/    /   \:::\ ___\  /:::/\:::\   \:::\    \  /:::/\:::\   \:::\____\  /\   \  /:::/\:::\    \  /:::/    /   \:::\    \ |:::|    |     |:::|    |                  
/:::/  \:::\   \:::\____\/:::/__\:::\   \:::\____\/:::/____/     \:::|    |/:::/__\:::\   \:::\____\/:::/  \:::\   \:::|    |/::\   \/:::/  \:::\____\/:::/____/     \:::\____\|:::|____|     |:::|    |                  
\::/    \:::\   \::/    /\:::\   \:::\   \::/    /\:::\    \     /:::|____|\:::\   \:::\   \::/    /\::/   |::::\  /:::|____|\:::\  /:::/    \::/    /\:::\    \      \::/    / \:::\    \   /:::/    /                   
 \/____/ \:::\   \/____/  \:::\   \:::\   \/____/  \:::\    \   /:::/    /  \:::\   \:::\   \/____/  \/____|:::::\/:::/    /  \:::\/:::/    / \/____/  \:::\    \      \/____/   \:::\    \ /:::/    /                    
          \:::\    \       \:::\   \:::\    \       \:::\    \ /:::/    /    \:::\   \:::\    \            |:::::::::/    /    \::::::/    /            \:::\    \                \:::\    /:::/    /                     
           \:::\____\       \:::\   \:::\____\       \:::\    /:::/    /      \:::\   \:::\____\           |::|\::::/    /      \::::/____/              \:::\    \                \:::\__/:::/    /                      
            \::/    /        \:::\   \::/    /        \:::\  /:::/    /        \:::\   \::/    /           |::| \::/____/        \:::\    \               \:::\    \                \::::::::/    /                       
             \/____/          \:::\   \/____/          \:::\/:::/    /          \:::\   \/____/            |::|  ~|               \:::\    \               \:::\    \                \::::::/    /                        
                               \:::\    \               \::::::/    /            \:::\    \                |::|   |                \:::\    \               \:::\    \                \::::/    /                         
                                \:::\____\               \::::/    /              \:::\____\               \::|   |                 \:::\____\               \:::\____\                \::/____/                          
                                 \::/    /                \::/____/                \::/    /                \:|   |                  \::/    /                \::/    /                 ~~                                
                                  \/____/                  ~~                       \/____/                  \|___|                   \/____/                  \/____/                                                    
          _____                   _______                   _____             _____                    _____                    _____                    _____                    _____                    _____          
         /\    \                 /::\    \                 /\    \           /\    \                  /\    \                  /\    \                  /\    \                  /\    \                  /\    \         
        /::\    \               /::::\    \               /::\____\         /::\    \                /::\    \                /::\    \                /::\    \                /::\    \                /::\    \        
       /::::\    \             /::::::\    \             /::::|   |         \:::\    \              /::::\    \              /::::\    \              /::::\    \              /::::\    \              /::::\    \       
      /::::::\    \           /::::::::\    \           /:::::|   |          \:::\    \            /::::::\    \            /::::::\    \            /::::::\    \            /::::::\    \            /::::::\    \      
     /:::/\:::\    \         /:::/~~\:::\    \         /::::::|   |           \:::\    \          /:::/\:::\    \          /:::/\:::\    \          /:::/\:::\    \          /:::/\:::\    \          /:::/\:::\    \     
    /:::/  \:::\    \       /:::/    \:::\    \       /:::/|::|   |            \:::\    \        /:::/__\:::\    \        /:::/__\:::\    \        /:::/__\:::\    \        /:::/__\:::\    \        /:::/__\:::\    \    
   /:::/    \:::\    \     /:::/    / \:::\    \     /:::/ |::|   |            /::::\    \      /::::\   \:::\    \      /::::\   \:::\    \      /::::\   \:::\    \      /::::\   \:::\    \       \:::\   \:::\    \   
  /:::/    / \:::\    \   /:::/____/   \:::\____\   /:::/  |::|   | _____     /::::::\    \    /::::::\   \:::\    \    /::::::\   \:::\    \    /::::::\   \:::\    \    /::::::\   \:::\    \    ___\:::\   \:::\    \  
 /:::/    /   \:::\    \ |:::|    |     |:::|    | /:::/   |::|   |/\    \   /:::/\:::\    \  /:::/\:::\   \:::\____\  /:::/\:::\   \:::\    \  /:::/\:::\   \:::\____\  /:::/\:::\   \:::\    \  /\   \:::\   \:::\    \ 
/:::/____/     \:::\____\|:::|____|     |:::|    |/:: /    |::|   /::\____\ /:::/  \:::\____\/:::/  \:::\   \:::|    |/:::/__\:::\   \:::\____\/:::/  \:::\   \:::|    |/:::/  \:::\   \:::\____\/::\   \:::\   \:::\____\
\:::\    \      \::/    / \:::\    \   /:::/    / \::/    /|::|  /:::/    //:::/    \::/    /\::/   |::::\  /:::|____|\:::\   \:::\   \::/    /\::/   |::::\  /:::|____|\::/    \:::\  /:::/    /\:::\   \:::\   \::/    /
 \:::\    \      \/____/   \:::\    \ /:::/    /   \/____/ |::| /:::/    //:::/    / \/____/  \/____|:::::\/:::/    /  \:::\   \:::\   \/____/  \/____|:::::\/:::/    /  \/____/ \:::\/:::/    /  \:::\   \:::\   \/____/ 
  \:::\    \                \:::\    /:::/    /            |::|/:::/    //:::/    /                 |:::::::::/    /    \:::\   \:::\    \            |:::::::::/    /            \::::::/    /    \:::\   \:::\    \     
   \:::\    \                \:::\__/:::/    /             |::::::/    //:::/    /                  |::|\::::/    /      \:::\   \:::\____\           |::|\::::/    /              \::::/    /      \:::\   \:::\____\    
    \:::\    \                \::::::::/    /              |:::::/    / \::/    /                   |::| \::/____/        \:::\   \::/    /           |::| \::/____/               /:::/    /        \:::\  /:::/    /    
     \:::\    \                \::::::/    /               |::::/    /   \/____/                    |::|  ~|               \:::\   \/____/            |::|  ~|                    /:::/    /          \:::\/:::/    /     
      \:::\    \                \::::/    /                /:::/    /                               |::|   |                \:::\    \                |::|   |                   /:::/    /            \::::::/    /      
       \:::\____\                \::/____/                /:::/    /                                \::|   |                 \:::\____\               \::|   |                  /:::/    /              \::::/    /       
        \::/    /                 ~~                      \::/    /                                  \:|   |                  \::/    /                \:|   |                  \::/    /                \::/    /        
         \/____/                                           \/____/                                    \|___|                   \/____/                  \|___|                   \/____/                  \/____/         

View-source forever!

So you're probably wondering how I pulled this thing together.

I wanted to create something a little like http://www.superfreedraw.com, but with 3d in the mix somehow.

I used technologies from:

Mr. Doob Threejs - https://github.com/mrdoob/three.js
Jerome Etienne's excellent threejs boilerplate - https://github.com/jeromeetienne/threejsboilerplate
Tweener by  Ivan Kuckir - http://tweener.ivank.net/

And of course some pretty standard PHP and Javascript. It still doesn't work with tablets
(and may never get there with the tablet vendors draggin' their feet on webgl)

<strikethrough>(It doesn't work with firefox either for that matter, but it's a problem I'll have to fix.)</strikethrough> -- FIXED!

Cheers. More secrets soon.
Federico Contreras,
Montreal, Canada
February 18, 2013
-->

<!doctype html>
<html>
<head>
		
	<title>Federico Contreras</title>
		
	<meta charset="utf-8">
		
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    
	<!-- 
	<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400, 700,900, 100italic, 300italic,400italic, 900italic' rel='stylesheet' type='text/css'> 
	-->
	
	<!--
	css/lato/Lato-Light.ttf
	css/lato/Lato-LightItalic.ttf
	css/lato/Lato-Regular.ttf
	css/lato/Lato-Italic.ttf
	css/lato/Lato-Black.ttf
	css/lato/Lato-BlackItalic.ttf
	css/lato/Lato-Bold.ttf
	css/lato/Lato-BoldItalic.ttf
	css/lato/Lato-Hairline.ttf
	css/lato/Lato-HairlineItalic.ttf
	-->

	<style>
		
	@font-face { font-family: "Lato Light"; src: url(css/lato/Lato-Light.ttf); }
	
  /*
  
  @font-face { font-family: "Lato Light Italic"; src: url(css/lato/Lato-LightItalic.ttf); }
	@font-face { font-family: "Lato Regular"; src: url(css/lato/Lato-Regular.ttf); }
	@font-face { font-family: "Lato Regular Italic"; src: url(css/lato/Lato-Italic.ttf); }
	@font-face { font-family: "Lato Black"; src: url(css/lato/Lato-Black.ttf); }
	@font-face { font-family: "Lato Black Italic"; src: url(css/lato/Lato-BlackItalic.ttf); }
	@font-face { font-family: "Lato Bold"; src: url(css/lato/Lato-Bold.ttf); }
	@font-face { font-family: "Lato Bold Italic"; src: url(css/lato/Lato-BoldItalic.ttf); }
	@font-face { font-family: "Lato Hairline"; src: url(css/lato/Lato-Hairline.ttf); }
	@font-face { font-family: "Lato Hairline Italic"; src: url(css/lato/Lato-HairlineItalic.ttf); }
	
  */
  
	body {
	  padding:0px;
	  margin:0px;
	  font-family: "Lato Light", Arial, "Helvetica Neue", Helvetica, sans-serif;
	  color: #dddddd;
	  background-color:#000000;
	}
	
	h1 {
	  color:#dddddd;
	  font-weight:100;
	  font-size:2.2em;
	}
	
	#overlay {
	  font-family: "Lato Light";
	  position: absolute;
	  top:20px;
	  left:30px;
	  width:33%;
		max-width:300px;
	}
	
  #overlay a {
	  color:#ffffff;
    text-decoration:none;
	}
	
  #info {
	  color:#cccccc;
	}
	
	#drawingpad {
		background-color:#000000; 
		width:256px; 
		border:1px solid #cccccc; 
		padding:20px;
    z-index:100;
	}
	
  #drawingsurface {
    position:relative;
    z-index:101;
		cursor:crosshair;
  }
 
  .buttonDevice{
		padding:8px; 
    border:1px solid #cccccc; 
    /* width:300px; */
    border-radius:5px; 
    text-align:center; 
    cursor:pointer;
  }
    #deploybtn {
		z-index:1000;
	}
	#deploybtn {
		z-index:1001;
	}
	</style>
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/t.js"></script>
		  <script>
  var musicArray = [
  "http://content.eveonline.com/music/www/Amarr002.mp3",
  "http://content.eveonline.com/music/www/Ambient003.mp3",
  "http://content.eveonline.com/music/www/Ambient008.mp3",
  "http://content.eveonline.com/music/www/Ambient009.mp3",
  "http://content.eveonline.com/music/www/Ambient011.mp3",
  "http://content.eveonline.com/music/www/Ambient012.mp3",
  "http://content.eveonline.com/music/www/Ambient016.mp3"
  ];
  
  
  
  </script>
</head>

<body>

  <!-- three.js container -->
	<div id="container"></div>
	
	<!-- info on screen display -->
	<div id="overlay">

	<div id="controlArea">
	
	<h1>Hello, my name is <a href="mailto:fc@20mm.net">Federico Contreras</a>.<br/>I like to make things.</h1>
  
		<p>If you have a project where you need a programmer / designer with a bit of a schizophrenic skillset, <a href="mailto:fc@20mm.net" style="text-decoration:underline;">send me an email</a>, maybe we can make some magics together!</p>
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=346440498780412";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
	</script>
	<div class="fb-like" data-href="http://federicocontreras.com" data-send="true" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-29575231-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>
	<small>CCBot/2.0</small>
	</div>
	  </div>
</body>
</html>