GoToLoop · January 2, 2026 23:21 · Jun 19, 2022 · Jun 19, 2022 · Jun 19, 2022 · Jul 11, 2020
diff --git a/resizeNN.js b/resizeNN.js
@@ -26,8 +26,8 @@ p5.Image.prototype.resizeNN = function (w, h) {
   if (w === width && h === height || !(w | h))  return this;
 
   // Scale dimension parameters:
-  w || (w = h*width  / height | 0); // when only parameter w is 0
-  h || (h = w*height / width  | 0); // when only parameter h is 0
+  if (!w)  w = h*width  / height | 0; // only when parameter w is 0
+  if (!h)  h = w*height / width  | 0; // only when parameter h is 0
 
   const img = new p5.Image(w, h), // creates temporary image
         sx = w / width, sy = h / height; // scaled coords. for current image

diff --git a/resizeNN.js b/resizeNN.js
@@ -39,10 +39,10 @@ p5.Image.prototype.resizeNN = function (w, h) {
         imgInt = new Int32Array(img.pixels.buffer);
 
   // Transfer current to temporary pixels[] by 4 bytes (32-bit) at once:
-  for (let y = 0; y < h; ) {
+  for (var x = 0, y = 0; y < h; x = 0) {
     const curRow = width * ~~(y/sy), tgtRow = w * y++;
 
-    for (let x = 0; x < w; ) {
+    while (x < w) {
       const curIdx = curRow + ~~(x/sx), tgtIdx = tgtRow + x++;
       imgInt[tgtIdx] = pixInt[curIdx];
     }

diff --git a/resizeNN.js b/resizeNN.js
@@ -1,11 +1,12 @@
 /**
  * Resize the image to a new width and height using nearest neighbor algorithm.
- * To make the image scale proportionally, use 0 as the value for the wide or high parameters.
+ * To make the image scale proportionally,
+ * use 0 as the value for the wide or high parameters.
  * For instance, to make the width of an image 150 pixels,
  * and change the height using the same proportion, use resize(150, 0). 
  * Otherwise same usage as the regular resize().
  * 
- * Note: Disproportionate resizing squashes the "pixels" from squares to rectangles. 
+ * Note: Disproportionate resizing squashes "pixels" from squares to rectangles. 
  * This works about 10 times slower than the regular resize.
  * Any suggestions for performance increase are welcome.
  */
@@ -16,7 +17,7 @@ p5.Image.prototype.resizeNN = function (w, h) {
   "use strict";
 
   // Locally cache current image's canvas' dimension properties:
-  const {width, height} = this.canvas;
+  const { width, height } = this.canvas;
 
   // Sanitize dimension parameters:
   w = ~~Math.abs(w), h = ~~Math.abs(h);
@@ -47,11 +48,11 @@ p5.Image.prototype.resizeNN = function (w, h) {
     }
   }
 
-  img.updatePixels(); // updates temporary 8-bit RGBa pixels[] w/ its current state
+  img.updatePixels(); // updates temp 8-bit RGBa pixels[] w/ its current state
 
   // Resize current image to temporary image's dimensions:
   this.canvas.width = this.width = w, this.canvas.height = this.height = h;
   this.drawingContext.drawImage(img.canvas, 0, 0, w, h, 0, 0, w, h);
 
   return this;
-};
+};
diff --git a/resizeNN.js b/resizeNN.js
@@ -10,6 +10,8 @@
  * Any suggestions for performance increase are welcome.
  */
 
+// https://GitHub.com/processing/p5.js/issues/1845
+
 p5.Image.prototype.resizeNN = function (w, h) {
   "use strict";
 

diff --git a/resizeNN.js b/resizeNN.js
@@ -1,5 +1,5 @@
 /**
- * Resize the image to a new width and height using nearest neigbor algorithm.
+ * Resize the image to a new width and height using nearest neighbor algorithm.
  * To make the image scale proportionally, use 0 as the value for the wide or high parameters.
  * For instance, to make the width of an image 150 pixels,
  * and change the height using the same proportion, use resize(150, 0). 

diff --git a/resizeNN.js b/resizeNN.js
@@ -32,8 +32,8 @@ p5.Image.prototype.resizeNN = function (w, h) {
   this.loadPixels(), img.loadPixels(); // initializes both 8-bit RGBa pixels[]
 
   // Create 32-bit viewers for current & temporary 8-bit RGBa pixels[]:
-  const pixInt = new Uint32Array(this.pixels.buffer),
-        imgInt = new Uint32Array(img.pixels.buffer);
+  const pixInt = new Int32Array(this.pixels.buffer),
+        imgInt = new Int32Array(img.pixels.buffer);
 
   // Transfer current to temporary pixels[] by 4 bytes (32-bit) at once:
   for (let y = 0; y < h; ) {

diff --git a/resizeNN.js b/resizeNN.js
@@ -17,7 +17,7 @@ p5.Image.prototype.resizeNN = function (w, h) {
   const {width, height} = this.canvas;
 
   // Sanitize dimension parameters:
-  w = ~~Math.abs(w), h = ~~(Math.abs(h);
+  w = ~~Math.abs(w), h = ~~Math.abs(h);
 
   // Quit prematurely if both dimensions are equal or parameters are both 0:
   if (w === width && h === height || !(w | h))  return this;

diff --git a/resizeNN.js b/resizeNN.js
@@ -17,7 +17,7 @@ p5.Image.prototype.resizeNN = function (w, h) {
   const {width, height} = this.canvas;
 
   // Sanitize dimension parameters:
-  w = Math.round(Math.abs(w)), h = Math.round(Math.abs(h));
+  w = ~~Math.abs(w), h = ~~(Math.abs(h);
 
   // Quit prematurely if both dimensions are equal or parameters are both 0:
   if (w === width && h === height || !(w | h))  return this;

diff --git a/resizeNN.js b/resizeNN.js
@@ -23,8 +23,8 @@ p5.Image.prototype.resizeNN = function (w, h) {
   if (w === width && h === height || !(w | h))  return this;
 
   // Scale dimension parameters:
-  if (!w)       w = h*width  / height | 0; // when only w is 0
-  else if (!h)  h = w*height / width  | 0; // when only h is 0
+  w || (w = h*width  / height | 0); // when only parameter w is 0
+  h || (h = w*height / width  | 0); // when only parameter h is 0
 
   const img = new p5.Image(w, h), // creates temporary image
         sx = w / width, sy = h / height; // scaled coords. for current image

diff --git a/resizeNN.js b/resizeNN.js
@@ -20,7 +20,7 @@ p5.Image.prototype.resizeNN = function (w, h) {
   w = Math.round(Math.abs(w)), h = Math.round(Math.abs(h));
 
   // Quit prematurely if both dimensions are equal or parameters are both 0:
-  if (w === width && h === height || !(w | h))  return;
+  if (w === width && h === height || !(w | h))  return this;
 
   // Scale dimension parameters:
   if (!w)       w = h*width  / height | 0; // when only w is 0
@@ -50,4 +50,6 @@ p5.Image.prototype.resizeNN = function (w, h) {
   // Resize current image to temporary image's dimensions:
   this.canvas.width = this.width = w, this.canvas.height = this.height = h;
   this.drawingContext.drawImage(img.canvas, 0, 0, w, h, 0, 0, w, h);
+
+  return this;
 };
diff --git a/resizeNN.js b/resizeNN.js
@@ -19,10 +19,12 @@ p5.Image.prototype.resizeNN = function (w, h) {
   // Sanitize dimension parameters:
   w = Math.round(Math.abs(w)), h = Math.round(Math.abs(h));
 
+  // Quit prematurely if both dimensions are equal or parameters are both 0:
+  if (w === width && h === height || !(w | h))  return;
+
   // Scale dimension parameters:
-  if (!(w | h))  w = width, h = height;       // when both parameters are 0
-  else if (!w)   w = h*width  / height | 0;   // when only w is 0
-  else if (!h)   h = w*height / width  | 0;   // when only h is 0
+  if (!w)       w = h*width  / height | 0; // when only w is 0
+  else if (!h)  h = w*height / width  | 0; // when only h is 0
 
   const img = new p5.Image(w, h), // creates temporary image
         sx = w / width, sy = h / height; // scaled coords. for current image

diff --git a/resizeNN.js b/resizeNN.js
@@ -25,8 +25,7 @@ p5.Image.prototype.resizeNN = function (w, h) {
   else if (!h)   h = w*height / width  | 0;   // when only h is 0
 
   const img = new p5.Image(w, h), // creates temporary image
-        cw = this.width, // width of current image
-        sx = w / cw, sy = h / this.height; // scaled coords. for current image
+        sx = w / width, sy = h / height; // scaled coords. for current image
 
   this.loadPixels(), img.loadPixels(); // initializes both 8-bit RGBa pixels[]
 
@@ -36,7 +35,7 @@ p5.Image.prototype.resizeNN = function (w, h) {
 
   // Transfer current to temporary pixels[] by 4 bytes (32-bit) at once:
   for (let y = 0; y < h; ) {
-    const curRow = cw * ~~(y/sy), tgtRow = w * y++;
+    const curRow = width * ~~(y/sy), tgtRow = w * y++;
 
     for (let x = 0; x < w; ) {
       const curIdx = curRow + ~~(x/sx), tgtIdx = tgtRow + x++;

diff --git a/resizeNN.js b/resizeNN.js
@@ -13,7 +13,7 @@
 p5.Image.prototype.resizeNN = function (w, h) {
   "use strict";
 
-  // Locally cache canvas' dimension properties:
+  // Locally cache current image's canvas' dimension properties:
   const {width, height} = this.canvas;
 
   // Sanitize dimension parameters:

diff --git a/resizeNN.js b/resizeNN.js
@@ -36,7 +36,7 @@ p5.Image.prototype.resizeNN = function (w, h) {
 
   // Transfer current to temporary pixels[] by 4 bytes (32-bit) at once:
   for (let y = 0; y < h; ) {
-    const curRow = ~~(y/sy) * cw, tgtRow = y++ * w;
+    const curRow = cw * ~~(y/sy), tgtRow = w * y++;
 
     for (let x = 0; x < w; ) {
       const curIdx = curRow + ~~(x/sx), tgtIdx = tgtRow + x++;

diff --git a/resizeNN.js b/resizeNN.js
@@ -38,8 +38,8 @@ p5.Image.prototype.resizeNN = function (w, h) {
   for (let y = 0; y < h; ) {
     const curRow = ~~(y/sy) * cw, tgtRow = y++ * w;
 
-    for (let x = 0; x < w; ++x) {
-      const curIdx = curRow + ~~(x/sx), tgtIdx = tgtRow + x;
+    for (let x = 0; x < w; ) {
+      const curIdx = curRow + ~~(x/sx), tgtIdx = tgtRow + x++;
       imgInt[tgtIdx] = pixInt[curIdx];
     }
   }

diff --git a/resizeNN.js b/resizeNN.js
@@ -1,52 +1,52 @@
 /**
- * Resize the image to a new width and height using nearest neigbor algorithm. To make the image scale
- * proportionally, use 0 as the value for the wide or high parameter.
- * For instance, to make the width of an image 150 pixels, and change
- * the height using the same proportion, use resize(150, 0). 
+ * Resize the image to a new width and height using nearest neigbor algorithm.
+ * To make the image scale proportionally, use 0 as the value for the wide or high parameters.
+ * For instance, to make the width of an image 150 pixels,
+ * and change the height using the same proportion, use resize(150, 0). 
  * Otherwise same usage as the regular resize().
  * 
  * Note: Disproportionate resizing squashes the "pixels" from squares to rectangles. 
- * This works about 10 times slower than the regular resize. Any suggestions for performance increase are welcome.
+ * This works about 10 times slower than the regular resize.
+ * Any suggestions for performance increase are welcome.
  */
 
-p5.Image.prototype.resizeNN = function(width, height) {
-  if (width === 0 && height === 0) {
-    width = this.canvas.width;
-    height = this.canvas.height;
-  } else if (width === 0) {
-    width = this.canvas.width * height / this.canvas.height;
-  } else if (height === 0) {
-    height = this.canvas.height * width / this.canvas.width;
-  }
+p5.Image.prototype.resizeNN = function (w, h) {
+  "use strict";
+
+  // Locally cache canvas' dimension properties:
+  const {width, height} = this.canvas;
+
+  // Sanitize dimension parameters:
+  w = Math.round(Math.abs(w)), h = Math.round(Math.abs(h));
+
+  // Scale dimension parameters:
+  if (!(w | h))  w = width, h = height;       // when both parameters are 0
+  else if (!w)   w = h*width  / height | 0;   // when only w is 0
+  else if (!h)   h = w*height / width  | 0;   // when only h is 0
+
+  const img = new p5.Image(w, h), // creates temporary image
+        cw = this.width, // width of current image
+        sx = w / cw, sy = h / this.height; // scaled coords. for current image
+
+  this.loadPixels(), img.loadPixels(); // initializes both 8-bit RGBa pixels[]
+
+  // Create 32-bit viewers for current & temporary 8-bit RGBa pixels[]:
+  const pixInt = new Uint32Array(this.pixels.buffer),
+        imgInt = new Uint32Array(img.pixels.buffer);
+
+  // Transfer current to temporary pixels[] by 4 bytes (32-bit) at once:
+  for (let y = 0; y < h; ) {
+    const curRow = ~~(y/sy) * cw, tgtRow = y++ * w;
 
-  width = Math.floor(width);
-  height = Math.floor(height);
-
-  var temp = createImage(width,height),
-    xScale = width / this.width ,
-    yScale = height / this.height
-
-  this.loadPixels()
-  temp.loadPixels()
-  for(var x=0; x<temp.width; x++) {
-    for(var y=0; y<temp.height; y++) {
-      var sourceInd = 4*(Math.floor(y/yScale)*this.width + Math.floor(x/xScale))
-      var targetInd = 4*(y*temp.width + x)
-      var sourceP = this.pixels.slice(sourceInd,sourceInd+4)//this.get(x/wScale, y/hScale)
-      temp.pixels[targetInd] = sourceP[0]
-      temp.pixels[targetInd+1] = sourceP[1]
-      temp.pixels[targetInd+2] = sourceP[2]
-      temp.pixels[targetInd+3] = sourceP[3]
+    for (let x = 0; x < w; ++x) {
+      const curIdx = curRow + ~~(x/sx), tgtIdx = tgtRow + x;
+      imgInt[tgtIdx] = pixInt[curIdx];
     }
   }
-  temp.updatePixels()
-  this.updatePixels()
 
-  this.canvas.width = this.width = width;
-  this.canvas.height = this.height = height;
+  img.updatePixels(); // updates temporary 8-bit RGBa pixels[] w/ its current state
 
-  this.drawingContext.drawImage(temp.canvas,
-    0, 0, width, height,
-    0, 0, width, height
-  )
+  // Resize current image to temporary image's dimensions:
+  this.canvas.width = this.width = w, this.canvas.height = this.height = h;
+  this.drawingContext.drawImage(img.canvas, 0, 0, w, h, 0, 0, w, h);
 };
diff --git a/resizeNN.js b/resizeNN.js
@@ -3,9 +3,12 @@
  * proportionally, use 0 as the value for the wide or high parameter.
  * For instance, to make the width of an image 150 pixels, and change
  * the height using the same proportion, use resize(150, 0). 
+ * Otherwise same usage as the regular resize().
  * 
- **** Note: Disproportionate resizing squashes the "pixels" from squares to rectangles. 
+ * Note: Disproportionate resizing squashes the "pixels" from squares to rectangles. 
+ * This works about 10 times slower than the regular resize. Any suggestions for performance increase are welcome.
  */
+
 p5.Image.prototype.resizeNN = function(width, height) {
   if (width === 0 && height === 0) {
     width = this.canvas.width;
@@ -20,16 +23,20 @@ p5.Image.prototype.resizeNN = function(width, height) {
   height = Math.floor(height);
 
   var temp = createImage(width,height),
-    wScale = width / this.width ,
-    hScale = height / this.height
+    xScale = width / this.width ,
+    yScale = height / this.height
 
   this.loadPixels()
   temp.loadPixels()
   for(var x=0; x<temp.width; x++) {
     for(var y=0; y<temp.height; y++) {
-      // var ind = 4*(y*img.width + x)
-      var sourceP = this.get(1.0*x/wScale, 1.0*y/hScale)
-      temp.set(x,y,sourceP)
+      var sourceInd = 4*(Math.floor(y/yScale)*this.width + Math.floor(x/xScale))
+      var targetInd = 4*(y*temp.width + x)
+      var sourceP = this.pixels.slice(sourceInd,sourceInd+4)//this.get(x/wScale, y/hScale)
+      temp.pixels[targetInd] = sourceP[0]
+      temp.pixels[targetInd+1] = sourceP[1]
+      temp.pixels[targetInd+2] = sourceP[2]
+      temp.pixels[targetInd+3] = sourceP[3]
     }
   }
   temp.updatePixels()
@@ -38,10 +45,8 @@ p5.Image.prototype.resizeNN = function(width, height) {
   this.canvas.width = this.width = width;
   this.canvas.height = this.height = height;
 
-  console.log(temp)
-
   this.drawingContext.drawImage(temp.canvas,
     0, 0, width, height,
     0, 0, width, height
-  );
+  )
 };
diff --git a/resizeNN.js b/resizeNN.js
@@ -4,7 +4,7 @@
  * For instance, to make the width of an image 150 pixels, and change
  * the height using the same proportion, use resize(150, 0). 
  * 
- * Note: Disproportionate resizing squashes the "pixels" from squares to rectangles. 
+ **** Note: Disproportionate resizing squashes the "pixels" from squares to rectangles. 
  */
 p5.Image.prototype.resizeNN = function(width, height) {
   if (width === 0 && height === 0) {

diff --git a/resizeNN.js b/resizeNN.js
@@ -0,0 +1,47 @@
+/**
+ * Resize the image to a new width and height using nearest neigbor algorithm. To make the image scale
+ * proportionally, use 0 as the value for the wide or high parameter.
+ * For instance, to make the width of an image 150 pixels, and change
+ * the height using the same proportion, use resize(150, 0). 
+ * 
+ * Note: Disproportionate resizing squashes the "pixels" from squares to rectangles. 
+ */
+p5.Image.prototype.resizeNN = function(width, height) {
+  if (width === 0 && height === 0) {
+    width = this.canvas.width;
+    height = this.canvas.height;
+  } else if (width === 0) {
+    width = this.canvas.width * height / this.canvas.height;
+  } else if (height === 0) {
+    height = this.canvas.height * width / this.canvas.width;
+  }
+
+  width = Math.floor(width);
+  height = Math.floor(height);
+
+  var temp = createImage(width,height),
+    wScale = width / this.width ,
+    hScale = height / this.height
+
+  this.loadPixels()
+  temp.loadPixels()
+  for(var x=0; x<temp.width; x++) {
+    for(var y=0; y<temp.height; y++) {
+      // var ind = 4*(y*img.width + x)
+      var sourceP = this.get(1.0*x/wScale, 1.0*y/hScale)
+      temp.set(x,y,sourceP)
+    }
+  }
+  temp.updatePixels()
+  this.updatePixels()
+
+  this.canvas.width = this.width = width;
+  this.canvas.height = this.height = height;
+
+  console.log(temp)
+
+  this.drawingContext.drawImage(temp.canvas,
+    0, 0, width, height,
+    0, 0, width, height
+  );
+};
No results found