- 名字叫做 济·忆 tongji memory,疫情期间我们都在家好久没见过我们的学校了,我想通过这种方式回忆我们在校园的生活
- 已经部署,并且备案,可以通过域名访问
tj-memory.doublez.site - 首页是一个背景的介绍界面
- 这里使用了CMS(内容管理系统)contentful,所有文字和图片都是动态的,我可以不需要重新部署就可以进行修改,之后我会演示一下的
- 下边是一个svg流体动画
- 顶部是导航条,可以看到这有一个动态的特效
- 项目的主体是一个日历,可以切换日期和定位等等
- 这里的创作思想是 最近疫情在家把最近的项目都写在便利贴上,贴到墙上 于是web的期末我也想做这样一个特效
- 现在由于我还没登陆所以不可以添加回忆
- 中间也是一个svg的流体动画,这里都是我们学校的一些著名地标,也借此机会让同学和老师回忆下我们美丽的校园
- 下面是百叶窗 我称作 同济印记,这里会展示所有添加过的回忆,这里我还没登陆
- 可以看到这里我是做了一个抽屉的伸拉的特效,这些都是原声css和js完成的,没有使用任何第三方库
- 最下面是有关的一些信息和备案
- 这里可以直接分享网站到微信 qq等多个平台,这里我分享一个qq供同学和老师观看
- 包括这里可以看到项目仓库
- 可以直接给我发邮件等等
- 上面的导航条可以直接进行定位,并且是有一个平滑切换的效果(刚刚是网络有点延迟)
- 现在我们登陆,可以看到这里有一个橡皮筋的特效
- 右侧是一个聚光灯的特效
- 我们切换到注册
- 那我这里已经有比较丰富的账号,我们直接来看下
- 404 Not Found
- 这里是在加载我之前上传过的一些图片,这里是一个svg的流体模拟特效,这里也还没借助任何第三方库。由于服务器性能比较弱,所以这里等待的时间可能要长一点点。可以看到我之前添加过的一些同济记忆,这里我们双击可以新上传一张图片
- 图片可以只选择一张
- 我这个网站有一个很核心的功能是全景拼接,用户可以上传多张照片,这里由于服务器的容量我设定的是三张之内,后台我通过计算机视觉:SIFT算法、Harris脚点检测、尺度不变的特征点检测、RANSAC等算法进行全景图像拼接,这些是由python实现的
- 比如这里我先选择一张图像,输入回忆描述,确定之后这张照片就会显示在你自己的日历回忆墙上面了
- 然后我选择多张图片,但这里需要注意的是计算机视觉技术算法在处理全景图像拼接的时候需要大致满足拍摄的图像在同一平面上
- 所有图片上传完我在后端做了一个压缩的处理,然后将压缩完之后的图像编码显示在这里
- 下面是展示这个月所有的图片,这里不知道老师看起来清晰度怎么样,zoom直播可能画质有损耗
第三部分是我这个项目的有一个新颖的地方,全景的世界
- 我们之前用文字的博客记录生活,现在慢慢我们用朋友圈,图片博客的形式甚至是视频播客vlog记录生活,这里我大胆的提出了一个全景博客的概念
- 我可以拖动鼠标进行视角的变换,这里用了图形学和计算机视觉的相关算法进行建模
- 通过这种方式我可以更加全方位立体的记录我的生活
- 双击鼠标可以添加标签,比如我添加“”,我这里已经存到数据库里了,之后的某一天比如我回忆那天遇到的人可以很方便的看到他的名字
- 同时可以用鼠标滚轮进行缩放
- 我们再看几张图,还有一些高清的图片
- 点击鼠标右键可以将文字切换为图标,再次点击可以复原
- 我把网页端能使用的几乎所有鼠标的手势都巧妙的融合进了这个全景的博客中,希望我们能以这种方式回忆我们的校园
<回到主界面>
我这里还把之前的作业进一步晚上融合进来,同济商城。。。
我的项目适配了手机和平板,老师可以直接用手机打开网页
最后展示一下动态更新网页