前端中的⽣成设计与可视化
如果无法正常显示，请先停止浏览器的去广告插件。
1. 前端中的
⽣成 设计 与可 视 化
Apache ECharts (incubating) PPMC
沈 毅
2.
3. 什什 么 是
⽣生 成
设计
Generative Art
4. ⼊入坑
5.
6. 数据
规则
7. ⽣生 成
设计
可 以 ⽤用 来
8.
9.
10.
11.
12. 衍
纸
13. 衍
纸
Ray Tracing
14. 数据
规则
15. ⼩小星球⽣生成器器
16.
17. 做点什什么
好玩的东⻄西
⼿手上有
⼀一些 GIS 的数据
18. GeoJSON
19. 点 Point
线 LineString
⾯面 Polygon
20. 线 LineString
21. 挑⼀一个好看的颜⾊色
22. ⼀一份好的数据的⼒力力量量
23.
24. 2D
3D
25.
26. Miter Limit
27.
28.
29.
30. 每个⼈人都能创造⾃自⼰己
独特
的作品
31. City Art
32.
33. 贴⽚片瓦⽚片 ⽮矢量量瓦⽚片
PNG
JPEG GeoJSON
Protobuf
34.
35.
36. 球⾯面映射
(lng, lat)
(x, y, z)
37.
38. 极点会有严重的扭曲
39.
40. 球⾯面隐函数 x^2 + y^2 + z^2 = r^2
normalize(x, y, 1) * r
41.
42.
43. 街道
湖泊
绿地
……
44. ⼀一些数据上的限制
跟 Wiki ⼀一样，OSM 数据是⼤大家编辑的
⼤大部分城市建筑和道路路数据缺失
45. Low Poly 云朵
Infinity Town
46. 找模型
合适的模型好难找！
这个模型好贵！
47.
48. ⾃自⼰己 ⽣生成
随机点
凸包
Convex Hull
Quickhull
多组随机
49. 一个好看的渲染
50.
51. 导出
OBJ
52. AR 和 USDZ
ARKit Quick Look
POWERED BY VECTARY
53. 参数曲⾯面
54. 更更多⼿手边的 数据
像素 Pixels
音频 Wave
噪声 Noise
55. 柏林噪声 Perlin Noise
56. 数据
规则
57. BOIDS
Flocking 群体模拟
58. 三⼤大规则
Craig Reynolds 1986
对⻬齐
Alignment
内聚
Cohesion
分离
Separation
59. 随机初始化
60. 对⻬齐
Alignment
61. 内聚
Cohesion
62. 分离
Separation
63. 不不要撞墙
64.
65. ⼒力力引导布局
+
+
force directed layout
节点 - 电荷斥力
边 - 弹簧引力
66. 总结
快速⽣生成设计资源
积累解决问题的⼯工具集
和可视化相辅相成
67.
68.