When i try to resize an image (https://p5js.org/reference/#/p5.Image/resize) the image gets all blurred. I have tried looking for solutions to this problem on the internet, and came to the conclusion that this had something to do with anti-aliasing? Is there anyway to turn this off?

[hojmax]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Which platform were you using when you encountered this?

• Mobile/Tablet (touch devices)
• Desktop/Laptop
• Others (specify if possible)

Details about the bug:

• p5.js version:
• Web browser and version:
• Operating System:
• Steps to reproduce this:

Feature enhancement details:

New feature details:

[lmccart]

@Hojmarken could you please post the code you are using and the image file you're working with?

[lmccart]

closing this for now, please reopen if you can post image file and code snippet so we can investigate further

[siusoon]

i found this problem as well and attached two images with the name blurred and starting. It is quite obvious that when it runs longer time, the image get blurred over time. Here is the code:

var eachImage = [];
var displayImage = [];
var started = false;

const folder ="images/";

function setup() {
createCanvas(1500,1000);
loadJSON('object.json', gotData);
background(180);
frameRate(2);
noLoop();
}

function draw(){
//console.log(floor(random(displayImage.length)));
if (started) {
var pickImage = displayImage[floor(random(displayImage.length))];
//tint(255, 240);
image(pickImage, random(-100,windowWidth-20), random(-100,windowHeight-50));
pickImage.resize(floor(random(500,900)),0); //images get blur over time
}
}

function gotData(gotImage) {
for (var i=0; i < gotImage['filename'].length; i++) {
eachImage.push(gotImage['filename'][i]);
console.log(folder + eachImage[i]);
displayImage[i] = loadImage(folder + eachImage[i]);
}
started = true;
loop();
}

[limzykenneth]

@siusoon You are resizing the image over and over again, image resize are not perfect processes especially if you downsized then upsized again you will lose details over time.

In your case, you would be better off copying the image from the displayImage array into the pickImage variable before resizing pickImage. See https://p5js.org/reference/#/p5.Image/copy

[siusoon]

@limzykenneth oh thanks! I will check it out.