Вчера подвергся дополнительной мотивации

Иногда фоном смотрю стримы по Tesera, в которой сейчас пишу графику и решили мы поправить баг с тем, что свет от факела в руке был привязан к камере а не к игроку. Погрузился в код, разбираюсь. Так тут кажется что-то не передается, а здесь вообще условие не обработано... И тут слышу на стриме:

— Блин, да у них свет от факела к камере привязан, невозможно бегать с видом от 3-го лица в темноте
— Да, погоди, уже разбираюсь, говорю я
— Не, ну это совсем не удобно конечно
— Да-да, я согласен, уже правлю
— Хотя может они это для оптимизации сделали, знаете там наверное расчеты еще одного источника света нагружают, а у них же браузер...
— Да какая оптимизация! Это баг, я правлю прямо сейчас!

Так и доделал все быстро)

PS запись стрима вот: https://www.youtube.com/live/I7LwXvcDgak, где этот момент был не вспомню)

В CSS появились ветвления

Не так давно обнаружил, что уже 2 месяца как в обычном Chrome работает функция if() в CSS (статья на MDN)

Теперь можно делать так:

div {
   margin: if(media(width > 700px): 0 auto;)
}

/* if(<if-condition> : <value>) */

или так:

div {
   color: if(
      supports(color: lch(77.7% 0 0)): 3px solid lch(77.7% 0 0);
      else: 3px solid #c0c0c0;
   )
}

ну и вообще это скорее напоминает множественную if...else конструкцию:

padding: if(
  media(width < 480px), 20px;
  media(width < 960px), 40px;
  media(width < 1200px), 80px;
  else: 0px;
)

Ну и не обошлось без веселого, можно использовать сколько угодно else, но выполнится только первый, все условия после него игнорируются:

div {
  background: if(
    style(--scheme: ice): white;
    else: green;
    style(--scheme: fire): orange;
    else: red;
  );
}

Кажется для достижения полноты по Тьюрингу осталось только завести смену состояния, чтобы стать полноценным языком программировния. Но если добавить чекбокс, то и эта проблема уходит и можно написать свой Сапер на CSS.

Доделали портал для Tesera

В этом посте я показал первую версию того что было сделано, теперь добавился вид выключенного портала, где анимации замедлены и добавлено мерцание.

Все анимации, размеры, скорости выглядят случайно, но на самом деле тут кроется одна особенность шейдеров: в них нет функции random чтобы получить случайное значение. Как же быть?

1. Идеальный шум

Обычно создаются функции шума на основе координат и времени, где складываются синусы, умножается на простые числа, откидывается целая часть числа... Короче если постоянно вызывать синус можно рано или поздно построить модель нового мира.

2. Числа Цикады

Числа цикад, о которых идёт речь, это 13 и 17. Эти числа являются простыми и представляют собой циклы развития некоторых видов периодических цикад в Северной Америке. Цикл в 13 или 17 лет позволяет этим цикадам избегать синхронизации с циклами развития хищников, которые обычно имеют более короткие жизненные циклы.

То есть нужны любые простые числа, которые делятся только на 1 и самого себя, кроме 1. Умножая разные волны и шумы на эти числа мы получаем с виду случайные последовательности, циклы которых не совпадают и не идут синхронно.

Наглядный Computer science в работах Sam Rose

Наткнулся на сайт с визуализациями разных алгоритмов и подробным объяснением как они работают: балансировка нагрузки сервера, очереди, хеширование... Сделано красиво, с любовью и заботой.

https://samwho.dev