Using texture() with vertex()

p5.js Coding Questions
1

I can use texture() successfully with plane() but I can’t seem to figure out how to use it with vertex(). Does p5.js support using texture() with a shape built using vertex() calls like this:

let pg;

function setup() {
  createCanvas(100, 100, WEBGL);
  pg = createGraphics(200, 200);
  pg.background(255);
  pg.fill(255, 0, 0);
  pg.rect(0, 60, 100, 40);
  pg.fill(0, 150, 150);
  pg.rect(0, 0, 100, 60);    
}

function draw() {
  beginShape();
  texture(pg);
  vertex(20, 20);
  vertex(80, 20);
  vertex(80, 80);
  vertex(20, 80);
  endShape(CLOSE);
}

Expected:

Screenshot%20plane
Screenshot plane.png972×1126 70.1 KB

Actual:
Shape is just black

2

Hi! You should call vertex() with 4 arguments. The first two are the x,y position of the vertex and the last two the UV position in the texture image.

https://editor.p5js.org/abe/sketches/jcpIf1fCr

let tex;

function setup() {
  createCanvas(400, 400, WEBGL);
  tex = createGraphics(200, 200);
  tex.background(255);
  tex.noStroke();
  for(var x=0; x<pg.width; x+=random(30)) {
    tex.fill(random(255), 0, 0);
    tex.rect(x, 50, 100, 100);
  }
}

function draw() {
  background(200);
  beginShape();
  texture(tex);
  vertex(100, -200, 0, 0);
  vertex(200, 0, 200, 0);
  vertex(-100, 200, 200, 200);
  vertex(-200, 0, 0, 200);
  endShape(CLOSE);
}

canvas

6 Likes
3

Here a more advanced example I just did:

a
a.png1918×945 44.9 KB

which is a fork of this older one


but with a generative texture featuring white words.

Note: I may be wrong, but I got the impression that in editor.p5js.org the UV coordinates are not normalized, but in openProcessing they are… Maybe this changed at some point and they run different versions of p5js?

4 Likes
4

OpenProcessing currently runs p5.js 0.73 – it is in the toolbar. Is there any way of checking what version editor.p5js.org currently? If not, maybe that should be a feature…

5

yes, that info might be good,
but when you download your sketch you can check

p5.min.js

and see

/*! p5.js v0.7.3 January 20, 2019 */
6

If both are using p5.js 0.7.3 why the example with the red stripes above uses uv coordinates with values between 0 and 200 (matching the image size) but Textured Wiggly uses normalized values between 0 and 1 (lines 70 and 71), and both work fine?

7

Not sure. Maybe run a diff on the two editor-based sketches / p5.min.js libs and see what the differences are? Or ask the devs.

8

but i see
openprocessing.org / settings/ engine / p5.js ( mouse over) v 0.7.2

snap_0037
snap_0037.jpg780×605 52.9 KB

you might need to manually UPGRADE the sketch
snap_0038

1 Like
9

That’s it. If I switch to 0.7.3 it stops working. I guess they switched to non-normalized UV on that version.

2 Likes