processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.13k stars 3.23k forks source link

Beginning of WebGL curves don't have a cap since v1.8 #6816

Open davepagurek opened 4 months ago

davepagurek commented 4 months ago

Most appropriate sub-area of p5.js?

p5.js version

1.8.0 through to 1.9.0

Web browser and version

Firefox 117

Operating system

MacOS 14.2.1

Steps to reproduce this

Steps:

  1. Draw a curve with beginShape, vertex, and quadraticVertex in WebGL mode
  2. Note that only one end has a cap instead of both
  3. Try setting the version back to 1.7 to see the expected value

Expected: image

Actual result: image

Snippet:


function setup() {
  createCanvas(400, 400, WEBGL);
  background(255)
  noFill()
  stroke(0)
  strokeWeight(20)
  translate(-width/2, -height/2)
  beginShape()
  vertex(20, 20)
  quadraticVertex(
    280, 200,
    100, 380
  )
  endShape()
}

https://editor.p5js.org/davepagurek/sketches/ILIzcUpnt

diyaayay commented 4 months ago

May I have a go at this? Would like to work on it.

davepagurek commented 4 months ago

Thanks! I'll assign this to you.