CODEWITHSUNDEEP
p5.js
tjr226
tjr226

Reputation: 675

How to remove whitespace from p5.js rendered image?

I would like to use p5.js to tile many images together.

This code renders the two images stacked vertically, which is what I want, but it does so within a 100x100 pixel image.

This creates a bunch of undesired whitespace in the rendered image.

let img;
let img2;
function preload() {
  img = loadImage('./assets/2.png');
  img2 = loadImage('./assets/3.png')
}
function setup() {
  image(img, 0, 0, 24, 24);
  image(img2, 0, 24, 24, 24);
}

I also tried changing the size of the p5.js canvas by adding this line of code to the beginning of the file. I planned to start with (50,50) to avoid any problems that might arise by cutting off the images.

But after adding this line of code, nothing rendered at all.

let c = createCanvas(50,50);

What's the best way to fix this problem?

Upvotes: 0

Views: 77

Answers (1)

tjr226
tjr226

Reputation: 675

If you move the createCanvas() function inside the setup() function, it works correctly.

function setup() {
  let c = createCanvas(24,48);
  image(img, 0, 0, 24, 24);
  image(img2, 0, 24, 24, 24);
}

Upvotes: 1

Related Questions