diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/javascripts/util/keys.js | 2 | ||||
| -rw-r--r-- | assets/test/pen.html | 28 |
2 files changed, 24 insertions, 6 deletions
diff --git a/assets/javascripts/util/keys.js b/assets/javascripts/util/keys.js index 62d763f..c96ffdb 100644 --- a/assets/javascripts/util/keys.js +++ b/assets/javascripts/util/keys.js @@ -156,7 +156,7 @@ var keys = (function(){ 'grave_accent' : '192', 'open_bracket' : '219', 'backslash' : '220', - 'closebracket' : '221', + 'close_bracket' : '221', 'single_quote' : '222' }, KEY_NAMES = invert_hash(KEYCODES) 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 ) ) |