Find file
Fetching contributors…
Cannot retrieve contributors at this time
150 lines (139 sloc) 4.33 KB
<!DOCTYPE HTML>
<html>
<head>
<title>Multitouch Draw</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="icon.png" />
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
background: #000;
}
canvas {
position: absolute;
top: 0;
left: 0;
background: #000;
-webkit-user-select: none;
z-index: 1;
}
#debug {
width: 200px;
height: 22px;
border-radius: 10px;
-webkit-radius: 10px;
background-color: red;
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div id="debug">This is a test</div>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
canvas.width = document.body.offsetWidth;
canvas.height = document.body.offsetHeight;
var c = canvas.getContext("2d");
var prevPoints = {};
function perp(c, method, a, b, dist) {
var dy = a[1] - b[1];
if(dy == 0) {
method.call(c, b[0], dist + b[1]);
}
else {
var slope = (b[0] - a[0]) / dy;
var xscale = dist / Math.sqrt(1 + slope*slope);
var x = xscale;
var y = xscale * slope;
method.call(c, x + b[0], y + b[1]);
}
}
function drawSegment(c, old, crnt)
{
c.beginPath();
perp(c, c.moveTo, crnt, old, +old[3]);
perp(c, c.lineTo, crnt, old, -old[3]);
perp(c, c.lineTo, old, crnt, -crnt[3]);
perp(c, c.lineTo, old, crnt, +crnt[3]);
c.fill();
c.beginPath();
c.arc(crnt[0], crnt[1], crnt[3], 0, Math.PI * 2);
c.fill();
}
//c.fillStyle = "rgb(255,0,0)";
//drawSegment(c, [25, 25, 0, 0.5], [100, 25, 1000, 0.5]);
function myrand() {
return Math.floor(Math.random() * 200) + 55;
}
function doLineTo(e) {
var now = new Date();
var old, crnt, dist;
for(var i = 0; i < e.changedTouches.length; ++i) {
touch = e.changedTouches[i];
old = prevPoints[touch.identifier];
crnt = [touch.clientX, touch.clientY, now, 1];
if(old) {
dist = Math.sqrt(Math.pow(old[0]-crnt[0], 2) +
Math.pow(old[1]-crnt[1], 2));
if(dist > old[3]) {
// width:
crnt[3] = Math.max(0.5,Math.min(10, (crnt[2]-old[2]) / 5 / dist));
// color:
crnt[4] = old[4];
c.fillStyle = crnt[4];
drawSegment(c, old, crnt);
prevPoints[touch.identifier] = crnt;
}
}
else {
crnt[4] = "rgb(" + [myrand(),myrand(),myrand()].join(",") + ")";
prevPoints[touch.identifier] = crnt;
}
}
}
canvas.ontouchstart = function(e) {
doLineTo(e);
return false;
};
canvas.ontouchmove = function(e) {
doLineTo(e);
return false;
};
canvas.ontouchend = function(e) {
for(var i = 0; i < e.changedTouches.length; ++i) {
delete prevPoints[e.changedTouches[i].identifier];
}
return false;
};
// shake the phone upside down to 'clear'.
var debug = document.getElementById("debug");
if (window.DeviceMotionEvent==undefined) {
debug.textContent = "DeviceMotionEvent is not supported :-(";
} else {
window.ondevicemotion = function(e) {
ax = e.accelerationIncludingGravity.x;
ay = e.accelerationIncludingGravity.y;
az = e.accelerationIncludingGravity.z;
debug.textContent =
"x: " + ax.toFixed(2) + " " +
"y: " + ay.toFixed(2) + " " +
"z: " + az.toFixed(2);
if (az > 12) {
c.fillStyle = "rgba(0,0,0,0.2)";
c.fillRect(0, 0, canvas.width, canvas.height);
}
};
}
</script>
</body>
</html>