diff options
| author | Jules Laplace <jules@okfoc.us> | 2014-11-18 18:41:32 -0500 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2014-11-18 18:41:32 -0500 |
| commit | 1f86b57c3036a137120e7e0568eec33c1f6a98f1 (patch) | |
| tree | 1afa092f72b24dc1190e178f18999b7677ac1c14 /assets/test/brush/index.html | |
| parent | 4c5fddd39465514de192c1a678a24137271a3b40 (diff) | |
more brush stuff
Diffstat (limited to 'assets/test/brush/index.html')
| -rw-r--r-- | assets/test/brush/index.html | 110 |
1 files changed, 0 insertions, 110 deletions
diff --git a/assets/test/brush/index.html b/assets/test/brush/index.html deleted file mode 100644 index cd31198..0000000 --- a/assets/test/brush/index.html +++ /dev/null @@ -1,110 +0,0 @@ -<style> -body,html{margin:0;padding:0;} -#hud { position: absolute; top: 0; left: 0; pointer-events: none; } -canvas { position: absolute; top: 0; left: 0; } -#mask { pointer-events: none; } -#scratch { display: none; } -</style> -<canvas id="canvas"></canvas> -<canvas id="mask"></canvas> -<canvas id="scratch"></canvas> -<div id="hud"></div> - -<script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script> -<script src="/assets/javascripts/vendor/bower_components/lodash/dist/lodash.min.js"></script> -<script src="/assets/javascripts/vendor/canvasutilities.js"></script> -<script src="/assets/javascripts/vendor/tube.js"></script> -<script src="/assets/javascripts/math/util.js"></script> -<script src="/assets/javascripts/math/point.js"></script> -<script src="/assets/javascripts/math/vec2.js"></script> -<script src="/assets/javascripts/util/mouse.js"></script> -<script src="/assets/javascripts/util/uid.js"></script> -<script> - -var ctx = canvas.getContext('2d') -var scratchCtx = scratch.getContext('2d') -var w = mask.width = canvas.width = window.innerWidth -var h = mask.height = canvas.height = window.innerHeight - -var drawing = false -var lastPoint = new point (0, 0), newPoint = new point (0, 0) - -var mymouse = new mouse({ - el: canvas, - down: function(e, cursor){ - drawing = true - lastPoint.x = cursor.a.x - lastPoint.y = cursor.a.y -// mask.clearRect(0,0,w,h) -// imagedata = ctx.getImageData( 0, 0, canvas.width, canvas.height ) -// data = imagedata.data - }, - drag: function(e, cursor){ - newPoint.x = cursor.b.x - newPoint.y = cursor.b.y - drawLine(lastPoint, newPoint) - - lastPoint.x = newPoint.x - lastPoint.y = newPoint.y - }, - up: function(e, cursor, new_cursor){ - drawing = false - drawLine(cursor.a, cursor.b) - console.log("hi") - }, -}) - -function drawLine (u, v) { - var radius = 10 - - var xmin = Math.min(u.x, v.x) - var ymin = Math.min(u.y, v.y) - - var w = scratch.width = abs(u.x - v.x) + radius*2 - var h = scratch.height = abs(u.y - v.y) + radius*2 - - var p = new point (0,0) - var radius2 = radius * radius - - var imagedata = ctx.createImageData(w, h) - var d = imagedata.data - var i, j, t, dist - - for (i = 0; i < w; i++) { - for (j = 0; j < h; j++) { - t = (j * w + i) * 4 - - p.x = xmin + i - radius - p.y = ymin + j - radius - - dist = distToSegmentSquared( p, u, v ) - - if (dist > radius2) { - d[t+3] = 0 - } - else { - d[t+3] = round( pow(1 - sqrt(dist)/radius, 2) * 255) - } - } - } - scratchCtx.putImageData(imagedata, 0, 0) - ctx.drawImage(scratch, xmin - radius, ymin - radius) -} - -drawLine( new point( 100, 100 ), new point( 100, 400 ) ) -// drawLine( new point( 100, 100 ), new point( 400, 100 ) ) -// drawLine( new point( 100, 100 ), new point( 400, 400 ) ) - -function sqr(x) { return x * x } -function dist2(v, w) { return sqr(v.x - w.x) + sqr(v.y - w.y) } -function distToSegmentSquared (p, v, w) { - var l2 = dist2(v, w) - var t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2 - if (t < 0) return dist2(p, v) - if (t > 1) return dist2(p, w) - return dist2(p, { x: v.x + t * (w.x - v.x), - y: v.y + t * (w.y - v.y) }) -} - - -</script> |
