How to Have Pi in a CSS Calc

Is there a way to have pi in a CSS calc?

There's no such thing as a PI variable in CSS, unfortunately.

However..

You can make use of CSS variables to assign a number to it, downside to this is that it has a really, really bad browser support. Well, not any more

This would work like:

:root {
  --PI: 3.14159265358979; // enter the amount of digits you wish to use
}

.circle {
    width: calc(100 * var(--PI));
}

The best solution would be to use a preprocessor such as SASS or Less to assign the PI variable to, this would look like the following example in SASS:

$pi: 3.14159265358979 // amount of digits you wish to use

.circle {
    width: calc(100 * ${pi});
}

EDIT: As mentioned in the comments, some browsers (Safari + IE) round to 2 decimals, where Chrome and Firefox can round up to (at least) 4 decimals.

Javascript: PI (π) Calculator

I found this code on this website:

mess = "";
Base = Math.pow(10, 11);
cellSize = Math.floor(Math.log(Base) / Math.LN10);
a = Number.MAX_VALUE;
MaxDiv = Math.floor(Math.sqrt(a));

function makeArray(n, aX, Integer) {
  var i = 0;
  for (i = 1; i < n; i++) aX[i] = null;
  aX[0] = Integer
}

function isEmpty(aX) {
  var empty = true
  for (i = 0; i < aX.length; i++)
    if (aX[i]) {
      empty = false;
      break
    }
  return empty
}

function Add(n, aX, aY) {
  carry = 0
  for (i = n - 1; i >= 0; i--) {
    aX[i] += Number(aY[i]) + Number(carry);
    if (aX[i] < Base) carry = 0;
    else {
      carry = 1;
      aX[i] = Number(aX[i]) - Number(Base)
    }
  }
}

function Sub(n, aX, aY) {
  for (i = n - 1; i >= 0; i--) {
    aX[i] -= aY[i];
    if (aX[i] < 0) {
      if (i > 0) {
        aX[i] += Base;
        aX[i - 1]--
      }
    }
  }
}

function Mul(n, aX, iMult) {
  carry = 0;
  for (i = n - 1; i >= 0; i--) {
    prod = (aX[i]) * iMult;
    prod += carry;
    if (prod >= Base) {
      carry = Math.floor(prod / Base);
      prod -= (carry * Base)
    } else carry = 0;
    aX[i] = prod
  }
}

function Div(n, aX, iDiv, aY) {
  carry = 0;
  for (i = 0; i < n; i++) {
    currVal = Number(aX[i]) + Number(carry * Base);
    theDiv = Math.floor(currVal / iDiv);
    carry = currVal - theDiv * iDiv;
    aY[i] = theDiv
  }
}

function arctan(iAng, n, aX) {
  iAng_squared = iAng * iAng;
  k = 3;
  sign = 0;
  makeArray(n, aX, 0);
  makeArray(n, aAngle, 1);
  Div(n, aAngle, iAng, aAngle);
  Add(n, aX, aAngle);
  while (!isEmpty(aAngle)) {
    Div(n, aAngle, iAng_squared, aAngle);
    Div(n, aAngle, k, aDivK);
    if (sign) Add(n, aX, aDivK);
    else Sub(n, aX, aDivK);
    k += 2;
    sign = 1 - sign
  }
  mess += "aArctan=" + aArctan + "<br>"
}

function calcPI(numDec) {
  var ans = "";
  t1 = new Date();
  numDec = Number(numDec) + 5;
  iAng = new Array(10);
  coeff = new Array(10);
  arrayLength = Math.ceil(1 + numDec / cellSize);
  aPI = new Array(arrayLength);
  aArctan = new Array(arrayLength);
  aAngle = new Array(arrayLength);
  aDivK = new Array(arrayLength);
  coeff[0] = 4;
  coeff[1] = -1;
  coeff[2] = 0;
  iAng[0] = 5;
  iAng[1] = 239;
  iAng[2] = 0;
  makeArray(arrayLength, aPI, 0);
  makeArray(arrayLength, aAngle, 0);
  makeArray(arrayLength, aDivK, 0);
  for (var i = 0; coeff[i] != 0; i++) {
    arctan(iAng[i], arrayLength, aArctan);
    Mul(arrayLength, aArctan, Math.abs(coeff[i]));
    if (coeff[i] > 0) Add(arrayLength, aPI, aArctan);
    else Sub(arrayLength, aPI, aArctan)
  }
  Mul(arrayLength, aPI, 4);
  sPI = "";
  tempPI = "";
  for (i = 0; i < aPI.length; i++) {
    aPI[i] = String(aPI[i]);
    if (aPI[i].length < cellSize && i != 0) {
      while (aPI[i].length < cellSize) aPI[i] = "0" + aPI[i]
    }
    tempPI += aPI[i]
  }
  for (i = 0; i <= numDec; i++) {
    if (i == 0) sPI += tempPI.charAt(i) + ".<br>";
    else {
      if (document.getElementById("cbCount").checked) addcount = " (" + (i) + ")";
      else addcount = "";
      if (document.getElementById("cbSpace").checked) thespace = " ";
      else thespace = "";
      if ((i) % 50 == 0 && i != 0) sPI += tempPI.charAt(i) + addcount + "<br>";
      else if (i % 5 == 0) sPI += tempPI.charAt(i) + thespace;
      else sPI += tempPI.charAt(i)
    }
  }
  ans += ("PI (" + numDec + ")=" + sPI + "<br>");
  ans += ("Win PI=<br>3.1415926535897932384626433832795<br>");
  t2 = new Date();
  timeTaken = (t2.getTime() - t1.getTime()) / 1000;
  ans += "It took: " + timeTaken + " seconds";
  var myDiv = document.getElementById("d1");
  myDiv.innerHTML = ans
}

<form name="" onsubmit="calcPI(this.t1.value);return false;">
  Number of Digits:<br>
  <input type="text" name="t1" id="t1" value="100" size="25" maxlength="25">
  <br>Add Count:
  <input type="checkbox" name="cbCount" id="cbCount" value="" checked="checked">
  <br>Add Spaces:
  <input type="checkbox" name="cbSpace" id="cbSpace" value="" checked="checked">
  <br>
  <input type="button" value="Calculate Pi" onclick="calcPI(this.form.t1.value)">
</form>
<div id="d1"></div>

React - calculate dots position in a circle

You could use the following functions to get X and Y coords based on the circle size, and its center.

Example for a circle with 100 px radius:

function getCircleY(radians, radius) {
  return Math.cos(radians) * radius;
}

function getCircleX(radians, radius) {
  return Math.sin(radians) * radius;
}

console.log("X coord at 0 degree:", getCircleX(0, 100));
console.log("Y coord at 0 degree:", getCircleY(0, 100));

console.log("X coord at 90 degree:", getCircleX(Math.PI / 2, 100));
console.log("Y coord at 90 degree:", getCircleY(Math.PI / 2, 100), "(= 0)");

console.log("X coord at 180 degree:", getCircleX(Math.PI, 100), "(= 0)");
console.log("Y coord at 180 degree:", getCircleY(Math.PI, 100));

// Angle as radians on a circle (radius 100px)
//      
//       x <-- 0°, 2π or 0 radians => x: 0px, y: 100px
//       |
//       |
// x-----0-----x <-- 90°, π / 2 radians => x: 100px, y: 0px
//       |
//       |
//       x <-- 180°, π radians => x: 0px, y: -100px

How to calculate width of unused space for page with fixed width?

Yes, there is a way to fill up exactly the remaining space. You can make simple calculations in your css using calc and there is a unit of measurement vw that can come in very handy for this.

100 vw = 100% of the viewport width

so if you know your center div is always 1140 px, you can easily calculate the width of the side div's like this:

width: calc((100vw - 1140px)/2); 

Browser support should be fairly good nowadays:

• vh, vw, vmin, vmax
• calc

One sidenote, consider working with pseudo elements :after and :before in stead of adding extra divs just for styling, which is considered bad practice. You should bever add markup just for styling.

A small demonstration of how I would do it:
http://jsfiddle.net/669t4s3L/

CSS Transform Math - Calculate height of div caused by skew

I got it using this solution.

var degrees = 30;
var radians= degrees*Math.PI/180;
var newHeight = parentWidth*Math.tan(radians);
var newOffset = newHeight / 2;
var parentHeight = parentHeight + newHeight;

Here is my updated fiddle with option to select degrees

http://jsfiddle.net/bhPcn/5/

How to calculate points on upper half of circle

This is more a math question than a programming question.

2pi radians = 360 degrees

So if you want all of the items shown, but the shape to be a half circle, then use:

Math.PI * i / numberOfItems instead of 2 * Math.PI * i / numberOfItems

Also because screen coordinates start in the top-left corner. That will make it the bottom half of the circle with the first item on the right. If you want the top half of the circle with the first item on the left, then just add pi:

Math.PI + (Math.PI * i / numberOfItems)

Whole code:

for(int i=0;i<numberOfItems;i++)
{
    float x = (float)(center.X + radius * Math.Cos(Math.PI + (Math.PI * i / numberOfItems)))-iconBmp.Width/2;
    float y = (float)(center.Y + radius * Math.Sin(Math.PI + (Math.PI * i / numberOfItems)))-iconBmp.Height/2;

    canvas.DrawBitmap(iconBmp, new SKPoint(x, y));
}

Positioning divs in a circle with sine and cosine

Given:

Big circle with radius R centered at CX, CY
Problem:

Place N small circles around the big one without gaps

At first we have to find a radius of small circle r:

Centers of big and small circles and touch point form right rectangle with hypotenuse R+r, angle Pi/N and leg(cathetus) r. So simple trigonometry gives us the formula:

r = (R + r) * Sin (Pi/N)
r  = R * Sin (Pi/N) / (1 - Sin(Pi/N))

(quick check for 6 circles gives angle Pi/6 and r = R - true)

Now we can calculate center coordinates for i-th small circle:

XC[i] = CX + (R + r) * Cos(i * 2 * PI / N) //round to integers if needed
YC[i] = CY + (R + r) * Sin(i * 2 * PI / N) //angles in radians

If you need topleft coordinates of bounding square, just subtract r from the values calculated above

$num: 12;

$step: 2*pi() / $num;

@for $i from 1 through $num {

  $angle: $step * $i;

  $top: use my formula

---

Related Topics