Counting, then

LICENSE.txt

@@ -0,0 +1,116 @@
+CC0 1.0 Universal
+
+Statement of Purpose
+
+The laws of most jurisdictions throughout the world automatically confer
+exclusive Copyright and Related Rights (defined below) upon the creator and
+subsequent owner(s) (each and all, an "owner") of an original work of
+authorship and/or a database (each, a "Work").
+
+Certain owners wish to permanently relinquish those rights to a Work for the
+purpose of contributing to a commons of creative, cultural and scientific
+works ("Commons") that the public can reliably and without fear of later
+claims of infringement build upon, modify, incorporate in other works, reuse
+and redistribute as freely as possible in any form whatsoever and for any
+purposes, including without limitation commercial purposes. These owners may
+contribute to the Commons to promote the ideal of a free culture and the
+further production of creative, cultural and scientific works, or to gain
+reputation or greater distribution for their Work in part through the use and
+efforts of others.
+
+For these and/or other purposes and motivations, and without any expectation
+of additional consideration or compensation, the person associating CC0 with a
+Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
+and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
+and publicly distribute the Work under its terms, with knowledge of his or her
+Copyright and Related Rights in the Work and the meaning and intended legal
+effect of CC0 on those rights.
+
+1. Copyright and Related Rights. A Work made available under CC0 may be
+protected by copyright and related or neighboring rights ("Copyright and
+Related Rights"). Copyright and Related Rights include, but are not limited
+to, the following:
+
+  i. the right to reproduce, adapt, distribute, perform, display, communicate,
+  and translate a Work;
+
+  ii. moral rights retained by the original author(s) and/or performer(s);
+
+  iii. publicity and privacy rights pertaining to a person's image or likeness
+  depicted in a Work;
+
+  iv. rights protecting against unfair competition in regards to a Work,
+  subject to the limitations in paragraph 4(a), below;
+
+  v. rights protecting the extraction, dissemination, use and reuse of data in
+  a Work;
+
+  vi. database rights (such as those arising under Directive 96/9/EC of the
+  European Parliament and of the Council of 11 March 1996 on the legal
+  protection of databases, and under any national implementation thereof,
+  including any amended or successor version of such directive); and
+
+  vii. other similar, equivalent or corresponding rights throughout the world
+  based on applicable law or treaty, and any national implementations thereof.
+
+2. Waiver. To the greatest extent permitted by, but not in contravention of,
+applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
+unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
+and Related Rights and associated claims and causes of action, whether now
+known or unknown (including existing as well as future claims and causes of
+action), in the Work (i) in all territories worldwide, (ii) for the maximum
+duration provided by applicable law or treaty (including future time
+extensions), (iii) in any current or future medium and for any number of
+copies, and (iv) for any purpose whatsoever, including without limitation
+commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
+the Waiver for the benefit of each member of the public at large and to the
+detriment of Affirmer's heirs and successors, fully intending that such Waiver
+shall not be subject to revocation, rescission, cancellation, termination, or
+any other legal or equitable action to disrupt the quiet enjoyment of the Work
+by the public as contemplated by Affirmer's express Statement of Purpose.
+
+3. Public License Fallback. Should any part of the Waiver for any reason be
+judged legally invalid or ineffective under applicable law, then the Waiver
+shall be preserved to the maximum extent permitted taking into account
+Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
+is so judged Affirmer hereby grants to each affected person a royalty-free,
+non transferable, non sublicensable, non exclusive, irrevocable and
+unconditional license to exercise Affirmer's Copyright and Related Rights in
+the Work (i) in all territories worldwide, (ii) for the maximum duration
+provided by applicable law or treaty (including future time extensions), (iii)
+in any current or future medium and for any number of copies, and (iv) for any
+purpose whatsoever, including without limitation commercial, advertising or
+promotional purposes (the "License"). The License shall be deemed effective as
+of the date CC0 was applied by Affirmer to the Work. Should any part of the
+License for any reason be judged legally invalid or ineffective under
+applicable law, such partial invalidity or ineffectiveness shall not
+invalidate the remainder of the License, and in such case Affirmer hereby
+affirms that he or she will not (i) exercise any of his or her remaining
+Copyright and Related Rights in the Work or (ii) assert any associated claims
+and causes of action with respect to the Work, in either case contrary to
+Affirmer's express Statement of Purpose.
+
+4. Limitations and Disclaimers.
+
+  a. No trademark or patent rights held by Affirmer are waived, abandoned,
+  surrendered, licensed or otherwise affected by this document.
+
+  b. Affirmer offers the Work as-is and makes no representations or warranties
+  of any kind concerning the Work, express, implied, statutory or otherwise,
+  including without limitation warranties of title, merchantability, fitness
+  for a particular purpose, non infringement, or the absence of latent or
+  other defects, accuracy, or the present or absence of errors, whether or not
+  discoverable, all to the greatest extent permissible under applicable law.
+
+  c. Affirmer disclaims responsibility for clearing rights of other persons
+  that may apply to the Work or any use thereof, including without limitation
+  any person's Copyright and Related Rights in the Work. Further, Affirmer
+  disclaims responsibility for obtaining any necessary consents, permissions
+  or other rights required for any use of the Work.
+
+  d. Affirmer understands and acknowledges that Creative Commons is not a
+  party to this document and has no duty or obligation with respect to this
+  CC0 or use of the Work.
+
+For more information, please see
+<http://creativecommons.org/publicdomain/zero/1.0/>

README.md

@@ -1,6 +1,6 @@
 ![](http://i.imgur.com/NcsRW1q.png)
 
-**[PLAY IT HERE](http://ncase.me/polygons)**
+**[PLAY IT HERE (http://ncase.me/polygons)](http://ncase.me/polygons)**
 
 ---
 
@@ -15,4 +15,4 @@ We are [Vi Hart](http://vihart.com/) and [Nicky Case](http://ncase.me/).
 Show us how you're using and remixing Parable of the Polygons!    
 Tweet us at
 [@vihartvihart](https://twitter.com/vihartvihart) and
-[@ncasenmare](https://twitter.com/ncasenmare).
+[@ncasenmare](https://twitter.com/ncasenmare).

css/index.css

@@ -21,6 +21,9 @@ a{
 a:hover{
 	color: #ddd;
 }
+b, strong{
+	font-weight: bold;
+}
 
 #intro_container, #outro_container{
 	width:100%; height:550px;
@@ -108,11 +111,11 @@ span[cartoon]:hover{
 
 }
 #cartoon_arrow{
-	
+
 	display: block;
 
-	width: 0; 
-	height: 0; 
+	width: 0;
+	height: 0;
 	border-left: 10px solid transparent;
 	border-right: 10px solid transparent;
 	border-bottom: 20px solid #fff;
@@ -123,11 +126,11 @@ span[cartoon]:hover{
 
 }
 #cartoon_arrow[flipped=true]{
-	
+
 	display: block;
 
-	width: 0; 
-	height: 0; 
+	width: 0;
+	height: 0;
 	border-left: 10px solid transparent;
 	border-right: 10px solid transparent;
 	border-bottom: 20px solid #fff;

index.html

@@ -351,9 +351,6 @@
 					<a target="_blank" href="http://codeliberation.org/">Code Liberation</a>
 					- free workshops to help women make videogames
 					<br>
-					<a target="_blank" href="http://adainitiative.org/">Ada Initiative</a>
-					- supports women in open source &amp; open culture
-					<br>
 					<a target="_blank" href="http://www.patreon.com/ncase">Nicky's Patreon</a>
 					- makes public domain playables (such as this one!)
 
@@ -395,12 +392,18 @@
 					<a target="_blank" href="http://ncase.me/polygons-pt-br">Portuguese (Brazilian)</a>,
 					<a target="_blank" href="http://ncase.me/polygons-ja">Japanese</a>,
 					<a target="_blank" href="http://ncase.me/polygons-zh">Chinese (Simplified)</a>,
+					<a target="_blank" href="https://audreyt.github.io/polygons/">Chinese (Traditional)</a>,
 					<a target="_blank" href="http://booschie.github.io/polygons-pl">Polish</a>,
 					<a target="_blank" href="http://ncase.me/polygons-it">Italian</a>,
 					<a target="_blank" href="http://ncase.me/polygons-hu">Hungarian</a>,
 					<a target="_blank" href="http://ncase.me/polygons-nl">Dutch</a>,
 					<a target="_parent" href="http://ncase.me/polygons-hi">Hindi</a>,
-					<a target="_parent" href="http://ncase.me/polygons-cs">Czech</a>
+					<a target="_parent" href="http://www.bajkaotvarech.cz/">Czech</a>,
+					<a target="_parent" href="https://unkaktus.art/polygons/">Russian</a>,
+					<a target="_parent" href="//www.aularon.com/playables/polygons-ar/">Arabic</a>,
+					<a target="_parent" href="https://hamed.github.io/polygons/">Persian</a>,
+					<a target="_parent" href="https://zlira.github.io/polygons/">Ukrainian</a>,
+					<a target="_parent" href="https://vehpus.github.io/polygons/">Hebrew</a>
 
 					<br><br>
 
@@ -427,4 +430,4 @@
 <script src="js/Mouse.js"></script>
 <script src="js/intro.js"></script>
 
-</html>
+</html>

play/intro/intro.html

@@ -52,22 +52,28 @@
 				<a target="_parent" href="http://ncase.me/polygons-ja">日本語</a>
 				|
 				<a target="_parent" href="http://ncase.me/polygons-zh">中文</a>
-				<br>
-				<a target="_parent" href="http://booschie.github.io/polygons-pl">polski</a>
 				|
 				<a target="_parent" href="http://ncase.me/polygons-it">italiano</a>
-				|
+				<br>
 				<a target="_parent" href="http://ncase.me/polygons-hu">magyar</a>
 				|
 				<a target="_parent" href="http://ncase.me/polygons-nl">nederlands</a>
 				|
 				<a target="_parent" href="http://ncase.me/polygons-hi">हिन्दी</a>
 				|
-				<a target="_parent" href="http://ncase.me/polygons-cs">čeština</a>
+				<a target="_parent" href="http://www.bajkaotvarech.cz/">čeština</a>
+				|
+				<a target="_parent" href="https://nogoegst.github.io/polygons-ru/">Русский</a>
+				|
+				<a target="_parent" href="//www.aularon.com/playables/polygons-ar/">العربيّة</a>
+				|
+				<a target="_parent" href="http://zlira.github.io/polygons/">Українська</a>
+				|
+				<a target="_parent" href="https://vehpus.github.io/polygons/">עברית</a>
 			</div>
 		</div>
 	</div>
 </body>
 </html>
 <script src="MouseBlah.js"></script>
-<script src="intro.js"></script>
+<script src="intro.js"></script>

play/manual/manual2.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+	<title>Manual Simulation</title>
+	<link href="manual.css" rel="stylesheet" type="text/css">
+</head>
+<body>
+	<canvas id="canvas" width="550" height="550"></canvas>
+	<br><br>
+	<div id="reset" onclick="reset()"></div>
+</body>
+</html>
+
+<script src="../lib/Mouse.js"></script>
+<script src="manual.js"></script>
+<script>window.IS_IN_SIGHT = true;</script>

translator/fonts/ostrich-sans.css

@@ -0,0 +1,12 @@
+@font-face {
+	font-family: 'Ostrich Sans';
+	src: url('ostrich-sans-regular.woff');
+}
+@font-face {
+	font-family: 'Ostrich Sans Black';
+	src: url('ostrich-sans-black.woff');
+}
+@font-face {
+	font-family: 'Ostrich Sans Light';
+	src: url('ostrich-sans-light.woff');
+}

translator/lib/FileSaver.js

@@ -0,0 +1,244 @@
+/* FileSaver.js
+ * A saveAs() FileSaver implementation.
+ * 2014-12-17
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: X11/MIT
+ *   See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md
+ */
+
+/*global self */
+/*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
+
+var saveAs = saveAs
+  // IE 10+ (native saveAs)
+  || (typeof navigator !== "undefined" &&
+      navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
+  // Everyone else
+  || (function(view) {
+	"use strict";
+	// IE <10 is explicitly unsupported
+	if (typeof navigator !== "undefined" &&
+	    /MSIE [1-9]\./.test(navigator.userAgent)) {
+		return;
+	}
+	var
+		  doc = view.document
+		  // only get URL when necessary in case Blob.js hasn't overridden it yet
+		, get_URL = function() {
+			return view.URL || view.webkitURL || view;
+		}
+		, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
+		, can_use_save_link = "download" in save_link
+		, click = function(node) {
+			var event = doc.createEvent("MouseEvents");
+			event.initMouseEvent(
+				"click", true, false, view, 0, 0, 0, 0, 0
+				, false, false, false, false, 0, null
+			);
+			node.dispatchEvent(event);
+		}
+		, webkit_req_fs = view.webkitRequestFileSystem
+		, req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
+		, throw_outside = function(ex) {
+			(view.setImmediate || view.setTimeout)(function() {
+				throw ex;
+			}, 0);
+		}
+		, force_saveable_type = "application/octet-stream"
+		, fs_min_size = 0
+		// See https://code.google.com/p/chromium/issues/detail?id=375297#c7 and
+		// https://github.com/eligrey/FileSaver.js/commit/485930a#commitcomment-8768047
+		// for the reasoning behind the timeout and revocation flow
+		, arbitrary_revoke_timeout = 500 // in ms
+		, revoke = function(file) {
+			var revoker = function() {
+				if (typeof file === "string") { // file is an object URL
+					get_URL().revokeObjectURL(file);
+				} else { // file is a File
+					file.remove();
+				}
+			};
+			if (view.chrome) {
+				revoker();
+			} else {
+				setTimeout(revoker, arbitrary_revoke_timeout);
+			}
+		}
+		, dispatch = function(filesaver, event_types, event) {
+			event_types = [].concat(event_types);
+			var i = event_types.length;
+			while (i--) {
+				var listener = filesaver["on" + event_types[i]];
+				if (typeof listener === "function") {
+					try {
+						listener.call(filesaver, event || filesaver);
+					} catch (ex) {
+						throw_outside(ex);
+					}
+				}
+			}
+		}
+		, FileSaver = function(blob, name) {
+			// First try a.download, then web filesystem, then object URLs
+			var
+				  filesaver = this
+				, type = blob.type
+				, blob_changed = false
+				, object_url
+				, target_view
+				, dispatch_all = function() {
+					dispatch(filesaver, "writestart progress write writeend".split(" "));
+				}
+				// on any filesys errors revert to saving with object URLs
+				, fs_error = function() {
+					// don't create more object URLs than needed
+					if (blob_changed || !object_url) {
+						object_url = get_URL().createObjectURL(blob);
+					}
+					if (target_view) {
+						target_view.location.href = object_url;
+					} else {
+						var new_tab = view.open(object_url, "_blank");
+						if (new_tab == undefined && typeof safari !== "undefined") {
+							//Apple do not allow window.open, see http://bit.ly/1kZffRI
+							view.location.href = object_url
+						}
+					}
+					filesaver.readyState = filesaver.DONE;
+					dispatch_all();
+					revoke(object_url);
+				}
+				, abortable = function(func) {
+					return function() {
+						if (filesaver.readyState !== filesaver.DONE) {
+							return func.apply(this, arguments);
+						}
+					};
+				}
+				, create_if_not_found = {create: true, exclusive: false}
+				, slice
+			;
+			filesaver.readyState = filesaver.INIT;
+			if (!name) {
+				name = "download";
+			}
+			if (can_use_save_link) {
+				object_url = get_URL().createObjectURL(blob);
+				save_link.href = object_url;
+				save_link.download = name;
+				click(save_link);
+				filesaver.readyState = filesaver.DONE;
+				dispatch_all();
+				revoke(object_url);
+				return;
+			}
+			// Object and web filesystem URLs have a problem saving in Google Chrome when
+			// viewed in a tab, so I force save with application/octet-stream
+			// http://code.google.com/p/chromium/issues/detail?id=91158
+			// Update: Google errantly closed 91158, I submitted it again:
+			// https://code.google.com/p/chromium/issues/detail?id=389642
+			if (view.chrome && type && type !== force_saveable_type) {
+				slice = blob.slice || blob.webkitSlice;
+				blob = slice.call(blob, 0, blob.size, force_saveable_type);
+				blob_changed = true;
+			}
+			// Since I can't be sure that the guessed media type will trigger a download
+			// in WebKit, I append .download to the filename.
+			// https://bugs.webkit.org/show_bug.cgi?id=65440
+			if (webkit_req_fs && name !== "download") {
+				name += ".download";
+			}
+			if (type === force_saveable_type || webkit_req_fs) {
+				target_view = view;
+			}
+			if (!req_fs) {
+				fs_error();
+				return;
+			}
+			fs_min_size += blob.size;
+			req_fs(view.TEMPORARY, fs_min_size, abortable(function(fs) {
+				fs.root.getDirectory("saved", create_if_not_found, abortable(function(dir) {
+					var save = function() {
+						dir.getFile(name, create_if_not_found, abortable(function(file) {
+							file.createWriter(abortable(function(writer) {
+								writer.onwriteend = function(event) {
+									target_view.location.href = file.toURL();
+									filesaver.readyState = filesaver.DONE;
+									dispatch(filesaver, "writeend", event);
+									revoke(file);
+								};
+								writer.onerror = function() {
+									var error = writer.error;
+									if (error.code !== error.ABORT_ERR) {
+										fs_error();
+									}
+								};
+								"writestart progress write abort".split(" ").forEach(function(event) {
+									writer["on" + event] = filesaver["on" + event];
+								});
+								writer.write(blob);
+								filesaver.abort = function() {
+									writer.abort();
+									filesaver.readyState = filesaver.DONE;
+								};
+								filesaver.readyState = filesaver.WRITING;
+							}), fs_error);
+						}), fs_error);
+					};
+					dir.getFile(name, {create: false}, abortable(function(file) {
+						// delete file if it already exists
+						file.remove();
+						save();
+					}), abortable(function(ex) {
+						if (ex.code === ex.NOT_FOUND_ERR) {
+							save();
+						} else {
+							fs_error();
+						}
+					}));
+				}), fs_error);
+			}), fs_error);
+		}
+		, FS_proto = FileSaver.prototype
+		, saveAs = function(blob, name) {
+			return new FileSaver(blob, name);
+		}
+	;
+	FS_proto.abort = function() {
+		var filesaver = this;
+		filesaver.readyState = filesaver.DONE;
+		dispatch(filesaver, "abort");
+	};
+	FS_proto.readyState = FS_proto.INIT = 0;
+	FS_proto.WRITING = 1;
+	FS_proto.DONE = 2;
+
+	FS_proto.error =
+	FS_proto.onwritestart =
+	FS_proto.onprogress =
+	FS_proto.onwrite =
+	FS_proto.onabort =
+	FS_proto.onerror =
+	FS_proto.onwriteend =
+		null;
+
+	return saveAs;
+}(
+	   typeof self !== "undefined" && self
+	|| typeof window !== "undefined" && window
+	|| this.content
+));
+// `self` is undefined in Firefox for Android content script context
+// while `this` is nsIContentFrameMessageManager
+// with an attribute `content` that corresponds to the window
+
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = saveAs;
+} else if ((typeof define !== "undefined" && define !== null) && (define.amd != null)) {
+  define([], function() {
+    return saveAs;
+  });
+}

translator/lib/canvas-toBlob.js

@@ -0,0 +1,124 @@
+/* canvas-toBlob.js
+ * A canvas.toBlob() implementation.
+ * 2013-12-27
+ * 
+ * By Eli Grey, http://eligrey.com and Devin Samarin, https://github.com/eboyjr
+ * License: X11/MIT
+ *   See https://github.com/eligrey/canvas-toBlob.js/blob/master/LICENSE.md
+ */
+
+/*global self */
+/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
+  plusplus: true */
+
+/*! @source http://purl.eligrey.com/github/canvas-toBlob.js/blob/master/canvas-toBlob.js */
+
+(function(view) {
+"use strict";
+var
+	  Uint8Array = view.Uint8Array
+	, HTMLCanvasElement = view.HTMLCanvasElement
+	, canvas_proto = HTMLCanvasElement && HTMLCanvasElement.prototype
+	, is_base64_regex = /\s*;\s*base64\s*(?:;|$)/i
+	, to_data_url = "toDataURL"
+	, base64_ranks
+	, decode_base64 = function(base64) {
+		var
+			  len = base64.length
+			, buffer = new Uint8Array(len / 4 * 3 | 0)
+			, i = 0
+			, outptr = 0
+			, last = [0, 0]
+			, state = 0
+			, save = 0
+			, rank
+			, code
+			, undef
+		;
+		while (len--) {
+			code = base64.charCodeAt(i++);
+			rank = base64_ranks[code-43];
+			if (rank !== 255 && rank !== undef) {
+				last[1] = last[0];
+				last[0] = code;
+				save = (save << 6) | rank;
+				state++;
+				if (state === 4) {
+					buffer[outptr++] = save >>> 16;
+					if (last[1] !== 61 /* padding character */) {
+						buffer[outptr++] = save >>> 8;
+					}
+					if (last[0] !== 61 /* padding character */) {
+						buffer[outptr++] = save;
+					}
+					state = 0;
+				}
+			}
+		}
+		// 2/3 chance there's going to be some null bytes at the end, but that
+		// doesn't really matter with most image formats.
+		// If it somehow matters for you, truncate the buffer up outptr.
+		return buffer;
+	}
+;
+if (Uint8Array) {
+	base64_ranks = new Uint8Array([
+		  62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1
+		, -1, -1,  0, -1, -1, -1,  0,  1,  2,  3,  4,  5,  6,  7,  8,  9
+		, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25
+		, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35
+		, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51
+	]);
+}
+if (HTMLCanvasElement && !canvas_proto.toBlob) {
+	canvas_proto.toBlob = function(callback, type /*, ...args*/) {
+		  if (!type) {
+			type = "image/png";
+		} if (this.mozGetAsFile) {
+			callback(this.mozGetAsFile("canvas", type));
+			return;
+		} if (this.msToBlob && /^\s*image\/png\s*(?:$|;)/i.test(type)) {
+			callback(this.msToBlob());
+			return;
+		}
+
+		var
+			  args = Array.prototype.slice.call(arguments, 1)
+			, dataURI = this[to_data_url].apply(this, args)
+			, header_end = dataURI.indexOf(",")
+			, data = dataURI.substring(header_end + 1)
+			, is_base64 = is_base64_regex.test(dataURI.substring(0, header_end))
+			, blob
+		;
+		if (Blob.fake) {
+			// no reason to decode a data: URI that's just going to become a data URI again
+			blob = new Blob
+			if (is_base64) {
+				blob.encoding = "base64";
+			} else {
+				blob.encoding = "URI";
+			}
+			blob.data = data;
+			blob.size = data.length;
+		} else if (Uint8Array) {
+			if (is_base64) {
+				blob = new Blob([decode_base64(data)], {type: type});
+			} else {
+				blob = new Blob([decodeURIComponent(data)], {type: type});
+			}
+		}
+		callback(blob);
+	};
+
+	if (canvas_proto.toDataURLHD) {
+		canvas_proto.toBlobHD = function() {
+			to_data_url = "toDataURLHD";
+			var blob = this.toBlob();
+			to_data_url = "toDataURL";
+			return blob;
+		}
+	} else {
+		canvas_proto.toBlobHD = canvas_proto.toBlob;
+	}
+}
+}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

translator/translator.html

@@ -0,0 +1,154 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Image Translator</title>
+    <link href="../css/index.css" rel="stylesheet" type="text/css">
+    <link href="fonts/ostrich-sans.css" rel="stylesheet" type="text/css">
+    <style>
+        body {
+            max-width: 800px;
+            margin: auto;
+        }
+        .ostrich {
+            font-family: 'Ostrich Sans';
+        }
+        .ostrich-black {
+            font-family: 'Ostrich Sans Black';
+        }
+        .ostrich-light {
+            font-family: 'Ostrich Sans Light';
+        }
+        img, canvas {
+            display: block;
+            max-width: 800px;
+            box-shadow: 0px 0px 10px black;
+            background-image: linear-gradient(45deg, silver 25%, transparent 25%, transparent 75%, silver 75%, silver), 
+                linear-gradient(45deg, silver 25%, transparent 25%, transparent 75%, silver 75%, silver);
+            background-size: 20px 20px;
+            background-position: 0 0, 10px 10px;
+        }
+        button {
+            margin: 0 0 40px 0;
+        }
+    </style>
+    <script src="lib/canvas-toBlob.js"></script>
+    <script src="lib/FileSaver.js"></script>
+    <script>
+    // delay drawing until fonts and images have been loaded
+    var drawFuncs = [];
+    function draw(drawFunc) {
+        // add canvas after img
+        var images = document.getElementsByTagName("img"),
+            img = images[images.length - 1],
+            filename = img.src.match(".*[^/]/(.*)$")[1],
+            canvas = document.createElement("canvas"),
+            ctx = canvas.getContext("2d");
+        drawFuncs.push(function(){
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            drawFunc(ctx, img);
+        });
+        canvas.onmouseenter = function(){canvas.parentNode.replaceChild(img, canvas)};
+        img.onmouseleave = function(){img.parentNode.replaceChild(canvas, img)};
+        img.onmouseleave();
+        img.onmousedown = function(evt){
+            console.log([evt.pageX - evt.target.offsetLeft, evt.pageY - evt.target.offsetTop]);
+        };        
+        // make download button
+        var button = document.createElement("button");
+        document.body.appendChild(button);
+        button.innerHTML = filename;
+        button.onclick = function() {
+            canvas.toBlob(function(blob) {
+                saveAs(blob, filename);
+            });
+        }
+    }
+    function hex(n) {
+        return (n < 16 ? "0" : "") + n.toString(16);
+    }
+    function tapeRect(ctx, x, y, w, h) {
+        var pixels= ctx.getImageData(x, y, 1, 1).data,
+            color = "#" + hex(pixels[0]) + hex(pixels[1]) + hex(pixels[2]);
+        ctx.fillStyle = color;
+        ctx.fillRect(x, y, w, h);
+    }
+    function putText(ctx, x, y, height, color, font, text) {
+        ctx.fillStyle = color;
+        ctx.font = height + "px '" + font + "'";
+        ctx.fillText(text, x, y);
+    }
+    window.onload = function() {
+        drawFuncs.forEach(function (f) { f() });
+    }
+    </script>
+</head>
+<body>
+    <h1>Image Translator</h1>
+    <em>by <a href="https://github.com/bertfreudenberg">Bert Freudenberg</a></em>
+    <p>This page creates translated images used by <a href="http://ncase.me/polygons/">Parable of the Polygons</a>.
+    To make your own translation, translate this page’s source code, adjust font sizes and positions, then click the button to download the translated image.
+    Mouse over to see the original.</p>
+
+    <p>Fonts: <span class="ostrich">Ostrich Sans</span>,
+        <span class="ostrich-black">Ostrich Sans Black</span>,
+        <span class="ostrich-light">Ostrich Sans Light</span> by the
+        <a href="https://www.theleagueofmoveabletype.com/ostrich-sans">League of Movable Type</a>.</p>
+
+    <img src="../play/intro/intro_banner.png"></img>
+    <script>
+        draw(function(ctx) {
+            var gradient = ctx.createRadialGradient(0.5, 0.5, 0.35, 0.5, 0.5, 0.5);
+            gradient.addColorStop(0, "rgba(0, 0, 0, 0.0)");
+            gradient.addColorStop(1, "rgba(0, 0, 0, 0.8)");
+            ctx.save()
+                ctx.translate(0, 25);
+                ctx.scale(1280, 500);
+                ctx.fillStyle = gradient;
+                ctx.fillRect(0, -0.1, 1, 1.2);
+            ctx.restore();
+            putText(ctx, 160, 195, 128, "white", "Ostrich Sans", "Parable of the Polygons");
+            putText(ctx, 290, 250, 56, "gray", "Ostrich Sans", "A Playable Post on the Shape of Society");
+        })
+    </script>
+
+    <img src="../play/mini/dragging.png"></img>
+    <script>
+        draw(function(ctx, img) {
+            ctx.drawImage(img, 0, 0);
+            for (var y = 100; y < 200; y += 80)
+                tapeRect(ctx, 220, y, 340, 60);
+            putText(ctx, 246, 156, 50, "#aaa", "Ostrich Sans Black", "Drag & Drop the");
+            putText(ctx, 250, 218, 44, "#aaa", "Ostrich Sans Black", "Unhappy Polygons");
+        })
+    </script>
+
+    <img src="../play/img/ui_buttons.png"></img>
+    <script>
+        draw(function(ctx, img) {
+            ctx.drawImage(img, 0, 0);
+            for (var y = 6; y < 408; y += 52)
+                tapeRect(ctx, 56, y, 133, 34);
+            for (var y = 38; y < 200; y += 52)
+                putText(ctx, 58, y, 42, "#fff", "Ostrich Sans Light", "New Board");
+            for (var y = 245; y < 300; y += 52)
+                putText(ctx, 58, y, 36, "#fff", "Ostrich Sans Light", "Start Movin'");
+            for (var y = 350; y < 450; y += 52)
+                putText(ctx, 58, y, 41, "#fff", "Ostrich Sans Light", "Stop Movin'");
+        })
+    </script>
+
+    <img src="../play/img/stats.png"></img>
+    <script>
+        draw(function(ctx, img) {
+            ctx.drawImage(img, 0, 0);
+            tapeRect(ctx, 5, 164, 20, 105);
+            tapeRect(ctx, 30, 275, 40, 18);
+            putText(ctx, 35, 293, 20, "#666", "Ostrich Sans Black", "Time");
+            ctx.rotate(Math.PI/-2);
+            putText(ctx, -260, 22, 20, "#666", "Ostrich Sans Black", "Segregation");
+        })
+    </script>
+</body>
+</html>