YancyCathy-CSDN博客

原创 webgl变换：深入图形缩放

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

2021-04-08 15:55:23 333

原创 webgl变换：深入图形旋转

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

2021-04-02 17:04:09 351

原创 webgl变换：深入图形平移

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

2021-03-10 19:20:37 337

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

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

2021-03-01 20:11:32 220

原创 webgl基础：绘制多边形

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

2021-01-25 16:39:02 643

原创 webgl基础：着色器基础

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

2021-01-14 14:31:00 418

原创 webgl初章：进入3D世界

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

2020-12-25 14:26:25 204

原创 canvas动画实战与性能优化

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

2020-12-13 13:56:45 670

原创初识canvas（二）

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

2020-12-10 20:02:59 514

原创初识canvas（一）

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

2020-12-09 23:57:54 425

原创 power-git

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

2020-10-26 20:56:36 195

原创（改进版）自动同步代码

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

2020-10-19 13:33:18 518

原创让你的Mac自动同步代码

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

2020-10-18 19:06:22 413

原创说一下二分查找

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

2020-10-13 21:11:07 109

原创找零问题求解

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

2020-10-02 21:17:01 2055

原创翻转一个整数

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

2020-10-01 20:20:06 1069

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

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

2020-09-30 23:28:30 400

原创寻找一定范围内的质数

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

2020-09-29 16:49:34 1348

原创反转单链表

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

2020-09-28 17:47:33 139

原创求字符串的全排列

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

2020-09-27 19:13:23 326

原创偷偷运行的逻辑 - JavaScript隐式类型转换

将写作当成兴趣，并一直进行下去。曾经这是个小小的奢望，现在已经在逐步的实现中。长话短说，既然是技术文，就不发这么多感慨了，接下来，一起进入今天的正题吧。今天给大家分享的是 JavaScript中的隐式类型转换问题。相信很多的小伙伴都曾被它困扰过，不论是开发中还是面试过程中。期望今天的分享能给你带来不一样的理解。也能让你之后不再为此烦恼。1. 基本数据类型我们都知道，在 javascript 中一共有 7 中数据类型。分别是 Object, Null, Undefined, String, Numbe

2020-09-05 21:27:59 209

原创 JS中的第二世界--正则表达式

近期的繁忙让我一直没有空闲静下心来好好写一些文章。好在，所有的忙碌都已过去，愿明天更美好。刚过完七夕，带着欢乐的心情写下这篇文章。希望读者能够喜欢哟~~你是不是经常遇到正则，却不知它在说什么，你是不是就算再项目中看到了，也会选择一眼略过，你是不是整天忘记搜索什么，却不知道有的编辑器搜索支持正则的模糊搜索……熟悉的旋律萦绕在耳边，却早已不是当初的少年。工作了很久之后，猛然发现之前自己忽略的正则是这么重要。搜索、查询、命令行、校验、截取、替换…………哪样哪样都离不开这个小东西。很多人不知道的是，正则在 J

2020-08-26 21:50:57 228

原创 Object 重识（二）

接上文：Object重识（一）3. 对象继承对象继承，我们不介绍名词，不说是什么样的继承，只从头看下每个继承方式的不足，并介绍如何补充3.1 最简单的继承function A (name) { this.name = name}function B () {}B.prototype = new A('张三')console.log(new B("李四").name) // 张三此方法是将 B 的原型直接指向 A 的原型，从而达到继承的目的。Object.create方式创建对象等

2020-08-09 22:48:05 184

原创 Object 重识（一）

内容有点儿多，将分为两篇内容与大家分享。有的地方确实难以理解，可以多动手实现一下，看看效果。一直听说有这么一句话，在JavaScript中，一切皆为对象。经本人慎重研究之后发现，此言的确不虚。（这不废话么，虚不虚的还用你说。）今天斗胆跟大家一起讨论一下JavaScript重的Object。了解Object背后的 – 生活阅读间隙，还得多注意休息哟~1. 对象的创建开始第一个小问题，看一下如何创建一个对象。创建对象有四(shi)种方式。以下几种方式都可创建一个对象，只不过创建之后的表现稍有不同。具

2020-08-09 22:47:08 347

原创 Array,重新认识一下

本文的内容api方法较多，千万，千万，千万，千万，千万，别死记硬背。没有任何作用，反而加重你学习的负担，碰到有合适的场景可以查api来使用。又是一篇基础文章，为什么要这么强调基础呢？在之前的面试中，发现好多面试者将精力放到了框架、类库上。对于基础的东西浅尝辄止。殊不知这样学习如同南辕北辙。学不好基础怎么能将更高级的东西了解透彻呢。文章意为让大家提高对基础知识的认知，更好的学习，更快的学习。很多时候你会发现一个问题，编程的知识都是互通的，一通则百通。所以呢？还是底层，还是基础。地基之深厚，方能使知识的大厦

2020-08-03 20:45:45 198

原创玩转事件循环

1. 前言这篇文章是想跟大家一起讨论一下javascript中高大上的Event Loop事件循环机制。代码得仔细分析，才能绕的过来，否则容易绕晕，谨慎再谨慎~~~事件循环主要讲的是异步执行问题，没办法，同步就是顺序执行，没什么好说的。至于什么线程、同步异步、调用栈、浏览器线程之类的概念，本文一概没有，有意者可自行查阅。2. 简介2.1 任务队列宏任务队列：script整体代码、setTimeout/setInterval……微任务队列：Promise任务队列在事件循环机制中发挥着核心

2020-07-30 19:16:27 141

原创 JavaScript 闭包的深入探索

JavaScript 闭包的深入探索哈哈，终于又能让大家看到我的文章了，开心????。感觉又有好长时间没写了，各位看官，请跟随我一起畅游知识的海洋吧。上次跟大家分享了 JavaScript作用域的相关知识点，也不知道大家看下去多少，那可是基础中的基础，学习就是这样，只有基础牢固了，接收其他知识的时候才能如鱼得水，如胶似漆，如梦如幻，如……………………（请原谅作者语文知识的欠缺）今天主要是跟大家分享一下javascript中闭包的问题，如你所料，又是一篇基础分享，赶紧止住这些呼之欲出的废话，开始我们

2020-07-24 12:34:15 134

YancyCathy的博客