Texture from createGraphics broken at seams

p5.js Beginners
1

Hi,
trying to put a graphic texture on a 3d object using createGraphics() and some black artefacts are always showing… is there a solution to fix this?
or am i doing something wrong?
see example here: https://codepen.io/wuwa/pen/ZEerewO

2

Hello,

I took this approach (unfinished):

  graphics = createGraphics(200,200);
  graphics.background('red');
  graphics.noStroke();
  graphics.fill('yellow');
  graphics.rect(0, 0,30,200);
  graphics.fill('red');
  graphics.rect(50,0,30,200);
  graphics.fill('yellow');
  graphics.rect(100,0,30,200);
  graphics.fill('red');
  graphics.rect(150,0,30,200);

I also displayed the shape to see what I was texturing with:

image(graphics, 0, 0);

image

Needs some work!
Back to work… only spent a moment on this.

I will leave this with you.

Updated:
You can equally space them and remove the background().

image

:)

3

thanks - this was what i was missing:
graphics.noStroke();

2 Likes