badboy/choser.html Secret

## choser.html
<!doctype html>
<html>
<head>
  <title>Sandbox</title>
  <link rel=stylesheet href="http://fonts.googleapis.com/css?family=Averia+Serif+Libre:300,400">
  <meta http-equiv=Content-Type content="text/html; charset=utf-8">
  <script src="drawing_code.js"></script>
  <style>
    body, html { height: 100%; width: auto; max-width: none; margin: 0; padding: 0; overflow: hidden; }
    #editor {
      padding-top: 40px;
      background: white;
      position: relative;
    }
    #controls, #save-load {
      font-size: 13px;
      padding: 5px 10px;
      position: absolute; top: 0px; height: 30px;
    }
    #controls {
      cursor: move;
      cursor: s-resize;
      cursor: row-resize;
      left: 0; right: 0; background: #eee;
      border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margin-top: -1px;
    }
    #controls * {
      cursor: default;
    }
    #save-load {
      z-index: 2; right: 0;
    }
    .CodeMirror-gutter {
      background: #eee; border-right: 1px solid #ddd;
    }
    .CodeMirror {
      font-size: 16px;
    }
    button, select {
      font-family: inherit;
      font-size: inherit;
    }
    iframe {
      border: none;
    }
    .hint {
      color: gray;
      border-right: 1px solid #ccc;
      padding-right: 10px;
      margin-right: 5px;
      box-shadow: 1px 0 white;
    }
  </style>
</head>

<body>
<div id=output></div>
<canvas id="mycanvas" width="1359" height="211"></canvas>

<script type='text/javascript'>
var width = 600, height = 600;
var frameCount = 0;
var maxPerName = 12;
var namePos = 0;
var fontSize = 20;

// Wir brauchen noch eine Funktion mit der wir Text schreiben können
// aber auch die Textgröße festlegen können.
function textFont(x, y, string, font) {
  _ctx.save();
  _ctx.scale(1, -1);
  _ctx.font = font || "16px sans-serif";
  _ctx.fillText(string, x, -y);
  _ctx.restore();
}


// Die Namen der Kandidaten
var names = [
 "Alan",
 "Grace",
 "Richard",
 "Yukihiro ",
 "Claude",
 "Linus",
 "Sophi"
];

// Verwendete Farben
var colors = [
  "green", "red", "yellow", "purple"
]
// Wir brauchen einen zufälligen Startwert.
// |0 ist ein kleiner Javascript-Trick, um die Dezimalstellen abzuschneiden
var curColor = (Math.random() * colors.length)|0;

// Das ganze soll eine zufällige Zeit laufen
var breakAfter = (Math.random() * 3 * names.length) * 1000;

function drawing() {
  // Die Startzeit als UNIX-Timestamp, das ist wieder ein kleiner Javascript-Trick
  var start = (+new Date());

  // Alle 50ms zeichnen wir neu
  var int = setInterval(frame, 50);
  function frame() {
    clear();
    // Wieviel Zeit ist schon vergangen?
    var now = (+new Date());

    // Ein Name wird für eine bestimmte Zeit angezeigt, danach der nächste gewählt
    if (frameCount == maxPerName) {
      namePos = (namePos+1) % names.length;
      fontSize = 16;
      frameCount = 0;
      curColor = (curColor+1)%colors.length;
    }

    frameCount++;
    fontSize += 4;

    // Wir setzen die Hintergrundfarbe und zeigen den Namen an
    document.getElementsByTagName("body")[0].style.backgroundColor = colors[curColor];
    textFont(-30-(fontSize/2), -(fontSize/2), names[namePos], fontSize+"px sans-serif");

    // Wenn die Zeit abgelaufen ist, zeigen wir den Gewinner
    if ((now-start) >= breakAfter) {
      // Zuerst leeren Bildschirm anzeigen
      clearInterval(int);
      clear();
      document.getElementsByTagName("body")[0].style.backgroundColor = "red";
      // Dann nach kurzer Pause einen Text
      setTimeout(function() {
        color("black");
        fontSize = 100;
        textFont(-400, -(fontSize/2), "and the winner is …", fontSize+"px sans-serif");
        // Und nach einer erneuten Pause den Siegernamen
        setTimeout(function() {
          clear();
          fontSize = 200;
          document.getElementsByTagName("body")[0].style.backgroundColor = "green";
          var name = names[namePos];
          var xOffset = - ((name.length/2) * 50);
          textFont(xOffset-(fontSize/2), -(fontSize/2), name, fontSize+"px sans-serif");
        }, 1000);
      }, 500);
    }
  }
}
</script>
</body>
</html>

## drawing_code.js
var _canvas, _ctx;

window.onload = function() {
  setTimeout(function() {
    _canvas = document.getElementById("mycanvas");
    _ctx = _canvas.getContext("2d");
    clear();
    drawing();
  }, 20);
};

function color(col) {
  _ctx.strokeStyle = _ctx.fillStyle = col;
}

function lineWidth(n) {
  _ctx.lineWidth = n;
}

var _pushDepth = 0, _centerX, _centerY;

function clear() {
  for (var i = 0; i < _pushDepth; ++i)
    _ctx.restore();
  var w = document.body.clientWidth - 5, h = document.body.clientHeight - 5;
  _canvas.width = w;
  _canvas.height = h;
  _ctx.clearRect(0, 0, w, h);
  _ctx.translate(_centerX = Math.round(w / 2), _centerY = Math.round(h / 2));
  _ctx.scale(1, -1);
  _pushDepth = 2;
}

function box(x, y, w, h) {
  _ctx.fillRect(x, y - h, w, h);
}

function circle(x, y, r) {
  _ctx.beginPath();
  _ctx.arc(x, y, r, 0, 2 * Math.PI);
  _ctx.fill();
}

function line(x1, y1, x2, y2) {
  _ctx.beginPath();
  _ctx.moveTo(x1, y1);
  _ctx.lineTo(x2, y2);
  _ctx.stroke();
}

function path(spec) {
  _ctx.beginPath();
  var parsed = spec.split(/\s+/g);
  function arg() {
    if (i == parsed.length) throw new Error("Expected number, found end of command.");
    var val = Number(parsed[++i]);
    if (isNaN(val)) throw new Error("Expected number, found '" + parsed[i] + "'");
    return val;
  }
  try {
    for (var i = 0; i < parsed.length; ++i) {
      var cmd =  parsed[i];
      if (cmd == "c") {
        _ctx.closePath();
      } else if (cmd == "g") {
        _ctx.moveTo(arg(), arg());
      } else if (cmd == "l") {
        _ctx.lineTo(arg(), arg());
      } else if (cmd == "q") {
        var x = arg(), y = arg();
        _ctx.quadraticCurveTo(arg(), arg(), x, y);
      } else {
        throw new Error("Unrecognized path command: '" + cmd + "'");
      }
    }
    _ctx.stroke();
  } catch(e) {
    console.log("Bad path: " + e.message);
  }
}

function text(x, y, string) {
  _ctx.save();
  _ctx.scale(1, -1);
  _ctx.font = "16px sans-serif";
  _ctx.fillText(string, x, -y);
  _ctx.restore();
}

function textFont(x, y, string, font) {
  _ctx.save();
  _ctx.scale(1, -1);
  _ctx.font = font || "16px sans-serif";
  _ctx.fillText(string, x, -y);
  _ctx.restore();
}

function rotate(angle) {
  _ctx.save();
  ++_pushDepth;
  _ctx.rotate(angle * Math.PI / 180);
}

function moveTo(x, y) {
  _ctx.save();
  ++_pushDepth;
  _ctx.translate(x, y);
}

function scale(factor) {
  _ctx.save();
  ++_pushDepth;
  _ctx.scale(factor, factor);
}

function goBack() {
  _ctx.restore();
  --_pushDepth;
}

function fill(color) {
  _ctx.fill();
}
	<!doctype html>
	<html>
	<head>
	<title>Sandbox</title>
	<link rel=stylesheet href="http://fonts.googleapis.com/css?family=Averia+Serif+Libre:300,400">
	<meta http-equiv=Content-Type content="text/html; charset=utf-8">
	<script src="drawing_code.js"></script>
	<style>
	body, html { height: 100%; width: auto; max-width: none; margin: 0; padding: 0; overflow: hidden; }
	#editor {
	padding-top: 40px;
	background: white;
	position: relative;
	}
	#controls, #save-load {
	font-size: 13px;
	padding: 5px 10px;
	position: absolute; top: 0px; height: 30px;
	}
	#controls {
	cursor: move;
	cursor: s-resize;
	cursor: row-resize;
	left: 0; right: 0; background: #eee;
	border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margin-top: -1px;
	}
	#controls * {
	cursor: default;
	}
	#save-load {
	z-index: 2; right: 0;
	}
	.CodeMirror-gutter {
	background: #eee; border-right: 1px solid #ddd;
	}
	.CodeMirror {
	font-size: 16px;
	}
	button, select {
	font-family: inherit;
	font-size: inherit;
	}
	iframe {
	border: none;
	}
	.hint {
	color: gray;
	border-right: 1px solid #ccc;
	padding-right: 10px;
	margin-right: 5px;
	box-shadow: 1px 0 white;
	}
	</style>
	</head>

	<body>
	<div id=output></div>
	<canvas id="mycanvas" width="1359" height="211"></canvas>

	<script type='text/javascript'>
	var width = 600, height = 600;
	var frameCount = 0;
	var maxPerName = 12;
	var namePos = 0;
	var fontSize = 20;

	// Wir brauchen noch eine Funktion mit der wir Text schreiben können
	// aber auch die Textgröße festlegen können.
	function textFont(x, y, string, font) {
	_ctx.save();
	_ctx.scale(1, -1);
	_ctx.font = font \|\| "16px sans-serif";
	_ctx.fillText(string, x, -y);
	_ctx.restore();
	}


	// Die Namen der Kandidaten
	var names = [
	"Alan",
	"Grace",
	"Richard",
	"Yukihiro ",
	"Claude",
	"Linus",
	"Sophi"
	];

	// Verwendete Farben
	var colors = [
	"green", "red", "yellow", "purple"
	]
	// Wir brauchen einen zufälligen Startwert.
	// \|0 ist ein kleiner Javascript-Trick, um die Dezimalstellen abzuschneiden
	var curColor = (Math.random() * colors.length)\|0;

	// Das ganze soll eine zufällige Zeit laufen
	var breakAfter = (Math.random() * 3 * names.length) * 1000;

	function drawing() {
	// Die Startzeit als UNIX-Timestamp, das ist wieder ein kleiner Javascript-Trick
	var start = (+new Date());

	// Alle 50ms zeichnen wir neu
	var int = setInterval(frame, 50);
	function frame() {
	clear();
	// Wieviel Zeit ist schon vergangen?
	var now = (+new Date());

	// Ein Name wird für eine bestimmte Zeit angezeigt, danach der nächste gewählt
	if (frameCount == maxPerName) {
	namePos = (namePos+1) % names.length;
	fontSize = 16;
	frameCount = 0;
	curColor = (curColor+1)%colors.length;
	}

	frameCount++;
	fontSize += 4;

	// Wir setzen die Hintergrundfarbe und zeigen den Namen an
	document.getElementsByTagName("body")[0].style.backgroundColor = colors[curColor];
	textFont(-30-(fontSize/2), -(fontSize/2), names[namePos], fontSize+"px sans-serif");

	// Wenn die Zeit abgelaufen ist, zeigen wir den Gewinner
	if ((now-start) >= breakAfter) {
	// Zuerst leeren Bildschirm anzeigen
	clearInterval(int);
	clear();
	document.getElementsByTagName("body")[0].style.backgroundColor = "red";
	// Dann nach kurzer Pause einen Text
	setTimeout(function() {
	color("black");
	fontSize = 100;
	textFont(-400, -(fontSize/2), "and the winner is …", fontSize+"px sans-serif");
	// Und nach einer erneuten Pause den Siegernamen
	setTimeout(function() {
	clear();
	fontSize = 200;
	document.getElementsByTagName("body")[0].style.backgroundColor = "green";
	var name = names[namePos];
	var xOffset = - ((name.length/2) * 50);
	textFont(xOffset-(fontSize/2), -(fontSize/2), name, fontSize+"px sans-serif");
	}, 1000);
	}, 500);
	}
	}
	}
	</script>
	</body>
	</html>
	var _canvas, _ctx;

	window.onload = function() {
	setTimeout(function() {
	_canvas = document.getElementById("mycanvas");
	_ctx = _canvas.getContext("2d");
	clear();
	drawing();
	}, 20);
	};

	function color(col) {
	_ctx.strokeStyle = _ctx.fillStyle = col;
	}

	function lineWidth(n) {
	_ctx.lineWidth = n;
	}

	var _pushDepth = 0, _centerX, _centerY;

	function clear() {
	for (var i = 0; i < _pushDepth; ++i)
	_ctx.restore();
	var w = document.body.clientWidth - 5, h = document.body.clientHeight - 5;
	_canvas.width = w;
	_canvas.height = h;
	_ctx.clearRect(0, 0, w, h);
	_ctx.translate(_centerX = Math.round(w / 2), _centerY = Math.round(h / 2));
	_ctx.scale(1, -1);
	_pushDepth = 2;
	}

	function box(x, y, w, h) {
	_ctx.fillRect(x, y - h, w, h);
	}

	function circle(x, y, r) {
	_ctx.beginPath();
	_ctx.arc(x, y, r, 0, 2 * Math.PI);
	_ctx.fill();
	}

	function line(x1, y1, x2, y2) {
	_ctx.beginPath();
	_ctx.moveTo(x1, y1);
	_ctx.lineTo(x2, y2);
	_ctx.stroke();
	}

	function path(spec) {
	_ctx.beginPath();
	var parsed = spec.split(/\s+/g);
	function arg() {
	if (i == parsed.length) throw new Error("Expected number, found end of command.");
	var val = Number(parsed[++i]);
	if (isNaN(val)) throw new Error("Expected number, found '" + parsed[i] + "'");
	return val;
	}
	try {
	for (var i = 0; i < parsed.length; ++i) {
	var cmd = parsed[i];
	if (cmd == "c") {
	_ctx.closePath();
	} else if (cmd == "g") {
	_ctx.moveTo(arg(), arg());
	} else if (cmd == "l") {
	_ctx.lineTo(arg(), arg());
	} else if (cmd == "q") {
	var x = arg(), y = arg();
	_ctx.quadraticCurveTo(arg(), arg(), x, y);
	} else {
	throw new Error("Unrecognized path command: '" + cmd + "'");
	}
	}
	_ctx.stroke();
	} catch(e) {
	console.log("Bad path: " + e.message);
	}
	}

	function text(x, y, string) {
	_ctx.save();
	_ctx.scale(1, -1);
	_ctx.font = "16px sans-serif";
	_ctx.fillText(string, x, -y);
	_ctx.restore();
	}

	function textFont(x, y, string, font) {
	_ctx.save();
	_ctx.scale(1, -1);
	_ctx.font = font \|\| "16px sans-serif";
	_ctx.fillText(string, x, -y);
	_ctx.restore();
	}

	function rotate(angle) {
	_ctx.save();
	++_pushDepth;
	_ctx.rotate(angle * Math.PI / 180);
	}

	function moveTo(x, y) {
	_ctx.save();
	++_pushDepth;
	_ctx.translate(x, y);
	}

	function scale(factor) {
	_ctx.save();
	++_pushDepth;
	_ctx.scale(factor, factor);
	}

	function goBack() {
	_ctx.restore();
	--_pushDepth;
	}

	function fill(color) {
	_ctx.fill();
	}