CODEWITHSUNDEEP
p5.jsrounded-cornersrect
Superman123
Superman123

Reputation: 13

How to create rounded rect?

I'm making a basic platformer with p5.js and matter.js, but i cant get the corners to round on my player rect

rect(player.position.x,player.position.y,10,10,3)

how do i make a round rect

Upvotes: 2

Views: 4043

Answers (2)

c0d3r
c0d3r

Reputation: 117

Add a new parameter to rect() at the end to add smoothness of edges:

rect(x, y, width, height, smoothness);

Example:

rect(10,10,10,10,5);

Upvotes: 1

SharkWithLasers
SharkWithLasers

Reputation: 143

Are you sure that you are using the most up to date version of p5.js? I can't seem to reproduce the issue in the editor.

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

function draw() {
  background(220);
  
  rect(50, 50, 10, 10, 3);
}

Gives me: 10x10 box

It may be harder to see the rounded effect because the rect is so small. If we increased the size, and increased the border rect(50, 50, 50, 50, 10):

50x50 box

The effect becomes more apparent.

Upvotes: 3

Related Questions