HTML:
|
1 |
<div id="bg-62"></div> |
CSS:
|
1 2 3 |
#bg-62 { height: 500px; } |
Настроики под другие цвета:
Меняем HSL параметры в шейдере:
Находим эту строку:
vec3 hsl = vec3(208.0 / 360.0, 0.56, lightness);
Hue (оттенок 0-360°):
208.0 - синий
0.0 или 360.0 - красный
120.0 - зеленый
240.0 - синий (другой)
300.0 - фиолетовый
Saturation (насыщенность 0-1):
0.56 - 56%
0.0 - серый (без цвета)
1.0 - максимальная насыщенность
Lightness диапазон (яркость):
Находим:
float lightness = 0.4 + 0.3 * n;
0.3 - минимальная яркость (30%)
0.4 - размах (40%)
Итоговый диапазон: 0.3 до 0.7 (30-70%)
Быстрые пресеты:
Красные тучки:
vec3 hsl = vec3(0.0, 0.7, lightness); // hsl(0, 70%, X)
Зеленые тучки:
vec3 hsl = vec3(120.0 / 360.0, 0.6, lightness); // hsl(120, 60%, X)
Фиолетовые тучки:
vec3 hsl = vec3(280.0 / 360.0, 0.5, lightness); // hsl(280, 50%, X)
Серые тучки (как раньше):
vec3 hsl = vec3(0.0, 0.0, lightness); // hsl(0, 0%, X)
Диапазон яркости:
Темные (20-40%):
float lightness = 0.2 + 0.2 * n;
Светлые (70-90%):
float lightness = 0.7 + 0.2 * n;
Очень контрастные (10-80%):
float lightness = 0.1 + 0.7 * n;

Добавить комментарий: