互动媒体技术——processing旋转方块（不同角度的旋转）

总体步骤概述

1.观察图形，总结其中的规律

2.将规律转化为代码，注意封装性

3.应用交互性，拓展作品

一、观察图形，总结其中的规律

（1）图形组成元素

图形是由三个立方体的线框图以及立方体的每个顶点防止一个小球所形成。

（2）图形运动特征

可以观察，三个立方体均在旋转，但是每个立方体的旋转轴却不一样。这里看似简单，但是涉及到很多步的角度的转换。
首先了解一下processing的坐标系：

最外圈的立方体：这里先看作绕Y轴旋转
中间的立方体：绕x轴旋转
最小的立方体：绕Z轴旋转
当然，它们还需要旋转一定的角度

二.将规律转化为代码，注意封装性

第一步：分析类的关系

（1）首先每个cube都有绘制、size等成员，因此得建立一个cube类，其中包含绘制cube和设置cube大小的功能
（2)由于每个cube的旋转角度不一致，所以每个cube的旋转的方法都不一样，但可以只是内容不一样，但是方法名相同，这里我们想到的第一个便是接口。
于是分析了一下，整体的结构大致是：

第二步：开始编写每一块的代码

Cube类：在这个类中，我把小球的绘制也放在了绘制函数一起，这样子方便看作是一个整体。

class Cube {float size;color c;Cube() {}Cube(float size) {this.size =size;}public void setColor(color c){this.c=c;}public void drawCube() {float []x={-size/2,-size/2,-size/2,-size/2,size/2,size/2,size/2,size/2};float []y={-size/2,size/2,-size/2,size/2,-size/2,size/2,-size/2,size/2};float []z={size/2,size/2,-size/2,-size/2,size/2,size/2,-size/2,-size/2};ortho();for(int i=0;i<8;i++){pushMatrix();translate(200, 200, 0);rotateX(radians(-45));rotateY(radians(45));translate(-200, -200, 0);translate(x[i]+200,y[i]+200,z[i]);//noStroke();fill(c);lights();sphere(5);popMatrix();}pushMatrix();translate(200, 200, 0);ortho();strokeWeight(3); stroke(c, 160);rotateX(radians(-45));rotateY(radians(45));lights();noFill();box(size);popMatrix();}
}

接口 threeCube

interface threeCube {public void rotateTheCube(int rotateMills,int x);public void setColor(color c);
}

类Cube1，Cube2，Cube3：它们继承自Cube，实现了结构threeCube，其中只是方法rotateCube（旋转立方体）的函数内容有所不同，因此这里我只介绍一下旋转：
（1)最外圈的立方体：先移回原点，把x轴和Y轴的角度都恢复到原位，然后绕Y轴旋转，转过后，又将其移回之前的位置和角度（x轴旋转-45度，y轴旋转45°）

public void rotateTheCube(int rotateMills,int x) {if(x>0){this.size=x;}pushMatrix();translate(200, 200, 0);rotateX(radians(-45));rotateY(radians(rotateMills));rotateX(radians(45));translate(-200, -200, 0);drawCube();popMatrix();}

(2)中间的立方体：类似上面

public void rotateTheCube(int rotateMills,int x) {if(x>0){this.size=x;}pushMatrix();translate(200, 200, 0);rotateX(radians(-45));rotateY(radians(45));rotateX(radians(-i));rotateY(radians(-45)); rotateX(radians(45));translate(-200, -200, 0);drawCube();popMatrix();}

（3)最小的立方体

 public void rotateTheCube(int rotateMills,int x) {if(x>0){this.size=x;}pushMatrix();translate(200, 200, 0);rotateX(radians(-45));rotateY(radians(45));rotateZ(radians(i));rotateY(radians(-45)); rotateX(radians(45));translate(-200, -200, 0);drawCube();popMatrix();}

效果展示：

三、.应用交互性，拓展作品

（1)使用mouseClick函数控制方块的大小变换，flag用于确定是否点下

void mouseClicked() {if(flag)flag=false;else flag=true;
}

void draw() {background(0);noFill();int caseCube=frameCount%21;cube1.setColor(colorCube);cube2.setColor(colorCube);cube3.setColor(colorCube);if(caseCube<7&&flag){cube1.rotateTheCube(i+10,120);cube2.rotateTheCube(i+5,60);cube3.rotateTheCube(i,30);}else if(caseCube<14&&flag){ cube1.rotateTheCube(i+10,60);cube2.rotateTheCube(i+5,30);cube3.rotateTheCube(i,10);}else{cube1.rotateTheCube(i+10,180);cube2.rotateTheCube(i+5,120);cube3.rotateTheCube(i,60);}i++;if(i==360)i=0;
}

（2)使用mouseDragged函数控制方块的颜色变换

color colorCube=color(255, 177,17);cube1.setColor(colorCube);cube2.setColor(colorCube);cube3.setColor(colorCube);
void mouseDragged()
{colorCube=color(random(215,255),random(50,255),random(0,255));
}

效果展示

互动媒体技术——processing旋转方块（不同角度的旋转）相关推荐

互动媒体技术——Processing创意绘画系统
互动媒体技术--Processing创意绘画系统总体设计思路工具:Processing Processing是一个为开发面向图形的应用(visually oriented appli ...
互动媒体技术——Processing模仿并拓展动态爱心图案
总体步骤概述 1.观察图形,总结其中的规律 2.将规律一步一步转化为代码,注意封装性 3.应用交互性和用户感官,拓展作品一.观察图形.总结规律 (1)单个爱心: 单个爱心是由许多个立方体拼接而成的, ...
互动媒体技术作业——processing码绘
互动媒体技术作业--processing码绘一.作品临摹二.码绘拓展三.心得体会一.作品临摹 1.要求: 从参考资料中的"动态图形艺术"中选取不少于1幅作品,用编程方式临摹 ...
互动媒体技术——基于processing实现随机行为及牛顿运动学：自然这么美，带你去看看！
博文索引目录: 1. 引言 2. 作品 2.1 第0章(引言)-- 我对我的梦有种迷恋,就像这漫天星的夜 2.2 第1章(向量)-- 心如止水,却为叶所动 2.3 第2章(力)-- 樱花飘来的方向,大 ...
p5.js 编程临摹动态图形（互动媒体技术作业）
p5.js 编程临摹动态图形(互动媒体技术作业) 动态图形的规律分析 p5.js 代码历程走过的弯路拓展总结动态图形的规律分析从老师的动态图形参考资料中,我选择了以下图形进行临摹: 初次见面 ...
十二个“一”与耍猴（互动媒体技术作业）
十二个"一"与耍猴(互动媒体技术作业) 角色简介第一章耍猴之兴第二章耍猴之变第三章第四章 -- 总结角色简介本文故事时间为古代某时期,文中时间点与现实无关,故事背景 ...
互动媒体技术——基于p5.js实现动态图形临摹与拓展：炫彩光影的千变万化！
博文索引目录: 1. 引言 2. 临摹结果对比 3. 临摹过程 3.1 准备工作 3.2 原图规律--语言描述 3.3 原图规律--数学与代码描述 3.4 完整代码 4. 创意拓展 4.1 拓展一-- ...
十二个“一”，十二台手机（互动媒体技术作业）
十二个"一",十二台手机(互动媒体技术作业) 选题: A:VIVO NEX3 B:OPPO Reno系列 C:iPhone 11系列 D:三星 Note10 系列 E:8848钛金 ...
互动媒体技术——五个书法“一”角色设计
互动媒体技术作业小组成员:1191170412陈颖 1191170413黄洁 --关于书法"一"的角色设计角色预览以下角色形象均来自网图. 主角:李佳莉性别:女人介绍:不 ...
p5.js 绘制创意自画像（互动媒体技术作业）
p5.js 绘制创意自画像Little Prince(互动媒体技术作业) 作品展示代码&创意点分析 1.设置工具类以获取坐标点:本次实验最有用的东西就是这个了 2.眼睛跟随鼠标运动: 3.披 ...