--> // Simple gesture detection let gestureStartX, gestureStartY; let gesturePoints = []; canvas.addEventListener('touchstart', function(e) { e.preventDefault(); const touch = e.touches[0]; const rect = canvas.getBoundingClientRect(); gestureStartX = touch.clientX - rect.left; gestureStartY = touch.clientY - rect.top; // Reset gesture points collection gesturePoints = [{x: gestureStartX, y: gestureStartY, time: Date.now()}]; }); canvas.addEventListener('touchmove', function(e) { e.preventDefault(); const touch = e.touches[0]; const rect = canvas.getBoundingClientRect(); const currentX = touch.clientX - rect.left; const currentY = touch.clientY - rect.top; // Add point to gesture collection gesturePoints.push({x: currentX, y: currentY, time: Date.now()}); // Draw the gesture path ctx.beginPath(); ctx.moveTo(gesturePoints[gesturePoints.length-2].x, gesturePoints[gesturePoints.length-2].y); ctx.lineTo(currentX, currentY); ctx.strokeStyle = 'blue'; ctx.lineWidth = 2; ctx.stroke(); }); canvas.addEventListener('touchend', function(e) { // Analyze the gesture const gestureType = analyzeGesture(gesturePoints); console.log(`Detected gesture: ${gestureType}`); // Clean up after gesture analysis setTimeout(() => { // Clear the canvas and redraw notation ctx.clearRect(0, 0, canvas.width, canvas.height); drawMusicNotation(); }, 500); }); // Simple gesture analyzer function analyzeGesture(points) { if (points.length < 3) return "tap"; // Calculate horizontal and vertical movement const xStart = points[0].x; const yStart = points[0].y; const xEnd = points[points.length-1].x; const yEnd = points[points.length-1].y; const xDiff = Math.abs(xEnd - xStart); const yDiff = Math.abs(yEnd - yStart); // Simple horizontal swipe detection if (xDiff > 100 && yDiff < 50) { return xEnd > xStart ? "swipe-right" : "swipe-left"; } // Simple vertical swipe detection if (yDiff > 100 && xDiff < 50) { return yEnd > yStart ? "swipe-down" : "swipe-up"; } // Circle detection (very simple approximation) if (xDiff < 50 && yDiff < 50 && points.length > 20) { return "circle"; } return "unknown"; }