跟月影学可视化
月影
前奇虎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讲)
加餐一 | 作为一名程序员,数学到底要多好?
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

11|图案生成:如何生成重复图案、分形图案以及随机效果?

月影 2020-07-17
你好,我是月影。
图案生成是可视化中非常重要的基础。有多重要呢?我们知道,可视化中的几何图形是用来表达数据的,那图案就是用来修饰这些几何图形,强化视觉效果的,所以图案一般是指几何图形上的花纹。这些花纹有的简单,有的复杂,有的规律明显,有的看上去比较随机。也正是因为图案可以如此的不同,它们才能更好地增强视觉效果。
这一节课,我们就来聊一聊图案生成的基本原理和方法论。不过,因为可视化中的图案非常多,所以今天我们主要来讲三种最常用的,分别是重复图案、分形图案和随机图案。
首先,我们来看重复图案。

如何绘制大批量重复图案

在可视化应用中,我们经常会使用重复图案。比如说,我们在显示图表的时候,经常会给背景加上一层网格,这样可以辅助用户阅读和理解图表数据。
带有网格背景的画布
那像网格这样经典的重复图案,我们应该怎样绘制它呢?这些网格看起来像是由一条一条线段组成的,是不是利用绘制线段的方式,比如我们之前学过的 Canvas2D 的绘图指令来绘制就可以了?如果你是这么想的,就把问题想得太简单了。
举个例子,如果我们将网格绘制在 Canvas2D 画布上,那网格的线条就会很多,这也就意味着我们要用大量的绘图指令来绘制。这个时候,一旦 Canvas2D 的画面改变了,我们就需要重绘全部的网格,这会大大消耗系统的性能。而且,如果将大量的时间都浪费在绘制这种重复图案上,那我们实现的代码性能可能就会很差。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》,如需阅读全部文章,
请订阅文章所属专栏新⼈⾸单¥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
收起评论
4
返回
顶部