![[图形学]基础图形绘制-直线裁剪](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202110192053698.png)
[图形学]基础图形绘制-直线裁剪
基础图形绘制-直线裁剪
Cohen-Sutherland
Cohen-Sutherland 裁剪算法 是最常用的直线的裁剪算法，用于直线在矩形框的裁剪。
首先，给空间编码：
根据点所在的位置我们可以获得其编码。
接下来考虑几种情况：
完全在矩形框内：将端点编码按位或，若为 0，则完全在矩形框内，直接全部保留；
完全在矩形框外：将端点编码按位与，若不为 0，则完全在矩形框外，直接全部舍弃；
其它情况：计算线段与矩形框的交点，获得新的线段，继续判断。
对于 情况3，我们获得新的线段后接着判断。
这样可以有效减少计算次数，同时，遇到下图这种情况时：
我们会保留得到 AC 或 BD （取决于计算交点的顺序），然后在下一轮计算中舍弃该线段，不会出现问题。
123456789101112131415161718192021222324252627282930313233343536373839const int IN_SIDE = 0x0000;const int LEFT_SIDE = 0x0001;const int RIGHT_SIDE = 0x0010;c ...
![[图形学]基础图形绘制-多边形](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202110190126074.png)
[图形学]基础图形绘制-多边形
基础图形绘制-多边形
种子填充
给定一个多边形的顶点，圈出一个多边形，我们可以先用 Bresenham 直线算法 画上边界。
此时，若已知多边形内一个像素，我们可以轻易地从该像素出发，利用搜索（BFS、DFS等），将多边形完整填充，这就是 种子填充 算法。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263static bool pixelMatrix[SCR_WIDTH][SCR_HEIGHT];static int dx[] = { 0, 1, 0, -1 };static int dy[] = { 1, 0, -1, 0 };static void Bresenham(int x1, int y1, int x2, int y2){ bool steep = abs(y2 - y1) > abs(x2 - x1); if (steep) Sw ...
![[前端开发]简单的WebService调用](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202110141624770.png)
[前端开发]简单的WebService调用
简单的WebService调用
效果
创建一个WebService，实现接收一组数字，将其排序后，返回排序后的数字序列。
在html中输入若干数字，调用服务，展示排序后的结果。
实现
创建新项目
在 Visual Studio 中新建项目，命名为 WebServiceDemo
添加服务
添加 -> 新建项 -> Web 服务 (ASMX)，命名为 SortService.asmx
添加 Web 窗体
添加 -> 新建项 -> Web 窗体，命名为 Sort.aspx
编辑 SortService.asmx -> SortService.asmx.cs 与 Sort.aspx
代码
SortService.asmx -> SortService.asmx.cs
1234567891011121314151617181920212223242526272829303132333435using System;using System.Collections.Generic;using System.Linq;using Syste ...
![[图形学]基础图形绘制-椭圆](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202110131643691.png)
[图形学]基础图形绘制-椭圆
基础图形绘制-椭圆
中点画椭圆
基础
首先，我们考虑中点在 (0,0)(0,0)(0,0) 的椭圆。
根据椭圆的对称性，我们只需要画出第一象限的 14\frac{1}{4}41 的圆弧，即可通过对称画出整个椭圆。
中点在 (0,0)(0,0)(0,0) ，焦点在坐标轴上的椭圆的标准方程为：x2a2+y2b2=1\frac{x^2}{a^2}+\frac{y^2}{b^2}=1a2x2+b2y2=1，隐函数为：F(x,y)=b2x2+a2y2−a2b2=0F(x,y)=b^2x^2+a^2y^2-a^2b^2=0F(x,y)=b2x2+a2y2−a2b2=0，代入各点，有：
当 F(x,y)=b2x2+a2y2−a2b2=0F(x,y)=b^2x^2+a^2y^2-a^2b^2=0F(x,y)=b2x2+a2y2−a2b2=0 时，点在椭圆上；
当 F(x,y)=b2x2+a2y2−a2b2>0F(x,y)=b^2x^2+a^2y^2-a^2b^2 \gt 0F(x,y)=b2x2+a2y2−a2b2>0 时，点在椭圆外；
当 F(x,y)=b2x2+a2y2−a2 ...
![[图形学]基础知识-着色器](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202110041640333.png)
[图形学]基础知识-着色器
基础知识-着色器
基本概念
Shader
Shader （着色器）：运行在 GPU 的小程序，自定义显卡渲染画面的算法，使画面达到我们想要的效果。本质就是一段代码（主流的有 基于 OpenGL 的 GLSL、基于 DirectX 的 HLSL 等），这段代码的作用是阐述如何绘制每一个顶点的颜色以及最终每一个像素点的颜色。
顶点着色器 (Vertex Shader)：
进行顶点相关的一系列操作。通常用来把顶点从模型空间变换到平面空间。
可以用于通过 矩阵变换位置、计算照明公式来 生成逐顶点颜色 以及 生成或变换纹理坐标 等基于顶点的操作。
几何着色器 (Geometry Shader)：
以完整的图元作为输入数据，可以通过产生新顶点构造出新的（或是其它的）图元来生成其他形状，创建或销毁几何图元。
经过几何着色器处理后，得到的是一系列位于齐次裁剪空间的顶点所组成的图元，这些顶点会在后面的裁剪、透视除法和光栅化阶段得到进一步处理。
片元着色器 (Fragment Shader)：
对片元进行纹理采样、颜色汇总等处理，计算一个像素的最终颜色。
GLSL
基本要求
Shader 的开头要声明版本 ...
![[前端开发]网页浏览器](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202109292041266.png)
[前端开发]网页浏览器
网页浏览器
效果
制作网页图片浏览器，实现向前向后翻页、图片缩略图总览、图片缩略图选择、图片翻页过渡效果等功能。
点击后有图片淡入淡出效果。可以点击缩略图来切换展示图片，也可以点击左右按钮切换。
代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108<!DOCTYPE html><html> <head> <title>图片浏览器</title> <style type="text/css"> body { text-align:center; } .thumbnail { displ ...
![[图形学]基础图形绘制-圆](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202109251715127.png)
[图形学]基础图形绘制-圆
基础图形绘制-圆
中点画圆
首先，我们考虑画圆心在 (0,0)(0,0)(0,0) 的圆，其它情况仅需要平移即可。
根据圆的对称性，我们只需要画出第一象限的 18\frac{1}{8}81 的圆弧，即可通过对称画出整个圆。
圆心在 (0,0)(0,0)(0,0) ，半径为 RRR 的圆的隐函数为：F(x,y)=x2+y2−R2=0F(x,y)=x^2+y^2-R^2=0F(x,y)=x2+y2−R2=0，代入各点，有：
当 F(x,y)=x2+y2−R2=0F(x,y)=x^2+y^2-R^2=0F(x,y)=x2+y2−R2=0 时，点在圆上；
当 F(x,y)=x2+y2−R2>0F(x,y)=x^2+y^2-R^2 \gt 0F(x,y)=x2+y2−R2>0 时，点在圆外；
当 F(x,y)=x2+y2−R2<0F(x,y)=x^2+y^2-R^2 \lt 0F(x,y)=x2+y2−R2<0 时，点在圆内。
考虑画右上方的 18\frac{1}{8}81 圆弧，假设当前点在 (x,y)(x,y)(x,y) ，考虑下一个点选择 (x+1,y)( ...
![[Unity]Unity中的协程](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202109241659891.png)
[Unity]Unity中的协程
Unity中的协程
协程的基础
协程 是用户态的轻量级线程，线程内部调度的基本单位，拥有自己的寄存器上下文和栈。
同一时间只能执行一个协程，而其他协程处于休眠状态，适合对任务进行分时处理。对于 Unity 来说协程是单线程的，在主线程中完成。
切换时先将寄存器上下文和栈保存，等切换回来的时候再进行恢复。也就是说协程能保留上一次调用时的状态，每次过程重入时，就相当于进入上一次调用的状态。由于直接操作栈则基本没有内核切换的开销，可以不加锁的访问全局变量，所以上下文的切换非常快。
协程的使用
协程就像一个函数，能够暂停执行并将控制权返还给 Unity，然后在达到条件时被挂起，继续执行后面的部分。
挂起协程
12public Coroutine StartCoroutine(IEnumerator routine)public Coroutine StartCoroutine(string methodName, object value = null)
终止协程
123public void StopCoroutine(IEnumerator routine);pub ...
![[图形学]基础图形绘制-直线](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202109232323827.png)
[图形学]基础图形绘制-直线
基础图形绘制-直线
DDA
数值微分 DDA (Digital Differential Analyzer) 算法
给点两点 (x1,y1)、(x2,y2)(x_1,y_1)、(x_2,y_2)(x1,y1)、(x2,y2) ，考虑直线表达式： y=kx+b,k=y2−y1x2−x1y=kx+b,k=\frac{y2-y1}{x2-x1}y=kx+b,k=x2−x1y2−y1
显然我们可以直接模拟这个过程：从 (x1,y1)(x_1,y_1)(x1,y1) 走向 (x2,y2)(x_2, y_2)(x2,y2)，每次 x+1x+1x+1 的时候 y+ky+ky+k。
易发现，在斜率 kkk 较小的时候，所画直线比较合理，但是在 kkk 比较大的时候，会出现下图左侧这样割裂的问题：
于是，我们在 kkk 较大的时候，交换表达式中的 xxx 、yyy，这样就可以让 kkk 变小。
1234567891011121314151617181920static void Normalize(float &x, float &y){ x = (x - ...
![[前端开发]网页时钟](https://bearchildbucket-1300061763.cos.ap-guangzhou.myqcloud.com/img/articles/202109231932698.png)
[前端开发]网页时钟
网页计算器
效果
代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>时钟</title> </head><canvas id="canvas"></can ...