设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 12866|回复: 31

[原创] javascript 版 Bad Apple 字符动画,24号更新压缩算法

[复制链接]
发表于 2010-1-23 01:19:39 | 显示全部楼层 |阅读模式
前一段时间,一个流行的东方系列mv 《bad apple》  带来一股奇怪的风潮: 各种技术狂人纷纷把这段mv在一些匪夷所思的地方重现出来。目前知道的版本有:Excel 版、Word版、命令行版(多种语言)、War3地图版… 等等。(不知道东方系列的请百度 东方project)

  花了点时间搞了js的, 字符版本。 速度目前还可以,兼容所有浏览器(吧…)

  
  因为js没法操作2进制,所以视频的编码是用as3解析出来的,呵呵。
  

  一、获取视频编码

  这是最重要的一步,没有源,其他东西就无从谈起。

      虽然as3有flv播放器,不过为了节省时间,我直接创建了一个fla,把flv拖进去转换为了swf动画。

      之后如代码所示,用bitmapdata每隔一段时间将swf的像素捕捉出来。这里设置了跳帧处理,否则生成的文件将很巨大。

       这个mv基本由黑白色组成,还有少量灰色。为了简化数据体积,以及之后的压缩算法,必须将其过滤为黑白两色。这个判断很简单,只要判断每个像素是否大于0x888888即可。

        private function onEnterFrame(e: Event): void
  {
   
   
   var t: int = getTimer();
   if(t > startTime && t < endTime)
   {
    if(this.pointer ++ < this.waitFrame)
    {
     return;
    }
    else
    {
     this.pointer = 0;
    }
    this.bmd.draw(loader );
    this.bmp.bitmapData = bmd;
   
   
    outPut();
   }
   
  // this.bmd.draw(source, matrix, colorTransform, blendMode, clipRect, smoothing)
  }

  private function outPut(): void
  {
   var d: String = "";
   for(var h: int = 0;h < this.bmd.height; h ++)
   {
    for(var w: int = 0;w < this.bmd.width; w ++)
    {
     d += this.bmd.getPixel(w, h ) > 0x888888 ? "1":"0";
    }
    d += "n";
   }   
   this.dataArr.push(d );
   trace("解码完成,共获得 " + this.dataArr .length + " 帧" );
  }

    二、javascript播放

   得到源,就很好办了。我们现在有很多办法可以让这堆数字动起来,不过最快的方式,应该还是纯字符。

   所以我用css简单调节了一下,然后编写一段简单的js脚本让一个div不断刷新文本,即实现了动画。

    三、压缩

   现在可以播放了,效果流畅,ie6下cpu占用只有20%左右。但是我发现10秒的动画就需要3M的数据文件。很明显若完整复刻长达3分38秒的bad apple 是需要特别压缩的。

   但是js没有2进制压缩,所以只能依靠取巧的办法了。 思考了下,决定采用封包形式,即头+身的结构。这也是2进制里常用的方式。

   压缩后的动画数据大大降低了,虽然远不及2进制压缩,不过估计也是纯文本压缩的极限了吧。

   目前完整还原3分38秒的动画数据大小为2M多点,可以接受范围。



    整个过程大约消耗了3小时,重新温习了js,收获了快乐。

  ------ 1月24号 ------

    今天多谢编程浪子提供新的思路,让影片数据的体积下降一半左右。(2.16M -> 1.09M  @ 分辨率 90*63)
   
   之前的压缩格式:[长度]_[值] [长度]_[值] [长度]_[值] …
   这样的结构,理论上可以支持16灰度,这样可以表现更为优质的画面,并且可以拓展。浪子的思路是放弃多级灰度(实际上,之前的影片也没用上),从而在压缩格式的内部省略了[值]这一部分(和两条分割线)。
  
    本想就此结束的,但今天早上所想到的新压缩算法正好可以在浪子的思路上进行改进。

    原本每行都会记录一个回车符(即换行),但其实只需要在头部记录好影片的宽高,那么回车符完全可以动态插入。 去掉回车符并不仅仅只是少了回换行那么简单,这个提升是质的。 因为这让每行都连接起来,段落变少了。

    于是,我开始动手修改编码提取器和js播放器,大约1小时后,理论变为现实。 现在的大小再次明显的降低:  1M -> 795k  @ 分辨率 90*63)

    这时候,可以适当提高分辨率了,因为新算法的压缩比率是越大越明显的。

   
    现在放上 145*104的版本, 视频数据为1.44 M 。 看上去似乎更清楚一点了

   
   


   附一个测试地址:http://kinkikinki.521066.com/jsMc/test.htm

   原始视频: http://www.tudou.com/playlist/playindex.do?lid=7759251

[[I] 本帖最后由 阿伍 于 2010-1-25 11:39 编辑 [/I]]

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入无忧

x

评分

参与人数 3威望 +36 收起 理由
※潇洒※ + 10 饿地神啊!
winter + 18 东方永夜抄粉丝不理智地加分......
biyuan + 8 好流畅,创意很好

查看全部评分

发表于 2010-1-23 01:20:32 | 显示全部楼层
速度先顶。呵呵。
发表于 2010-1-23 10:35:00 | 显示全部楼层
支持
发表于 2010-1-23 11:31:43 | 显示全部楼层
顶~ :lol :victory:
发表于 2010-1-23 11:43:24 | 显示全部楼层
不错,支持一下,楼主AS水平不错,有时间跟楼主学学:lol
发表于 2010-1-23 11:50:53 | 显示全部楼层
人才呀,!太帅了。
发表于 2010-1-23 12:12:36 | 显示全部楼层
头一次见这种效果,效率很好,新颖

55K的jq312.js,跟这个有什么必要关联?
 楼主| 发表于 2010-1-23 12:23:25 | 显示全部楼层
就是jquery的库,简化一下代码~不过放了个未压缩版上去:L
发表于 2010-1-23 13:09:19 | 显示全部楼层
建议在CSS中加上
  1. body { font-family:Courier New}
复制代码

其他字体好像会错位
 楼主| 发表于 2010-1-23 13:23:07 | 显示全部楼层
已加,谢谢ls
发表于 2010-1-23 13:33:23 | 显示全部楼层
思路不错..很强大.
发表于 2010-1-23 16:29:28 | 显示全部楼层
JS动画,很强大。
建议实现缓冲下载,不至于等的时间过长。
 楼主| 发表于 2010-1-23 16:44:44 | 显示全部楼层
这些脚本都放在一个文本里的,不知道怎么对一个文本缓冲…? js没法对流操作的说

不过解压的时候是可以边放边解的。

如果不压缩的话,这3分钟多的动画需要的容量是40M以上
发表于 2010-1-23 16:50:26 | 显示全部楼层
能否把数据分成N分,然后用ajax边下载边解压播放。
发表于 2010-1-23 17:01:28 | 显示全部楼层

回复 #12 Rimifon 的帖子

建议把文件头中的编码加上,囧打开一堆乱码。
<meta http-equiv="content-type"  content="text/html; charset=gb2312"/>

另外,在chrome中走形很厉害,由于空格不等宽引起的。加上:

#stage{ font-family: '宋体', Simsun; white-space: pre;}

测试了IE, FF, Opera, Safira, Chrome 浏览器,基本上没什么问题了。 :lol
发表于 2010-1-24 01:23:04 | 显示全部楼层
啊呜闲得蛋疼了
发表于 2010-1-24 14:20:14 | 显示全部楼层
:handshake
发表于 2010-1-24 23:47:43 | 显示全部楼层
寂寞的啊呜
发表于 2010-1-25 11:33:05 | 显示全部楼层
很好很强大…… BitmapData 抓数据...也是个不错的思路...
发表于 2010-1-25 13:21:47 | 显示全部楼层
前段时间看到个vim的,现在又看到神作。
您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2017-5-28 20:19 , Processed in 0.111494 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表