shoofle/shooflenet
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

jank

Browse Source
This commit is contained in:
Shoofle Munroe 2015-07-13 14:19:01 -04:00
parent d37b9bb310
commit 7b93f933b0
1 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
static/strong_tag.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="jquery-2.0.3.js"></script> <script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var margin, s1, s2, s3, hook_separation, h1, h2, h3, h4, hook_overlap, hook_height, stroke_width, staple_rise, staple_offset, staple_width; var margin, s1, s2, s3, hook_separation, h1, h2, h3, h4, hook_overlap, hook_height, stroke_width, staple_rise, staple_offset, staple_width, hook_bite;
var canvas, ctx; var canvas, ctx;
var w = this; var w = this;
$(document).ready(function() { $(document).ready(function() {
@ -18,13 +18,15 @@
}); });
function redraw() { function redraw() {
stroke();
h1 = margin; h1 = margin;
s1 = margin; s1 = margin;
hook_separation = margin / 2;
staple_rise = staple_offset; staple_rise = staple_offset;
staple_leg_height = staple_offset;
interior_margin = margin;
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#000'
ctx.fillRect(0, 0, canvas.width, canvas.height);
style();
ctx.save(); ctx.save();
draw_on(ctx); draw_on(ctx);
ctx.translate(0, canvas.height); ctx.translate(0, canvas.height);
@ -39,7 +41,10 @@
ctx.restore(); ctx.restore();
} }
function stroke() { function style() {
var foreground = 'white';
ctx.fillStyle = foreground;
ctx.strokeStyle = foreground;
ctx.lineJoin = "miter"; ctx.lineJoin = "miter";
ctx.lineCap = "square"; ctx.lineCap = "square";
ctx.lineWidth = stroke_width; ctx.lineWidth = stroke_width;
@ -51,21 +56,35 @@
p1.lineTo(margin, canvas.height / 2); p1.lineTo(margin, canvas.height / 2);
p1.lineTo(margin + s1, canvas.height / 2); p1.lineTo(margin + s1, canvas.height / 2);
ctx.stroke(p1) ctx.stroke(p1)
// arms // arms
var p2 = new Path2D(); var p2 = new Path2D();
p2.moveTo(margin + s1, (canvas.height / 2) - h1); p2.moveTo(margin + s1, (canvas.height / 2) - h1);
p2.lineTo(margin + s1, margin); p2.lineTo(margin + s1, margin);
p2.lineTo((canvas.width / 2) - hook_separation, margin); p2.lineTo((canvas.width / 2) - hook_separation, margin);
p2.lineTo((canvas.width / 2) - hook_separation, margin + hook_height); p2.lineTo((canvas.width / 2) - hook_separation, margin + hook_height);
p2.lineTo((canvas.width / 2) - hook_separation - staple_width - hook_overlap, margin + hook_height); p2.lineTo((canvas.width / 2) - staple_width - hook_bite, margin + hook_height);
ctx.stroke(p2); ctx.stroke(p2);
// staple // staple
var p3 = new Path2D(); var p3 = new Path2D();
p3.moveTo((canvas.width / 2) - hook_separation - staple_offset, margin + staple_offset); p3.moveTo((canvas.width / 2) - hook_separation + hook_bite, margin + staple_leg_height);
p3.lineTo((canvas.width / 2) - hook_separation - staple_width - hook_overlap - staple_offset, margin + staple_offset); p3.lineTo((canvas.width / 2) - staple_width, margin + staple_leg_height);
p3.lineTo((canvas.width / 2) - hook_separation - staple_width - hook_overlap - staple_offset, margin + hook_height + staple_rise); p3.lineTo((canvas.width / 2) - staple_width, margin + hook_height + staple_offset);
p3.lineTo((canvas.width / 2), margin + hook_height + staple_rise); p3.lineTo((canvas.width / 2), margin + hook_height + staple_rise);
ctx.stroke(p3); ctx.stroke(p3);
//interior
var big_rect_x1 = margin + s1 + interior_margin;
var big_rect_y1 = margin + interior_margin;
var big_rect_x2 = (canvas.width / 2) - staple_width - interior_margin;
var big_rect_y2 = (canvas.height / 2) + 1;
ctx.fillRect(big_rect_x1, big_rect_y1, big_rect_x2 - big_rect_x1, big_rect_y2 - big_rect_y1);
var small_rect_x1 = margin + s1 + interior_margin;
var small_rect_y1 = margin + hook_height + staple_rise + interior_margin;
var small_rect_x2 = (canvas.width / 2) + 1;
var small_rect_y2 = (canvas.height / 2) + 1;
ctx.fillRect(small_rect_x1, small_rect_y1, small_rect_x2 - small_rect_x1, small_rect_y2 - small_rect_y1);
} }
</script> </script>
<style> <style>
@ -79,11 +98,12 @@
</head> </head>
<body> <body>
<canvas width="600" height="250"></canvas> <canvas width="600" height="250"></canvas>
<p><label for="stroke_width">channel width: </label><input type="range" name="stroke_width" min="0" max="20" value="10" /></p> <p><label for="stroke_width">channel width: </label><input type="range" name="stroke_width" min="0" max="20" step="2" value="8" /></p>
<p><label for="margin">margin: </label><input type="range" name="margin" min="10" max="40" value="20"/></p> <p><label for="margin">margin: </label><input type="range" name="margin" min="10" max="40" value="20"/></p>
<p><label for="hook_height">hooks height: </label><input type="range" name="hook_height" min="20" max="60" value="40"/></p> <p><label for="hook_separation">hook separation: </label><input type="range" name="hook_separation" min="5" max="40" value="16"/></p>
<p><label for="staple_width">staple width: </label><input type="range" name="staple_width" min="0" max="50" value="25"/></p> <p><label for="hook_height">hooks height: </label><input type="range" name="hook_height" min="20" max="60" value="37"/></p>
<p><label for="staple_offset">staple offset: </label><input type="range" name="staple_offset" value="20" min="5" max="60" value="17"/></p> <p><label for="staple_width">staple width: </label><input type="range" name="staple_width" min="0" max="70" value="50"/></p>
<p><label for="hook_overlap">hook overlap: </label><input type="range" id="hook_overlap" name="hook_overlap" min="0" max="20" value="5"/></p> <p><label for="staple_offset">staple offset: </label><input type="range" name="staple_offset" min="5" max="60" value="17"/></p>
<p><label for="hook_bite">hook bite: </label><input type="range" name="hook_bite" min="-40" max="-5" value="-15"/></p>
</body> </body>
</html> </html>