processing · NavyaNayer · Apr 2, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>P5 Sketch</title>
+  <!-- Add full p5.js with WebGL support -->
+  <script src="lib/p5.js"></script>
+
+  <script src="test_tint.js"></script>
+  <style>
+    #debug {
+      position: fixed;
+      top: 10px;
+      left: 10px;
+      background: #333;
+      color: white;
+      padding: 10px;
+      font-family: monospace;
+    }
+  </style>
+</head>
+<body>
+  <div id="debug"></div>
+</body>
+</html>
diff --git a/src/image/loading_displaying.js b/src/image/loading_displaying.js
@@ -1378,7 +1378,7 @@ p5.prototype.tint = function(...args) {
  * </div>
  */
 p5.prototype.noTint = function() {
-  this._renderer._tint = null;
+  this._renderer._tint = [255, 255, 255, 255];
 };
 
 /**
@@ -1501,4 +1501,4 @@ p5.prototype.imageMode = function(m) {
   }
 };
 
-export default p5;
+export default p5;
diff --git a/src/webgl/p5.RendererGL.js b/src/webgl/p5.RendererGL.js
@@ -2545,4 +2545,4 @@ p5.prototype._assert3d = function (name) {
 
 p5.RendererGL.prototype.tessyVertexSize = 12;
 
-export default p5.RendererGL;
+export default p5.RendererGL;
diff --git a/src/webgl/p5.Shader.js b/src/webgl/p5.Shader.js
@@ -1494,4 +1494,4 @@ p5.Shader = class {
   }
 };
 
-export default p5.Shader;
+export default p5.Shader;
diff --git a/src/webgl/shaders/basic.frag b/src/webgl/shaders/basic.frag
@@ -3,4 +3,4 @@ void main(void) {
   HOOK_beforeFragment();
   OUT_COLOR = HOOK_getFinalColor(vec4(vColor.rgb, 1.) * vColor.a);
   HOOK_afterFragment();
-}
+}
diff --git a/test_tint.js b/test_tint.js
@@ -0,0 +1,52 @@
+let img;
+let tintOn = true;
+let button;
+
+function preload() {
+  img = loadImage('testfile.png');
+}
+
+function setup() {
+  createCanvas(600, 400);
+
+  // Create button
+  button = createButton('Toggle Tint');
+  button.position(10, height + 10);
+  button.mousePressed(toggleTint);
+
+  // Initial button styling
+  button.style('background-color', '#4CAF50');
+  button.style('color', 'white');
+  button.style('padding', '10px 20px');
+  button.style('border', 'none');
+  button.style('border-radius', '4px');
+  button.style('cursor', 'pointer');
+}
+
+function draw() {
+  background(220);
+
+  // Apply tint if enabled
+  if (tintOn) {
+    tint(255, 0, 0); // Red tint
+  } else {
+    noTint();
+  }
+
+  // Draw image centered
+  imageMode(CENTER);
+  image(img, width/2, height/2);
+
+  // Add text to show current state
+  noTint();  // Reset tint for text
+  fill(0);
+  textSize(16);
+  textAlign(LEFT, TOP);
+  text('Tint: ' + (tintOn ? 'ON' : 'OFF'), 10, 10);
+}
+
+function toggleTint() {
+  tintOn = !tintOn;
+  // Update button color based on state
+  button.style('background-color', tintOn ? '#4CAF50' : '#f44336');
+}
diff --git a/testfile.png b/testfile.png
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2545,4 +2545,4 @@ p5.prototype._assert3d = function (name) {

		p5.RendererGL.prototype.tessyVertexSize = 12;

		export default p5.RendererGL;
		export default p5.RendererGL;
-Original file line number
+Diff line change
@@ Expand Up / @@ -1494,4 +1494,4 @@ p5.Shader = class { @@
       }
     };
-    export default p5.Shader;
+    export default p5.Shader;