有规则的鸟

2026年9月9日 pixelartsveltekit

这个网站上的鸟看起来像他们只是到处游荡做无论什么,那是整个点,但在"无论什么"下面是一个惊人的算术数量。池大小,一个硬盖在一次可以看得见多少,三个分离的区域他们不允许离开,和一个鸟那是构建永不同步任何东西。

主页天空,其中鸟池实际飞

池和盖

有一个八个飞行候选人的池来自(鹦鹉嘴海雀、海鸥、一只燕鸥、一只鸬鹚、一只鹰)加三个总是在屏幕鸟,栖息而不是飞(两个鹦鹉嘴海雀和一个蚝鹰嘴鸟)。每个页面加载画一个飞行池的随机子集而不是一次显示全部八个:

export function rollSkyColony(rand: () => number = Math.random): SkyColonyRoll {
	const guaranteed = CANDIDATES.find((c) => c.guaranteed)!;
	const rest = CANDIDATES.filter((c) => !c.guaranteed);
	const shuffled = [...rest].sort(() => rand() - 0.5);
	const extraCount = 2 + Math.floor(rand() * 3); // 2-4
	const chosen = [guaranteed, ...shuffled.slice(0, extraCount)];
	...
}

一个候选人总是被画(最近的鹦鹉嘴海雀,标记guaranteed,主要所以一个移动访客,谁只看那个飞行者无论视口,总是有某东西在天空移动)而然后一个随机二到四更来自其余。数学做而飞行数在屏幕一次是总是某个地方在三和五之间,永不更多,永不更少,而且结合三总是开启栖息鸟总鸟数坐在页面一次是总是六到八。那是一个故意的盖,不一个偶然的多少随机性碰巧掉,每个可能的抽取着陆在那个范围内通过构造。

为什么每个鸟上的数字看起来这样故意

每个候选人进位两个独立的时间值,一个水平十字时长和一个垂直摇摆时长,而且我特别选他们所以没有两个分享一个简单的比率:

// 时长210s / 摇摆233s,两个质数邻近式和无处
// 靠近一个简单的比率; 微小0.4px振幅, "漂流最少"。
{
	id: 'eagle',
	species: 'eagle',
	top: '4vh',
	left: '50%',
	width: 32,
	duration: 210,
	bobDuration: 233,
	bobAmp: 0.4,
	opacity: 0.35,
	dir: 'ltr'
}

如果一个鸟的水平扫过和它的垂直摇摆碰巧分享一个公因数,说一个60秒十字和一个20秒摇摆,结合的运动会每60秒重复而且一个耐心的看者最后会注意循环。选择时长不分享一个因数而不是真实的重复期变成他们最小的公倍数,这对这些对中的大多数着陆某个地方在数千秒。没有人看一个标题足够长捕捉那。它读作有机漂流因为,在任何时间标尺一个人实际上经历,它有效地永不重复。

鹰特别得到最小摇摆振幅和最长摇摆期在整个池,0.4像素漂流在233秒,反对鹦鹉嘴海雀漂流一个完整像素横跨期一个十分之一那么长。它也坐最高在天空,4vh从顶部,最远从每东西在池,都空间上和节奏上。它是唯一那个鸟构建永不同步任何其他鸟的节奏甚至偶然,而且看起来漂流最少虽然做它,这是"鹰飞独自"实际上来自,不孤独在一个诗歌意义,只是真正无关的运动通过构造。

三个区域,和一个教训关于区分物种

鸟住在一个硬线的上面,背景岛屿轮廓的它自己测量顶部边缘,用同样vh单位表达作为每个候选人的垂直位置所以关系在任何视口宽度保持。鱼住在他们自己线的下面,页脚水平条的水线,定义作为完全它的5行像素网的行3(陆地占有行0通过2,海拿行3和4)。一个鱼是故意的例外,违反那个线短短在它自己长周期上,每东西别的停留严格在它自己的侧。

我分割那些区域为一个真实的原因,不只是整洁。早在环境场景工作我有一个"鸟"被发现的报告游在页脚条,而且回到代码,一个鱼轮廓和一个低飞鸟轮廓足够相似在形状和着色一眼那谁无论如何看真的不能区分他们是那个。修复不只是执行垂直区域更严格,它是让实际轮廓语法故意分开来自彼此,一个鱼读作一个侧资料鱼雷形状在凉爽蓝灰,一个鸟读作一个顶-向下翅膀-分散形状完全。两个精灵那是只从不的正确形状在正确的区域,所以甚至一眼告诉你你看你在看什么不需要想象它。

区域线本身通过了它自己的坏通过在那之前。第一版本只选了一个top百分比那看起来大约对在我自己的屏幕:

// 第一次尝试:眼睛估计分割,没有关系到实际艺术
const SKY_ZONE_MAX_TOP = '55%';

看起来很好在我自己的视口宽度而且从头到尾倒了时刻头部艺术本身改变高度,自从数字不关联到任何真实,只是一个猜测。什么实际上坚持是测量真实轮廓而不是猜测在一个百分比:

// 区域安全:岛屿影子层是固定的,底锚定,42vh
// 高在桌面,所以它的自己最顶部的轮廓像素坐在
// (100-42)=58vh从视口顶。每个候选人的`top`保持
// 很好清除那个线而不是一个猜测百分比。

部分我几乎不构建

场景真正是那一个地方在整个这个网站那动画所有,每东西别的是静态的或者咔嗒声在地方在70毫秒和停止。它会已经是许多更简单离开标题和页脚作为固定的,手工挑选艺术方式这个网站的非常第一个版本实际上是,五个特定的鸟在五个特定的姿势,没有随机性,没有坚持逻辑,没有区域数学得对。有些代码上方,coprime时间评论特别,是那种事情没有人会曾经有意识地注意作为一个读者。我知道它在那里,而且一旦一个标题开始实际上感觉活着而不是看起来像装饰那碰巧移动,我不能说话自己回到发送静态版本再次。

盖仍然在手机上坚持

无的这是桌面唯一也。下面一个768px视口,每个候选人除了一个guaranteed鹦鹉嘴海雀得到隐藏完全在CSS,故意,所以一个小屏幕不坚持呈现四或五重叠飞行者到一个标题那只有房间显示他们拥挤在彼此顶部。那单一保证鸟是完全相同的一个总是在桌面上绘制也,所以移动不需要一个分离的角色或一个分离的池,它只是安静地丢弃每东西桌面抽取选出的超过那单一鸟。而且整个池尊重prefers-reduced-motion同样的方式其余网站的场景做,每个精灵仍然呈现在它的自己的休息位置,冻结而不是缺少,无的东西在页面去空仅仅因为某人的系统要求更少运动。

0 条评论

登录 后即可评论。

登录

忘记密码?

还没有账号?