kylemcdonald · August 29, 2015 14:20 · Apr 30, 2015 · Apr 30, 2015 · Apr 30, 2015
diff --git a/example.png b/example.png
diff --git a/moon-draw.js b/moon-draw.js
@@ -7,9 +7,9 @@ Then start writing some Processing-like code:
 begin()
 translate(width / 2, height / 2)
 for(var i = 0; i < 11; i++) {
-    rotate(radians(33));
-	triangle(10, 10, 200);
-    rect(20, 30, 40, 50);
+  rotate(radians(33));
+  triangle(10, 10, 200);
+  rect(20, 30, 40, 50);
 }
 end()
 ```

diff --git a/moon-draw.js b/moon-draw.js
@@ -0,0 +1,190 @@
+/*
+# moon-draw.js
+To use this code, paste it into your console.
+Then start writing some Processing-like code:
+
+```js
+begin()
+translate(width / 2, height / 2)
+for(var i = 0; i < 11; i++) {
+    rotate(radians(33));
+	triangle(10, 10, 200);
+    rect(20, 30, 40, 50);
+}
+end()
+```
+
+# Functions
+- random, clamp, radians
+- begin, moveTo, end
+- translate, rotate, scale
+- pushMatrix popMatrix
+- ellipse, spiral, rectangle, triangle
+*/
+
+var width = 450, height = 450;
+var state;
+var stateStack = [];
+begin();
+
+function random(a, b) {
+	if(typeof b !== 'undefined') {
+		return Math.random() * (b - a) + a;
+	} else {
+		return Math.random() * a;
+	}
+}
+
+function clamp(x, low, high) {
+	return x > high ? high : x < low ? low : x;
+}
+
+// convert degrees to radians
+function radians(angle) {
+	return 2 * Math.PI * angle / 360;
+}
+
+function mouse(event, x, y) {
+	var canvas = document.getElementById('defaultCanvas');
+	canvas.dispatchEvent(new MouseEvent(event, {
+	    'view': window,
+	    'bubbles': true,
+	    'cancelable': true,
+	    'clientX': canvas.getBoundingClientRect().left + x,
+	    'clientY': canvas.getBoundingClientRect().top + y
+	}));
+  	state.prev.x = x;
+  	state.prev.y = y;
+}
+
+// call begin() before creating a new drawing
+function begin() {
+	state = {
+		start: false,
+		prev: {x: 0, y:0},
+		translation: {x: 0, y: 0},
+		scaling: {x: 1, y: 1},
+		rotation: 0
+	};
+}
+
+// moveTo simulates mouse movement one point at a time
+// your drawing will start at your first moveTo point
+function moveTo(x, y) {
+	var s = Math.sin(state.rotation);
+	var c = Math.cos(state.rotation);
+
+	var sx = x * c - y * s;
+	var sy = x * s + y * c;
+
+	sx *= state.scaling.x;
+	sy *= state.scaling.y;
+
+	sx += state.translation.x;
+	sy += state.translation.y;
+
+	sx = clamp(sx, 1, 450);
+	sy = clamp(sy, 1, 450);
+	if(!state.start) {
+		mouse('mousedown', sx, sy);
+		state.start = true;
+	}
+	mouse('mousemove', sx, sy);
+}
+
+// call end() when you are done placing points
+function end() {
+	mouse('mouseup', state.prev.x, state.prev.y);
+}
+
+function pushMatrix() {
+	stateStack.push({
+		translation: {
+			x: state.translation.x,
+			y: state.translation.y
+		},
+		scaling: {
+			x: state.scaling.x,
+			y: state.scaling.y
+		},
+		rotation: state.rotation,
+	});
+}
+
+function popMatrix() {
+	var pop = stateStack.pop();
+	state.translation = {
+		x: pop.translation.x,
+		y: pop.translation.y
+	};
+	state.scaling = {
+		x: pop.scaling.x,
+		y: pop.scaling.y
+	};
+	state.rotation = pop.rotation;
+}
+
+function translate(x, y) {
+	var s = Math.sin(state.rotation);
+	var c = Math.cos(state.rotation);
+
+	var sx = x * c - y * s;
+	var sy = x * s + y * c;
+
+	sx *= state.scaling.x;
+	sy *= state.scaling.y;
+
+	state.translation.x += sx;
+	state.translation.y += sy;
+}
+
+function scale(x, y) {
+	state.scaling.x *= x;
+	state.scaling.y *= y;
+}
+
+// rotate() using radians
+function rotate(angle) {
+	state.rotation += angle;
+}
+
+function ellipse(x, y, w, h, steps) {
+	steps = typeof steps !== 'undefined' ? steps : 24;
+	for(var i = 0; i < steps; i++) {
+		var theta = 2 * Math.PI * i / (steps - 1);
+		var cx = x + Math.sin(theta) * w / 2;
+		var cy = y + Math.cos(theta) * h / 2;
+		moveTo(cx, cy);
+	}
+}
+
+function spiral(x, y, outerRadius, innerRadius, rotations, steps) {
+	innerRadius = typeof innerRadius !== 'undefined' ? innerRadius : 0;
+	rotations = typeof rotations !== 'undefined' ? rotations : 8;
+	steps = typeof steps !== 'undefined' ? steps : 24;
+	for(var i = 0; i < steps; i++) {
+		var t = i / (steps - 1);
+		var theta = rotations * 2 * Math.PI * t;
+		var cr = t * (outerRadius - innerRadius) + innerRadius;
+		var cx = x + Math.sin(theta) * cr;
+		var cy = y + Math.cos(theta) * cr;
+		moveTo(cx, cy);
+	}
+}
+
+function rect(x, y, w, h) {
+	h = typeof h !== 'undefined' ? h : w;
+	moveTo(x, y);
+	moveTo(x + w, y);
+	moveTo(x + w, y + h);
+	moveTo(x, y + h);
+	moveTo(x, y);
+}
+
+function triangle(x, y, w, h) {
+	h = typeof h !== 'undefined' ? h : w * Math.sqrt(3) / 2;	
+	moveTo(x, y);
+	moveTo(x + w / 2, y + h);
+	moveTo(x - w / 2, y + h);
+	moveTo(x, y);
+}