russellbeattie/dwitterish.html

## dwitterish.html
<!DOCTYPE html>
<html>
<head>
  <title>Dwitterish</title>
  <style>
    body{
      background-color: #fff;
      font-family: sans-serif;
    }
    .container{
      text-align: center;
      margin: auto;
    }
    .display{
      display: inline-block;
      border: 1px solid #000;
      padding: 1px;
      width: 962px;
      height: 542px;
      overflow: hidden;
    }
    .c{
      transform: scale(.5);
      transform-origin: top left;
    }
    .code-input{
      margin-top: 20px;
      border: 1px solid #ccc;
      width: 942px;
      height: 100px;
      font-size: 16pt;
      padding: 10px;
    }
    .info{
      display: inline-block;
      width: 962px;
    }
    .counter{
      float: right;
    }
    .share {
      float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Dwitterish</h1>
    <div class="display">
      <canvas class="c" width="1920" height="1080"></canvas>
    </div>
    <br>
    <textarea class="code-input" maxlength=140></textarea>
    <div class="info">
      <a href="" class="share">Share</a>
      <input type="checkbox" class="use-eval"> Use eval()?
      <span class="counter"></span>
    </div>
  </div>
  <script class="u"></script>
  <script>
  var codeInput = document.querySelector('.code-input');
  var useEval = document.querySelector('.use-eval');
  var counter = document.querySelector('.counter');
  var share = document.querySelector('.share');
  var c = document.querySelector('.c');
  var x = c.getContext('2d');
  var S = Math.sin;
  var C = Math.cos;
  var T = Math.tan;
  var time = 0;
  var frame = 0;

  var u = function(t){};

  function R(r,g,b,a) {
    a = a === undefined ? 1 : a;
    return 'rgba(' + (r|0) + ',' + (g|0) + ',' + (b|0) + ',' + a +')';
  }

  function loop() {
    requestAnimationFrame(loop);
    time = frame/60;
    if(time * 60 | 0 == frame - 1){
      time += 0.000001;
    }
    frame++;
    try{
      u(time);
    } catch(err){
    }
  }

  function reset(){
    x.clearRect(0, 0, 1920, 1080);
    time = 0;
    frame = 0;
  }

  function updateShare(scriptText){
    var href = window.location.href;
    var base = href;
    if(~href.indexOf('#')){
      base = href.substr(0, href.indexOf('#'));
    }
    share.setAttribute('href', base + '#' + encodeURIComponent(scriptText));
  }

  function updateScriptEval(scriptText){

    reset();

    counter.innerText = scriptText.length;

    localStorage.setItem('scriptText', scriptText);

    updateShare();

    try{
      eval('u = function(t){' + scriptText + '\n};');
    } catch(err){
    }

    updateShare(scriptText);

  }

  function updateScriptTag(scriptText){

    reset();

    var newScript = document.createElement('script');
    newScript.setAttribute('class','u');
    newScript.textContent = 'try{u = function(t){\n' + scriptText + '\n};} catch(err){}';

    var oldScript = document.querySelector('.u');

    document.body.removeChild(oldScript);
    document.body.appendChild(newScript);

    counter.innerText = scriptText.length;

    localStorage.setItem('scriptText', scriptText);

    updateShare(scriptText);

  }

  function updateScript(scriptText){
    if(useEval.checked){
      updateScriptEval(scriptText);
    } else {
      updateScriptTag(scriptText);
    }
  }

  useEval.addEventListener('change', function(e){
    updateScript(codeInput.value);
  });

  codeInput.addEventListener('input', function(e){
    updateScript(codeInput.value);
  });

  var scriptText = '';
  var href = window.location.href;
  if(~href.indexOf('#')){
    var scriptParam = href.substr(href.indexOf('#') + 1);
    scriptText = decodeURIComponent(scriptParam);
    localStorage.setItem('scriptText', scriptText);
    window.location.href = href.substr(0, href.indexOf('#'));
  } else {
    scriptText = localStorage.getItem('scriptText');
  }

  if(scriptText){
    codeInput.value = scriptText;
    updateScript(scriptText);
  }

  window.requestAnimationFrame(loop);

  </script>


</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dwitterish</title>
	<style>
	body{
	background-color: #fff;
	font-family: sans-serif;
	}
	.container{
	text-align: center;
	margin: auto;
	}
	.display{
	display: inline-block;
	border: 1px solid #000;
	padding: 1px;
	width: 962px;
	height: 542px;
	overflow: hidden;
	}
	.c{
	transform: scale(.5);
	transform-origin: top left;
	}
	.code-input{
	margin-top: 20px;
	border: 1px solid #ccc;
	width: 942px;
	height: 100px;
	font-size: 16pt;
	padding: 10px;
	}
	.info{
	display: inline-block;
	width: 962px;
	}
	.counter{
	float: right;
	}
	.share {
	float: left;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>Dwitterish</h1>
	<div class="display">
	<canvas class="c" width="1920" height="1080"></canvas>
	</div>
	<br>
	<textarea class="code-input" maxlength=140></textarea>
	<div class="info">
	<a href="" class="share">Share</a>
	<input type="checkbox" class="use-eval"> Use eval()?
	<span class="counter"></span>
	</div>
	</div>
	<script class="u"></script>
	<script>
	var codeInput = document.querySelector('.code-input');
	var useEval = document.querySelector('.use-eval');
	var counter = document.querySelector('.counter');
	var share = document.querySelector('.share');
	var c = document.querySelector('.c');
	var x = c.getContext('2d');
	var S = Math.sin;
	var C = Math.cos;
	var T = Math.tan;
	var time = 0;
	var frame = 0;

	var u = function(t){};

	function R(r,g,b,a) {
	a = a === undefined ? 1 : a;
	return 'rgba(' + (r\|0) + ',' + (g\|0) + ',' + (b\|0) + ',' + a +')';
	}

	function loop() {
	requestAnimationFrame(loop);
	time = frame/60;
	if(time * 60 \| 0 == frame - 1){
	time += 0.000001;
	}
	frame++;
	try{
	u(time);
	} catch(err){
	}
	}

	function reset(){
	x.clearRect(0, 0, 1920, 1080);
	time = 0;
	frame = 0;
	}

	function updateShare(scriptText){
	var href = window.location.href;
	var base = href;
	if(~href.indexOf('#')){
	base = href.substr(0, href.indexOf('#'));
	}
	share.setAttribute('href', base + '#' + encodeURIComponent(scriptText));
	}

	function updateScriptEval(scriptText){

	reset();

	counter.innerText = scriptText.length;

	localStorage.setItem('scriptText', scriptText);

	updateShare();

	try{
	eval('u = function(t){' + scriptText + '\n};');
	} catch(err){
	}

	updateShare(scriptText);

	}

	function updateScriptTag(scriptText){

	reset();

	var newScript = document.createElement('script');
	newScript.setAttribute('class','u');
	newScript.textContent = 'try{u = function(t){\n' + scriptText + '\n};} catch(err){}';

	var oldScript = document.querySelector('.u');

	document.body.removeChild(oldScript);
	document.body.appendChild(newScript);

	counter.innerText = scriptText.length;

	localStorage.setItem('scriptText', scriptText);

	updateShare(scriptText);

	}

	function updateScript(scriptText){
	if(useEval.checked){
	updateScriptEval(scriptText);
	} else {
	updateScriptTag(scriptText);
	}
	}

	useEval.addEventListener('change', function(e){
	updateScript(codeInput.value);
	});

	codeInput.addEventListener('input', function(e){
	updateScript(codeInput.value);
	});

	var scriptText = '';
	var href = window.location.href;
	if(~href.indexOf('#')){
	var scriptParam = href.substr(href.indexOf('#') + 1);
	scriptText = decodeURIComponent(scriptParam);
	localStorage.setItem('scriptText', scriptText);
	window.location.href = href.substr(0, href.indexOf('#'));
	} else {
	scriptText = localStorage.getItem('scriptText');
	}

	if(scriptText){
	codeInput.value = scriptText;
	updateScript(scriptText);
	}

	window.requestAnimationFrame(loop);

	</script>


	</body>

	</html>