#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 吧 🤪

现在算是明白了3D螺旋是怎么靠iter=0~傅里叶次数,t=0~1 旋转的，但根本不知道虚数(complex)这东西有啥原理
看起来根本不是垂直或物理变形这么简单（主要是这里没用虚数单位i.. 两个点弄出的图形在0,0 都很奇异，想必得设计更3D的图表才能明白虚数究竟是怎么计算傅里叶变换的 🤪

C_i=dt*Sum[t] f(t)e^-it (一个震幅圆圈)在再乘 e^iT 后就得到震幅的动量(和频率联系)，动量的和是t%的路径上点，代码好写，但这是什么鬼，e 这个欧拉符号和虚数是怎么回事，为什么没用几何计算 🤔艹
（注：以下FFT全部指代普通傅里叶变换
哦……我想起来了， i*t 之所以在 cos(2pi*it) 的周期函数上也有用是因为 cos就不是从xy看的.. 从ty 看,即cos(ix) 就是增加了倍频，因此更大迭代次数考虑更广频谱 😓
不考虑虚数的作用，Fourier 就是细分一个螺旋，低iter考虑低频(较光滑的折线)，虚数乘f(t) 来求差，加权dt 求和来算频段的震幅，呃.. 和柱状图(groupBy)区别挺大,就是个求和 😂 ，这是2D FFT 所以e是cos,sin的+虚数乘，1D就是sin吧
Xecades 的代码包含了DFFT和IFFT(正逆运算)，我给忘了，以为只有绘制在求动量和=t%点，其实 Cs[i]*e^it 也是实现的一部分，它把震幅*频率，这个t 当然和FFT公式的t是一个，只是由setInterval 提供
ref:
https://zhuanlan.zhihu.com/p/198910715
https://www.cnblogs.com/h2zZhou/p/8405717.html 方波与海螺图
https://blog.csdn.net/youcans/article/details/122614107 Py opencv DFFT 灰度图的色彩频谱
https://zhuanlan.zhihu.com/p/43780991 matlab 傅里叶级数(离散到连续

另外在中文网站上一两次看过FFT可视化，学会了我就是大佬（啊不 🤪

现在代码怎么写已经很清楚了，虚数乘具体是什么不重要，反正知道它能算频段的震幅就行了，3D 螺旋也不需要了，知道 t=0~1 能拿圆圈点算距离求震幅和,能回归波形 就行 🤪 工程就是这么随意

Xe大佬的原版改过两次，7个月前他把canvas实现改成了d3+svg实现，一些桥段不太好,比如比率的处理 有点为用d3而用的意思了... 跑的时候我风扇呼呼地转，估计都在 parse SVG字符串 🌚 (我觉得一些重复表达式,虽然加了loadFile功能,真的还不如第一次,尤其是曾经点绘制 XML绑定写了一大堆..)，事成之后我去提建议（不过人家还在上高中呢

我昨天为还原那个屏幕-数学空间转换 还特意写了个：
lerp=([a,b])=>t=>a+t*(b-a)
kConv=([a,b],AB)=>t=>AB((t-a)/(b-a))
spaceScale=(e,kx)=>{
let {x,y,width:w,height:h}=e.getClientRects()[0],ky,... 当然我的风格用函数值怎么写都更短就是了 😢

现在想想真是尴尬，我自己其实是最煞有介事的。Vec2的完整角度距离定义 这个FFT根本不会用，反而是虚数... 它真的有画 Mandelbrot 分形的能力 😂