Combine pressure and radius to single radius value.

Radius smoothing now difference relative to the max-of-2 radiii instead of absolute values.

src/app.js

@@ -260,9 +260,8 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
       e.pointerId,
       room.addPath([
         ...mousePos,
-        e.pressure,
+        canvas.getStrokeRadius(e.pressure),
         canvas.getStrokeColour(),
-        canvas.stroke_radius,
       ]),
     )
   } else if (currentTool == tools.ERASER) {
@@ -284,9 +283,8 @@ canvas.input.addEventListener("strokemove", ({ detail: e }) => {
   if (currentTool == tools.PEN) {
     room.extendPath(pathIDsByPointerID.get(e.pointerId), [
       ...mousePos,
-      e.pressure,
+      canvas.getStrokeRadius(e.pressure),
       canvas.getStrokeColour(),
-      canvas.stroke_radius,
     ])
   } else if (currentTool == tools.ERASER) {
     erasePoint(mousePos)

src/canvas.js

@@ -56,7 +56,8 @@ const smoothPath = ([...path]) => {
     const dx = path[i][0] - path[i - 1][0]
     const dy = path[i][1] - path[i - 1][1]
     const dw = path[i][2] - path[i - 1][2]
-    const segmentsToSplit = Math.ceil(dw / MAX_PRESSURE_DELTA)
+    const normdw = dw / Math.max(0.05, Math.max(path[i][2], path[i - 1][2]))
+    const segmentsToSplit = Math.ceil(normdw / MAX_PRESSURE_DELTA)
     const newPoints = []
     for (let j = 1; j < segmentsToSplit; j++) {
       newPoints.push([
@@ -73,13 +74,6 @@ const smoothPath = ([...path]) => {
   return path
 }
 
-const getStrokeRadius = (pressure, radius) => {
-  return (
-    MIN_STROKE_RADIUS +
-    (radius + pressure) * (MAX_STROKE_RADIUS - MIN_STROKE_RADIUS)
-  )
-}
-
 export const input = new EventTarget()
 
 const createPathElem = (d, width) => {
@@ -92,14 +86,12 @@ const createPathElem = (d, width) => {
 export const renderPath = (id, points) => {
   points = points.filter(([x]) => x != null)
   let colour = ""
-  let radius = 0
 
   // Split up points into completely non-erased segments.
   let segments = [[]]
   for (const point of points) {
     colour = point[3]
-    radius = point[4]
-    if (point[5] != false) {
+    if (point[4] != false) {
       segments[segments.length - 1].push(point)
     } else {
       segments.push([])
@@ -136,8 +128,7 @@ export const renderPath = (id, points) => {
       circleElem.setAttribute("fill", colour)
       circleElem.setAttribute("cx", subpath[0][0])
       circleElem.setAttribute("cy", subpath[0][1])
-      circleElem.setAttribute("r", getStrokeRadius(subpath[0][2], radius))
-      console.log(getStrokeRadius(subpath[0][2], radius))
+      circleElem.setAttribute("r", subpath[0][2])
       pathGroupElem.appendChild(circleElem)
     } else {
       // Further split up segments based on thickness.
@@ -146,17 +137,13 @@ export const renderPath = (id, points) => {
       for (let i = 1; i < subpath_.length; i++) {
         if (subpath_[i][2] != w) {
           const d = lineFn([...subpath_.splice(0, i), subpath_[0]])
-          pathGroupElem.appendChild(
-            createPathElem(d, getStrokeRadius(w, radius) * 2),
-          )
+          pathGroupElem.appendChild(createPathElem(d, w * 2))
           w = subpath_[0][2]
           i = 1
         }
       }
       const d = lineFn(subpath_)
-      pathGroupElem.appendChild(
-        createPathElem(d, getStrokeRadius(w, radius) * 2),
-      )
+      pathGroupElem.appendChild(createPathElem(d, w * 2))
     }
   }
 }
@@ -196,3 +183,14 @@ export function getStrokeColour() {
 export function setStrokeRadius(radius) {
   stroke_radius = radius
 }
+
+const calculateStrokeRadius = (pressure, radius) => {
+  return (
+    MIN_STROKE_RADIUS +
+    (radius + pressure) * (MAX_STROKE_RADIUS - MIN_STROKE_RADIUS)
+  )
+}
+
+export function getStrokeRadius(pressure) {
+  return calculateStrokeRadius(pressure, stroke_radius)
+}

src/room.js

@@ -23,14 +23,14 @@ class Room extends EventTarget {
     this._y.destroy()
   }
 
-  addPath([x, y, w, colour, radius]) {
+  addPath([x, y, w, colour]) {
     const id = uuidv4()
-    this._y.share.strokeAdd.set(id, Y.Array).push([[x, y, w, colour, radius]])
+    this._y.share.strokeAdd.set(id, Y.Array).push([[x, y, w, colour]])
     return id
   }
 
-  extendPath(id, [x, y, w, colour, radius]) {
-    this._y.share.strokeAdd.get(id).push([[x, y, w, colour, radius]])
+  extendPath(id, [x, y, w, colour]) {
+    this._y.share.strokeAdd.get(id).push([[x, y, w, colour]])
   }
 
   getPaths() {