init and test drawing

README.md

@@ -0,0 +1,7 @@
+# Draw preset ?
+
+![cover uhm](cover.jpg)
+
+Moving the cursor draws a thin line on the page. In certain areas the line is constrained to specific drawings. This could be an alternative to displaying image and replace them with something a bit more explorative and interactive.
+
+Perfect for an illustrator' portfolio but let's see if it can work also for soupboat.

script.js

@@ -0,0 +1,114 @@
+// Great resource from https://stackoverflow.com/a/40700068
+// Thank you ConnorFan
+
+var strokeWidth = 2;
+var bufferSize = 5;
+
+var svgElement = document.getElementById("svg-canvas");
+
+svgElement.setAttribute("viewBox", `0 0 ${window.innerWidth} ${window.scrollHeight}`);
+svgElement.setAttribute("width", `${window.innerWidth}px`);
+svgElement.setAttribute("height", `${window.scrollHeight}px`);
+
+var rect = svgElement.getBoundingClientRect();
+var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+path.setAttribute("fill", "none");
+path.setAttribute("stroke", "currentColor");
+path.setAttribute("stroke-width", strokeWidth);
+var strPath;
+var buffer = []; // Contains the last positions of the mouse cursor
+
+svgElement.addEventListener("mousedown", function (e) {
+	path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+	path.setAttribute("fill", "none");
+	path.setAttribute("stroke", "currentColor");
+	path.setAttribute("stroke-width", strokeWidth);
+	buffer = [];
+	var pt = getMousePosition(e);
+	appendToBuffer(pt);
+	strPath = "M" + pt.x + " " + pt.y;
+	path.setAttribute("d", strPath);
+	svgElement.appendChild(path);
+});
+
+svgElement.addEventListener("mousemove", function (e) {
+	// if (path) {
+	appendToBuffer(getMousePosition(e));
+	updateSvgPath();
+	// }
+});
+
+svgElement.addEventListener("mouseup", function () {
+	// if (path) {
+	// path = null;
+	// }
+});
+
+svgElement.addEventListener("mouseleave", function () {
+	// if (path) {
+	// path = null;
+	// }
+});
+
+var getMousePosition = function (e) {
+	return {
+		x: e.pageX - rect.left,
+		y: e.pageY - rect.top,
+	};
+};
+
+var appendToBuffer = function (pt) {
+	buffer.push(pt);
+	while (buffer.length > bufferSize) {
+		buffer.shift();
+	}
+};
+
+// Calculate the average point, starting at offset in the buffer
+var getAveragePoint = function (offset) {
+	var len = buffer.length;
+	if (len % 2 === 1 || len >= bufferSize) {
+		var totalX = 0;
+		var totalY = 0;
+		var pt, i;
+		var count = 0;
+		for (i = offset; i < len; i++) {
+			count++;
+			pt = buffer[i];
+			totalX += pt.x;
+			totalY += pt.y;
+		}
+		return {
+			x: totalX / count,
+			y: totalY / count,
+		};
+	}
+	return null;
+};
+
+var updateSvgPath = function () {
+	var pt = getAveragePoint(0);
+
+	if (pt) {
+		// Get the smoothed part of the path that will not change
+		strPath += " L" + pt.x + " " + pt.y;
+
+		// Get the last part of the path (close to the current mouse position)
+		// This part will change if the mouse moves again
+		var tmpPath = "";
+		for (var offset = 2; offset < buffer.length; offset += 2) {
+			pt = getAveragePoint(offset);
+			tmpPath += " L" + pt.x + " " + pt.y;
+		}
+
+		// Set the complete current path coordinates
+		path.setAttribute("d", strPath + tmpPath);
+	}
+};
+
+const presets = document.querySelectorAll(".preset");
+for (const preset of presets) {
+	preset.addEventListener("mousemove", (e) => {
+		console.log(preset.dataset.path);
+	});
+}

style.css

@@ -0,0 +1,27 @@
+body, html {
+    margin: 0;
+}
+
+body {
+    color: #22AFFF;
+}
+
+
+svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: currentColor;
+    border: 1px solid currentColor;
+}
+
+.preset {
+    display: inline-block;
+    border: 2px solid currentColor;
+    width: 32ch;
+    height: 18ch;
+    margin: 100px;
+}
+