Can you use a Slider to change a circle to square in p5.js?

p5.js Coding Questions
1

Hey everyone was hoping if someone could direct me in a direction of how to code a slider to change a circle into a square? I’ve achieved being able to change the colour and shape and rotating it, but I haven’t been able to find examples of shapes changing using slider.
Any help would be great!

2

To answer your question I will first explain something about the square() function in p5.js. When you call the square function in p5.js you usually call it like this: square(x position, y position, radius). Yet the function can receive some additional statements inside the brackets, those statements control how ‘pointy’ each corner of the square is. So you can also call the square function like this: square(x position, y position, radius, radius of the top left corner, radius of the top right corner, r of bottom right, r of bottom left) further information about the square function is found in the p5 reference page - square function. (BTW this also works for the rect() function)

Now that we know how to change the ‘pointy - ness’ of the corners by declaring their size we could turn a square into a circle by increasing the size of the corners’ radiuses. I don’t know how to create a slider yet, but one way I found that this works is such:

let radi = 50
square(width/2,height/2,radi,map(mouseX,0,width,0,radi))

If you don’t understand the map() function you can read about it here.

I added only one additional statement to the square() function and not 4 because if I add just one the program adds the next 3 by the same value, just like calling rect(x position, y position, radius) (notice that I only called 1 radius instead of 2)

This works because if I increase the corners’ radius to a certain size it just turns into a circle.

If you want more specific information about the way the corners change i suggest you play with this on your own.

2 Likes
3

Probably many ways to do this, depending on how you want to mix a circle and a square.

Not sure if this is helpful, or how far you want to take it. But as I took an interest in it I’ll post what I found. And as a wise man once said: “The world hates complete solutions” :stuck_out_tongue: (This isn’t that far from one though…).

I’d go for a gradual change from the radius of a circle and the radius of a square (which changes depending on angle).

I found this page, first answer is great!
https://www.quora.com/What-is-the-polar-equation-for-a-square-if-any

A circle can be made from calculating a number of points around a center, from 0 to 360 degrees (or 0 to TWO_PI radians), which is quite easy:

let degStep = TWO_PI / steps;
for (let i=0; i<steps; i++) {
  angle = i * degStep;
  x = radius * cos(angle);
  y = radius * sin(angle);
}

(sort of pseudocode. You’d have to save the x,y values, maybe use an array. And draw or make a shape later)

Ofc, it won’t be a true circle, but using enough points (steps) it can appear as one.

From the aforementined page describing the equation for the square radius, you can also make a square the same way:

for (let i=0; i<steps; i++) {
  angle = i * degStep;
  squareRadius = min(1/abs(cos(angle)), 1/abs(sin(angle)));
  x = squareRadius * radius * cos(angle);
  y = squareRadius * radius * sin(angle);
}

One caveat is that you have to have some of the points (well, 4 of them) “hit” the square corners exactly, or else it won’t look like a square. So the number of points around the square have to be something that fits that.

Then you have to calculate some kind of average between the circle radius and the square radius based on the slider value.