p5.js icon indicating copy to clipboard operation
p5.js copied to clipboard

Fill function is not working for certain orientations in WEBGL

Open isaacvr opened this issue 5 years ago • 5 comments

When I combine lines and curves, there are certain orientations where the fill function doesn't work properly. In the example below, I draw that shape (that is one of the stickers of the Ivy cube) horizontally and it doesn't fill the shape, but vertically it does. What is happening here?

Most appropriate sub-area of p5.js?

  • [ ] Accessibility (Web Accessibility)
  • [x] Color
  • [ ] Core/Environment/Rendering
  • [ ] Data
  • [ ] Dom
  • [ ] Events
  • [ ] Image
  • [ ] IO
  • [ ] Math
  • [ ] Typography
  • [ ] Utilities
  • [x] WebGL
  • [ ] Other (specify if possible)

Details about the bug:

  • p5.js version: 1.1.9
  • Web browser and version: Firefox 80.0 and Chrome 84.0.4147.135
  • Operating System: Windows 10
  • Steps to reproduce this:
function setup() {
  createCanvas(500, 500, WEBGL);
}

function draw() {
  background(255);

  translate(width / 2, height / 2);
  rotateX(PI / 6);

  stroke(0, 0, 0);
  strokeWeight(2);
  fill(255, 0, 0);

  beginShape();
  vertex(100, 0, 0);
  vertex(0, 0, 0);
  vertex(0, 0, 100);
  quadraticVertex(0, 0, 0, 100, 0, 0);
  endShape(CLOSE);
}

If we change the last vertex to (0, 100, 0), it works.

isaacvr avatar Sep 01 '20 02:09 isaacvr

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

welcome[bot] avatar Sep 01 '20 02:09 welcome[bot]

What do you mean by changing the last vertex to (0, 100, 0)? Like the last vertex(), or something in the quadraticVertex(), or...

xavierbradford avatar Oct 27 '20 19:10 xavierbradford

Ohhhh... You just have to comment out the translate() on line 8, and change the quadraticVertex() on line 19 to quadraticVertex(0, 100, 0, 100, 0, 0);

xavierbradford avatar Oct 27 '20 19:10 xavierbradford

I would like to work on this issue

vulongphan avatar Mar 13 '21 19:03 vulongphan

Thanks @vulongphan I just assigned you.

Qianqianye avatar Jun 28 '22 00:06 Qianqianye

Hi! This should be fixed as of https://github.com/processing/p5.js/pull/5914, so I'm going to close this for organizational purposes. This is not yet released, but once the next p5 version is out (greater than 1.5.0), feel free to open this again if you notice any further issues!

davepagurek avatar Jan 14 '23 21:01 davepagurek