Rounded corners rectangle in webGL?

p5.js
1

Is it possible to draw a rectangle with rounded corners in webGL? When I try it squares it.

// setup
let canvas = createCanvas(400, 400, WEBGL);

// draw
rectMode(CENTER);
rotateX(radians(-rotationX));
rotateY(radians(rotationY));
rect(30, 3, 100, 200, 20, 20, 20, 20);

2

make one?

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

function draw() {
  background(220);
   my_squircle(10,10,5);
}

//__________________________________________________________ SQUIRCLE
function my_squircle(r, wx, wy) {
  let x1, y1;
  beginShape();
  stroke(180, 180, 180);
  strokeWeight(5);
  fill(190, 190, 190);
  for (let t = 0; t < TWO_PI; t += TWO_PI/160) {          // 160 vertex points is too much
    x1 = pow(abs(cos(t)), 0.5) * r*wx * sign(cos(t));
    y1 = pow(abs(sin(t)), 0.5) * r*wy * sign(sin(t));
    vertex(x1, y1);
  }
  endShape(CLOSE);
}

function sign( input) {
  if (input < 0)  return -1.0;
  if (input > 0)  return  1.0;
  return 0.0;
}

https://editor.p5js.org/kll/sketches/hjwW2pgaX

1 Like
3

not quite a rectangle, but very cool :slight_smile:

I found ways of doing it with a shader, but wondering if there is a 3D primitive or an easier way of doing building it?

1 Like
4

why not use lines and arcs…
and make it a little function
please post it here…

OOPS, is that correct?

in JAVA P3D a line with strokeWeight is a cylinder and can have even round ends…

in p5.js WEBGL
a line with strokeWeight is a rectangle?
( need some rotation or 3D view to see )
looks poor.