summaryrefslogtreecommitdiff
path: root/assets/test/pen.html
diff options
context:
space:
mode:
Diffstat (limited to 'assets/test/pen.html')
-rw-r--r--assets/test/pen.html28
1 files changed, 23 insertions, 5 deletions
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 ) )