Как правильно сократить деление в математике)

Question

Я играю и экспериментирую CSS коды, и сейчас наблюдаю на такую классную штуку в css calc(). Недавно поигрался с золотым сечением, стоко делением там понаписал)

height: calc(var(--g100) / 1.618033 / 1.618033 / 1.618033 / 1.618033);

Пытаюсь красиво сократить, и сейчас ищу решение с калькулятором, вот только правильную формулу не могу найти. Есть предложения?

Demo CodePen

Answer 1

Разделить на fi=1.618033 в четвертой степени

Или умножить на 1-fi=0.618033 в четвёртой степени (свойство этого самого золотого сечения)

Answer 2

Есть вариант не с поиском формулы, а с вынесением вычислений в переменные. При желании можно воспользоваться препроцессором less или scss, чтобы генерировать переменные кодом.

Также переменная --gold: 1.618033 позволит вам дать понимание того, что за странное число у вас есть и для чего оно нужно.

document.body.onclick = function() {
  this.classList.toggle('clr');
}

:root {
  --black: #000;
  --white: #fff;
  --g100: 50vmin;
  --gold: 1.618033;
  --level1: calc(var(--gold));
  --level2: calc(var(--gold) * var(--level1));
  --level3: calc(var(--gold) * var(--level2));
  --level4: calc(var(--gold) * var(--level3));
  --level5: calc(var(--gold) * var(--level4));
  --level6: calc(var(--gold) * var(--level5));
  --level7: calc(var(--gold) * var(--level6));
  --level8: calc(var(--gold) * var(--level7));
  --level9: calc(var(--gold) * var(--level8));
  --level10: calc(var(--gold) * var(--level9));
}

*,
html,
body {
  box-sizing: border-box;
  font-size: 0;
  margin: 0;
  padding: 0;
}

body {
  background: var(--black);
  display: grid;
  height: 100vh;
  place-items: center;
}

body.clr {
  background: var(--white);
}

#gld {
  box-shadow: 0 0 0 .2vmin var(--white) inset;
  display: flex;
  position: relative;
  height: var(--g100);
  width: calc(var(--g100) * var(--level1));
}

.clr #gld {
  box-shadow: 0 0 0 .2vmin var(--black) inset;
}

#gld span {
  border: .1vmin solid var(--white);
  height: var(--g100);
  position: absolute;
  width: var(--g100);
}

.clr #gld span {
  border: .1vmin solid var(--black);
}

#gld span:nth-child(2) {
  height: calc(var(--g100) / var(--level1));
  right: 0;
  width: calc(var(--g100) / var(--level1));
}

#gld span:nth-child(3) {
  bottom: 0;
  height: calc(var(--g100) / var(--level2));
  right: 0;
  width: calc(var(--g100) / var(--level2));
}

#gld span:nth-child(4) {
  bottom: 0;
  height: calc(var(--g100) / var(--level3));
  right: calc(var(--g100) / var(--level2));
  width: calc(var(--g100) / var(--level3));
}

#gld span:nth-child(5) {
  bottom: calc(var(--g100) / var(--level3));
  height: calc(var(--g100) / var(--level4));
  left: var(--g100);
  width: calc(var(--g100) / var(--level4));
}

#gld span:nth-child(6) {
  height: calc(var(--g100) / var(--level5));
  right: calc(var(--g100) / var(--level2));
  top: calc(var(--g100) / var(--level1));
  width: calc(var(--g100) / var(--level5));
}

#gld span:nth-child(7) {
  bottom: calc(var(--g100) / var(--level3));
  height: calc(var(--g100) / var(--level6));
  right: calc(var(--g100) / var(--level2));
  width: calc(var(--g100) / var(--level6));
}

#gld span:nth-child(8) {
  bottom: calc(var(--g100) / var(--level3));
  height: calc(var(--g100) / var(--level7));
  left: calc(var(--g100) + var(--g100) / var(--level4));
  width: calc(var(--g100) / var(--level7));
}

#gld span:nth-child(9) {
  bottom: calc(var(--g100) / var(--level3) + var(--g100) / var(--level7));
  height: calc(var(--g100) / var(--level8));
  left: calc(var(--g100) + var(--g100) / var(--level4));
  width: calc(var(--g100) / var(--level8));
}

#gld span:nth-child(10) {
  bottom: calc(var(--g100) / var(--level3) + var(--g100) / var(--level7) + calc(var(--g100) / var(--level10)));
  height: calc(var(--g100) / var(--level9));
  left: calc(var(--g100) + var(--g100) / var(--level4) + calc(var(--g100) / var(--level8)));
  width: calc(var(--g100) / var(--level9));
}

<div id="gld">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

При желании можно еще некоторые конструкции вынести в переменные.

document.body.onclick = function() {
  this.classList.toggle('clr');
}

:root {
  --black: #000;
  --white: #fff;
  --g100: 50vmin;
  --gold: 1.618033;
  --gold1: calc(var(--gold));
  --gold2: calc(var(--gold) * var(--gold1));
  --gold3: calc(var(--gold) * var(--gold2));
  --gold4: calc(var(--gold) * var(--gold3));
  --gold5: calc(var(--gold) * var(--gold4));
  --gold6: calc(var(--gold) * var(--gold5));
  --gold7: calc(var(--gold) * var(--gold6));
  --gold8: calc(var(--gold) * var(--gold7));
  --gold9: calc(var(--gold) * var(--gold8));
  --gold10: calc(var(--gold) * var(--gold9));
  --level1: calc(var(--g100) / var(--gold1));
  --level2: calc(var(--g100) / var(--gold2));
  --level3: calc(var(--g100) / var(--gold3));
  --level4: calc(var(--g100) / var(--gold4));
  --level5: calc(var(--g100) / var(--gold5));
  --level6: calc(var(--g100) / var(--gold6));
  --level7: calc(var(--g100) / var(--gold7));
  --level8: calc(var(--g100) / var(--gold8));
  --level9: calc(var(--g100) / var(--gold9));
  --level10: calc(var(--g100) / var(--gold10));
}

*,
html,
body {
  box-sizing: border-box;
  font-size: 0;
  margin: 0;
  padding: 0;
}

body {
  background: var(--black);
  display: grid;
  height: 100vh;
  place-items: center;
}

body.clr {
  background: var(--white);
}

#gld {
  box-shadow: 0 0 0 .2vmin var(--white) inset;
  display: flex;
  position: relative;
  height: var(--g100);
  width: calc(var(--g100) * var(--gold1));
}

.clr #gld {
  box-shadow: 0 0 0 .2vmin var(--black) inset;
}

#gld span {
  border: .1vmin solid var(--white);
  height: var(--g100);
  position: absolute;
  width: var(--g100);
}

.clr #gld span {
  border: .1vmin solid var(--black);
}

#gld span:nth-child(2) {
  height: var(--level1);
  right: 0;
  width: var(--level1);
}

#gld span:nth-child(3) {
  bottom: 0;
  height: var(--level2);
  right: 0;
  width: var(--level2);
}

#gld span:nth-child(4) {
  bottom: 0;
  height: var(--level3);
  right: var(--level2);
  width: var(--level3);
}

#gld span:nth-child(5) {
  bottom: var(--level3);
  height: var(--level4);
  left: var(--g100);
  width: var(--level4);
}

#gld span:nth-child(6) {
  height: var(--level5);
  right: calc(var(--g100) / var(--gold2));
  top: calc(var(--g100) / var(--gold1));
  width: calc(var(--g100) / var(--gold5));
}

#gld span:nth-child(7) {
  bottom: calc(var(--g100) / var(--gold3));
  height: calc(var(--g100) / var(--gold6));
  right: calc(var(--g100) / var(--gold2));
  width: calc(var(--g100) / var(--gold6));
}

#gld span:nth-child(8) {
  bottom: calc(var(--g100) / var(--gold3));
  height: calc(var(--g100) / var(--gold7));
  left: calc(var(--g100) + var(--level4));
  width: calc(var(--g100) / var(--gold7));
}

#gld span:nth-child(9) {
  bottom: calc(var(--level3) + var(--level7));
  height: var(--level8);
  left: calc(var(--g100) + var(--level4));
  width: var(--level8);
}

#gld span:nth-child(10) {
  bottom: calc(var(--level3) + var(--level7) + var(--level10));
  height: var(--level9);
  left: calc(var(--g100) + var(--level4) + var(--level8));
  width: var(--level9);
}

<div id="gld">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

БЛОГ НА HUSL

Как правильно сократить деление в математике)

Ответы (2 шт):