动画 / 可视化
文章平均质量分 91
记录可视化相关知识,比如ECharts
凯小默
专注前端领域开发。
展开
-
【跟月影学可视化】学习笔记 41 篇(完结)
一共做了 162 个学习示例以及 41 篇博客学习笔记,要深入学习该课程请支持正版,个人笔记仅供参考。【跟月影学可视化】专栏学习笔记。原创 2023-01-10 17:15:58 · 1091 阅读 · 0 评论 -
【工具篇】41 # 常用可视化工具集整理(完结)
【跟月影学可视化】学习笔记。原创 2023-01-10 16:52:03 · 679 阅读 · 0 评论 -
【实战篇】40 # 如何实现3D地球可视化?
【跟月影学可视化】学习笔记。学习笔记源码实现:https://github.com/kaimo313/visual-learning-demo整体实现效果如下:先绘制一张平面地图,然后把它以纹理的方式添加到我们创建的 3D 球体上。用 模块来创建等角方位投影()。创建一个天空包围盒,让摄像机处于整个球体内部,使用二维噪声的技巧来实现来其 Shader,通过 step 函数和 vUv 的缩放,将它缩小之后,最终呈现出来星空效果。注意这里我们需要关闭旋转控制。下面实现当点击到地图上的国家区域的时候,想原创 2023-01-10 14:42:15 · 2544 阅读 · 0 评论 -
【实战篇】39 # 如何实现世界地图的新冠肺炎疫情可视化?
【跟月影学可视化】学习笔记。下面将实现世界地图新冠肺炎疫情可视化。数据用的是从 2020 年 1 月 22 日到 3 月 19 日这些天的新冠肺炎疫情进展。效果类似下图:https://covid19.who.int/先需要准备新冠肺炎的官方数据( https://www.who.int/ )这里直接使用大佬整理好的:https://github.com/akira-cn/graphics/blob/master/covid-vis/assets/data/covid-data.json另外需要准备地图的原创 2023-01-09 15:46:08 · 936 阅读 · 0 评论 -
【实战篇】38 # 如何使用数据驱动框架 D3.js 绘制常用数据图表?
【跟月影学可视化】学习笔记。数据驱动框架不要求固定格式的数据格式,而是通过对原始数据的处理和对容器迭代、创建新的子元素,并且根据数据设置属性,来完成从数据到元素结构和属性的映射,然后再用渲染引擎将它最终渲染出来。当需求比较复杂,或者样式要求灵活多变的时候,可以考虑使用数据驱动框架。d3js 文档以及 spritejs 文档 依赖于 DOM 操作,所以 SVG 和 SpriteJS 这种与 DOM API 保持一致的图形系统,使用起来会更加方便一些。下面将使用这个两个库进行demo的演示实现效果如下:力导向原创 2023-01-07 20:58:16 · 720 阅读 · 0 评论 -
【实战篇】37 # 如何使用 QCharts 图表库绘制常用数据图表?
【跟月影学可视化】学习笔记。QCharts 是一个基于 spritejs 封装的图表库,可以让用户以组件的形式组合出各种图表:https://www.qcharts.cn/#/home最简单的方式是,直接通过 CDN,用 script 标签来加载 SpriteJS 和 QCharts 打包好的文件。QCharts 图表由图表(Chart)对象及其子元素构成。图表对象的子元素包含:基本用法:绘制图表组合最简单的情况是用相同的图形来绘制不同的变量。如果想用不同类型的图形来展示多个变量,在 Q原创 2023-01-06 16:50:53 · 1227 阅读 · 2 评论 -
【设计篇】36 # 如何理解可视化设计原则?
因为用户可能包含视觉障碍人群,设计的颜色在我们看来已经足够有差异性,但不太友好的配色,以及到不同设备的呈现可能会给视觉障碍人士带来困扰。因为互补色色相差距最大,所以它们并列时会产生强烈的视觉对比效果,这样能够起到强调差异的作用。天级预报的图表:显示了温度、天气、风向、风速、浪高这些变量,每个变量都采用了不同的形式来展示,区分度很好,内容非常清晰也很聚焦。如果要强调用风速这个变量,我们可以考虑用颜色和高度同时表示风速,从而突出该信息,达到信息聚焦的效果。之后,就能看到设计的图表颜色在视觉障碍人群眼中的效果。原创 2023-01-05 17:37:13 · 1441 阅读 · 0 评论 -
【设计篇】35 # 如何让可视化设计更加清晰?
【跟月影学可视化】学习笔记。用醒目的颜色突出显示数据,把被淡化的其他视觉元素当作背景。比如:平均温度与露点的散点例子下面就是一个有鲜明视觉层次感的图表:再此基础上可以添加曲线图来引导用户关注到平均气温与露点的正相关性特点效果如下图,可以清晰的看到曲线描绘气温与平均露点的关系,这样层次分明的图表,非常有助于理解图表上的信息之前 32 节里的公园游客散点图,在表达某个单组变量的分布状况的时候,不是很直观,可以使用饼图进行处理效果如下,饼图表示了公园内四个区域中男女游客的分布情况,可以看到饼图表示的结果非常原创 2023-01-05 14:37:03 · 525 阅读 · 0 评论 -
【数据篇】34 # 如何处理多元变量?
【跟月影学可视化】学习笔记。2014 年北京市的天气历史数据(csv 格式)这里使用QCharts 图表库折线图来展示平均气温上面只有平均气温一个变量,一张图表怎么展示多元变量呢?最简单的方式是直接在图表上同时绘制多个变量,每个变量对应一个图形,这样一张图表上就同时显示多个图形。分析两个变量的相关性,可以使用散点图,散点图有两个坐标轴,其中一个坐标轴表示变量 A,另一个坐标轴表示变量 B。下面例子是平均气温和露点的相关性以及平均湿度和露点的相关性:可以看到以及都是成正相关的,不过露点与温度的相关性更原创 2023-01-05 10:23:44 · 520 阅读 · 0 评论 -
【数据篇】33 # 可视化数据处理的一般方法是什么?
/ 设置 domain 从 0 到 24,表示一天的 24 个小时,range 从 0 到 480,表示占据 480 像素宽度。// 通过 d3.axisBottom 高阶函数,用创建的 scale 来生成一个具体的坐标轴算子 axis。// 用 SpriteJS 创建 Polyline 元素,把这个折线点坐标传给它。// 假设公园是早晨 6 点开门,晚上 22 点关门,此时游客数为0。// 用到 d3.rollups 它可以对数据进行分组,然后汇总。// 把数据转换成要显示的折线上的点坐标。原创 2023-01-04 15:33:09 · 405 阅读 · 0 评论 -
【数据篇】32 # 如何选择合适的方法对数据进行可视化处理?
有时只需要把数据的特征抽象和提取出来,再把代表数据最鲜明的特征,用图形化、令人印象深刻的形式呈现出来即可。上面数据里数组中的每一项表示一个游客,x、y 是拍摄位置,time 是时间,gender 是性别。Manu Cornet 的组织架构图,用非常形象的方法绘制出了各个知名公司的组织架构差异。下面通过航拍公园人群分布例子,按照某些属性对数据进行过滤,再将符合条件的结果展现出来。我们可以通过过滤不同的时间段,看到人群的分布情况,比如下面是12点的游客散点图。,用照片跟色条,强化了用户的直观认知。原创 2023-01-04 11:16:45 · 341 阅读 · 0 评论 -
【数据篇】31 # 如何对海量数据进行优化性能?
【跟月影学可视化】学习笔记。用随机的小圆点模拟地图的小圆点,实现呼吸灯效果最简单的做法:先创建圆的几何顶点数据,然后对每个圆设置不同的参数来分别一个一个圆绘制上去。效果如下:在绘制 500 个圆的时候,浏览器的帧率就掉到 7 fps 左右了。绘制大量同种几何图形的时候,通过减少渲染次数来提升性能最好的做法是直接使用批量渲染。代码如下:渲染20000个点效果:在 WebGL 中,点图元是最简单的图元,它用来显示画布上的点,在顶点着色器里,可以通过设置 gl_PointSize(单位是像素)来改变点图元的大原创 2023-01-03 18:49:12 · 831 阅读 · 0 评论 -
【性能篇】30 # 怎么给WebGL绘制加速?
【跟月影学可视化】学习笔记。例子:在一个画布上渲染 3000 个不同颜色的、位置随机的三角形,并且让每个三角形的旋转角度也随机。我这台电脑渲染出来只有 可以创建一个正三角形,然后通过视图矩阵的变化来实现绘制多个三角形,而视图矩阵可以放在顶点着色器中计算。也是 ,由于浏览器的 JavaScript 引擎的运算速度很快,感觉将顶点计算放到顶点着色器中进行了,性能差别也很微小。重复图形的批量绘制,在 WebGL 中也叫做,它是一种减少绘制次数的技术。多实例渲染的局限性:只能在绘制相同的图形时使用。效果如下:原创 2022-12-20 19:40:29 · 845 阅读 · 0 评论 -
【性能篇】29 # 怎么给Canvas绘制加速?
【跟月影学可视化】学习笔记。例子:实现一些位置随机的多边形,并且不断刷新这些图形的形状和位置我们f12查看帧率,效果如下:Google Chrome浏览器怎么开启查看帧率功能?对于一个 500 边形来说,它的顶点数量非常多,所以 Canvas 需要执行的绘图指令也会非常多,那绘制很多个 500 边形自然会造成性能问题。下面减少绘制 500 边形的绘图指令的数量:用 -1 代替正 500 边形,如果type小于0表名多边形是正500边形,用 arc 指令来画圆优化完之后的效果:具体做法就是将图形缓存下来,原创 2022-12-20 15:24:51 · 1695 阅读 · 0 评论 -
【性能篇】28 # Canvas、SVG与WebGL在性能上的优势与劣势
【跟月影学可视化】学习笔记。在浏览器上渲染动画,每一秒钟最高达到 60 帧左右。1 秒钟内完成 60 次图像的绘制,那么完成一次图像绘制的时间就是 1000/60(1 秒 =1000 毫秒),约等于 16 毫秒。达到比较流畅的动画效果的最低帧率是 24fps,相当于图形系统要在大约 42 毫秒内完成一帧图像的绘制。影响 Canvas 渲染性能的 2 大要素:Google Chrome浏览器怎么开启查看帧率功能?测试例子:在 Canvas 上每一帧绘制 个半径为 的小圆:在 Canvas 上每一帧绘制原创 2022-12-19 17:47:14 · 4239 阅读 · 0 评论 -
【视觉高级篇】27 # 如何实现简单的3D可视化图表:GitHub贡献图表的3D可视化?
【跟月影学可视化】学习笔记。可以使用这个生成数据:https://github.com/sallar/github-contributions-api这里直接使用月影大佬的github提交数据的数据即可结构大致如下:SpriteJS v3SpriteJS 是跨平台的高性能图形系统,它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。特性:注意:需要加入 3d 扩展库加载并渲染3D模型。SpriteJS 的 3D 部分,它是基于 OGL 库实现的。SpriteJS 在 OGL 的基础原创 2022-12-18 23:39:43 · 1012 阅读 · 0 评论 -
【视觉高级篇】26 # 如何绘制带宽度的曲线?
【跟月影学可视化】学习笔记。Canvas2D 提供了相应的 API,能够绘制出不同宽度、具有特定和的曲线,绘制曲线非常简单。线宽超过一个像素,两个线段中间转折的部分处就会有缺口,不同的填充方式,就对应了不同的 lineJoin。lineCap 就是指曲线头尾部的形状。注意:Canvas2D 的 lineJoin 只支持 miter、bevel 和 round,不支持 none。lineCap 支持 butt、square 和 round。效果如下:图三中,两侧的转角由于超过了 miterLimit 限制,原创 2022-12-16 18:43:48 · 927 阅读 · 0 评论 -
【视觉高级篇】25 # 如何用法线贴图模拟真实物体表面
【跟月影学可视化】学习笔记。法线贴图就是在原物体的凹凸表面的每个点上均作法线,通过RGB颜色通道来标记法线的方向,你可以把它理解成与原凹凸表面平行的另一个不同的表面,但实际上它又只是一个光滑的平面。对于视觉效果而言,它的效率比原有的凹凸表面更高,若在特定位置上应用光源,可以让细节程度较低的表面生成高细节程度的精确光照方向和反射效果。切线空间(Tangent Space)是一个特殊的坐标系,它是由几何体顶点所在平面的 uv 坐标和法线构成的。切线空间的三个轴,一般用 T (Tangent)、B (Bitang原创 2022-12-14 20:27:57 · 706 阅读 · 0 评论 -
【视觉高级篇】24 # 如何模拟光照让3D场景更逼真?(下)
【跟月影学可视化】学习笔记。如果若干平行光照射在表面光滑的物体上,反射出来的光依然平行,这种反射就是镜面反射。越光滑的材质,它的镜面反射效果也就越强,并且物体表面会有闪耀的光斑,也叫镜面高光。镜面反射的性质:入射光与法线的夹角等于反射光与法线的夹角。实现镜面反射效果的步骤:下面以点光源为例来实现光斑:冯氏反射模型是由美国犹他大学(University of Utah)的 于1975年在他的博士论文中提出的,都用其名字命名。Phong 光照模型是真实图形学中提出的第一个有影响的光照明模型,该模型只考虑物体原创 2022-12-09 19:52:11 · 1081 阅读 · 0 评论 -
【视觉高级篇】23 # 如何模拟光照让3D场景更逼真?(上)
【跟月影学可视化】学习笔记。物体的光照效果是由光源、介质(物体的材质)和反射类型决定的,而反射类型又由物体的材质特点决定。在 3D 光照模型中,根据不同的光源特点分为四种:点光源跟平行光的示意图:聚光灯示意图:有向光在与物体发生作用的时候,根据物体的材质特性,会产生两种反射类型:漫反射示意图:一个物体最终的光照效果,是漫反射、镜面反射以及环境光叠加在一起的效果,示意图如下:环境光没有方向,物体表面反射环境光的效果,只和环境光本身以及材质的反射率有关。物体在环境光中呈现的颜色的公式如下:(环境光的颜色为原创 2022-12-07 10:30:32 · 1270 阅读 · 0 评论 -
【视觉高级篇】22 # 如何用仿射变换来移动和旋转3D物体?
【跟月影学可视化】学习笔记。对于平移变换来说,如果向量 P(x0x_0x0, y0y_0y0, z0z_0z0) 沿着向量 Q(x1x_1x1, y1y_1y1, z1z_1z1) 平移,只需要让 P 加上 Q,就能得到变换后的坐标。让三维向量乘上标量,就相当于乘上要缩放的倍数。可以使用齐次矩阵来表示三维仿射变换,通过引入一个新的维度,就可以把仿射变换转换为齐次矩阵的线性变换。三维物体的旋转变换比较复杂一点,下面先了解一下欧拉角。中文维基百科:欧拉角莱昂哈德·欧拉用欧原创 2022-12-01 19:00:04 · 1290 阅读 · 0 评论 -
【视觉高级篇】21 # 如何添加相机,用透视原理对物体进行投影?
【跟月影学可视化】学习笔记。用一个三维坐标(Position)和一个三维向量方向(LookAt Target)来表示 WebGL 的三维世界的一个相机。要绘制以相机为观察者的图形,需要用一个变换,将世界坐标转换为相机坐标。这个变换的矩阵就是视图矩阵(ViewMatrix)。怎么计算视图矩阵?用代码的方式表示:WebGL 的默认坐标范围是从 -1 到 1 的。只有当图像的 x、y、z 的值在 -1 到 1 区间内才会被显示在画布上,而在其他位置上的图像都会被剪裁掉。给下面图形分别给 x、y、z 轴增加 0原创 2022-11-16 18:49:20 · 643 阅读 · 0 评论 -
【视觉高级篇】20 # 如何用WebGL绘制3D物体?
【跟月影学可视化】学习笔记。我们知道立方体有8个顶点,6个面,在 WebGL 中,需要用 12 个三角形来绘制它。把每个面的顶点分开,需要 24 个顶点。绘制 3D 图形与绘制 2D 图形有一点不一样,必须要开启深度检测和启用深度缓冲区。在 WebGL 中,可以通过 ,来开启深度检测。在清空画布的时候,也要用 ,来同时清空颜色缓冲区和深度缓冲区。上面朝向我们的面应该是 颜色, WebGL 默认的剪裁坐标的 z 轴方向,的确是朝内的。WebGL 坐标系就是一个左手系而不是右手系。下面我们需要将 WebG原创 2022-11-11 18:08:54 · 1607 阅读 · 2 评论 -
【视觉高级篇】19 # 如何用着色器实现像素动画?
【跟月影学可视化】学习笔记。WebGL 有两种 Shader,分别是顶点着色器和片元着色器,它们都可以用来实现动画。在绘制一帧画面的时候,顶点着色器的运算量会大大少于片元着色器,所以使用顶点着色器消耗的性能更少。片元着色器可以使用重复、随机、噪声等技巧来绘制更加复杂的效果。在顶点着色器中,我们直接改变了顶点坐标,所以这样实现的旋转动画和 WebGL 坐标系(右手系)的方向一致,角度增大呈逆时针方向旋转。在片元着色器中,我们的绘制原理是通过距离场着色来实现的,所以这里的旋转实际上改变的是距离场的角度而不是原创 2022-11-10 12:32:50 · 555 阅读 · 0 评论 -
【视觉高级篇】18 # 如何生成简单动画让图形动起来?
【跟月影学可视化】学习笔记。3个静态图像如下:实现橙红色方块旋转的动画:给这个方块的每一帧增加一个 rotate 角度。以上面的方块旋转为例,首先定义初始时间和周期,然后在 update 中计算当前经过时间和进度 p,最后通过 p 来更新动画元素的属性。虽然时序动画实现起来比增量动画写法更复杂,但我们可以更直观、精确地控制旋转动画的周期(速度)、起始角度等参数。定义一个类 Timing 用来处理时间:实现一个 Animator 类,用来真正控制动画过程:用 Animator 实现四个方块的轮换转动原创 2022-11-08 14:41:53 · 651 阅读 · 0 评论 -
【视觉基础篇】17 # 如何使用后期处理通道增强图像效果?
【跟月影学可视化】学习笔记。由于 GPU 是并行渲染的,所以在着色器的执行中,每个像素的着色都是同时进行的,彼此独立的,不能共享信息,就不能获得某一个像素坐标周围坐标点的颜色信息,也不能获得要渲染图像的全局信息。所谓后期处理通道,是指将渲染出来的图像作为纹理输入给新着色器处理,是一种二次加工的手段。可以从纹理中获取任意 uv 坐标下的像素信息,也就相当于可以获取任意位置的像素信息。下面实现一个绘制随机三角形图案的着色器,然后使用后期处理通道对它进行高斯模糊。这是没有进行高斯模糊的效果:高斯模糊之后,效果如原创 2022-11-07 17:16:30 · 503 阅读 · 0 评论 -
【视觉基础篇】16 # 如何使用噪声生成复杂的纹理?
【跟月影学可视化】学习笔记。物理学上,噪声指一切不规则的信号(不一定要是声音),比如电磁噪声,热噪声,无线电传输时的噪声,激光器噪声,光纤通信噪声,照相机拍摄图片时画面的噪声等。我们知道随机数是离散的,如果对离散的随机点进行插值,可以让每个点之间的值连续过渡,然后使用 smoothstep 或者平滑的三次样条来插值,就可以形成一条连续平滑的随机曲线。对离散的随机值进行插值又被称为插值噪声()。缺点:它的值的梯度不均匀。最直观的表现就是,二维噪声图像有明显的“块状”特点,不够平滑。在 2D 中,除了在一条线原创 2022-11-04 19:20:43 · 838 阅读 · 0 评论 -
【视觉基础篇】15 # 如何用极坐标系绘制有趣图案?
【跟月影学可视化】学习笔记。极坐标系使用相对极点的距离,以及与 x 轴正向的夹角来表示点的坐标,如。如何用极坐标方程绘制曲线角向渐变()就是以图形中心为轴,顺时针地实现渐变效果。只需要将像素坐标转换为极坐标,再除以 2π,就能得到 HSV 的 H 值。然后用鼠标位置的 x、y 坐标来决定 S 和 V 的值。圆柱坐标系是一种三维坐标系,又被称为半极坐标系。可以用来绘制一些三维曲线,比如螺旋线、圆内螺旋线、费马曲线等等。直角坐标系和圆柱坐标系也可以相互转换,公式如下:球坐标系用在三维图形绘制、球面定原创 2022-11-03 18:39:16 · 1545 阅读 · 0 评论 -
【视觉基础篇】14 # 如何使用片元着色器进行几何造型?
【跟月影学可视化】学习笔记。把图片绘制为纯黑色:根据纹理坐标值来绘制,让某个图案的颜色,从左到右由黑向白过渡使用乘法创造一个 10*10 的方格,让每个格子左上角是绿色,右下角是红色,中间是过渡色。通过 获取网格的索引,判断网格索引除以 2 的余数(奇偶性),根据它来决定是否翻转网格内的 x、y 坐标。绘制一个模糊的圆绘制一个清晰的圆因为浮点数计算的精度导致的锯齿现象。用 smoothstep 代替 step 即可解决这种问题。smoothstep 在 之间有一个平滑过渡的区间。上原创 2022-10-31 19:45:55 · 631 阅读 · 0 评论 -
【视觉基础篇】13 # 如何给简单的图案添加纹理和复杂滤镜?
【跟月影学可视化】学习笔记。在遍历像素点的时候,同时计算当前像素点到图片中心点的距离,然后根据距离设置透明度,就可以实现边缘模糊的效果。给一张照片加上阳光照耀的效果。具体操作就是,把下面的透明的图片叠加到一张照片上。这种能叠加到其他照片上的图片,通常被称为纹理(),叠加后的效果也叫做纹理效果。弊端:必须循环遍历图片上的每个像素点,图片一大计算量很大。在 WebGL 中,先通过图片或者 Canvas 对象来创建纹理对象,纹理对象包括了整张图片的所有像素点的颜色信息,然后通过 uniform 传递给着色器,原创 2022-10-31 11:52:01 · 397 阅读 · 0 评论 -
【视觉基础篇】12 # 如何使用滤镜函数实现美颜效果?
【跟月影学可视化】学习笔记。所谓像素化,就是把一个图像看成是由一组像素点组合而成的。每个像素点负责描述图像上的一个点,并且带有这个点的基本绘图信息。Canvas2D 以 4 个通道来存放每个像素点的颜色信息,每个通道是 8 个比特位,也就是 0~255 的十进制数值,4 个通道对应 RGBA 颜色的四个值。灰度化,在RGB模型中,如果R=G=B时,则彩色表示一种灰度颜色,其中R=G=B的值叫灰度值,因此,灰度图像每个像素只需一个字节存放灰度值(又称强度值、亮度值),灰度范围为0-255。灰度化图片:简单来说原创 2022-10-26 18:22:42 · 1686 阅读 · 0 评论 -
【视觉基础篇】11 # 图案生成:如何生成重复图案、分形图案以及随机效果?
【跟月影学可视化】学习笔记。比如绘制带有网格背景的画布如果将网格绘制在 Canvas2D 画布上,网格的线条很多,重绘消耗系统的性能。因为浏览器将渐变属性视为图片,所以可以将渐变设置在任何可以接受图片的 CSS 属性上。不足之处:利用 GPU 并行计算的特点,使用着色器来绘制背景网格这样的重复图案。使用 Shader 绘制重复图案,不管绘制多么细腻,图案重复多少次,绘制消耗的时间几乎是常量,不会遇到性能瓶颈。顶点坐标和 uv(纹理)坐标: 在整数区间内周期重复示意图:Step 函数:效果如下:一个分形原创 2022-10-24 19:03:11 · 999 阅读 · 0 评论 -
【视觉基础篇】10 # 图形系统如何表示颜色?
【跟月影学可视化】学习笔记。 是 RGB 颜色的十六进制表示法,其中 RR、GG、BB 分别是两位十六进制数字,表示红、绿、蓝三色通道的色阶。色阶可以表示某个通道的强弱。每个通道一共有 256 阶,取值是 0 到 255。一共能表示 种不同的颜色。 的表示 RGBA 色值,其中增加了一个 Alpha 通道,也就是透明度。(alpha 是一个从 0 到 1 的数)WebGL 的 shader 默认支持 RGBA。是使用一个四维向量来表示颜色,并采用归一化的浮点数值。就是分量 r、g、b、a 的数值都是 0原创 2022-10-20 19:22:01 · 1421 阅读 · 0 评论 -
【数学篇】09 # 如何用仿射变换对几何图形进行坐标变换?
【跟月影学可视化】学习笔记。仿射变换简单来说就是。仿射变换具有 2 个性质;向量 P(x0, y0) 沿着向量 Q(x1, y1) 平移,平移后的向量 p 的坐标。假设向量 P 的长度为 r,角度是⍺,现在将它逆时针旋转⍬角,此时新的向量 的参数方程为:rcos⍺、rsin⍺是向量 P 原始的坐标 (x0,y0),可以写成下面这个公式:用矩阵表示就是下面的公式:向量与标量(标量只有大小、没有方向)相乘即可。用矩阵表示就是下面的公式:上面的旋转和缩放都可以写成矩阵与向量相乘的形式。这种能写成矩阵与向原创 2022-10-20 02:22:44 · 1578 阅读 · 0 评论 -
【数学篇】08 # 如何利用三角剖分和向量操作描述并处理多边形?
【跟月影学可视化】学习笔记。多边形又可以分为简单多边形和复杂多边形。Canvas2D 的 fill 还支持两种填充规则:如果改成 绘制五角星将多边形分割成若干个三角形的操作,在图形学中叫做三角剖分(Triangulation)。对 3D 模型,WebGL 在绘制的时候,也需要使用三角剖分,而 3D 的三角剖分又被称为网格化(Meshing)。推荐学习:Delaunay Triangulation In Two and Three Dimensions可以使用下面库来对多边形进行三角剖分:以最简单的 E原创 2022-10-18 18:16:53 · 640 阅读 · 0 评论 -
【数学篇】07 # 如何用向量和参数方程描述曲线?
【跟月影学可视化】学习笔记。用向量绘制折线的方法来绘制正多边形圆可以用一组参数方程来定义。定义了一个圆心在(x0,y0),半径为 r 的圆。a、b 分别是椭圆的长轴和短轴,当 a = b = r 时,这个方程是就圆的方程式。抛物线的参数方程。其中 p 是常数,为焦点到准线的距离。在 lib 下面新建一个 文件,封装一个更简单的 JavaScript 参数方程绘图模块。下面使用上面封装的实现一下抛物线,阿基米德螺旋线,星形线。贝塞尔曲线是一种使用数学方法描述的曲线,被广泛用于计算机图形学和动画中原创 2022-10-18 12:00:06 · 918 阅读 · 0 评论 -
【数学篇】06 # 可视化中你必须要掌握的向量乘法知识
二维空间中向量叉乘的物理意义就是 a 和 b 的力矩(力矩你可以理解为一个物体在力的作用下,绕着一个轴转动的趋向。它是一个向量,等于力臂 L 和力 F 的叉乘。在右手系中求向量 a、b 叉积的方向时,大拇指所指的方向就是 a、b 叉积的方向,这个方向是垂直纸面向外(即朝向我们)。向量 a 和 b 的叉积,就相当于向量 a(蓝色带箭头线段)与向量 b 沿垂直方向的投影(红色带箭头线段)的乘积。在 N 维线性空间中,a、b 向量点积的几何含义,是 a 向量乘以 b 向量在 a 向量上的投影分量。原创 2022-10-12 20:42:04 · 930 阅读 · 0 评论 -
【数学篇】05 # 如何用向量和坐标系描述点和线段?
【跟月影学可视化】学习笔记。上面4个都属于直角坐标系。转换坐标系:以一个例子为例:在 的一个 Canvas 画布上实现如下的视觉效果。其中,山的高度是 100,底边 200,山是等腰三角形,两座山的中心位置到中线的距离都是 80,太阳的圆心高度是 150。可以使用一个 Rough.js:https://github.com/rough-stuff/rough的库,绘制一个手绘风格的图像。首先我们需要计算出来三角形各个顶点的坐标然后绘制效果如下:以画布底边中点为原点,x 轴向右,y 轴向上的坐标系,相原创 2022-10-11 20:56:37 · 1515 阅读 · 0 评论 -
【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
比如要绘制下面这个二维的三角形,三个顶点分别如下:WebGL 使用的数据需要用类型数组定义,默认格式是 Float32Array。是 JavaScript 的一种类型化数组(TypedArray),JavaScript 通常用类型化数组来处理二进制缓冲区。原创 2022-10-10 18:46:57 · 845 阅读 · 0 评论 -
【图形基础篇】03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?
【跟月影学可视化】学习笔记。SVG 的全称是 Scalable Vector Graphics,可缩放矢量图,它是浏览器支持的一种基于 XML 语法的图像格式。SVG 可以作为 HTML 内嵌元素使用,也可以作为图像通过 img 元素加载,或者绘制到 Canvas 内。svg 元素是 SVG 的根元素,属性 xmlns 是 xml 的名字空间。SVG 坐标系和 Canvas 坐标系完全一样,都是以图像左上角为原点,x 轴向右,y 轴向下的左手坐标系。可以通过给 svg 元素设置 viewBox 属性,来改原创 2022-10-09 11:30:29 · 588 阅读 · 0 评论