Adding rounded corners to shapes (rectangle, triangle, etc.)

Processing Beginners
1

hello, is it possible if a shape like a rectangle, triangle etc is curved at each end like this?
image

1 Like
2

Look at the rect command with 5 parameters

See reference

1 Like
3

Hi

4

Hello @Janoer,

I encourage you to explore the resources (references, examples, tutorials) here:

You can also do a search within that site.

The rect() method does this (rounded corners) with additional parameters.

I did not see this option to round corners with other shapes.

I often write custom code to meet my needs if I can’t find a solution

This is an example of adding a rounded corner using bezier() function:

// Rounding Corner with bezier()
// Author: glv
// Date:   2023-07-15

size(300, 200);

background(0);
strokeWeight(2);

PVector o1, a1, c1, o2, a2, c2;

// First anchor and control point 
o1 = new PVector(10, 10);     // origin of line
a1 = new PVector(50, 50);
c1 = new PVector(100, 100);

stroke(0, 255, 0);            // red
line(o1.x, o1.y, a1.x, a1.y);
stroke(255, 0, 0);            // green
line(a1.x, a1.y, c1.x, c1.y);

// Second anchor and control Point
o2 = new PVector(220, 10);    // origin of line
a2 = new PVector(180, 50);
c2 = new PVector(130, 100);

stroke(0, 255, 0);            // green
line(o2.x, o2.y, a2.x, a2.y);
stroke(255, 0, 0);            // red
line(a2.x, a2.y, c2.x, c2.y);

//bezier(x1, y1, x2, y2, x3, y3, x4, y4) // See reference!
//bezier(a1.x, a1.y, c1.x, c1.y, c2.x, c2.y, a2.x, a2.y) // Mapped from reference

noFill();
stroke(255, 255, 0); // yellow
bezier(a1.x, a1.y, c1.x, c1.y, c2.x, c2.y, a2.x, a2.y);

I start with an idea such as the above and integrate it into more complex code.

image

There are certainly many solutions to this for polygons.

:)

1 Like