上一页 1 2 3 4 5 6 ··· 8 下一页
摘要: 可视化学习:如何使用噪声生成纹理 什么是噪声呢?在自然界中,离散的随机是比较常见的,比如蝉鸣突然响起又突然停下,比如雨滴随机落在一个位置,但是随机和连续并存是更常见的情况,比如山脉的走向是随机的,但山峰之间的高度又是连续的,比如天上的云朵、水面的波纹等等。这种把随机和连续结合起来,就形成了噪声。通过利用噪声,我们就可以去模拟真实自然的图案。 阅读全文
posted @ 2024-06-03 22:37 beckyye 阅读(659) 评论(0) 推荐(0)
摘要: 可视化学习:使用极坐标参数方程和SDF绘制有趣的图案 本文将介绍如何使用极坐标参数方程和上一篇文章提到的距离场SDF来绘制有趣的图案。有些曲线比起直角坐标系来说,更方便使用极坐标来表示,这个时候我们可以选择通过极坐标和直角坐标的相互转换,来实现图形的绘制 阅读全文
posted @ 2024-05-22 18:17 beckyye 阅读(750) 评论(0) 推荐(2)
摘要: WebGL:使用着色器进行几何造型 本文将介绍如何使用着色器来进行几何造型,说到几何图形大家一定都不陌生,比如说三角形、圆形,在WebGL中除了直接使用顶点绘制,我们还可以使用片元着色器进行造型,以下将介绍三角形的绘制,以及应用场景。 阅读全文
posted @ 2024-05-11 11:51 beckyye 阅读(320) 评论(0) 推荐(0)
摘要: WebGL实现简易的局部“马赛克” 在Canvas2D中通过调用`drawImage` API就能将图像绘制到画布上,在WebGL中我们也可以绘制图像,在绘制时我们需要用到WebGL中的纹理对象,在之前实现网格背景的视频中,我使用了一个叫做纹理坐标的配置,现在要完成纹理的加载我们也需要用到纹理坐标,并且我们可以通过对纹理坐标处理实现简单的”马赛克“效果。 阅读全文
posted @ 2024-04-29 14:41 beckyye 阅读(577) 评论(0) 推荐(0)
摘要: CSS中的属性Position有时能帮助我们实现一些特殊的布局需求,但是它为什么能达成特殊效果的原因很容易被人忽略,通过对文档深入学习我们可以了解他们实现的逻辑,更好的帮助我们理解布局。 阅读全文
posted @ 2024-04-22 12:55 beckyye 阅读(302) 评论(2) 推荐(0)
摘要: 在之前工作的时候,偶尔会看到不同岗位同事之间互相调侃谁的地位高,后端说前端地位高,前端说后端地位高,表面上一团和气互相吹彩虹屁,实际上互相揣测谁的工资更高。开始阅读毛选后,我感觉可以用书里的方式对不同岗位的地位做一点简单的分析。不过我本人向来没什么政治敏感度,所以对办公室政治也并不太懂,因此以下也只 阅读全文
posted @ 2024-04-16 17:25 beckyye 阅读(244) 评论(0) 推荐(2)
摘要: 可视化学习:使用WebGL绘制圆形,实现色盘 在Canvas2D中实现圆形的绘制比较简单,只要调用`arc`指令就能在Canvas画布上绘制出一个圆形,类似的,在SVG中我们也只需要一个`circle`标签就能在页面上绘制一个圆形。那么在WebGL中我们要怎么去绘制呢? 阅读全文
posted @ 2024-04-12 14:32 beckyye 阅读(511) 评论(0) 推荐(2)
摘要: 可视化学习:实现Canvas图片局部放大镜 最近我在可视化课程中学习了如何在Canvas中利用像素处理来实现滤镜效果,在这节课程的结尾留了一道局部放大镜的题目,提示我们用像素处理的方式去实现这个效果,最终实现随着鼠标移动将图片局部放大,以下是我对这个效果的简单实现。 阅读全文
posted @ 2024-03-28 13:16 beckyye 阅读(625) 评论(0) 推荐(2)
摘要: 在上篇文章中,我们使用WebGL实现了网格背景,当时有提到说使用WebGL来实现的好处之一,是网格背景可以与画布上的其他元素更好地融合,比如一起缩放平移,那么在WebGL中怎么实现缩放和平移呢?现在我们已经实现了网格背景,接下来我们就用网格背景作为例子来了解一下WebGL中的缩放和平移。 阅读全文
posted @ 2024-03-21 12:01 beckyye 阅读(432) 评论(0) 推荐(2)
摘要: 作为前端开发人员,我们最关注的就是应用的交互体验,而元素背景是最基础的交互体验之一。一般而言,能够使用代码实现的界面,我们都会尽可能减少图片的使用。除了使用CSS,我们还可以通过WebGL实现某些效果。 阅读全文
posted @ 2024-03-05 12:12 beckyye 阅读(747) 评论(2) 推荐(3)
上一页 1 2 3 4 5 6 ··· 8 下一页