From f8e4a8c85890648f38dc8705e700d63252bb1dc2 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Tue, 23 Dec 2014 20:59:05 -0500
Subject: use brackets to change size of brush

---
 assets/test/pen.html | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

(limited to 'assets/test/pen.html')

diff --git a/assets/test/pen.html b/assets/test/pen.html
index 25167b6..2273267 100644
--- a/assets/test/pen.html
+++ b/assets/test/pen.html
@@ -1,7 +1,7 @@
 <style>
 body,html{margin:0;padding:0;}
 #hud { position: absolute; top: 0; left: 0; pointer-events: none; }
-canvas { position: absolute; top: 0; left: 0; }
+canvas { position: absolute; top: 0; left: 0; cursor: crosshair; }
 #mask { pointer-events: none; }
 #scratch { display: none; }
 </style>
@@ -19,6 +19,7 @@ canvas { position: absolute; top: 0; left: 0; }
 <script src="../javascripts/math/point.js"></script>
 <script src="../javascripts/math/vec2.js"></script>
 <script src="../javascripts/util/mouse.js"></script>
+<script src="../javascripts/util/keys.js"></script>
 <script src="../javascripts/util/uid.js"></script>
 <script>
 
@@ -31,6 +32,7 @@ var h = mask.height = canvas.height = window.innerHeight
 
 var drawing = false
 var lastPoint = new point (0, 0), newPoint = new point (0, 0)
+var radius = 1
 
 var mymouse = new mouse({
   el: canvas,
@@ -59,6 +61,21 @@ var mymouse = new mouse({
     maskCtx.clearRect(0,0,w,h)
   },
 })
+
+var drawBrush = drawRoundBrush
+keys.on("open_bracket", function(){
+  radius = max(radius-1, 1)
+  drawBrush(radius)
+})
+keys.on("close_bracket", function(){
+  radius = min(radius+1, 100)
+  drawBrush(radius)
+})
+keys.on("forward_slash", function(){
+  drawBrush = drawBrush == drawRoundBrush ? drawSquareBrush : drawRoundBrush
+  drawBrush(radius)
+})
+
 var extra = 1
 function drawLine (u, v) {
   var radius = scratch.width/2
@@ -97,9 +114,10 @@ function drawSquareBrush (w, h) {
   scratchCtx.putImageData(imagedata, 0, 0)
 }
 
-function drawRoundBrush (radius) {
-  var w = scratch.width = radius * 2
-  var h = scratch.height = radius * 2
+function drawRoundBrush (diameter) {
+  var w = scratch.width = diameter
+  var h = scratch.height = diameter
+  var radius = diameter/2
 
   var p = new point (0,0)
   var radius2 = radius * radius
@@ -134,7 +152,7 @@ for (var i = 0; i < 11; i++) {
   drawSquareBrush(i+1)
   drawLine( new point( 100, 100 + 40 * i), new point (400, 100 + 40 * i ))
 }
-drawSquareBrush(2)
+drawSquareBrush(radius = 2)
 
 // drawLine( new point( 100, 100 ), new point( 100, 400 ) )
 // drawLine( new point( 100, 100 ), new point( 400, 100 ) )
-- 
cgit v1.2.3-70-g09d2