From 08e33ba3f5343ce9bf5838965fe42d12fd8a8666 Mon Sep 17 00:00:00 2001
From: Anunay <me@anu.ninja>
Date: Mon, 21 Jun 2021 17:41:49 +0530
Subject: [PATCH] added pressure sensitivity

---
 index.html |  7 +++++--
 paint.css  |  9 +++++++++
 paint.js   | 21 ++++++++++++++++-----
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 8374af1..0970648 100644
--- a/index.html
+++ b/index.html
@@ -29,9 +29,12 @@
                 <div class="control-label">Bristle Count</div>
                 <div id="bristles-slider" class="slider"></div>
 
-                <div class="control-label">Brush Size</div>
+                <div class="control-label">Brush Size, Stylus Pressure Support <input type="checkbox" class="checkbox" id="stylus-pressure-support" /></div>
+                
                 <div id="size-slider" class="slider"></div>
-
+               
+               
+                
                 <div class="control-label">Paint Color</div>
 
                 <div id="undo-button" class="button">Undo</div><div id="redo-button" class="button">Redo</div>
diff --git a/paint.css b/paint.css
index 0a4c157..f13abff 100644
--- a/paint.css
+++ b/paint.css
@@ -42,6 +42,15 @@ body {
 
     pointer-events: auto;
 }
+.checkbox {
+    display: inline-block;
+    text-align: center;
+    color: white;
+
+    cursor: pointer;
+
+    pointer-events: auto;
+}
 
 #clear-button {
     margin-left: 30px;
diff --git a/paint.js b/paint.js
index 7c0d3ea..ad39d7b 100644
--- a/paint.js
+++ b/paint.js
@@ -337,7 +337,7 @@ var Paint = (function () {
             this.brushX = 0;
             this.brushY = 0;
 
-            this.brushScale = 50;
+            this.brushScale = 5;
 
             this.brushColorHSVA = [Math.random(), 1, 1, 0.8];
 
@@ -429,7 +429,7 @@ var Paint = (function () {
 
             this.refreshDoButtons();
 
-
+            this.stylusButton = document.getElementById('stylus-pressure-support');
 
             this.mainProjectionMatrix = makeOrthographicMatrix(new Float32Array(16), 0.0, this.canvas.width, 0, this.canvas.height, -5000.0, 5000.0);
 
@@ -1186,13 +1186,16 @@ var Paint = (function () {
         var scrollDelta = event.deltaY < 0.0 ? -1.0 : 1.0;
 
         this.brushScale = Utilities.clamp(this.brushScale + scrollDelta * -5.0, MIN_BRUSH_SCALE, MAX_BRUSH_SCALE);
-
         this.brushSizeSlider.setValue(this.brushScale);
     };
 
 
     Paint.prototype.onTouchStart = function (event) {
         event.preventDefault();
+        if(this.stylusButton.checked){
+            this.brushScale = Utilities.clamp(event.targetTouches[0].force*100, MIN_BRUSH_SCALE, MAX_BRUSH_SCALE);
+            this.brushSizeSlider.setValue(this.brushScale);
+        }
 
         if (event.touches.length === 1) { //if this is the first touch
 
@@ -1212,13 +1215,19 @@ var Paint = (function () {
 
     Paint.prototype.onTouchMove = function (event) {
         event.preventDefault();
+        if(this.stylusButton.checked){
+            this.brushScale = Utilities.clamp(event.targetTouches[0].force*100, MIN_BRUSH_SCALE, MAX_BRUSH_SCALE);
+            this.brushSizeSlider.setValue(this.brushScale);
+        }
 
         this.onMouseMove(event.targetTouches[0]);
     };
 
     Paint.prototype.onTouchEnd = function (event) {
         event.preventDefault();
-
+        if(this.stylusButton.checked){
+            this.brushSizeSlider.setValue(5);
+        }
         if (event.touches.length > 0) return; //don't fire if there are still touches remaining
 
         this.onMouseUp({});
@@ -1226,7 +1235,9 @@ var Paint = (function () {
 
     Paint.prototype.onTouchCancel = function (event) {
         event.preventDefault();
-
+        if(this.stylusButton.checked){
+            this.brushSizeSlider.setValue(5);
+        }
         if (event.touches.length > 0) return; //don't fire if there are still touches remaining
 
         this.onMouseUp({});