thierryc · July 24, 2024 10:19
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pressure-Sensitive Drawing</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            height: 100%;
        }
        .drawing-area {
            flex: 1;
            position: relative;
        }
        #drawingCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            touch-action: none;
        }
        .sidebar {
            width: 250px;
            background-color: #f0f0f0;
            padding: 10px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        h1 {
            font-size: 18px;
            margin-top: 0;
        }
        h2 {
            font-size: 14px;
            margin-top: 10px;
        }
        .output-section {
            flex: 1;
            overflow-y: auto;
            margin-bottom: 10px;
        }
        #pathOutput, #pressureOutput {
            font-size: 10px;
            white-space: pre-wrap;
            word-break: break-all;
        }
    </style>
 </head>
 <body>
    <div class="container">
        <div class="drawing-area">
            <canvas id="drawingCanvas"></canvas>
        </div>
        <div class="sidebar">
            <h1>Pressure-Sensitive Drawing</h1>
            <p>Use your Apple Pencil to draw on the canvas.</p>
            <div class="output-section">
                <h2>SVG Path:</h2>
                <div id="pathOutput"></div>
            </div>
            <div class="output-section">
                <h2>Pressure Values:</h2>
                <div id="pressureOutput"></div>
            </div>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('drawingCanvas');
        const ctx = canvas.getContext('2d');
        const pathOutput = document.getElementById('pathOutput');
        const pressureOutput = document.getElementById('pressureOutput');
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        let path = [];
        let pressures = [];

        function resizeCanvas() {
            canvas.width = window.innerWidth - 250;
            canvas.height = window.innerHeight;
        }

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        canvas.addEventListener('pointerdown', startDrawing);
        canvas.addEventListener('pointermove', draw);
        canvas.addEventListener('pointerup', stopDrawing);
        canvas.addEventListener('pointerout', stopDrawing);

        function startDrawing(e) {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
            addPoint(`M${lastX},${lastY}`, e.pressure);
        }

        function draw(e) {
            if (!isDrawing) return;
            
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.strokeStyle = `rgba(0, 0, 0, ${e.pressure})`;
            ctx.lineWidth = e.pressure * 10;
            ctx.stroke();
            
            addPoint(`L${e.offsetX},${e.offsetY}`, e.pressure);
            
            [lastX, lastY] = [e.offsetX, e.offsetY];
        }

        function addPoint(pathSegment, pressure) {
            path.push(pathSegment);
            pressures.push(pressure.toFixed(3));
            updateOutput();
        }

        function stopDrawing() {
            if (!isDrawing) return;
            isDrawing = false;
            updateOutput();
        }

        function updateOutput() {
            pathOutput.textContent = path.join(' ');
            pressureOutput.textContent = pressures.join(', ');
        }
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pressure-Sensitive Drawing</title>
	<style>
	body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	font-family: Arial, sans-serif;
	}
	.container {
	display: flex;
	height: 100%;
	}
	.drawing-area {
	flex: 1;
	position: relative;
	}
	#drawingCanvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	touch-action: none;
	}
	.sidebar {
	width: 250px;
	background-color: #f0f0f0;
	padding: 10px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	}
	h1 {
	font-size: 18px;
	margin-top: 0;
	}
	h2 {
	font-size: 14px;
	margin-top: 10px;
	}
	.output-section {
	flex: 1;
	overflow-y: auto;
	margin-bottom: 10px;
	}
	#pathOutput, #pressureOutput {
	font-size: 10px;
	white-space: pre-wrap;
	word-break: break-all;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="drawing-area">
	<canvas id="drawingCanvas"></canvas>
	</div>
	<div class="sidebar">
	<h1>Pressure-Sensitive Drawing</h1>
	<p>Use your Apple Pencil to draw on the canvas.</p>
	<div class="output-section">
	<h2>SVG Path:</h2>
	<div id="pathOutput"></div>
	</div>
	<div class="output-section">
	<h2>Pressure Values:</h2>
	<div id="pressureOutput"></div>
	</div>
	</div>
	</div>

	<script>
	const canvas = document.getElementById('drawingCanvas');
	const ctx = canvas.getContext('2d');
	const pathOutput = document.getElementById('pathOutput');
	const pressureOutput = document.getElementById('pressureOutput');
	let isDrawing = false;
	let lastX = 0;
	let lastY = 0;
	let path = [];
	let pressures = [];

	function resizeCanvas() {
	canvas.width = window.innerWidth - 250;
	canvas.height = window.innerHeight;
	}

	window.addEventListener('resize', resizeCanvas);
	resizeCanvas();

	canvas.addEventListener('pointerdown', startDrawing);
	canvas.addEventListener('pointermove', draw);
	canvas.addEventListener('pointerup', stopDrawing);
	canvas.addEventListener('pointerout', stopDrawing);

	function startDrawing(e) {
	isDrawing = true;
	[lastX, lastY] = [e.offsetX, e.offsetY];
	addPoint(`M${lastX},${lastY}`, e.pressure);
	}

	function draw(e) {
	if (!isDrawing) return;

	ctx.beginPath();
	ctx.moveTo(lastX, lastY);
	ctx.lineTo(e.offsetX, e.offsetY);
	ctx.strokeStyle = `rgba(0, 0, 0, ${e.pressure})`;
	ctx.lineWidth = e.pressure * 10;
	ctx.stroke();

	addPoint(`L${e.offsetX},${e.offsetY}`, e.pressure);

	[lastX, lastY] = [e.offsetX, e.offsetY];
	}

	function addPoint(pathSegment, pressure) {
	path.push(pathSegment);
	pressures.push(pressure.toFixed(3));
	updateOutput();
	}

	function stopDrawing() {
	if (!isDrawing) return;
	isDrawing = false;
	updateOutput();
	}

	function updateOutput() {
	pathOutput.textContent = path.join(' ');
	pressureOutput.textContent = pressures.join(', ');
	}
	</script>
	</body>
	</html>