IMPOSSIBLE QUESTION - Draw circles for alternative values of pi

Joined
Feb 6, 2023
Messages
46
Reaction score
3
if we assumed pi was4 a circle could look like a squre. so I wanted to write a script to illustrate a circle for given pi value. basically at 3.14 it souldbe a circle and it would grow from the corners and be a square and for even higher values it would look like an x. I think this is impossible to do mathematically butmaybe we coıuld do a gradient animation or something?
 
Joined
Sep 21, 2022
Messages
175
Reaction score
24
pi = circumference/2r

If pi increases while the radius stays the same, a disk turns into a tutu.
 
Joined
Jul 4, 2023
Messages
478
Reaction score
60
BTW, ;)
Something like this? First draft.
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
      }

      .shape {
        width: 150px;
        height: 150px;
        background-color: coral;
        border-radius: 50%; /* Starts as a circle */
        transition: border-radius 0.5s, transform 0.5s;
      }

      input[type="range"] {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="shape" id="shape"></div>
    <input type="range" min="3.14" max="4" step="0.01" value="3.14" id="piSlider">
    <p>π approximation: <span id="piValue">3.14</span></p>

    <script>
      const shape = document.querySelector("#shape");
      const piSlider = document.querySelector("#piSlider");
      const piValueDisplay = document.querySelector("#piValue");

      piSlider.addEventListener("input", () => {
        const piValue = parseFloat(piSlider.value);
        piValueDisplay.textContent = piValue.toFixed(2);

        // Adjust the border-radius based on the pi approximation
        if (piValue <= 3.14) {
          shape.style.borderRadius = "50%"; // Circle
          shape.style.transform = "rotate(0deg)";
        } else if (piValue < 3.5) {
          shape.style.borderRadius = `${(4 - piValue) * 50}%`;
        } else if (piValue < 4) {
          shape.style.borderRadius = "0%"; // Square
          shape.style.transform = `rotate(${(piValue - 3.5) * 90}deg)`; // Rotate into "X" shape
        } else {
          shape.style.borderRadius = "0%";
          shape.style.transform = "rotate(45deg)"; // Full "X" shape
        }
      });
    </script>
  </body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,985
Messages
2,570,199
Members
46,766
Latest member
rignpype

Latest Threads

Top