diff --git a/src/shapes.js b/src/shapes.js
index 213b02be1da496e96afbaed22131e2f802236130..dbfa79c981b709725b85f07f2b63401a2b978fc9 100644
--- a/src/shapes.js
+++ b/src/shapes.js
@@ -16,7 +16,8 @@ function getDistance(p1, p2) {
   return Math.hypot(x1 - x0, y1 - y0)
 }
 
-function vectorLength([x, y]) {
+function vectorLen(v) {
+  const [x, y] = v
   return Math.hypot(x, y)
 }
 
@@ -26,7 +27,7 @@ function diffVector([x0, y0], [x1, y1]) {
 
 function angleBetweenVectors(p1, p2) {
   const [[x0, y0], [x1, y1]] = [p1, p2]
-  return Math.acos((x0 * x1 + y0 * y1) / (vectorLength(p1) * vectorLength(p2)))
+  return Math.acos((x0 * x1 + y0 * y1) / (vectorLen(p1) * vectorLen(p2)))
 }
 
 function boundingCoords(points) {
@@ -127,7 +128,6 @@ function couldBeLine(points) {
   )
   const pivot = points[0]
   let cumulativeThreshold = 0
-
   for (let i = 2; i < points.length; i++) {
     const prev = points[i - 1]
     const curr = points[i]
@@ -136,7 +136,7 @@ function couldBeLine(points) {
     const angle = angleBetweenVectors(d1, d2)
 
     if (Math.abs(angle) > LINE_ANGLE_THRESHOLD) {
-      const d2Len = vectorLength(d2)
+      const d2Len = vectorLen(d2)
       if (cumulativeThreshold < vectorThreshold && d2Len < vectorThreshold) {
         cumulativeThreshold += d2Len
         continue
diff --git a/src/tool-selection.js b/src/tool-selection.js
index e8b0e8c1f27b23ac983191b3670b3009a24bb67c..2928c0fa8fcb05da4ebab5272826f40ec63ec58d 100644
--- a/src/tool-selection.js
+++ b/src/tool-selection.js
@@ -27,8 +27,20 @@ const hideElement = (element) => {
   element.style.display = "none"
 }
 
-HTML.strokeColorPicker.setAttribute("value", strokeColour)
-HTML.strokeRadiusSlider.setAttribute("value", strokeRadius)
+function setStrokeColour(colour) {
+  HTML.rectangle.style.backgroundColor = colour
+  HTML.strokeColorPicker.value = colour
+  HTML.labelColours.style.backgroundColor = colour
+  strokeColour = colour
+}
+
+function setStrokeRadius(value) {
+  HTML.strokeRadiusSlider.setAttribute("value", value)
+  strokeRadius = value / 2
+}
+
+setStrokeColour(strokeColour)
+setStrokeRadius(strokeRadius)
 
 HTML.recognitionModeButton.addEventListener("click", () => {
   recognitionEnabled = !recognitionEnabled
@@ -57,9 +69,7 @@ HTML.eraserButton.addEventListener("click", () => {
 
 HTML.strokeColorPicker.addEventListener("change", () => {
   const paletteColour = event.target.value
-  HTML.rectangle.style.backgroundColor = paletteColour
-  HTML.labelColours.style.backgroundColor = paletteColour
-  strokeColour = paletteColour
+  setStrokeColour(paletteColour)
 })
 
 HTML.strokeRadiusSlider.oninput = function() {
@@ -72,8 +82,7 @@ HTML.output.innerHTML = HTML.strokeRadiusSlider.value
 // If the page has been refreshed
 if (performance.navigation.type == 1) {
   const sliderValue = parseInt(HTML.output.innerHTML)
-  HTML.strokeRadiusSlider.setAttribute("value", sliderValue)
-  strokeRadius = sliderValue / 2
+  setStrokeRadius(sliderValue)
 }
 
 const x = window.matchMedia(
@@ -111,10 +120,7 @@ const svg = HTML.wheel.children
 for (let i = 1; i < svg.length; i++) {
   svg[i].addEventListener("click", (event) => {
     const paletteColour = event.target.getAttribute("fill")
-    HTML.rectangle.style.backgroundColor = paletteColour
-    HTML.strokeColorPicker.value = paletteColour
-    HTML.labelColours.style.backgroundColor = paletteColour
-    strokeColour = paletteColour
+    setStrokeColour(paletteColour)
     hideElement(HTML.palette)
   })
 }