https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm #GLSL 这个也是
除了3D基本形的距离点集(SDF)计算，也有处理：对称平滑挖空扭曲、自2D、重复

圆=(p,l)=>length(p)-l;
盒=(p,l)=>{  vec3 q = abs(p) - l;
  return length(max(q,0.0)) + min(max(q.x,max(q.y,q.z)),0.0); }
平面=(p,n, h)=>dot(p,n)+h
线=(p,h,r)=>{p.y -= clamp( p.y, 0.0, h ); return length( p ) - r;}
圈=(p,t)=>return length(vec2(length(p.xz)-t.x,p.y))-t.y

椭圆,钻石,圆锥,4点块=...

设想屏幕中心是0,0 那四周点距-l 仍>0 就是在圆外
圆角的距离式是

length(max(abs(p)-b+r,0.0))-r

把abs去掉，会发现这是一个中心对称形， max(0,p-b+r)
P-L/2 把座标系放在画布中间，b=sqrt(L*.5) 时宽=半屏，看length 在左下角锁定一片区域。
mix(,, smoothstep(0.0,1.0,res) 尖锐混合前/背景

step(length(p-l), 1) 是圆，为什么加 max(p,0))-l 就变矩形？max保证越圆心界后左下方向都是1，然后用abs 中心对称（欸讲不会

Shadertoy 加入是 Alt+Enter 测试^迷了

sdf 是 signed distance func 的缩写。圆内是-, 越接近圆边越0 ，圆外是 + ，所以用 smooth?step 来锐化切边、mix 来混合颜色
正三角公式是
v1 r = TURN/float(N);
v1 l = atan(p.x,p.y)+PI;
d = length(p)* cos(floor(.5+l/r)*r -l);//distance-shape
n角星的边上有比率m的外角

float sdStar(p,r,int n,float m) // m=[2,n]{
// p,r not related
float an = 3.141593/float(n);
float en = 3.141593/m;
vec2  acs = vec2(cos(an),sin(an));
vec2  ecs = vec2(cos(en),sin(en)); // ecs=vec2(0,1) and simplify, for regular polygon,

float bn = mod(atan(p.x,p.y),2.0*an) - an;
p = length(p)* vec2(cos(bn),abs(sin(bn)));

// line sdf
p -= r*acs;
p += ecs*clamp( -dot(p,ecs), 0.0, r*acs.y/ecs.y);
return length(p)*sign(p.x);

🤔？？？ https://www.shadertoy.com/view/3tSGDy
另： GLSL 没随机数，雪花白噪声都是通过 hash (散列函数~ 从当前xy得来. 计算一般通过 fract(sin( ,hash2D 靠dot加权求和，不然效果xy就同
https://blog.csdn.net/u012722551/article/details/103926660 Unity CG. GLSL 函数。 filter:saturate(14) 可以在网页调色彩饱和度..

#math #signal http://amid.fish/karplus-strong 只是合成一段普通的吉他拨弦，可以用动态平均(a,b)=>(a+b)/2 递减白噪声波形。但要做得更自然，需要知道当前t 缓冲区里的波形和频率，从而仅抑制高频sin波(类似Low-Pass Filter)，

傅里叶变换可以把任何波形拆成不同频于不同起始(fr,dt)的sin波叠加，同样的原理也应用于 xy[] 路径到圆半径速度、位图切片(JPEG压缩) 等。(频谱图和它使用的 constant Q 基频f0提取。
任何波形，白噪声包括方波都可以提取为许多sin((t-dt)/fr) 相加的形式。 声音的音高也称为频率。“赫兹”的意思是“每秒振动”，6弦吉他最高弦频率为 330 Hz
不同的震动模式带来不同音色。从sin波中看出振动“块”，它代表一个完整的来回运动。我们将此块称为振动的周期。产生这些声音的方式本质上是通过在一段时间内，采用特定的振动模式并一遍又一遍地重复它。
让它们像乐器最简单的方法是：让响度随着时间的推移而消失。sin的滑动平均听起来就像木琴

振动的两种视角模式与频率—是完全同义的。知道振动模式是什么，等于在哪里标记它的频率（即每个周期有多长），知道频率就可以再现振动模式。
比如在 .1s 5Hz 和 .3 10Hz ，同时播放(+,Gain)就会变成更复杂的声音

傅里叶变换是一种数学方法，仅通过查看振动的形状即可找出振动中包含哪些正弦振动频率。在窗口内，从时间-震子位置转变为时间-正弦频率。查看不同频率的震幅分量
我们可以对任何振动使用傅里叶变换来向我们展示它的正弦频率构建块。

频率图的y是一条连续的分量频率线，而不是代表正弦曲线的各个频率的单个点：不是像方波那样的 100 Hz、300 Hz 和 500 Hz，白色的频率分量噪声分布在一个连续的范围内
就像白光包含相同数量的光谱中所有颜色一样，白噪声包含相同数量的振动频谱中的所有频率
就像一块大理石包含所有可以想象的雕像一样，从白噪声开始，取出我们想要的那种声音。

通过简单地使每个振动周期的大小变得越来越小，均匀抑制了所有分量频率
周期[0]=白噪声；[1]=f(x)/2 缩小，将所有频率数量减少相同
对于 Karplus-Strong ，右x的高频信号衰减更快。这种方式是有道理的，当我们拨动吉他弦时，它开始在整个地方振动，具有广泛的分量频率，但更快的振动当然会更快地消失。
对于一把真正的吉他，周期间过渡会更加渐进，拖延较长的时间。通过改变每个周期的长度来调整每段；改变我们降低高频的速度，可以使声音持续时间更长（听起来像电吉他）或更短（听起来更像原声吉他）。

+声音是由物体振动产生的。振动的形状带来不同的声音。
+振动的频率是震子每秒来回移动的次数。频率越高，音调就越高。
+傅里叶变换表明，我们可以将任何振动分解为不同频率的分量正弦振动的混合。


https://www.jezzamon.com/fourier/zh-cn.html #recommend #learn
公式参考 Better Explained

“ 将声音表示为一堆正弦波。然后可以通过忽略掉较小幅度的高频成分来压缩声音。尽管得出的波形与原始波形不一样，但是听起来将会和原始声音很接近。这基本上就是MP3做的事情
能够在计算机上区分高低频，我们就可以了解一个人实际可以听到的内容。或弄清楚这个波包含了什么音符。

” 我们可以将一个手绘图理解为一个3D的形状，因为点的位置在随时间移动。如果你想象一个人正在绘制一只手，那么这三个维度就代表了某一时刻铅笔尖的位置。除了x和y维度告诉我们笔尖的位置，还有一个时间维度。

我们只用几个圆圈就可以很好地近似表达出原始图案。因为这是一个相当简单的形状，所有后面添加的小圆都是使边缘更加锐利。
使用的是之前的3D螺旋正弦波(在t=z轴画圆)。如果我们添加很多这些螺旋，得到的东西就看起来像我们的3D形状。
请记住，当我们从前面看某t的它们时，这些3D波浪看起来才是像圆圈

基于直方图压缩图像取决于色板大小，纯色图片效果最好，复杂图形无法压缩。 而有了FT，就可以基于有效度和边缘压缩图像
“ 无论我们有什么样的图像，我们都可以添加一堆这些正弦波来回到原始图像。

使用的每个正弦波也将是一个个8x8小图像。我们现在使用一些黑白条纹的小图像，像是“线”，而不是波。为了表示“波”的大小，每个图像将具有或多或少的明暗对比。
为了表示灰度图像，我们需要一些水平(以及垂直)的波图案，将两者相乘

如果我们把这些小图案的对比度调整到适当的值，然后将它们相加，我们就可以得出任意图像。
我们使用一组频率来确定每个像素的亮度或暗度，然后是另外两组用于颜色，一组用于红绿色，另一组用于蓝黄色。图像被分解为8x8块，每个块分别进行分解。我们为每个块使用的[频率个数]决定了JPEG图像的品质。
对于实际的JPEG图像来说，剩下的只有一些额外的细节。

#dev 信号(波)处理：能满足你一切遐想的领域。 你觉得非常厉害的3D渲染光追、2D绘制图示、动画缓动、纹理着色、物理粒子和GPU加速计算 在信号处理科普文里像活动手指一般自然。 不需要框架和多余的公式，作者手写就能实现，对”不知名“web技术的使用大大简化了无关原理的流程 🤪

当你写下 g.arc(x,y,l, 0,2pi) 时，怎么会知道 length(P+ p-l) 和极座标系弧度atan2也能定义一个圆呢，其实说到底关于「现实世界」程序员知之甚少，如果能结合物理几何来编程，就能做到更多、更多有趣的事，可比在 DevTools 里调个颜色排版设计模板要好玩不少

什么是「非==」的应用呢？平时看的各种页面或是”app“形式页面，其代码都是基于「从API或文件树/配置obj/IPC其他应用 读写信息」「过滤与展示数据的子集」「检查/填默认值」，如果没有突破「数据子集」的列表处理，就属于(==)类应用，在我的观念里，可改写数据绑定到UI是没有Element外的名词的，因此编程任务只是设计模型和检查及UI，自动生成一个API，给页面链接上一些其他功能，本来是属于很模板化的代码，应用的特点一个文件能定义完的那种。 当然因为工程习惯，冗杂许多就是了

代码在某种程度上都可以称为在绑定概念：编译器是把变量和函数绑定到具体位置与规范：文本与求值序绑定，应用是给各种数据struct 做UI+平台套版代码 ：obj与交互绑定、图形学是把各种位置绑定到数学函数(尽管看起来不是等号关系)；但编程的目的是找一个概括性的对应关系，如果在同质模型上太磨叽就忽略程序里真正不同的地方。 绑定的原义就是同名符号指代相同位置。基于 [a,b]=p; p==a[0] 这样的关系，它并不复杂

许多应用通过lib(甚至有HTTP收费API)能实现有趣的功能，但终究是不够优雅。 许多实现了非常简单效果的库(例如定义个八分音表,放sin波) 占用了极大行数，而且有很无序的API 。许多时候问题有更好编程解法，就需要手动面对最底下的每次计算单帧


#plt #ce 刚刚也想了 suspend fun 实现的问题，现在是有状态机化和 call=inline-tail 两种方法可选

A: 我觉得在平直块里 yield() 类<3次就内联，否则状态机化。 列<> filter takeWhile forEach 这样 API只内联，用户可指定调用是否内联？
B: 啥叫平直？块都是嵌套的， if(q) a; else b; 的a 里yield 也是在语句块里，然而CPS 的话 If 后的代码也要复制一份，有 while 变 ifgoto 完也麻烦
A: 那就只允许fun{} 内<3的内联，这样翻译起来也简单。把 val a=1+f1()+2 改成 var a=1; f{a=a+it+2} 就行了(状态机化的pass)，然后末尾先收集，切分代码交给直到第[0]suspend
B: 就是 Haskell 的 do <- 那种咯，那状态机化呢
A: 闭包序列化基础上加 st:Int ，表达式切分后，入口=0 ，休眠一次+1 ，函数头部加 switch 跳转表，直到最后一块真 return
B: Promise.all 其实(半)已经能做了，主要还是没做过，解释器模式上不知有啥该改

https://www.cnblogs.com/tkgamegroup/p/4214081.html 学习写新着色器 #GLSL
它可以模拟自然的云、火焰、水面等，为电影特效做出了功不可没的贡献，为此，他获得了“奥斯卡技术成就奖”。

Perlin噪声就是n个函数的叠加，这n个函数满足，下一个的频率是前一个的两倍，幅度是二分之一
对屏幕的像素分组。250*250个像素共享同一个随机值。然后，对于每个小组，每个小组里面的像素，进行一次插值:a+t(b-a) =(1-t)a+tb 。当然t速率推荐 3pow2-2pow3

2D插值：正和右在x方向插值得到a，然后是下和右下小组的值在x方向插值得到b，最后就是a和b在y方向插值得到最终结果。
glsl里面有预定义插值函数，线性的mix和平滑的smoothstep。

void mainImage(out vec4 bg,vec2 P0){vec2 P=P0/r;
float t=iTime/1.5,
a = fbm(P-vec2(sin(t*3.)*5.,t*10.)), //调整火焰层位置
b = fbm(P-t*6.),
cc = fbm(P-vec2(1.-sin(t*4.)*5.,t*8.));
vec3[] c = vec3[](vec3(1.0, 0.9, 0.0),vec3(1.0, 0.0, 0.0), );
//bg = vec4(mix(c[1], c[0], a) + mix(c[2], c[3], b) - mix(c[4],c[5], cc), 1.0); 
bg=vec4(mix(fbm(P),noise(P), P0.x>iMouse.x? 1.:0. ));

Rancher Desktop 1.0.0 发布。刚好差不多赶上 Docker Desktop 的 grace period 结束。

https://www.suse.com/c/rancher_blog/rancher-desktop-1-0-0-has-arrived/

https://news.ycombinator.com/item?id=30093281

#Rancher #Docker

看来可以用著名的《微软全球防护系统》来阻止edge成为默认的浏览器

问题： 呃，今天才知道 Kotlin 的 Boolean 是 Comparable, true > false 。感觉有点坑啊

其实 Kt 的问题不少，比如 Common 改名 Multiplatform 还有些隐藏关键字(typeof..)，型参约束可以用 where，主要是太实验性，1.3 的时候字节码生成还有问题，不支持 j.l.invoke API
甚至一些?类型优化也有bug
但Kt确实是 #java JVM编程现阶段最好的选择，full interop ，完善带extfun OOP （只是Android上默认proguard规则还不够好什么的……

当你第一眼看某大佬的Kt 时着实被 let run constructor init companion 这些搞眼花了…… 一时觉得比Rust不明觉厉 🤪 Kotlin 初期的stdAPI命名 是个问题
>啥叫partition
school.partition(男女)

>不是有groupBy了吗
school.groupBy(领导教师学生)

那么 associate (toMap,还带 By-With介词) 和 all,any,none ("exists"=any,none=allnot) 也很容易忘，尽管相比JS和Scala 这是最好的

谈到Kt冷知识，我想再提 UnsafeVariance https://t.me/dsuse/15959

(items[i] as IO<IN, in @UnsafeVariance T>).show(s, v)

这关于 IO<INPUT, T> 的定义，T 是 out 的，不然 Seq<Any>(io1:<String>,io2) 就会报错，如果要把 Reader 和 Writer 写在一起就会出问题，但代码复用偏偏必须写一起

我能断言指定 items: List<(IN)->R> 位置[i]的 show 可以接受(in) T ，因为它本来就是被取并集损失了精度的，于是写了这种代码，
其实它本身同时是 in, 但为了写存储的兼容被迫暂作 out 了而已。

然后匿名 object{} (即 new ArrayList(){{add(1)}} ,常量糖..)的IDE特性也很多，不过 inner class 才正常呢……

#recommend #kotlin #scala #reveng 关于coro底层的代码示例 https://t.me/kotlin_cn/25062

#recommend #web 可配合 canIUse.com https://moonvy.com/blog/post/2022/next-generation-Image-format-2022/
背景：对xy-color像素图的编码，无关编程接口
概况：无损压缩上简单图片 WebP2 (cwebp)更好，复杂 JPEGXL (jxl)更好
编码速度上jxl最快。AVIF 是继承于 VP9 视频的格式，一些格式有渐进清晰加载和快速修改功能
https://cn.bing.com/images/search?q=知更鸟摄影

#learn #math #signal 编程里处处是”速率“曲线：两点xy轴位移/颜色盘渐变、下落的重力速度、弹球的碰边反馈 。程序负责投喂边界情况(关键帧)，可重绘计算谁做？浮点函数0.0。
看起来非常 fancy 的效果，原理却非常简单。 jQuery 的 swing 缓动即 sin(t)/2+0.5 ,t=0~1，将原 x(0~2pi)y(-1~1) 缩小平移到 y(0~1)

正余弦(co?sine)是手画圆时的xy。180deg=1pi 弧度(rad)，随弧度t(0=12点方向)上升而圆心距y上升。sin与x=0轴在2pi的周期有3个交点，正好是画笔竖线能连圆心的弧度:0,180,360deg; 0,1pi,2pi rad 。0~1pi间俩山坡式的波动、与cos(t) 变化率的互补也揭示了1/4圆的对称性，完美的图形。 物理 x=.25pi 时 sinx+cosx 动量和最大表明 45deg 投掷距离最长(请玩 funcplot.com

最常使用的是一些缓动(非线性)动画，它们把 t=0~1 重新分配，一些部位停留(ease)更长，Web 使用的是3次方贝兹(cubic bezier)-由4点组成自由调整的1段线，animation:1s 固定P0=0,P1=1 能调P1,P2 两点。而绘制里常见2次方(quadratic)贝兹是3点xy共同插值式—

bzr=(ps,t)=>{let T=([x,y],[x1,y1])=>[x+t*(x1-x),y+t*(y1-y)] //lerp(mix ab@t). N次方 de Casteljau 法
  return n(ps)==1?ps[0] : bzr(ps.slice(0,-1).map((x,i)=>T(x,ps[i+1])  ),t) //所有左的P都*t 至Plast
}

3点够2折线。在1折线上 T(p0,p1) 即"lerp" 定义了补间xy: a+t(b-a) 即 (1-t)a+tb ，想象a是电池的绿条，会慢慢下滑。xy轴t=0~1的滑动即运动轨迹。 采样N点的封闭路径构成几何，等位点T(a[i],b[i]) 补间即形变(morph)

在2折线(A形)上，p0~p1 生成1点T0，T0~T(p1~p2) 生成当前t的点T2，此点构线是平滑的曲线。 bzr(ps,t) 里 ~(p0~p2, p1~p2) 先将p2连另两点得两T点，即降为1次bez，插值p01两点即得2次贝兹曲线t% 路程的xy。几何计算一般可缓存
与之同类的 NURBS 曲面替代三/四角面点阵(Mesh)广泛应用于3D建模

修复开头的
swing=(1+ 0-cos(x*pi))/2 或 (1-sin((.5+x)*pi))/2 或(1-sin(xpi-11))/2，因为y(0)=0且 0~1 间曲线应是单调增。cos(0)是1 但其0~pi 正好符合单调减，无需x+?。sin(.5pi*x) 是个缓出曲线
点参数式 (2sint,cost) t=0~2pi 绘制一个宽椭圆，隐函数 length(p-P)-l 的符号表明P 离圆心p的距离，=0时是圆的边(stroke)，<0是圆的色(fill)，-l 是圆心p ，在散点并行计算 #GLSL 里称为 signed dist func

计算有许多种写法，f(t)/2+.5 即 (f(t)+1)/2 ， P(x,y) plusRL=x+lsinr,y+lcosr (r=0~2pi)可以写成 vec2(x,y)+l*rotate(r) 的形式， for(i in 1..3)acc*=5 可以写成 pow(5,3) 即 5**3 ，acc+=i*3+1 求和可拆为 3+6+9+1*3 即 (1~3).reduce{a*b}*3+3 的阶乘倍数，积之和:多项等式可写明正负号,移项， wx+w1x1 即 dot((w,x),(w1,x1)) ，移动的加权求和就是卷积(convolve)

声音是线(采样率npSec,声道量nChan,dtype,n)、像素图也可按函数的方法过滤RGB值通道(channel)，求亮度灰度(lum)、边缘检测，通过窗口(window)模糊锐化
图片也是信号，听起来很奇怪，因为图片有2D宽度有xy座标，怎么能线性处理？确实，信号处理有 1D 2D 之分，一些算式(2D Sobel边缘,正右下右平滑补间,平面几何)是特有的，但xy座标也=rl圆心座标，哈哈镜扭曲和漩涡扭曲 ，也是信号-xy之上也有曲线。
声音和图形都能“混成(mix)”，使用的数学式都是对每采样像素/震点 (a+b) ，并且都有 High/Band/Low-Pass-Filter 区间滤波，线条主宰着图像的处理和绘制

波形是震子的震幅y随时间x的变化，既是震动就有周期T.f(x)=f(x+T),f=sin或cos则T=2pi。周期小频率快音高大、幅度高能量大响度大，白噪声是包含所有频谱的信号，用于模拟自然烟雾水流的 Perlin noise

画家算法(左面 -zy轴远先近后)用正交投影在2D画布上绘制3D点集，可以在y轴旋转每点(面向xz平面:x=xcosr+zsinr,y=y)

xy点的连线路径也不例外，我们给Path2D加一个t=”z深“维度。3D版sin波从 正面xy 看起来像一个圆，而从 左侧面zy 它就像普通sin线。手绘都近似圆圈，只是在某一个t 其y比正弦波加了点小波动，从 顶面zx 看x也同样，把这个随t+移动而不像sin螺旋了的画笔变成不同频率和幅度sin的叠加，每个 sin 就是”小圆圈“


物理命名法已经能按a-z的编号层叠标注所有变量的性质， 使我能更好的提出子程序、更改API
我更喜欢从集合(如UI父元素,容器)而非单项的视角编程，能通过举例边角情况理解从计算反着来的性质过滤，计算机也可以接受 sympy.org 不直的计算；就像编译原理能通过位置综合推导/检查型参、位置统一分配变量名、自动回调+函断续实现async

计算机的能力从来不是“单向” “单次”的。它与计算器有别
我看到了比无UI的API，更有趣的东西，它们才完成了真正的实事，不停留在一两个技术名词。系统的，反而易懂
有别于单次调用的设计，才会更好玩不是吗

回望当初，为一些能自动代码生成的模板而敲键盘、为绑定utils 而写UI， #Web 真的教会了我太多，从元编程、GUI的架构到编译原理和计算器的关系，到人脸识别的数据、canvas,WebAudio与WebGL 乃至WASM跨平台，这是 Python 的单一API 甚至 Java 等要操心F5刷新外无聊鼠标的语言所不能给我的。从那些C一样的语言我只看到了语法模式和API名词，而从Web我找到了开发的实质—写前就知道算法结果是啥样

#WIP 作者正在学习傅里叶变换 😓 感谢xecades大佬的博客。 实在不好在tg打太长的草稿。 语言有问题请大家积极报告
今天本来说还得写篇文评知乎民科的，以及提纲2月的动画礼物（草

话说xecades大佬居然真的是用 offset-path 来获取SVG折线点……天哪，我还以为不能呢，offsetLeft 好像确实变了，当时我以为不能(忘记为啥了)就找到了 SVGPath 的 TotalLen/PointAtLen (这里Xe顺带 -W/2 居中了一下,style里0点也加上了。transferSVG 其实就是 DOMParser 的工作，以JQ div.inHTML= 的形式做了.
https://github.com/Xecades/Homepage/blob/main/lab/Fourier/js/svg.js#L31
开始我以为d3.js 是webgl库，后来看见Xe好像是用它做JQ append.attr调用链一样，绘制是纯CSS的(呃不对，好像有 scale(slider?) 和 trace path... 👀

隐函数搜索真的属于谁都做过了 😂Xe大佬也写过图形计算器，nablaF
https://github.com/Xecades/Homepage/blob/9f8a5724690303b556d9953860087564180dd419/lab/Function/script.js#L59

知乎网页版右上角开始提供无障碍相关功能，包括读屏、修改配色、缩放、字幕等功能。

#Zhihu #Web #Accessibility

#cg 正交与透视变换 https://zhuanlan.zhihu.com/p/144329075 lrtb 是正方体四面， nf 是正背.. 还是 ft bk 好吧
https://zhuanlan.zhihu.com/p/410548236 同
https://zhuanlan.zhihu.com/p/111573239 Sympy 真的好厉害啊，可是 simplify 估计不如 Wolfram Mathmatics 吧 🤪