YancyCathy的博客

webgl变换：深入图形缩放

YancyCathy — Thu, 08 Apr 2021 15:55:23 +0800

前言关于图形的动画内容，之前已经分享完成了两篇，分别是webgl变换：深入图形平移和webgl变换：深入图形旋转。在以往的学习中，大家都会发现一个问题，没有基础的知识，即使能学会，也会忘的很快。所以在之前的文章中，不仅跟大家介绍了如何通过矩阵实现图形的平移和旋转，也详细的分析了如何通过数学知识推导得到想要的矩阵。也希望通过推导和矩阵的关联记忆，大家都可以将图形变换记忆和理解的更加深刻。今天我们来分享下最后一个变换内容：图形的缩放 ???? 闲言少叙，来看第一个内容。 1.缩放矩阵 1.1 得到各坐标

webgl变换：深入图形旋转

YancyCathy — Fri, 02 Apr 2021 17:04:09 +0800

1. 前言图形的动画是由平移、旋转、和缩放三种基础的变换方式组成。之前的文章里，分享了下如何进行图形的平移。《webgl变换：深入图形平移》，文章中使用了两种方法来实现一个图形的平移操作，直接在着色器源代码里实现通过矩阵的方式实现。而且通过推导得出了平移矩阵(列主序) | 1 0 0 0 | | 0 1 0 0 | | 0 0 1 0 | | Tx Ty Tz 1 | 1.1 两种方式对比优点缺点源代码 1.容易

webgl变换：深入图形平移

YancyCathy — Wed, 10 Mar 2021 19:20:37 +0800

在以前的文章里，不管是绘制图形，绘制点亦或者是改变色值，所有的内容都是静态的。在 webgl 里，图形的运动分为平移、旋转、缩放三种类型。接下来，我们会从零基础开始，一点一点来深入了解图形如何进行运动。首先来从零开始了解下图形的平移 1. 图形平移首先我们来看如何实现图形的平移操作。平移的操作就是将图形的原始坐标加上对应的移动距离。首先来看下平移的实现 const vertexShaderSource = "" + "attribute vec4 apos;" + // 定义一个坐

webgl基础：顶点到片元的联动

YancyCathy — Mon, 01 Mar 2021 20:11:32 +0800

继前期分享了初入webgl 的一些内容之后，相信大家已经对webgl有了一个初步的认识，今天再来分享一些基础内容，已加深大家对于它的认知。众所周知，3d 的内容是比较多的，也很容易让人看的很迷惑。所以，此系列文章的分享理念就一个 – 说透彻，说清楚，说明白。好了，话不多说，进入今天的分享内容。 1. 前言：分享之前先来回顾一下两个内容： webgl 中有几种类型的变量？如何使用缓冲区对象向着色器传递数据？也希望大家带着这两个问题来阅读本篇文章。 2. varying变量的使用前边的文章中介

webgl基础：绘制多边形

YancyCathy — Mon, 25 Jan 2021 16:39:02 +0800

hi~ everybody. 又到了愉快的分享时刻了。在前面两节内容中给大家分享了如何通过 webgl 来绘制一个点，并且介绍了着色器的一些基础知识。当然了，仅仅只有文字的描述是不能勾起大家学习 webgl 的欲望的，还需要自己动手实现下。观察自己写的代码是如何运作的。好了，之前的内容仅仅是绘制一个点，可能内容上略显简单了，今天就来介绍下如何绘制多边形。本节内容中涉及到较多的方法介绍，可先忽略。待有需要的时候查阅。 1.通过js控制图形学习绘制多边形之前，我们先来看一个问题 – 如何通过js来控

webgl基础：着色器基础

YancyCathy — Thu, 14 Jan 2021 14:31:00 +0800

前言：(十分重要) 上节文章中，跟大家分享了一下如何入门 webgl 并在画布上绘制一个点。诚然，我们看到的流程是十分繁琐的。这里想说明的一点是，webgl 基础很类似于 JavaScript 基础。在学习 JavaScript 的时候如果直接上手 jquery、vue、react、angular…… 想必之后的天花板会非常非常低。因为学习曲线决定了上手难度，而基础决定了天花板高度。学习 webgl 可能在前期会比较麻烦，也会有很多难以理解的知识点。像：光线、3d坐标、矩阵变换、矩阵处理（乘积、点

webgl初章：进入3D世界

YancyCathy — Fri, 25 Dec 2020 14:26:25 +0800

终于要进入到webgl的世界了。还真是有点小激动。在之前的文章里，跟大家详细分享了下 canvas 的相关内容。下面会有这几篇文章的链接，有兴趣的小伙伴可以自行查阅。 canvas入门篇一 canvas入门篇二 canvas实战篇准备好了吗？接下来让我们开启奇幻旅程，进入 3D 的世界。 1. 认识3D 首先我们要介绍的是几个概念，这是我们要进入到 3D 不可或缺的内容。认识一下它们吧。 1.1 视点，视线，目标点，上方向这几个概念在webgl中属于最常见的内容。视点：可以简易的理解为眼睛，也叫

canvas动画实战与性能优化

YancyCathy — Sun, 13 Dec 2020 13:56:45 +0800

插播一篇关于 canvas 动画及性能优化的文章，为我们可以更好的进入到 webgl 的世界奠定基础。本篇文章的内容可能会稍难理解，还希望大家有问题及时提出。闲话我们就不多说了，开始今天的正题吧。 1. 动画实战首先介绍一下我们要实现的动画内容：夜空中的流星源码。今天就来跟大家详细分享一下如何进行编写 canvas 动画以及如何进行优化。 1.1 搭建页面 canvas的页面组成是非常简单的。如下所示： <

初识canvas（二）

YancyCathy — Thu, 10 Dec 2020 20:02:59 +0800

上节文章中，给大家分享了canvas最基础的用法，包括绘制线条、控制渲染方式、绘制图形、作用域、添加阴影、清理、剪切等功能，本节将继续为大家分享canvas的基础用法，同时也是最后一节基础知识分享，之后的内容，我们将会进入到对webgl的分享中。 1. 文本绘制首先我们要提到的是绘制文本，在canvas 的开发过程中，文本的内容是肯定会存在的。本小节就来给大家分享下如何渲染文本。 1.1 绘制空心和实心文本 canvas中提供了两种绘制文本的方法，分别是绘制实心文本和空心文本，它们的方法分别是： str

初识canvas（一）

YancyCathy — Wed, 09 Dec 2020 23:57:54 +0800

首先给大家发布一个消息，从今天开始，作者会陆续分享基于 3D 内容 – webgl。同时也希望有兴趣的同学一起讨论。闲话咱们就不说了，直接开始正题。（文章略长，阅读请注意休息哟~） 1. 3D基础 – 初识 canvas（画布）说到前端的3D开发，肯定避免不了 canvas 这个内容。我们也从这个内容开始，逐步进入到3D的世界。 1.1 canvas 简介相信很多小伙伴们对于这个标签并不陌生，在职业生涯中，或多或少都会接触一点儿。但是！！！我们还是要简单介绍一下它。 canvas 是一个 HTML5

power-git

YancyCathy — Mon, 26 Oct 2020 20:56:36 +0800

这几天倒腾了一个小工具。下面是说明文档。正在开发的你是不是被很多个项目、很多个分支困扰，每次都需要切换到每个分支上，开始 rebase、push等一系列操作，然后在这痛并快乐的过程中持续同步 master 的最新代码。现在好了。power-git可以一站式帮你解决这些问题。 1. 如何开始？首先我们需要全局安装我们的命令 npm install power-git -g 这样，在我们的电脑上会有这样一个命令 pgit 如果你使用了 nvm 来管理你的 node 版本，一定要注意查看当前命令安装

（改进版）自动同步代码

YancyCathy — Mon, 19 Oct 2020 13:33:18 +0800

上一篇文章，跟大家分享了一下如何让你的mac自动同步代码。但是在实际应用中发现会有点儿小问题，比如说：如果某一个分支同步失败，会直接退出当前任务，剩下的分支要自己同步。异步抓取错误，导致同步信息不好抓取。使用了 fs 来将错误信息录入到提醒文件中，每次处理的都是覆盖式写入，所以会导致查看不及时，日志丢掉的问题。本着负责到底的原则，这里跟大家再分享一个改进版。用来改进这些问题。 1. 改进点首先我们来看下改进点：使用 shell 命令来追加错误日志。使用 spawnSync 代替 spa

让你的Mac自动同步代码

YancyCathy — Sun, 18 Oct 2020 19:06:22 +0800

给大家分享一个好玩的小工具 – 如何让你的Mac自动同步代码相信大家在开发过程中肯定是并发运行多个需求。也相信大家一定会被频繁的同步远程分支代码搞的焦头烂额。有的时候由于过度的投入到开发中，时间长了忘记了同步线上代码这项操作，等到上线的时候，啧啧啧~那个酸爽，各种解决冲突，而且还可能导致需求重新测试，不仅浪费了自己的时间，也会导致需求延期，更重要的是可能影响到你的 money。???? 闲言少叙，开始进入正题吧！ 1. 获取代码功能由于本功能使用 node 开发，先介绍下基本的依赖项 1.1 依赖模块

说一下二分查找

YancyCathy — Tue, 13 Oct 2020 21:11:07 +0800

今天跟大家分享一个比较简单且比较实用的搜索算法 – 折半查找二分查找也叫折半查找，是我们在有序（注意：是有序）数组中查找元素的高效算法。很多大家熟悉的地方也使用了二分查找这种方式。比如：git bisect 好了，闲话不说，我们开始今天的分享。 1. 二分查找解释：什么叫二分查找呢？顾名思义，就是将我们需要查找的数组不断的切分两份，直到找到要查找的元素。这里要注意一点，一定要是有个有序的数组栗子????： const arr = [ 2, 3, 4, 5, 6, 7, 12, 34, 42, 4

找零问题求解

YancyCathy — Fri, 02 Oct 2020 21:17:01 +0800

今天我们来分享一个大家都喜闻乐见的问题 – 找零问题。为什么说会喜闻乐见呢？这不想多了嘛，都跟你谈钱了，还需要多说什么吗。说到钱，我们就不说闲话了，直接来看下今天的分享内容吧。本文中会用到贪心算法和动态规划，不太明白的同学可以自行查阅这两种算法的内容，或者之后我们来做相关的分享。首先来看如何使用贪心算法来求解。以及何时可以使用贪心算法求解。 1. 贪心算法的求解栗子????：假设当前有1、2、5、10、20、50、100 等面额的纸币，请你使用最少的纸币数量来找零。像这种问题的找零问题

翻转一个整数

YancyCathy — Thu, 01 Oct 2020 20:20:06 +0800

今天又是给大家分享一个小的知识点 – 翻转一个整数相信我，知识点so so so easy……，并且很容易理解。好了，闲话咱们就不多说了，直接开始今天的正题吧。首先先来看下题目是什么。实现一个整数的翻转如：初始值：123，翻转后：321 初始值：-123，翻转后：-321 首先不看答案，按照自己的想法来解答一遍。 1. 第一版有多少同学看到题目的瞬间想起来的是下面这种解法、首先将数字转换为字符串然后判断第一个字符如果是符号，则截取第一个字符后的内容如果不是符号，则截取全部

实现一个简单的服务自动重启

YancyCathy — Wed, 30 Sep 2020 23:28:30 +0800

今天跟大家分享一个好用的技能 – 监听文件变化，自动重启服务很多时候我们都会用到 webpack 中带的热更新插件来实现这个功能，接下来我们就来看下如何使用 node 原生的 api 来实现。此法不一定适用于所有项目，需要根据实际项目来自行选择。首先我们来看下需要用到的模块和api 1. 需要用到的模块 fs 毫无疑问，想要监听文件变化，此模块是必不可少的。 path 此模块可以说跟 fs 狼狈为奸，我们可以使用此模块来获得任何我们想要的路径。 child_process 此模块可

寻找一定范围内的质数

YancyCathy — Tue, 29 Sep 2020 16:49:34 +0800

今天给大家分享一个比较简单，但是比较好玩的题目 – 寻找一定范围内的质数第一眼看到这个题目大家一定会这么想：这么简单的题目，有必要给大家分享吗？还请大家带着这样的疑问，继续深入的向下看。 1. 第一版：双循环看到这样的题目，大家肯定会第一时间想起来双循环的解决方式，不忙，先来个小栗子看下栗子：???? function findPrimeNumbers (n) { const result = [] for (let i = 4; i < n; i++) { let statu

反转单链表

YancyCathy — Mon, 28 Sep 2020 17:47:33 +0800

今天跟大家分享一个已经被写烂了的题目 --> 反转单链表相信大家一定在日常的工作、面试中被这道题所难倒过，而且也相信很多人都会在网上查找实现方案，并且会牢牢记住。但是！每次觉得自己记的很好了，一到写代码的时候还是两眼一抹黑。这就是知其然不知其所以然的后果，一定要深入的弄懂一个题目，并不要只记住代码，世上代码千千万，又能记住多少呢？接下来，我们就来看下如何实现一个单链表的反转。 1. 创建一个单链表首先我们需要一个单链表。（相信单链表的定义一定不需要多说，大家都知道）上栗子：???? con

求字符串的全排列

YancyCathy — Sun, 27 Sep 2020 19:13:23 +0800

今天给大家分享一道简单的算法题 – 求字符串的全排列相信很多人都会被这道题考查过，也有很多人不能写出来，放轻松，接下来我们来看下如何实现这道题。首先我们来看下问题是什么。给定一个字符串，求出这个字符串所有可能出现的排列组合。如： abc 输出: [ ‘cba’, ‘bca’, ‘cab’, ‘acb’, ‘bac’, ‘abc’ ] 准备好了吗？来一起看下如何实现吧。解答思路：首先我们来做个假设：当前给的字符串为 'a' 。那么返回的只有一个排列 [ 'a' ]。当前给的字符串为