update

lmj01 · Feb 7, 2024 · 7113254 · 7113254
1 parent 21cc345
commit 7113254
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 57 deletions.
diff --git a/articles/algebra.md b/articles/algebra.md
diff --git a/articles/notes/math.md b/articles/notes/math.md
@@ -0,0 +1,26 @@
+# Math
+> 数学
+
+
+
+
+## Linear Algebra
+
+线性代数
+
+- [基](https://www.douban.com/note/774496194/)
+
+## 域
+
+## 观点
+
+### 迈克尔·阿蒂亚：二十世纪的数学发展
+
+从线性到非线性的发展，从非欧几里得几何的不同阶段到Riemann的更一般的几何，都是非线性的。
+
+几何与代数，Euclid几何是数学理论中最早的一个例子，直到Descartes引入现在称为笛卡尔坐标系之前，一直是纯几何，之后是代数形式的尝试。
+Newton和Leibniz在分析方面的工作就是Newton以一个几何四维来思考，Leibniz使用形式化代数来思考，到现在的符号就是以Leibniz的符号来表示的。
+
+几何是关于空间的，当你一眼观望完一个房间时，你的大脑所看到的太多东西了，空间直觉spatial intuition或空间知觉spatial perception，这些都是以几何形式出现的。这些都是在一个时间点上看到的结果，几何本质是静止的。而代数本质上是涉及的是时间，一步推导一步推导的结果，都是在上一个时间点上，是在前一个步骤上的结果，特别是计算机出现后的，算法，就是代数的形式化过程中的产物，任何算法，任何计算过程，都是一个接着一个的，并不是那个静止下的结果。
+
+几何本质是静止的，而代数，现代的算法，任何算法，任何计算过程都是有时间维度的。
diff --git a/cg/library/imgui.md b/cg/library/imgui.md
@@ -1,21 +1,22 @@
 # imgui
+> 通用的UI随着时间也会不再那么通用了，因为业务逻辑的发展，通用UI的缓存问题限制了灵活使用UI的问题。传统UI保持不变不更新，但现在更喜欢实时循环，从原来的对象到现在由状态来调用UI绘制的过程，原来的设计模式下的复用，并不能很完美的复用，会因为编程语言的语法更新而改变。
+>> 这是范式的改变，与传统的GUI的区别，支持任何的数据驱动可视化。
 
 立即模式，有多种实现
 
-[Casey Muratori](https://caseymuratori.com/)的一篇文章中描述，imgui模式的开始[Inmediate Mode GUI paradigm](https://caseymuratori.com/blog_0001)。但让我想到的是blender那套UI，也是自己使用OpenGL绘制，但那个逻辑复杂度就比较高了。
-
-[Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies.](https://github.com/ocornut/imgui)
-[A single-header ANSI C immediate mode cross-platform GUI library, This is a minimal-state, immediate-mode graphical user interface toolkit written in ANSI C and licensed under public domain](https://github.com/Immediate-Mode-UI/Nuklear)
+- Frame shearing，在实时应用中，每秒刷新很多帧，用户交互总是响应于前一帧绘制的内容，即在交互之前需要绘制出来，可能存在新旧状态的交替，需要特别注意
+- 屏幕内容每帧都在变化，可以使屏幕容量无限大，不需要考虑重叠窗口、滚动视图等页面选项卡内容，这样更有效率，传统布局算法都需要两次遍历所有UI组件(第一遍计算大小，第二遍计算布局)
+- 状态少，只有必要状态，其他状态都是由应用程序控制，
 
-## ocornut Dear ImGui
-
-### 优点
+[Casey Muratori](https://caseymuratori.com/)的一篇文章中描述，imgui模式的开始[Inmediate Mode GUI paradigm](https://caseymuratori.com/blog_0001)。但让我想到的是blender那套UI，也是自己使用OpenGL绘制，但那个逻辑复杂度就比较高了。
 
-- 快，实现简单
-- 无状态, 逻辑维护都需要自己调用者自己维护
 
-### 缺点
+## [ocornut Dear ImGui](https://github.com/ocornut/imgui)
+Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies.
 
--无状态，通常布局算法都需要两次遍历所有UI组件(第一遍计算大小，第二遍计算布局)
+## [Nuklear](https://github.com/Immediate-Mode-UI/Nuklear)
+A single-header ANSI C immediate mode cross-platform GUI library, This is a minimal-state, immediate-mode graphical user interface toolkit written in ANSI C and licensed under public domain
 
-## Nuklear
+## 参考
+- [Immediate Mode Graphical User Interface (IMGUI)](http://www.johno.se/book/imgui.html)
+    - [pdf lecture](http://www.johno.se/book/imgui.pdf)
diff --git a/cg/shader.md b/cg/shader.md
@@ -125,6 +125,9 @@ mat3(
   vec2, float);   // third column
 ```
 
+### [Interface Block (GLSL)](https://www.khronos.org/opengl/wiki/Interface_Block_(GLSL))
+一块块的声明变量。
+
 ## Reference
 关键字在github全局搜索
 
@@ -145,3 +148,7 @@ mat3(
 
 - [A node.js-style module system for GLSL! ](https://github.com/glslify/glslify)
   - [A reusable GLSL directional light function ](https://github.com/hughsk/glsl-directional-light)
+
+- [The Book of Shaders by Patricio Gonzalez Vivo & Jen Lowe ](https://thebookofshaders.com/00/)
+- [OpenGL 图元处理，一些关于OpenGL的概念](https://www.jianshu.com/p/3d974e69f842)
+  - [Learning practice demo for examples in OpenGL Super Bible 6th ](https://github.com/StarryThrone/OpenGL-SBible-example-code)
diff --git a/index/article.md b/index/article.md
@@ -6,6 +6,7 @@
 - [汉语拼音网](http://www.hanyupinyin.org/)
 - [Markdown](../articles/markdown.md)
 - [Mathjax](../articles/mathjax.md)
+- [数学概念笔记](../articles/notes/math.md)
 
 ## dev-note 
 - [git](../dev-note/git.md)

diff --git a/web/css.md b/web/css.md
@@ -1,27 +1,31 @@
 # CSS-Cascading Style Sheets
 
 
-## meta
+## Web-CSS-Standard
+### meta
 ```html
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 ```
 bootstrap-vue上看到的，让网页宽度自动适应手机屏幕
 
-## 布局
+### 布局
 
 - [参考1](https://www.jianshu.com/p/5c6f761ff769)
 
-### 标准文档流
-
-### 浮动布局
-
-### 定位布局
+- 标准文档流
+- 浮动布局
+- 定位布局
 
 **absolute**
 如果没有指定top,right,bottom,left等参数,它的位置关系是relative to its closest positioned ancestor(if any) or to the initial containing block.
 
 这样可以实现dropdown的样式,
 
+### Visual formatting model
+it is an algorithm that processes a document and display it on visual media.
+it transforms each element of the document and generates zero, one, or several boxes that conform to the **box model**
+
+
 ### flex
 
 #### 轴
@@ -43,17 +47,17 @@ bootstrap-vue上看到的，让网页宽度自动适应手机屏幕
         - 基线排列 baseline
         - 拉伸排列 stretch
 
-## effect
+### effect
 
-### scroll
+#### scroll
 
 如果要是scroll起作用，一定是在子元素设置min-width,这样就会超出父元素，在父元素设置overflow-auto就可以有滚动条了。
 是子元素冒出父元素，不是父元素使用子元素
 
-### li 
+#### li 
 横向摆放，使用float-left模式来处理
 
-### Cascading order - specificity
+#### Cascading order - specificity
 [CSS2-Cascading order](https://www.w3.org/TR/CSS21/cascade.html#specificity)
 [css-cascade-4](https://drafts.csswg.org/css-cascade-4/#important)
 [CSS Specificity And Inheritance](https://www.smashingmagazine.com/2010/04/css-specificity-and-inheritance/)关于CSS的权重问题，这个概念很复杂
@@ -158,7 +162,7 @@ linear transformations also can be represented by Matrix function. It combine mu
 
 ![](../images/css-matrix.svg)
 
-## API 
+### API 
 
 - clip-path 裁剪不规则形状
 
@@ -172,16 +176,7 @@ div {
 - [CSS Painting API]
     - [clip-path](https://juejin.cn/post/7171609307253833764)
 
-## Tools
-
-### WebAIM:web accessibility in mind
-- [Color Contrust Check](https://webaim.org/resources/contrastchecker/) 
-
-## Visual formatting model
-it is an algorithm that processes a document and display it on visual media.
-it transforms each element of the document and generates zero, one, or several boxes that conform to the **box model**
-
-## variable
+### variable
 ```css
 :root {
     --main-color: pink;
@@ -191,6 +186,19 @@ div {
 }
 ```
 
+## Tools
+
+### WebAIM:web accessibility in mind
+- [Color Contrust Check](https://webaim.org/resources/contrastchecker/) 
+
+### BEM 
+Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.是由Yandex团队提出的一种CSS Class的命名方法
+
+### 高难度
+
+- [CSS实现的机械装置， 作者有一系列的创作](https://cohost.org/blackle/post/42994-div-style-pointer)
+
+
 ## [Sass](https://www.sasscss.com/)
 
 Syntactically Awesome StyleSheets
@@ -201,7 +209,6 @@ Syntactically Awesome StyleSheets
 
 [scss doc](https://www.sasscss.com/documentation)
 
-
 [参考使用方法](https://github.com/lmj01/startbootstrap-grayscale)
 
 [boots-watch](https://bootswatch.com/)的demo展示了主体样式切换的原理，就是css文件的替换后自动刷新。它利用了scss预处理技术，把bootstrap中的变量进行了替换，和一些基本样式的更改，
@@ -220,22 +227,18 @@ div {
     }
 }
 ```
+- [循环测试](https://sass-lang.com/playground/#eJyFUttuwjAMfe9XeKVTKGoGZS2M9oU97wP2nEFKI/WmkKlMKP8+N70yJhHJOk58ObZj33dqcVTpB/+JIPTAX6EgrhFfG0E9QAwQQ5QN6hvELeJbI6jvEHdhDNaes0MKjgBRwJAWrhbAS01nV0foRgcwpqhxXIBfXeBJ5FUpFStUjHZtactaLsE5ZOx8ppXkibhEUNO4ed0npQSngESWOfigUll+n1JYB8iDZqRCommkxnuhe+tAPneK5TpwF/5q9XxTgHHTDWAZpg4T8S4lBrXWuZ2L4rN5taNwu6kuHtgZ++KZHRFRsSNxvXvH7WZ341gwKcuaVofO2zXUTlv0lA3TEBNEInIoM+IBOaufjJPIFNZzTd3KJDlzRSeuOZMnUdCMJ2pK1/+Y4vn4aUjej2uf86NgMMc2aDe42TVnFT1xNTdhHulbJK52xzF3mdt2TO6hs9EJ/n7yJHn75HU9uZreEQ+WeMz3cD3a82hJ2vNPNe04XX27QPE0To+XQdXTtfoF1vbwVQ==)
 
-## [Stylus](https://github.com/stylus/stylus/)
+### playground
 
-Expressive, robust, feature-rich CSS language built for nodejs。vue官方使用它。
+- [sass](https://sass-lang.com/playground/)
+- [sass meister](https://www.sassmeister.com/)
 
-## BEM 
-Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.是由Yandex团队提出的一种CSS Class的命名方法
+## [Stylus](https://github.com/stylus/stylus/)
 
-## 高难度
+Expressive, robust, feature-rich CSS language built for nodejs。vue官方使用它。
 
-- [CSS实现的机械装置， 作者有一系列的创作](https://cohost.org/blackle/post/42994-div-style-pointer)
 
 ## 参考
 
 - [css 3d transforms](https://polypane.app/css-3d-transform-examples/)
-
-
-
-