Cyber Violence Project

Physical Computing, 2018

帮助我的学生完成一则项目作业,探讨用可视化的方式呈现不可见的网络言论暴力

网络言论暴力的危害之所以泛滥和不容易洞察,是因为旁观者距离事件很遥远往往有一种事不关己的态度,所以转发评论泛滥,对当事人造成很大困扰。当旁观者能身处事件当中时,会对暴力言论危害更加印象深刻。

最终设计由互动装置来完成,我帮助学生完成实现的部分。

装置工作流程:

观看者站到屏幕前,屏幕上即刻显示出观看者的头像,原始图片(一张照片)的头像部分被观看者的头像替换,新的照片生成后将淡入至屏幕上。同时,跳出对这张照片转发率的统计,数字以每250毫秒增加32的速度快速增长。屏幕的一角还有一个计时器,随着时间的增加,照片将越发清晰。

功能全部由JavaScript实现。

先从计算转发量和时间开始:

See the Pen 设置时间和转发量增长 by hellohotchocolate (@hellozoella) on CodePen.

获得新照片后,需要把图片的宽高依据当前浏览器的宽度高度全屏显示,文字位置置于浏览器宽高的中间。

See the Pen 图片宽高与浏览器宽高一致 by hellohotchocolate (@hellozoella) on CodePen.

图片淡入效果与计时器同步

See the Pen 图片淡入 by hellohotchocolate (@hellozoella) on CodePen.

调用浏览器摄像头,我引用了Joseph Huckabywebcamjs库,在页面中调用浏览器摄像头。其中需要注意,必须使用带有Flash插件的浏览器(例如Google Chrome),否则浏览器会因缺少Flash报错,不推荐使用Safari。

在页面中调用webcam:

See the Pen 调用浏览器摄像头 by hellohotchocolate (@hellozoella) on CodePen.

测试效果

初版效果

(图片)

Github账号中可查阅完整代码片段:https://github.com/hellozoella/cyber-violence-project

19/04/2018