可视化学习:如何使用后期处理通道增强图像效果

6 月 14 日
阅读 5 分钟
208
大家好,本文分享的是如何使用后期处理通道增强图像效果,通过前面几篇文章,我们了解了一些动态生成纹理的方法,比如符号距离场SDF、基于参数方程生成图案、基于噪声生成纹理,等等。这些生成纹理的技术有相似的地方,就是根据片元的纹理坐标,对片元着色,直接生成纹理。
封面图

可视化学习 | 如何使用噪声生成纹理

6 月 3 日
阅读 8 分钟
242
首先,什么是噪声呢?在上篇文章中我介绍过一个生成随机数的函数,利用随机技巧我们生成了一个类似剪纸的图案,那在自然界中,这种离散的随机也是比较常见的,比如蝉鸣突然响起又突然停下,比如雨滴随机落在一个位置,但是随机和连续并存是更常见的情况,比如山脉的走向是随机的,但山峰之间的高度又是连续的,比如天上...
封面图

可视化学习:使用极坐标参数方程和SDF绘制有趣的图案

5 月 22 日
阅读 7 分钟
180
说到曲线和几何图形的绘制,我们知道图形系统默认支持的是通过直角坐标绘制,但是有些曲线呢,不太容易使用直角坐标系来表示,却可以很方便地使用极坐标来表示,这个时候我们可以选择通过极坐标和直角坐标的相互转换,来实现图形的绘制。
封面图

WebGL:使用着色器进行几何造型

5 月 11 日
阅读 3 分钟
131
本文将介绍如何使用着色器来进行几何造型,说到几何图形大家一定都不陌生,比如说三角形、圆形,接触过WebGL基础使用的小伙伴一定都知道怎么去在画布上绘制一个三角形,只要传入三个顶点坐标,并选择绘图模式,我们就能在WebGL的画布上画出一个三角形。
封面图

可视化学习:WebGL实现简易的局部“马赛克”

4 月 29 日
阅读 4 分钟
98
接触过Canvas的小伙伴应该都知道,在Canvas2D中我们要加载一个图片很简单,通过调用drawImage API就能将图像绘制到画布上,当然在WebGL中我们也可以绘制图像,在绘制时我们需要用到WebGL中的纹理对象,在之前WebGL实现网格背景的文章中,我使用了一个叫做纹理坐标的配置,现在要完成纹理的加载我们也需要用到纹理坐标,...
封面图

CSS之定位Position

4 月 22 日
阅读 10 分钟
126
之前在《CSS之浮动》中,我当时是想一起说说定位的,因为我在很多地方看到有把float和position放在一起讲的,说它们的一些属性值可以使元素脱离文档流,但是没想到在准备内容的时候,发现浮动的内容有点多,就先把浮动的内容单独整了一篇。本文就继续来说说定位吧。

可视化学习:使用WebGL绘制圆形,实现色盘

4 月 12 日
阅读 4 分钟
139
在Canvas2D中实现圆形的绘制比较简单,只要调用arc指令就能在Canvas画布上绘制出一个圆形,类似的,在SVG中我们也只需要一个<circle>标签就能在页面上绘制一个圆形。那么在WebGL中我们要怎么去绘制呢?WebGL只能绘制三种形状:点、线段和三角形,它没有提供直接绘制圆形的功能,当然也无法像SVG一样使用标签,所以...
封面图

可视化学习:实现Canvas图片局部放大镜

3 月 28 日
阅读 5 分钟
220
最近我在可视化课程中学习了如何在Canvas中利用像素处理来实现滤镜效果,在这节课程的结尾留了一道局部放大镜的题目,提示我们用像素处理的方式去实现这个效果,最终实现随着鼠标移动将图片局部放大,本着把学到的内容落地实践的想法,我就去思考了一番,但很不幸,我思考了好几天也没思考出结果,因为刚开始我想的一直...
封面图

可视化学习:WebGL实现缩放平移

3 月 21 日
阅读 4 分钟
200
在上篇文章中,我们使用WebGL实现了网格背景,当时有提到说使用WebGL来实现的好处之一,是网格背景可以与画布上的其他元素更好地融合,比如一起缩放平移,那么在WebGL中怎么实现缩放和平移呢?现在我们已经实现了网格背景,接下来我们就用网格背景作为例子来了解一下WebGL中的缩放和平移。

可视化学习:使用WebGL实现网格背景

3 月 5 日
阅读 5 分钟
271
作为前端开发人员,我们最关注的就是应用的交互体验,而元素背景是最基础的交互体验之一。一般而言,能够使用代码实现的界面,我们都会尽可能减少图片的使用,这主要是有几方面的原因,第一,是图片会消耗更多的带宽,对于移动端或者网络信号较差时的体验不够友好,第二是不够便捷,在使用图片的情况下即使有细微的调整...

CSS之浮动Float

2 月 25 日
阅读 7 分钟
564
提到浮动,前端的小伙伴肯定都不陌生,但是随着弹性布局等等一些更好用的标准出来后,用在布局方面少了很多,当初我刚开始接触前端的时候,很习惯用浮动来给元素改变定位,当时还并不是很流行flexbox布局,很多布局会通过浮动来实现,但是使用浮动来布局会产生一些副作用,比如虽然使用浮动可以使元素向左或向右靠齐,但...

设计模式:适配器模式

2 月 7 日
阅读 4 分钟
498
设计模式是通用的、可复用的代码设计方案,也可以说是针对某类问题的解决方案,因此,掌握好设计模式,可以帮助我们编写更健壮的代码。wiki中将设计模式分为四类,分别是:创建模式(creational patterns)结构模式(structural patterns)行为模式(behavioral patterns)并发模式(concurrency patterns)适配器模式属...

设计模式:策略模式/状态模式

1 月 29 日
阅读 5 分钟
392
设计模式是通用的、可复用的代码设计方案,也可以说是针对某类问题的解决方案,因此,掌握好设计模式,可以帮助我们编写更健壮的代码。wiki中将设计模式分为四类,分别是:创建模式(creational patterns)结构模式(structural patterns)行为模式(behavioral patterns)并发模式(concurrency patterns)策略模式和状...

puppeteer的简单使用

1 月 10 日
阅读 5 分钟
274
对于编写应用程序,尤其是要部署上线投入生产使用的应用,QA是其中重要的一环,在过去的工作经历中,我参与的项目开发,大多是由测试同学主要来把控质量的,我很少编写前端方面的测试代码,对于测试工具的使用,也基本停留在一个小玩具的样子,所以接触的也少,回忆上一次写单元测试,还是在一个vue3的课程中使用jest实...

可视化学习:图形系统中的颜色表示

2023-12-28
阅读 6 分钟
333
说到颜色,前端的小伙伴们一定都不陌生,比如字体颜色、背景色等等,颜色是构建视觉效果的重要部分,所以也必然是可视化的关键部分,当学习到可视化中有关于颜色表示的这一部分时,我也想起了我曾经玩过的一个游戏,叫做Blendoku,这个名字和数独的Sudoku有些类似,考验的是玩家对颜色的敏锐度,下面是其中一个关卡的截...
封面图

可视化学习:CSS transform与仿射变换

2023-12-21
阅读 4 分钟
413
在几年前,我就在一些博客中看到关于CSS中transform的分析,讲到它与线性代数中矩阵的关系,但当时由于使用transform比较少,再加上我毕竟是个数学学渣,对数学有点畏难心理,就有点看不下去,所以只是随便扫了两眼,就没有再继续了解了。现在在学习可视化,又遇到了这个点,又说到这是可视化的基础知识,既然这样,那看...

开源地图库OpenLayers的简单使用

2023-12-14
阅读 5 分钟
425
最近在学习可视化的东西,这让我想起了一些以前用过的图表库,其实我在日常做的大多是普通的需求,可视化方面应用的并不多,只是偶尔会因为个别特殊的需求,去借助一些图表库来实现图表的展示,这些普通的图表库,在使用上都大差不差,并没有什么太大的区别,但是某些特殊的图表库,比如地图库,在使用上和一些普通的图...
封面图

可视化学习:WebGL的基础使用

2023-12-07
阅读 5 分钟
291
继续复习可视化的内容。WebGL和其他Web端的图形系统存在很大的不同,是OpenGL ES规范在浏览器的实现,它最大的不同就在于它更接近底层,可以由开发者直接操作GPU来实现绘图,性能很好,可以充分利用GPU并行计算的能力,并且WebGL还支持3D物体的渲染;WebGL最大的缺点应该就在于它的使用比较复杂,不易掌握,不同于一般的...

可视化学习:利用向量判断多边形边界

2023-11-30
阅读 7 分钟
322
继续巩固我的可视化学习,向量运算是计算机图形学的基础,本例依旧是向量的一种应用,利用向量判断多边形边界,但是多边形的边界判断稍微有点复杂,所以除了应用向量之外,还需要借助三角剖分的相关工具。这个例子中可视化的展示采用Canvas2D来实现。
封面图

可视化学习:利用向量计算点到线段的距离并展示

2023-11-21
阅读 7 分钟
627
最近我在学可视化的东西,借此来巩固一下学习的内容,向量运算是计算机图形学的基础,这个例子就是向量的一种应用,是利用向量来计算点到线段的距离,这个例子中可视化的展示采用Canvas2D来实现。
封面图

浏览器事件循环Event Loop

2023-11-14
阅读 6 分钟
358
事件循环不是浏览器独有的,从字面上看,“循环”可以简单地认为就是重复,比如for循环,就是重复地执行for循环体中的语句,所以事件循环,可以理解为重复地处理事件,那么下一个问题是,处理的是什么事件,事件的相关信息从哪里获取。
封面图

display: none与visibility: hidden的区别

2023-09-27
阅读 4 分钟
668
在前端面试中,一般比较侧重JavaScript方面的考察,CSS布局方面考察的内容会相对少一些,其中display: none与visibility: hidden的区别是较常见的考点,这两个css配置都可以从视觉上隐藏DOM元素,那这两者的使用上有什么区别呢?

设计模式:迭代器模式

2023-09-02
阅读 5 分钟
1.1k
设计模式wiki中将设计模式分为四类,分别是:创建模式(creational patterns)结构模式(structural patterns)行为模式(behavioral patterns)并发模式(concurrency patterns)迭代器模式属于其中的行为模式。迭代器做的只有一件事,就是解决集合的遍历问题。以下是wiki对迭代器模式的概括性描述:Provide a way to a...

设计模式:观察者模式/发布-订阅模式

2023-09-01
阅读 5 分钟
986
设计模式wiki中将设计模式分为四类,分别是:创建模式(creational patterns)结构模式(structural patterns)行为模式(behavioral patterns)并发模式(concurrency patterns)观察者/发布订阅模式属于其中的行为模式。实际情境公众号订阅说到发布订阅,拿微信公众号举例,就很好理解,有n个人订阅了某公众号,在该公...

设计模式:代理模式

2023-08-31
阅读 4 分钟
737
当时分享的具体内容是什么我已经不记得了,而且其实我当时也并不太理解设计模式是什么,后来阅读了一些文章,我隐隐约约地理解设计模式就是代码的设计方案。

对BFC的理解

2023-08-30
阅读 8 分钟
897
在前端的面试中,相对JavaScript而言,CSS布局方面考察的内容会相对少一些,其中BFC是布局样式方面常考的一个考点。什么是BFCBFC,全称为Block Formatting Context,翻译过来即块格式化上下文。之前在其他文章中看到的说明是,网页上一个独立且隔离的渲染区域。现在呢,我稍微查阅了一些官方的信息。在了解BFC之前,我们...

编译wasm Web应用

2023-08-29
阅读 6 分钟
1.1k
首先我们知道wasm是目标语言,是一种新的V-ISA标准,所以编写wasm应用,正常来说不会直接使用WAT可读文本格式,更不会用wasm字节码;而是使用其他高级语言编写源代码,经过编译后得到wasm应用。课程中使用了C++来编写源代码,所以这里我也用C++来编写demo。

节流与防抖

2023-08-05
阅读 4 分钟
409
节流与防抖,先从字面上理解一下,节流就是节制流入或流出,在前端方面我个人理解一下,指的是节制功能或请求的触发次数,所以节流函数字面上的意思就是防止功能或请求被频繁触发的函数;防抖呢,更好理解,防止抖动,它的字面意思更贴近前端的需求,就是防止页面抖动,以达到更好的用户体验。

HTTP响应状态码([RFC9110])

2023-08-03
阅读 14 分钟
697
响应的状态码是一个三位整数代码,用于描述请求的结果和响应的语义,包括请求是否成功以及附带了什么内容(如果有的话)。所有有效代码的范围为100至599(含599)。

浏览器缓存原理

2023-07-29
阅读 6 分钟
385
本文可以配合本人录制的视频一起食用目的通常说到浏览器缓存,大多是和性能优化有关,使用缓存,通常是两个主要目的,第一是提高访问速度,第二是减少网络IO消耗。当合理配置了缓存,可以得到提升用户体验、减轻服务器负担、节省带宽等效果,这是一种效果显著的前端性能优化手段。四个方面浏览器缓存机制涉及四个方面,...