1 files changed, 108 insertions, 0 deletions
diff --git a/rectangles-lines.html b/rectangles-lines.html
new file mode 100644
index 0000000..7386046
--- /dev/null
+++ b/rectangles-lines.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html>
+<head>
+	<link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css">
+<style type="text/css">
+</style>
+</head>
+<body>
+
+
+</body>
+<script type="text/javascript" src="assets/javascripts/util.js"></script>
+<script type="text/javascript">
+
+(function(){
+
+	var canvas = document.createElement("canvas")
+	var ctx = canvas.getContext("2d")
+	var w = canvas.width = 500
+	var h = canvas.height = 500
+	document.body.appendChild(canvas)
+
+	var rects = []
+	var dragging = false
+	var mouse = {x:0,y:0,w:0,h:0}
+	canvas.addEventListener("mousedown", function(e){
+		dragging = true
+		mouse.x = e.pageX
+		mouse.y = e.pageY
+		mouse.w = mouse.h = 0
+	})
+	canvas.addEventListener("mousemove", function(e){
+		if (dragging) {
+			mouse.w = e.pageX - mouse.x
+			mouse.h = e.pageY - mouse.y
+		}
+		else {
+			mouse.x = e.pageX
+			mouse.y = e.pageY
+		}
+	})
+	document.addEventListener("mouseup", function(e){
+		if (! dragging) return
+		dragging = false
+		rects.push(normalize(mouse))
+		mouse = {x:e.pageX,y:e.pageY,w:0,h:0}
+	})
+	
+	function animate(){
+		requestAnimationFrame(animate)
+		ctx.fillStyle = "#fff"
+		ctx.fillRect(0,0,w,h)
+		
+		solve_rects()
+		draw_ruler()
+		draw_rects()
+		draw_mouse()
+	}
+	animate()
+
+	function normalize(rect){
+		if (rect.w < 0) {
+			rect.x += rect.w
+			rect.w = abs(rect.w)
+		}
+		if (rect.h < 0) {
+			rect.y += rect.h
+			rect.h = abs(rect.h)
+		}
+		return rect
+	}
+	function solve_rects(){
+	}
+	function draw_ruler(){
+		ctx.strokeStyle = "rgba(0,0,0,1.0)"
+		ctx.lineWidth = 1
+		for (var i = 0; i < w; i += 10) {
+			ctx.beginPath()
+			ctx.moveTo(randint(i), randint(i))
+			ctx.lineTo(randint(i), randint(i))
+			ctx.stroke()
+		}
+console.log(i)
+	}
+	function draw_rects(){
+		for (var i = 0; i < rects.length; i++) {
+			var rect = rects[i]
+			ctx.fillStyle = "rgba(0,200,220,0.5)"
+			ctx.fillRect(rect.x, rect.y, rect.w, rect.h)
+		}
+	}
+	function draw_mouse(){
+		if (mouse.w == 0 && mouse.h == 0) {
+			ctx.fillStyle = "rgba(255,0,0,0.4)";
+			ctx.beginPath();
+			ctx.arc(mouse.x, mouse.y, 5, 0, 2*Math.PI, false);
+			ctx.fill();
+		}
+		else {
+			ctx.fillStyle = "rgba(255,255,0,0.5)"
+			ctx.fillRect(mouse.x, mouse.y, mouse.w, mouse.h)
+		}
+	}
+
+})()
+
+</script>
+</html>