谈谈外网刷屏的量子纠缠效果

大家好,我卡颂。

最近被一段酷炫的量子纠缠效果刷屏了:

原作者是@_nonfigurativ_,一位艺术家、程序员。

今天简单讲讲他的核心原理。

欢迎围观朋友圈、加入人类高质量前端交流群,带飞

基础概念

首先我们需要知道两个概念:

  • 屏幕坐标系,屏幕左上角就是屏幕坐标系的圆点

  • 窗口坐标系,页面窗口左上角就是窗口坐标系的圆点

如果只用一台电脑,不外接屏幕的话,我们会有:

  • 一个屏幕坐标系

  • 打开几个页面,每个页面有各自的窗口坐标系

如果外接了屏幕(或外接pad),那么就存在多个屏幕坐标系,这种情况的计算需要用到管理屏幕设备的API ------ window.getScreenDetails,在本文的讨论中不涉及这种情况。

当我们打开一个新页面窗口,窗口的左上角就是窗口坐标系的圆点,如果要在页面正中间画个圆,那圆心的窗口坐标系坐标应该是(window.innerWidth / 2, window.innerHeight / 2)

对于一个打开的窗口:

  • 他的左上角相对于屏幕顶部的距离为window.screenTop

  • 他的左上角相对于屏幕左边的距离为window.screenLeft

所以,我们可以轻松得出圆的圆心在屏幕坐标系中的坐标:

位置检测

在效果中,当打开两个页面,他们能感知到对方的位置并作出反应,这是如何实现的呢?

当前,我们已经知道圆心在屏幕坐标系 中的坐标。如果打开多个页面,就会获得多个圆心的屏幕坐标系坐标

现在需要做的,就是让这些页面互相知道对方的坐标,这样就能向对应的方向做出连接的特效。

同源网站跨页面通信的方式有很多,比如:

  • Window.postMessage

  • LocalStorageSessionStorage

  • SharedWorker

  • BroadcastChannel

甚至Cookie也能用于跨页面通信(可以在同源的所有页面之间共享)。

在这里作者使用的是LocalStorage

只需要为每个页面生成一个唯一ID

js 复制代码
const pageId = Math.random().toString(36).substring(2); // 生成一个随机的页面ID

每当将圆心最新坐标存储进LocalStorage时:

js 复制代码
localStorage.setItem(
  pageId,
  JSON.stringify({
    x: window.screenX,
    y: window.screenY,
    width: window.innerWidth,
    height: window.innerHeight,
  })
);

在另一个页面通过监听storage事件就能获取对方圆心的屏幕坐标系坐标

js 复制代码
window.addEventListener("storage", (event) => {
  if (event.key !== pageId) {
    // 来自另一个页面
    const { x, y } = JSON.parse(event.newValue);
    // ...
  }
});

再将对方圆心的屏幕坐标系坐标 转换为自身的窗口坐标系坐标 ,并在该坐标绘制一个圆,就能达到类似窗口叠加后,下面窗口的画面出现在上面窗口内的效果。

通俗的讲,所有页面都会绘制其他页面的圆,只是有些圆在页面窗口外,看不见罢了。

考虑到页面性能,检测圆心的屏幕坐标系坐标渲染圆 相关操作可以放到requestAnimationFrame回调中执行。

后记

上述只是该效果的核心原理。要完全复刻效果,还得考虑:

  • 渲染大量粒子(我们示例中用代替),且多窗口通信时的性能问题

  • 窗口移动时的阻尼效果

  • 当前的实现是在同一个屏幕坐标系中,如果要跨屏幕实现,需要使用window.getScreenDetails

不得不感叹跨界(作者是艺术家 + 程序员)迸发的想象力真的不一般。

相关推荐
小小小小宇4 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊4 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习5 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖5 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06276 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台6 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121386 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css