CODEWITHSUNDEEP
javascripthtml5-canvasp5.js
Sad Hyena
Sad Hyena

Reputation: 311

How can I make a rectangle change to a circle smoothly?

I'm trying to make an animation in javascript using p5.js library. I want to make a square change its shape transforming into a circle.

I tried drawing a circle behind the square and change the size of the shapes but thats not the effect I'm looking for.

I need to achieve somthing like this, the spin is not important. a busy cat

Thanks in advance for your help!

Upvotes: 3

Views: 2035

Answers (1)

Julian
Julian

Reputation: 1297

Something along the lines of this should get you going:

var sideLength = 100;
var increment = 0;

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

function draw() {
  if(increment <= sideLength/2){
    clear();
    increment++;
  }
  rect(10, 10, sideLength, sideLength, increment);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

The key part being the use of the rect() function where a values for the radius of a rounded corner can be specified.

Upvotes: 6

Related Questions