跟月影学可视化
月影
前奇虎360奇舞团团长，可视化UI框架SpriteJS核心开发者，《JavaScript王者归来》作者
立即订阅
4014 人已学习
课程目录
已更新 20 讲 / 共 45 讲
0/4登录后，你可以任选4讲全文学习。
课前必学 (2讲)
开篇词 | 不写网页的前端工程师，还能干什么？
免费
预习 | Web前端与可视化到底有什么区别？
图形基础篇 (4讲)
01 | 浏览器中实现可视化的四种方式
02 | 指令式绘图系统：如何用Canvas绘制层次关系图？
03 | 声明式图形系统：如何用SVG图形元素绘制可视化图表？
04 | GPU与渲染管线：如何用WebGL绘制最简单的几何图形？
数学篇 (5讲)
05 | 如何用向量和坐标系描述点和线段？
06 | 可视化中你必须要掌握的向量乘法知识
07 | 如何用向量和参数方程描述曲线？
08 | 如何利用三角剖分和向量操作描述并处理多边形？
09 | 如何用仿射变换对几何图形进行坐标变换？
视觉基础篇 (8讲)
10 | 图形系统如何表示颜色？
11｜图案生成：如何生成重复图案、分形图案以及随机效果？
12 | 如何使用滤镜函数实现美颜效果？
13 | 如何给简单的图案添加纹理和复杂滤镜？
14 | 如何使用片元着色器进行几何造型？
15 | 如何用极坐标系绘制有趣图案？
16 | 如何使用噪声生成复杂的纹理？
17 | 如何使用后期处理通道增强图像效果？
特别放送 (1讲)
加餐一 | 作为一名程序员，数学到底要多好？
11｜图案生成：如何生成重复图案、分形图案以及随机效果？
月影 2020-07-17
你好，我是月影。
图案生成是可视化中非常重要的基础。有多重要呢？我们知道，可视化中的几何图形是用来表达数据的，那图案就是用来修饰这些几何图形，强化视觉效果的，所以图案一般是指几何图形上的花纹。这些花纹有的简单，有的复杂，有的规律明显，有的看上去比较随机。也正是因为图案可以如此的不同，它们才能更好地增强视觉效果。
这一节课，我们就来聊一聊图案生成的基本原理和方法论。不过，因为可视化中的图案非常多，所以今天我们主要来讲三种最常用的，分别是重复图案、分形图案和随机图案。
首先，我们来看重复图案。
如何绘制大批量重复图案
在可视化应用中，我们经常会使用重复图案。比如说，我们在显示图表的时候，经常会给背景加上一层网格，这样可以辅助用户阅读和理解图表数据。
带有网格背景的画布
那像网格这样经典的重复图案，我们应该怎样绘制它呢？这些网格看起来像是由一条一条线段组成的，是不是利用绘制线段的方式，比如我们之前学过的 Canvas2D 的绘图指令来绘制就可以了？如果你是这么想的，就把问题想得太简单了。
举个例子，如果我们将网格绘制在 Canvas2D 画布上，那网格的线条就会很多，这也就意味着我们要用大量的绘图指令来绘制。这个时候，一旦 Canvas2D 的画面改变了，我们就需要重绘全部的网格，这会大大消耗系统的性能。而且，如果将大量的时间都浪费在绘制这种重复图案上，那我们实现的代码性能可能就会很差。
确认放弃笔记？
放弃后所记笔记将不保留。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》，如需阅读全部文章，
请订阅文章所属专栏，新⼈⾸单¥29.9
请订阅文章所属专栏，新⼈⾸单¥29.9
立即订阅
登录 后留言
精选留言(4)
lisiur老师，grids 的示例我在实际运行时，发现有些线会稍粗一点，而有些线又细到消失（rows=64)。这是什么原因呢，该如何避免呢？作者回复: 是webgl绘制的时候吗？
2020-07-30 1- Geek_dudu月影老师，下面这块没太理解。
迭代公式 vec2 f(vec2 z, vec2 c) { return mat2(z, -z.y, z.x) * z + c;}
mat2(z, -z.y, z.x)* z =mat2(z.x, z.y, -z.y, z.x) * vec2(z.x, z.y) = vec2(z.x*z.x-z.y*z.y, z.y*z.x+z.x+z.y)
好像和vec2 z的平方不相等吧 ，望答疑作者回复: 你行和列搞错了，求出来应该是vec2(x*x + y*y, 0)
2020-07-25 1 
张旭老师，有没有支持glsl语法高亮调试的方案推荐？作者回复: vscode就有相关的插件
2020-07-21 1
Kim Yin老师，画 grid 里面关于 cells 的解释我没太理解：“那利用 cells: [(0, 1, 2), (2, 0, 3)]，我们就能将这个矩形画布剖分成两个三角形，这两个三角形的顶点下标分别是 (0, 1, 2) 和 (2, 0, 3)。”
顶点下标是什么意思？0，1，2，3 代表的是什么意思？作者回复: 代表的是顶点数组的索引下标，也就是positions数组里第几个点
2020-07-17 2
收起评论