WangLu's Notes

The Video A Bit Background Thanks to Youtube's algorithms, I got to watch  this video  again after many years. The video, made in 1994, explains the sphere eversion problem and visualizes one solution: Thurston's corrugations. More information can be found in the following links: 1 , 2 , 3 . There is also an HD version . The animations in the video are really fascinating. I figured it'd be a good excercise to recreate it with Blender, especially with geometry nodes. However I immediately got stuck after 20 minutes, because I had no clue how everything works. Luckily I found a port  of the original source code. (The original source code  seems no longer available). The author also created a nice video . I'll refer this version as  mathIsART's version. I also found another port , which I'll refer to as McGuffin's version. Mostly I studied mathIsART's version, and occasionally used McGuffin's version as reference. The code was really fun to read, and I ...

This is a follow-up of my earlier article.  I realized that there is another way of achieving the same effect. This article has lots of nice examples and explanations, the basic idea is to make very simple @keyframe rules, usually just a linear movement, then use timing function to distort the time, such that the motion path becomes the desired curve. I'd like to call it the "time warp" hack. Demo See the Pen Interactive cubic Bezier curve + CSS animation by Lu Wang ( @coolwanglu ) on CodePen . How does it work? Recall that a cubic Bezier curve is defined by this formula : \[B(t) = (1-t)^3P_0+3(1-t)^2tP_1+3(1-t)t^2P_2+t^3P_3,\ 0 \le t \le 1.\] In the 2D case, \(B(t)\) has two coordinates, \(x(t)\) and \(y(t)\). Define \(x_i\) to the be x coordinate of \(P_i\), then we have: \[x(t) = (1-t)^3x_0+3(1-t)^2tx_1+3(1-t)t^2x_2+t^3x_3,\ 0 \le t \le 1.\] So, for our animated element, we want to make sure that the x coordiante (i.e. the "left" CSS property) is \(...

TLDR: This article is NOT about cubic-bezier(), and it is not about layered CSS animations (for X and Y axes respectively). It is about carefully crafted combined animation, that moves an element along any quadratic/cubic Bezier curve. UPDATE: Here's the link to part 2 . Following my previous post , I continued investigating competing CSS animations, which are two or more CSS animations affecting the same property. I observed that two animations may "compete". In the following example, the box has two simple linear animations, move1 and move2. It turns out the box actually moves along a curved path: See the Pen CSS Bezier Path by Lu Wang ( @coolwanglu ) on CodePen . So clearly it must be the combined effects from both animations. Note that in move2, the `from` keyframe was not specified. It'd look like this if it is specified: See the Pen For Blog 2022-08-02 by Lu Wang ( @coolwanglu ) on CodePen . In this case, it seems only the second animation take...

In perspective drawing, a vanishing point represents a group of parallel lines, in other words, a direction. For any point on the paper, if we want a line towards the same direction (in the 3d space), we simply draw a line through it and the vanishing point. But sometimes the vanishing point is too far away, such that it is outside the paper/canvas. In this example, we have a point P and two perspective lines L1 and L2. The vanishing point VP is naturally the intersection of L1 and L2. The task is to draw a line through P and VP, without having VP on the paper. I am aware of a few traditional solutions: 1. Use extra pieces of paper such that we can extend L1 and L2 until we see VP. 2. Draw everything in a smaller scale, such that we can see both P and VP on the paper. Draw the line and scale everything back. 3. Draw a perspective grid using the Brewer Method. #1 and #2 might be quite practical. #3 may not guarantee a solution, unless we can measure distances/p...

问题：有N个人去看电影，其中有一个是疯子。每个人各有一张票，电影院恰有N个座位。N个人依次入场，疯子最先冲了进去。 疯子首先在N座位中随机（等可能）挑一个坐下，以后每个人进去后，如果自己的座位没有被占，则就对号入座，否则在现有的空座位上随机（等可能）挑一个坐下。 问最后一个人对号入座的概率 解法1 设所求为P(n)，现将N个人按入场顺序编号为1-N，则1号为疯子。再把他们各自对应（按手中的票计）的座位也相应标为1-N。现考查1号 如果1坐到自己的座位上，这有1/N可能，则以后每人都回对号入座 如果1坐到N号最为上，则N不可能对号入座 如果1坐到i(1<i<N)号座位，这也是1/N的可能，则以后2至i-1号都会对号入座，此时把1号座位对应于i，这时就转化为了N-i+1个人的看电影问题，因此最后一个人对号入座的概率为P(N-i+1) 综上可知P(N)=(1 + sum(i from 2 to N-1) P(N-i+1) ) /N 可算得P(N)=P(N-1)=...=P(2)，而对于两个人的情况显然所求为1/2,所以这就是最终结果 解法2 编号同上，对每一种N个人都坐下后的结果，我们把1-N号座位上的人的序号依次排开成一个数组，则如果都对号入座，应该是(1,2,...N) 容易看出N不是在最后一个就是在第一个，否则，设N在第i(1< i<N)个，则由于i比N先入场，i进场时他的座位一定是空的，这就矛盾了。 把所有的数组按照N的位置分为两组，并构造一个双射 对一个N对号入座（即N在最后一个）的数组，我们考察第一个数，设为i，那么我们说i+1至N这些人都对号入座了。如果这样不好理解，我们换种说法，即找 到“按进场顺序，最后一个坐错的人”，或不在自己座位上的序号最大的人，如果所有人都对号入座了，则把1号挑出来。这样，类似上面的分析，可知这个人一定 是坐在了1号座位上。 现在我们把这个数组中首尾对调一下，即最后一个坐错的人和N。得到了一个N没有对号入座的数组。把这个数组与原来的对应起来，易知这是一个双射，而且出现 它们的概率相同。因为1至i-1（i为与N交换的那个数）的座位在两边都一样，则出现概率也一样，i-2至N-1应该都是对号入座，是确定的。不同之处在 于i是坐了1号还是N号，根据题意，这时等概率的。 这样就知道了N对...

问题：现有n个人，多于一半是好人，其余为坏人。你并不不知道他们具体谁是好人谁是坏人，然而他们彼此很清楚。 现在你每次可以挑两个人互相指认对方是好人还是坏人，好人总说实话，而坏人则会胡说（不一定是假话）。 请找到一个算法区分所有好人与坏人，并给出所需次数（大致数量级即可） 解答：（以下为大致阐述，对于细节，如是否严格大于或大于等于之类请自行讨论） 对于n较小的情况，如2，3，可以指定一个人T，让他与其余所有人互相指认，因为好人多于坏人，所以看结果是说T是好人的多还是坏人的多，那个多T就是哪个，如果一样多，T是好人。此时虽然是n平方数量级，但也可看作线性。 对n较大的情况，我们希望尽快找到一个好人以便指认出其余人的情况 把n个人两两分组（如有多余暂不考虑，放到下一轮处理），让他们互相指认。结果有如下几种情况： a.至少一个人说对方是坏人 b.都说对方是好人 对于a, 组里至少一个人是坏人，我们把所有这样的组全部“淘汰” 对于b, 组里两个人必同为好人或同为坏人，我们在这样的组中每组任选一个淘汰。 这样一轮下来，可以知道淘汰掉的坏人不少于淘汰掉的好人，仔细分析还可知道剩下的人当中一定还是好人比坏人严格多。 这样下去直至剩下小于4人的情况，就可以用最开始的方法找到一个好人。 此时所花的次数约为N/2 + N/4 + ..., 大约等于N，然后再用至多N-1次指认就可以分辨所有好人与坏人了。 所以最后的数量级为2N