注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

witmin榕千岁小筑

生活 · 设计 · 互联网 · 新媒体 | 独立 · 思考 · 观察

 
 
 

日志

 
 
关于我

生活需要小屁孩的眼睛,大姐姐的心灵和攻城师的逻辑,用好奇心敲出最温润的美丽。 http://www.millielin.com 她会更频繁地出没在新浪微博:@witmin

网易考拉推荐

旋转十度-和Processing的今昔  

2012-06-12 23:15:10|  分类: My Works |作品志 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
旋转十度-和Processing的今昔 - Millie - 榕千岁小筑
眨眼间,两年的香港求学生涯结束,就等着拿毕业证学位证了。如果说两年前的自己喜欢自个儿折腾插画和设计,那么这两年里,在技术方面的最大收获,应该是Processing —— 基于Java但容易上手的编程语言,适合做交互装置和动画。对于毫无编程经验的哦艺术家和设计师来说,Processing相对容易上手。正式开始工作的日子即将来临,但希望自己还是不要放弃Processing,有时候拿它玩玩还是挺有趣的。于是今儿就花了十几分钟生成了上面的这张图(源代码见文后)。灵感来自我最喜爱的web设计师Veerle今天更新的一篇日志。

两年来,每个学期都有一个Studio(工作坊)的个人项目,学生可以自由决定他想做什么,用什么方式实现,找哪位老师指导。Studio占的学分最重,其门不用坐在教室里上课的“课”也是最能发挥学生创造力和自我拓展能力的“课”了。

每个学期,都有一个机会让我选择用Processing来实现交互动画或是数据可视化。不是计算机背景出身,曾经在本科阶段企图自学编程考级未成功,但好歹也花了时间把清华大学C语言经典教材绿皮书的头半本翻了几遍,算是个铺垫,那时候没能自学成功,主要是因为不知道编程能做什么。到了香港,在老师的案例演示和步步教学之后,才开始体验到编程之美。于是决定挑战一下,四个学期分别用Processing实现了四个项目:

  1. 第一学期上 Semester 1A:“能量发生器”(Energy Generator),使用摄像头捕捉实时影像,通过计算对比前后帧的像素差,将人的运动转化为能够驱动屏幕上动画内容(植物)的能量,实现实时驱动植物生长的动画,并通过定义不同的能量值,来触发相应的声音和动画效果。灵感:光合作用,能量转换。结果,基本实现,需要依环境调整相应的能量转化值和削减值,不懂得如何实现自然的植物生长与衰败,最终的动画有点优质,不成熟,不够美。如果能够连接灯泡、和真实的植物,做成实体的装置,摆放在建筑的某个位置,应该会更有趣。
  2. 第一学期下 Semester 1B:“诗的人称计数可视化”,“诗”是文本的代称,尝试用《圣经》和《罗密欧与朱丽叶》的英文文本为样本材料,自动提取文本中的关键词,比如“你、我、他”出现的次数,按比例生成图形,作为抽象的隐喻,由图形感受作者的写作倾向,或是文本的张力。结果,也不完美,做得太抽象,走infographics的路线,就不够清晰;如果说是Generate Art,图形也许又不够抽象。
  3. 第二学期上 Semester 2A “小心老鼠”(Watch out of the cat),交互装置,加上一些游戏元素的话也可以变成一个游戏。依然是基于摄像头捕捉影像,装置需要摆在门边,没人经过时,画面上会有一只老鼠从洞里溜出来,想偷摆在中间的起司,猫咪正在睡觉。当有人经过时,猫咪被脚步声吵醒,发现老鼠,开始追赶,猫咪追赶的速度取决于实时经过的人的运动幅度;在老鼠进洞前,如果猫咪跑得足够快,老鼠就不能成功取走起司,这一局,老鼠就输了。反之,如果猫没逮到老鼠,猫就输了。灵感来源于曾经看到的一张画在墙壁上老鼠洞和老鼠的插画。基于真实生活中的逻辑,将虚拟的动物投射到真实的环境中,应该会很有趣。问题是实时驱动的画面流畅度不够,另外呈现的方式也有难度。
  4. 第二学期下 Semester 2B “推特花园”(LIVE Twitter Garden),基于TwitterAPI的可视化图形。一直很想尝试拿社交媒体的API数据来试试数据可视化,一度觉得自己一个人做不来,不过人是逼出来的,在网上搜了好些文档和教程,终于成功取到了数据。不做不知道,一试才真正体会到做“数据挖掘”的不易。基础的数据是所见即所得,但怎样去比较分析他们,让数据通过图形体现人们通常看不到的涵义才是真的难。再加上编程经验缺乏,只能用很傻的方法一步一步优化,如下组图:

旋转十度-和Processing的今昔 - Millie - 榕千岁小筑
第一版的画面截图,本来希望一条新Twitter的出现能够触发一朵花的开放和凋零,但是数据的比较没处理来,于是这版作罢。不过用Class实现了能够方便定义的花的形状,在后来的版本里的花就是基于这个生成的。
 
旋转十度-和Processing的今昔 - Millie - 榕千岁小筑
基于《可视化数据》书中的案例布局画出基本画布和点。
 
旋转十度-和Processing的今昔 - Millie - 榕千岁小筑
尝试基于数值分级用色彩过渡来区别影响力
 
旋转十度-和Processing的今昔 - Millie - 榕千岁小筑
  尝试用相对具象的图形,如针叶来表示大量影响力较低的用户,他们像绿叶一样存在,衬托花。

旋转十度-和Processing的今昔 - Millie - 榕千岁小筑
 添加藤与花,代表影响力相对较大的微博的出现
最终交差的屏幕录像,可惜还是有很多交互效果没能做好…成绩也不高,但是没有关系,因为自己的目的达到了,已经尝试和学到了很多新东西,这就够了。

最后附上这篇Blog第一张“旋转10度”的源代码截图:

旋转十度-和Processing的今昔 - Millie - 榕千岁小筑 
  评论这张
 
阅读(602)| 评论(4)
推荐

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017