发帖
雷达卡
寻找创造性的方法将气候变化置于聚光灯下对于激发采取行动的参与强度至关重要。有多种方法可以做到这一点——从在包括 2020 年达沃斯在内的重大活动中引起人们对气候变化的关注，到借助 尖端数据科学 及其交互式生成艺术来可视化全球变暖的后果。
强调气候变化的努力需要跨越各个领域——从喧嚣和公众，到微妙和个人。只有在各个层面针对气候变化的人类煽动者，社会才有机会传播气候变化信息。传播气候信息也需要各种各样的工具。
无论信息是响亮的还是微妙的，气候变化信息的数字化方法肯定会产生重大影响。毕竟，人类的生活越来越数字化。技术已经证明了它有能力让人类的未来变得更好——在引起人们对气候变化的关注时，为什么不利用数字生活方式呢？
交互式生成艺术——微妙但强大
大家都熟悉的天气预报网站，使用图标来简单方便地显示当前和未来的天气。但是，图标不能代表动态天气特征，例如风。
这就是为什么我们想到了一个“实时窗口”，它可以显示天气的变化。我们决定制作一个 Web 应用程序，该应用程序将使用通过计算创建的自然景观来显示真实的天气状况，但很巧妙。换句话说，生成艺术。
这是一种显示天气状况和暗示气候变化的新方法，它简化了观众对信息的感知。这种天气艺术的生成方法是基于一个自主系统，该系统可以自行做出决定，但也受到一些预定义规则的限制。作者定义规则，系统生成内容。这是一个真正的人机二重奏，取得了令人印象深刻的创意成果。
由于采用了生成方法，景观真的很特别，因为它对观众来说总是独一无二的，但与此同时，关键元素的位置是相同的。每次用户访问应用程序时，模型都会创建自定义图形元素。一棵树、天空、云等都是根据观众的具体位置使用实时天气数据从头开始绘制的。
我们的主要目标是引入一种创造性和有见地的方式来展示全球气候变化对景观和我们周围世界的影响。屏幕可以分成两部分，显示相同的景观，但根据过去和当前的天气数据显示不同的天气。例如，它可以作为过去 10 年气候变化的具体例子。
此外，这种方法引起了人们对森林砍伐这一紧迫问题的关注。可以清楚地看到种植树木需要多长时间。以这种独特的方式显示这些数据会产生一种紧迫感，而这种紧迫感总是很难用简单的数字和统计数据来实现。
JavaScript 用于项目实现，所有视觉元素均使用 Canvas 绘制。景观由四个主要部分组成：树木、地面、天空和降水。这足以说明一年中的季节以及主要的天气状况。
树
虚拟景观的中心组成部分是一棵树，这是一种表示风力和一年四季的便捷方式。树的结构似乎是分形的，这就是为什么它将递归生成，其中每个分支将有两个子分支，直到达到最大深度。每个最终分支的末端都会有一片叶子。
必须生成一个分支数组，实际上就是一个分支属性数组。每个分支都应该有自己相对于父分支的倾斜角度，以及叶子所需的独特长度和颜色。树枝的长度是根据树的深度随机选择的，倾斜角也是如此。但是，应该添加或减去父角度。所以我们会得到两个不同方向的分支。
树冠不像球体那样同质，而是像球体的集合一样由群组成。结果，叶子的颜色不同，因为其中一些更暗，而另一些则更亮。这就是树冠被分成几组的原因，每组从左到右进行着色，平滑的调色板从最亮的颜色变为最暗的颜色。
函数 divide(start,finish,intervalsAmount,n)将start 和 finish 之间的数值间隔划分 为一个间隔量 intervalsAmount 并定义一个包含 n的间隔。
常量分支组深度 = 10;
const 叶组大小 = 2 ** (branchGroupDepth-1);
让 groupCounter = 0;
函数生成（角度，深度，arr）{
让 leafColor = colors[divide(0, leavesGroupSize, colors.length, groupCounter)];
arr.push({
角度，
分支臂长度：随机（minBranchLenght，maxBranchLenght），
颜色：叶子颜色
});
if (depth === branchGroupDepth) { groupCounter = 0; }
如果（深度 === 0）{ groupCounter++; }
如果（深度！= 0）{
如果（深度> 1）{
生成（角度 - 随机（minAngle，maxAngle），深度 - 1，arr）；
生成（角度+随机（minAngle，maxAngle），深度 - 1，arr）；
} 别的 {
生成（角度，深度 - 1，arr）；
}}}
branch()函数的 职责是让树活着，因此每次风发生变化时它都会重新计算分支坐标。每个分支都以圆形轨迹移动，其中分支的起点由圆心表示，分支长度由圆半径表示。我们唯一需要找到的是分支末端的坐标（这也是新分支的起点）。
windSidewayForce — 根据风向的分支方向
bendabilityOfCurrentBranch — 在风下的树枝倾斜系数取决于树枝的厚度（或树的深度）。
calcX(angle, r)/calcY(angle, r) — 计算分支坐标的函数以 r*cos(angle)/r*sin(angle) 公式结束。
让分支计数器 = 0;
常数弯曲性 = 2;
常量叶弯曲能力 = 17;
功能分支（x1，y1，arr，深度，windConfig）{
如果（深度！= 0）{
const xx = calcX(dir, depth * branchArmLength);
const yy = calcY(dir, depth * branchArmLength);
常量 windSidewayForce = windX * yy – windY * xx;
const bentabiityOfCurrentBranch = (1 – (depth * 0.7) / (maxDepth * 0.7)) ** 弯曲性；
dir = 角度 + 风 *bendabiityOfCurrentBranch * windSidewayForce；
让 x2 = x1 + calcX(dir, depth * branchArmLength);
让 y2 = y1 + calcY(dir, depth * branchArmLength);
线[深度].push([x1, y1, x2, y2]);
如果（深度 > 1）{
分支（x2，y2，arr，深度 - 1，windConfig）；
分支（x2，y2，arr，深度 - 1，windConfig）；
} 别的 {
分支（x2，y2，arr，深度 - 1，windConfig）；
}
} 别的 {
常量 leafAngle = 角度 + 风 * windSidewayForce * 叶弯曲性；
叶子[颜色].push([x1, y1, leafAngle]);
}
}
树枝是用一个简单的 lineTo() 画布函数绘制的，所以每个树枝都是一条线。使用bezierCurveTo() 画布函数用两条贝塞尔曲线绘制叶子 。贝塞尔曲线由三个点组成：开始（蓝色）、结束（蓝色）和控制（黄色）。最后一个做成曲线形状。
互动生成艺术
用两条贝塞尔曲线画树叶。
但是，画布有一个特殊的功能：您不能在一条路径中绘制多个具有不同颜色或笔划的图形。所以，所有的树枝都按它们的粗细分组，所有的叶子都按它们的颜色分组。为了加快渲染过程，它们被分组绘制。此外，树画布存储在键（风指示器）下以提高渲染速度。这意味着程序不需要使用相同的风指示器从头开始计算每棵树。
地面
地面（或者更确切地说，草）与树一样重要，草也可以代表风和一年中的季节。为了生成草，需要一堆堆。每个草桩都应该有自己的坐标，指定场地中的位置、对风的反应速度和相对于地面的倾斜角度。较近的草桩应具有饱和且对比鲜明的颜色，而较远的草桩应显得光滑。
这个视觉技巧给人一种整个草地的印象。该字段分为水平部分，每个部分都有自己的桩颜色集。数组生成后，必须按分支的 y 坐标对其进行排序，以提供一系列重叠的草堆——从最远到最近。
函数生成（数字）{
for (var i = 0; i < number; i++) {
var y = 随机 (fieldTopStart, h + fieldBottomDeviation);
var x = 随机 (0, w);
var colorGroup = divide(fieldTopStart, h + fieldBottomDeviation + 1, fieldAreas, y);
var color = 颜色[colorGroup][随机（0，颜色[colorGroup].length）];
变量角度=随机（-maxAngleDeviation，maxAngleDeviation）；
var speed = random (minSpeed, maxSpeed);
dots.push([x, y, 颜色, 角度, 速度]);
}
点.sort()}
草堆上画了两条贝塞尔曲线，就像我们画树叶一样。此外，草堆会对风做出反应，并相应地弯曲。桩的端点和控制点的坐标根据风向指标重新计算。
交互式生成艺术草草桩上涂有两条贝塞尔曲线。
天空和降水
云和云的数量是天空最重要的组成部分。相对于天空中的位置，云的大小应该不同。所以天空被分成水平扇区，更高的扇区包含更大的云，它们移动得更快。
互动生成艺术：云
相对于天空中的位置，云的大小不同。
云由两种类型的圆圈组成。第一种是渐变的白色圆圈，中间有一个渐变中心。这些圆圈均匀分布在整个云平面上。第二种是底部偏离中心的渐变灰色圆圈。这些圆圈位于云平面的底部，因此它们构成了云体积。然而，云不仅沿着天空移动，而且在自身内部移动，导致云的形状发生变化。每个圆都是动态的，以单独的圆心沿圆轨迹移动。
天空的另一个重要元素是降水，包括雪和雨。雨滴用简单的垂直线绘制，其厚度取决于雨的重量。雪花涂有渐变的半透明圆圈。每片雪花都有不同的大小，越大，雪花落下的速度就越快。它营造出更大的雪花更靠近用户屏幕的感觉。
基于天气的交互式生成艺术是什么样的？
经过一些调整，包括不同季节的颜色以及实时数据的集成，我们现在可以通过“实时窗口”显示全年。
查看此 youtube 视频，了解情况如何。
除了天气预报和多年来气候变化的视觉展示外，我们的方法还可以用于为自然博物馆或主题展览制作交互式背景。这个项目的想法也可以在学校里使用，让研究不同的气候区变得更有趣。
另一个有用的方面是植物生长可以显示在“实时窗口”中。看看某些植物需要多少年才能长到完整大小，这将是一件有趣的事情。还有用于评估风力强度的 Beaufort 风量表。可以显示强风对树木的影响，让用户对风的强度有真实的感知。
目前这只是一个演示。通过改变树的类型以适应当地植物群的特殊性，可以扩展该模型以适应某个城市。此外，还有很多自然现象，如雾、飓风、闪电、龙卷风等可以添加。这可能是一个简单的例子：使用数据馈送和一些巧妙的编码来说明天气的变化。然而，影响是显着的——在认知上，我们这个简单的例子让观众在气候变化意识的旅程中走得更远。
编辑推荐
1、2022年300个以上最佳免费数据科学课程
2、大厂数据分析面试指南！来自亚马逊、谷歌、微软、头条、美团的面试问题！
3、机器学习模型方法总结
4、历史最全机器学习/深度学习/人工智能专业术语表中英对照表
5、机器学习如何应用于商业场景？三个真实的商业项目
6、数据工作者的自我修养 | 哪些技能是必不可少的？
7、《汗牛充栋：数据分析书籍分享》CDA网校新课上线
8、文本挖掘常用的107个语料库
9、一图读懂“东数西算”工程
10、零基础转行数据分析，看这篇文章就够了
DA内容精选
京公网安备 11010802022788号
