Поиск творческих способов привлечь внимание к изменению климата имеет важное значение для мотивации интенсивности участия, которое приводит к действиям. Для этого есть разные способы — от привлечения внимания к изменению климата на крупных мероприятиях, включая Давос 2020, до визуализации последствий глобального потепления с помощью передовой науки о данных и ее интерактивного генеративного искусства.

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

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

Интерактивное генеративное искусство — тонкое, но мощное

Все знакомы с веб-сайтами прогноза погоды, которые используют значки для простого и удобного отображения текущей и будущей погоды. Однако значки не могут отображать динамические характеристики погоды, например ветер.

Вот почему мы подумали о «живом окне», которое показывает погоду по мере ее изменения. Мы решили сделать веб-приложение, которое будет отображать реальные погодные условия, используя природные ландшафты, созданные с помощью вычислений, но искусно. Другими словами, с генеративным искусством.

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

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

Нашей основной целью было представить творческий и проницательный способ показать влияние глобального изменения климата на ландшафт и мир вокруг нас. Экран можно разделить на две части, отображающие один и тот же пейзаж, но с разной погодой в соответствии с прошлыми и текущими погодными данными. Например, это может служить реальным примером изменения климата за последние 10 лет.

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

Для реализации проекта используется JavaScript, а все визуальные элементы отрисовываются с помощью Canvas. Ландшафт состоит из четырех основных компонентов: дерева, земли, неба и осадков. Этого достаточно, чтобы проиллюстрировать времена года плюс основные погодные условия.

Дерево

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

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

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

Функция divide(start,finish,intervalsAmount,n) делит числовой интервал между start и finish на величину интервала intervalsAmount и определяет интервал, содержащий n.

const branchGroupDepth = 10; 
const leavesGroupSize = 2 ** (branchGroupDepth-1); 
let groupCounter = 0; 
function generate(angle, depth, arr) 
{ let leafColor = colors[divide(0, leavesGroupSize, colors.length, groupCounter)]; 
arr.push({ 
angle, 
branchArmLength: random(minBranchLenght, maxBranchLenght), 
color: leafColor 
}); 
if (depth === branchGroupDepth) { groupCounter = 0; } 
if (depth === 0) { groupCounter++; } 
if (depth != 0) { 
if (depth > 1) { generate(angle - random(minAngle, maxAngle), depth - 1, arr); generate(angle + random(minAngle, maxAngle), depth - 1, arr); 
} else { 
generate(angle, depth - 1, arr); }}}

Функция branch() отвечает за оживление дерева, поэтому она пересчитывает координаты ветки каждый раз, когда меняется ветер. Каждая ветвь движется по круговой траектории, где начало ветви обозначено центром окружности, а длина ветви обозначена радиусом окружности. Единственное, что нам нужно найти, это координаты конца ветки (которая также является началом новой ветки).

  • windSidewayForce — направление ответвления по направлению ветра
  • bendabilityOfCurrentBranch — коэффициент наклона ветки под действием ветра в зависимости от толщины ветки (или высоты дерева).
  • calcX(angle, r)/calcY(angle, r) — функции, вычисляющие координаты концов ветви с r*cos(angle)/r*sin(angle) > формулы.
let branchCounter = 0; 
const bendability = 2; 
const leafBendability = 17; 
function branch(x1, y1, arr, depth, windConfig) { 
if (depth != 0) { 
const xx = calcX(dir, depth * branchArmLength); 
const yy = calcY(dir, depth * branchArmLength); 
const windSidewayForce = windX * yy - windY * xx; 
const bendabiityOfCurrentBranch = (1 - (depth * 0.7) / (maxDepth * 0.7)) ** bendability; 
dir = angle + wind * bendabiityOfCurrentBranch * windSidewayForce; let x2 = x1 + calcX(dir, depth * branchArmLength); 
let y2 = y1 + calcY(dir, depth * branchArmLength); 
lines[depth].
ush([x1, y1, x2, y2]); 
if (depth > 1) { 
branch(x2, y2, arr, depth - 1, windConfig); 
branch(x2, y2, arr, depth - 1, windConfig); 
} else { 
branch(x2, y2, arr, depth - 1, windConfig); 
} 
} else { 
const leafAngle = angle + wind * windSidewayForce * leafBendability; leaves[color].push([x1, y1, leafAngle]); 
} 
}

Ветки дерева рисуются с помощью простой функции холста lineTo(), поэтому каждая ветвь представляет собой линию. Листья рисуются двумя кривыми Безье с помощью функции холста bezierCurveTo(). Кривая Безье состоит из трех точек: начала (синяя), конца (синяя) и контрольной (желтая). Последний делает кривую форму.

Однако у холста есть одна особенность: нельзя нарисовать несколько фигур разными цветами или мазками одним контуром. Итак, все ветки сгруппированы по толщине, а все листья по цвету. Для ускорения процесса рендеринга они раскрашиваются группами. Кроме того, холст дерева хранится под ключом (индикатором ветра) для повышения скорости рендеринга. Это означает, что программе не нужно рассчитывать каждое дерево с нуля, используя один и тот же индикатор ветра.

Земля

Земля (точнее, трава) не менее важна, чем дерево, трава также может олицетворять ветер и времена года. Для создания травы требуется массив кучек. Каждая травяная куча должна иметь свои координаты, определяющие положение на поле, скорость реакции на ветер и угол наклона относительно земли. Ближние кучки травы должны иметь насыщенные и контрастные цвета, а более дальние кучки травы должны казаться гладкими.

Этот визуальный прием создает впечатление целого травяного поля. Поле разделено на горизонтальные секции, каждая секция имеет свой набор цветов для стопок. После формирования массива его необходимо отсортировать по координате y ветки, чтобы получить диапазон перекрывающихся кучек травы — от самых дальних до самых близких.

function generate(number) { 
for (var i = 0; i < number; i++) { 
var y = random(fieldTopStart, h + fieldBottomDeviation); 
var x = random(0, w); 
var colorGroup = divide(fieldTopStart, h + fieldBottomDeviation + 1, fieldAreas, y); 
var color = colors[colorGroup][random(0, colors[colorGroup].length)]; 
var angle = random(-maxAngleDeviation, maxAngleDeviation); 
var speed = random(minSpeed, maxSpeed); 
dots.push([x, y, color, angle, speed]); 
} 
dots.sort()}

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

Небо и осадки

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

Облака состоят из кругов двух типов. Первый тип представляет собой градиентный белый круг с центром градиента посередине. Эти круги распределены равномерно по всей облачной плоскости. Второй тип представляет собой градиентный серый круг со смещением нижнего края от его центра. Эти окружности размещены в нижней части плоскости облака, поэтому они делают облако объемным. Однако облака движутся не только по небу, но и внутри себя, вызывая изменение формы облака. Каждый круг динамичен, движется по круговой траектории с индивидуальным центром.

Еще одним важным элементом неба являются осадки, в том числе снег и дождь. Капли дождя нарисованы простой вертикальной линией, толщина которой зависит от силы дождя. Снежинки нарисованы градиентным полупрозрачным кругом. Каждая снежинка имеет разный размер, и чем она больше, тем быстрее падает снежинка. Создается ощущение, что более крупные снежинки расположены ближе к экрану пользователя.

Как выглядит интерактивное генеративное искусство на основе погоды?

После некоторых настроек, включая цвета для разных сезонов, а также интеграцию данных в реальном времени, мы теперь можем отображать весь год через «живое окно».

Посмотрите это видео на YouTube, чтобы увидеть, как все выглядит.

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

Еще одним полезным аспектом является то, что рост растений можно отображать в «живом окне». Было бы интересно увидеть в действии, сколько лет требуется некоторым растениям, чтобы вырасти до своего полного размера. Существует также шкала ветра Бофорта, которая оценивает силу ветра. Можно показать, как сильный ветер влияет на деревья, давая пользователю реалистичное представление о силе ветра.

Пока это только демо. Модель можно расширить для адаптации к определенному городу, изменив тип дерева в соответствии с особенностями местной флоры. Кроме того, есть много природных явлений, таких как туман, ураган, молния, торнадо и другие, которые можно добавить. Это может быть простой пример: иллюстрация изменения погоды с использованием потока данных наряду с умным кодированием. Тем не менее, влияние значительно — с точки зрения познания, наш простой пример продвигает зрителей дальше по пути осознания изменения климата.

Все начинается с разговора, и мы призываем вас связаться — чтобы узнать, как мы можем помочь решить ваши уникальные проблемы с помощью интеллектуального и креативного технологического решения.

Мариана Мысак, инженер отдела исследований и разработок ELEKS

Первоначально опубликовано на https://labs.eleks.com 29 января 2020 г.