diff --git a/articles/algebra.md b/articles/algebra.md deleted file mode 100644 index 7e1b465..0000000 --- a/articles/algebra.md +++ /dev/null @@ -1,12 +0,0 @@ -# Algebra - -代数 - -## Linear Algebra - -线性代数 - -- [基](https://www.douban.com/note/774496194/) - -## 域 - diff --git a/articles/notes/math.md b/articles/notes/math.md new file mode 100644 index 0000000..383be41 --- /dev/null +++ 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，这些都是以几何形式出现的。这些都是在一个时间点上看到的结果，几何本质是静止的。而代数本质上是涉及的是时间，一步推导一步推导的结果，都是在上一个时间点上，是在前一个步骤上的结果，特别是计算机出现后的，算法，就是代数的形式化过程中的产物，任何算法，任何计算过程，都是一个接着一个的，并不是那个静止下的结果。 + +几何本质是静止的，而代数，现代的算法，任何算法，任何计算过程都是有时间维度的。 \ No newline at end of file diff --git a/cg/library/imgui.md b/cg/library/imgui.md index 4d5d734..3a67980 100644 --- 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 \ No newline at end of file +## 参考 +- [Immediate Mode Graphical User Interface (IMGUI)](http://www.johno.se/book/imgui.html) + - [pdf lecture](http://www.johno.se/book/imgui.pdf) \ No newline at end of file diff --git a/cg/shader.md b/cg/shader.md index 9b57e5b..3094d2e 100644 --- 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 index b23566b..b2a4b67 100644 --- 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 index 80bd3b4..12a778a 100644 --- a/web/css.md +++ b/web/css.md @@ -1,27 +1,31 @@ # CSS-Cascading Style Sheets -## meta +## Web-CSS-Standard +### meta ```html ``` 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/) - - - -