# Using texture() with vertex()

**URL:** <https://discourse.processing.org/t/using-texture-with-vertex/8714>\
**Category:** Coding Questions\
**Created:** [February 25, 2019, 1:03pm UTC](https://discourse.processing.org/t/using-texture-with-vertex/8714 "2019-02-25T13:03:16Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![anthonygalea](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/anthonygalea/32/3852_2.png) [@anthonygalea](https://discourse.processing.org/u/anthonygalea)\
**Post date:** [February 25, 2019, 1:03pm UTC](https://discourse.processing.org/t/using-texture-with-vertex/8714/1 "2019-02-25T13:03:16Z")

</div>

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:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b953a1ac32ce44ebbb160d58a23248bddb08d169.png)

Actual:  
Shape is just black

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 25, 2019, 1:51pm UTC](https://discourse.processing.org/t/using-texture-with-vertex/8714/2 "2019-02-25T13:51:45Z")

</div>

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](https://editor.p5js.org/abe/sketches/jcpIf1fCr)

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/56514846ee8171daf6393e8df43f2606c86e8167.png)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 26, 2019, 8:22am UTC](https://discourse.processing.org/t/using-texture-with-vertex/8714/3 "2019-02-26T08:22:36Z")

</div>

Here a more advanced example I just did:

 ![a](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6e11465ef649542f3255b6edbbc2c41415784f9f.png)  

> **[Textured Wiggly - OpenProcessing](https://www.openprocessing.org/sketch/675134)**
>
> Calculating a thick line using polyline normals

which is a fork of this older one

> **[Wiggly - OpenProcessing](https://www.openprocessing.org/sketch/632717)**
>
> Calculating a thick line using polyline normals

  
but with a generative texture featuring white words.

Note: I may be wrong, but I got the impression that in [editor.p5js.org](http://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?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 26, 2019, 7:04pm UTC](https://discourse.processing.org/t/using-texture-with-vertex/8714/4 "2019-02-26T19:04:22Z")

</div>

> [@hamoid](#):
>
> they run different versions of p5js

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

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 27, 2019, 1:27am UTC](https://discourse.processing.org/t/using-texture-with-vertex/8714/5 "2019-02-27T01:27:57Z")

</div>

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

> p5.min.js

and see

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

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 27, 2019, 2:53am UTC](https://discourse.processing.org/t/using-texture-with-vertex/8714/6 "2019-02-27T02:53:50Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 27, 2019, 5:36am UTC](https://discourse.processing.org/t/using-texture-with-vertex/8714/7 "2019-02-27T05:36:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 27, 2019, 7:27am UTC](https://discourse.processing.org/t/using-texture-with-vertex/8714/8 "2019-02-27T07:27:58Z")

</div>

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

 ![snap_0037](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0a3ef64942b2984d38d698dd174d067b4107a410.jpeg)

you might need to manually UPGRADE the sketch  
 ![snap_0038](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/063642219193c3baf537cbec1b46137f604e3f8a.jpeg)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 27, 2019, 7:52am UTC](https://discourse.processing.org/t/using-texture-with-vertex/8714/9 "2019-02-27T07:52:31Z")

</div>

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