互动媒体技术——Processing模仿并拓展动态爱心图案
总体步骤概述
1.观察图形,总结其中的规律
2.将规律一步一步转化为代码,注意封装性
3.应用交互性和用户感官,拓展作品
一、观察图形、总结规律
(1)单个爱心:
单个爱心是由许多个立方体拼接而成的,每行方块的位置不同以及个数不同,但是每个小方块的大小相同。方块的边框是没有消隐的。
(2)整体爱心的位置:
4*4个爱心,每行4个,每列4个,间隔相等。
(3)整体爱心的运动:
<1>.可以观察到,每一斜排的爱心的运动是一致的,因此每一斜排可以归为1组。第一排和最后一排是一致的,因此这两排为一组。一共有六组。
<2>.从第一排到最后一排,正好转过360°,因此六组,每组间隔360°÷6=60°。设置起点不同即可,但是运动速率是一致的。
二、将规律一步一步转化为代码,注意封装性
(1)编写单个爱心
<1>首先想到,16个爱心,不可能每一个都写一段代码来绘制爱心,所以我们可以建立一个爱心的类,给它添加一个绘制爱心的功能
class lovePitch{ public void drawLove2(){ } }
<2>而既然要绘制爱心的话,当然得指定绘制爱心所在的位置,所以该类需要拥有成员变量:爱心的位置、爱心的颜色、组成爱心的方块大小,这里可以在构造函数中进行设置
class lovePitch{ lovePitch(){ } lovePitch(float x,float y,float z,float size,int startAngle){ this.x=x; this.y=y; this.z=z; this.size=size; this.startAngle=startAngle; this.c=color(255,0,0); } }
<3>开始绘制爱心的函数编写:
绘制爱心时,得先学会写3D效果的方格,因此我们先构建一下3D的方块。查到官方API给出了参考:
使用两个for循环开始编写爱心桃,一共是6行,7列,其中有一些缺省,使用if语句就可以判断是画还是不画。这里使用了popMatrix()和pushMatrix()可以保存和还原之前的状态。
public void drawLove2(){ pushMatrix(); translate(x,y,z); fill(c); ortho(); for(int j=0;j<6;j++){ for(int i=0;i<7;i++){ pushMatrix(); translate(size*i,size*j,0); if((j==0&&(i==0||i==3||i==6))||(j==3&&(i==0||i==6))||(j==4&&(i!=2&&i!=3&&i!=4))||(j==5&&(i!=3))){ } else box(size); popMatrix(); } } popMatrix(); }
(2)考虑爱心的旋转
每个爱心的旋转速度是一致的,只是初始的旋转位置不同。考虑到这个,可以把爱心的旋转写到爱心类中,并传递一个起始位置的参数即可。又因为,旋转是由一个变量的角度所控制的,因此也要将控制爱心旋转的角度的变量作为参数传递进去。(由于processing中的旋转绕的中心都是坐标原点,因此这采用先将物体以到原点,将物体旋转后,再移回原来位置的办法)
public void rotateLove(int rotateMills){ pushMatrix(); translate(x+30,0,0); rotateY(radians(rotateMills)); rotateY(radians(startAngle)); translate(-(x+30),0,0); drawLove2(); popMatrix(); }
(3)绘制所有爱心
4行4列的话,我们可以采用三个变量控制:
i:控制16个爱心的绘制
j:控制换行,每4绘制4个。换一行,可以采用求余的办法确定,每一行的位置通过(j行距离值)确定。
k:控制每一列,每个爱心桃的列的位置通过(i列间距)确定。
(1)首先再所有函数的开头需要声明类对象,并指定参照爱心桃的初始坐标:
lovePitch[] allLove=new lovePitch[16]; int firstX=50; int firstY=50;
(2)然后在setup()函数中初始化类,其中rateLove为每个爱心桃的初始旋转角度,因为每排爱心的初始角度是不一致的
void setup(){ size(500,500,P3D); int[] rateLove={0,60,120,180,60,120,180,240,120,180,240,300,180,240,300,0}; for(int i=0,j=0,k=0;i<16;i++,k++){ allLove[i]=new lovePitch(firstX+(k*100),firstY+(j*100),0,10,rateLove[i]); if((i+1)%4==0){ j++; k=0; k--; } } }
(3)最后可以在draw函数中使用for循环,调用绘制函数即可。(其中i1为旋转角度的控制变量,为全局变量,当i达到360时,即旋转一周,此时重置i1,避免数值过大,超过了int的范围)
void draw(){ background(0); for(int i=0;i<16;i++) { allLove[i].rollover(mouseX,mouseY); allLove[i].rotateLove(i1); } i1++; if(i1==360)i1=0; }
(4)效果展示
三、3.应用交互性和用户感官,拓展作品
processing中最有特色的便是交互性了,因此这里我通过与用户进行交互的原则,对作品进行了扩展。通过鼠标来实现对爱心桃颜色的控制,实现的功能有:
(1)鼠标按下时,改变爱心的颜色,鼠标再次按下,恢复颜色
<1>首先编写鼠标相应事件
flag为全局变量,用于判断当前鼠标是否点下
void mouseClicked() { if(flag)flag=false; else flag=true; }
<2>编写改变颜色的函数:(该函数针对每一个爱心桃而改变颜色,因而为爱心这个类的成员函数)
public void changeColor(){ if(flag)this.c=color(random(0,255),random(0,255),random(0,255)); else this.c=color(255,0,0); }
(2)鼠标移动到某一个爱心上面时,改变所指到之处爱心的颜色和速度。
颜色改是相对于每一个爱心而言的,因此应该为爱心类添加一个成员函数(其中if是判断鼠标当前的位置是否处在该爱心的矩形边框中)
public void rollover(int mx,int my){ if(mx>x&&mx<x+6*size&&my>y-10&&my<y+4*size){ this.c=color(random(0,255),random(0,255),random(0,255)); this.speed=200; }else{ this.c=color(255,0,0); this.speed=0; }
- 点赞
- 收藏
- 分享
- 文章举报
- 【互动媒体技术】有关十二个“一”的文艺创作-拓展
- 互动媒体技术作业——processing码绘
- 互动媒体技术——创意编程
- 十二个“一”,十二台手机(互动媒体技术作业)
- 互动媒体技术课程作业3 《代码本色》编程练习
- 【互动媒体技术】十二个待选拔的“一”
- 【互动媒体技术】艺工交叉 作业1 实验数据分析 数据分析
- 互动媒体技术,代码本色0-4
- 【互动媒体技术】艺工交叉作业1 实验数据分析 文献综述
- 互动媒体技术——五个小习作导航博客
- 【互动媒体技术】互动编程习作1——表现随机行为及牛顿运动学
- 互动媒体技术——《代码本色》习作五:粒子系统
- 互动媒体技术作业——十二个“一”扩展版
- 【互动媒体技术】《你能“行”吗》问卷测试心得
- 互动媒体技术——《代码本色》习作四:振荡
- 【互动媒体技术】十二个“一”的文艺创作
- 互动媒体技术——《代码本色》习作三:力的使用
- 互动媒体技术作业——十二个"一"
- 互动媒体技术作业
- 【互动媒体技术】艺术系同学创意“自画像“赏析