No example given for beginShape(TESS)

[TsgabiXD]

This issue has already been mentioned:
#3672

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version: p5.js v1.2.0 December 19, 2020
• Web browser and version: Microsoft Edge | 89.0.774.57
• Operating System: Windows 10
• Steps to reproduce this:

function setup() {
  createCanvas(800, 800, WEBGL);
}

function mouseOnCanvas() {
  return mouseX > 0 && mouseX < width && mouseY < height && mouseY > 0;
}

function makeSine(relStart = -width / 2, absEnd = height, amplitude = 200, wavelenght = 0.025, heightOffset = 0, resolution = 10) {
  for (let i = 0 + relStart; i <= absEnd; i++) {
    if (i % resolution === 0) vertex(i, Math.sin(i * wavelenght) * amplitude + heightOffset);
  }
}

function makeSineReverse(absEnd, relStart, amplitude, wavelenght, heightOffset, resolution = 10) {
  for (let i = 0 + relStart; i >= absEnd; i--) {
    if (i % resolution === 0) vertex(i, Math.sin(i * wavelenght) * amplitude + heightOffset);
  }
}

function drawShape() {
  let relStart = -200,
    absEnd = 300,
    amplitude = 50,
    wavelenght = 0.017,
    top = -150,
    bottom = 150,
    resolution = 20; // the lower the better
    
  beginShape();
  makeSine(relStart, absEnd, amplitude, wavelenght, top, resolution);
  makeSineReverse(relStart, absEnd, amplitude, wavelenght, bottom, resolution);
  endShape(CLOSE);
}

function draw() {
  background(0);
  strokeWeight(4);
  stroke(255);
  noFill();
  // noStroke();
  fill(255, 0, 0);

  drawShape();
}

[stalgiag]

Implicit tesselation for custom shapes was causing issues with other behavior. As of #4147, explicit tesselation by writing TESS as the parameter for beginShape(TESS) is required. Your example works as expected with this.

Perhaps a TESS example for the beginShape reference is in order. This could be a good issue for someone interested in contributing.

[TsgabiXD]

Oh sorry.

[stalgiag]

Hi @TsgabiXD no need to be sorry! I am reopening your issue because it was helpful in indicating that we should likely document this behavior a little better in the examples for beginShape.

[TsgabiXD]

Thank you.

[ShenpaiSharma]

Hi @stalgiag, I would like to work on this

[ShenpaiSharma]

Hi, @stalgiag @montoyamoraga; I have added an example and also added some descriptions. Please check if it is okay:

Description: