基于Processing的动画交互
基于processing的动画交互
- 基本介绍
- 总览结果
- 分部设计及源代码
- 1、 添加字体
- 2、球随鼠标
- 3、两个对象之间的引力
- 4、小型粒子系统
- 5、心得想法
基本介绍
大致看了《代码本色》这本书之后，在原有的编程经验的基础上，对于在processing中添加交互有了心得认识，于是按照老师要求，写了一个简单的动画交互系统。
整个系统运用了《代码本色》中力、震荡、粒子系统三大章，生成了各自独立的三个小场景，通过键盘的交互在三个场景之间不停转换。
最主要的就是setup（）函数和draw（）函数，下面会放到部分setup（）函数，draw（）函数我写的很简单：
void draw()
{background(0);textSize(150);text("Welcome to my little world",100,300);if (keyPressed){if (key == '1'){sence1();}if (key == '2'){sence2();}if (key == '3'){sence3();}}
}
一个很简单的键盘交互，因为每个小场景都对应了自己的draw（），所以在这里直接把各自的draw（）改掉了。
总览结果
首先，进入界面时有一个自己的标题，由于processing的交互特点，然后按下键盘‘1’是对应的第一个场景，但是一定要长按！这个纠结功能让我纠结了一回儿：
不按任何键的时候，会继续出现“welcome to my little world”字样，但是由于系统已经运行过了，字体的颜色跟着上一帧生成的颜色同步：
长按‘2’对应第二个场景：
长按‘3’对应第三个场景：
分部设计及源代码
1、 添加字体
在程序运行开始，先展示了动画系统的标题：“Welcome to my little world”，字体是电脑里下载过的ttf文件，这部分的代码很简单，添加字体只是给系统一个装饰。
void setup()
{PFont myfont;myfont = createFont("CHILLER.TTF",64,false);textFont(myfont);
}
void draw()
{textSize(150);text("Welcome to my little world",100,300);
}
2、球随鼠标
《代码本色》的第二章讲述了力的效果，在这里让鼠标（mouseX，mouseY）对球有一个吸引力，addForce(particles[i].attractTo(mouseX, mouseY)。让球跟着随机生成的质量大小改变半径，限制速度为4，不叠加重力，没有摩擦力等阻力，在每一帧中把加速度设为0。一边向着鼠标移动一边自转。
void setup()
{int n = 30;particles = new Particle[n];for (int i = 0; i < n; i++) {PVector p = new PVector(random(0, width), random(0, height));particles[i] = new Particle(p);}
}Particle[] particles;void sence1()
{int n = 30;background(0);for (int i = 0; i < n; i++) {particles[i].addForce(particles[i].attractTo(mouseX, mouseY));particles[i].run();}
}class Particle
{PVector acc, vel, pos;float mass, incr, ang;Particle(PVector p) {pos = p.get();acc = new PVector();vel = new PVector();mass = random(.2, 2);ang = 0;incr = random(-.001, .001);}void run() {update();render();}void update() {vel.add(acc);vel.limit(4);pos.add(vel);acc.mult(0);}void render() {float r = random(255);float g = random(255);float b = random(255);rectMode(CENTER);fill(200,r,g,b);stroke(255);strokeWeight(1);ang += incr;pushMatrix();translate(pos.x, pos.y);rotate(degrees(ang));ellipse(0, 0, mass*25, mass*25);popMatrix();}void addForce(PVector force) {PVector f = PVector.div(force, mass);acc.add(f);}PVector attractTo(float x, float y) {PVector mousePos = new PVector(x, y);PVector dir = PVector.sub(mousePos, pos);float dist = dir.mag();dist = constrain(dist, 15, 25);dir.normalize();float f = (30*mass)/(dist*dist);dir.mult(f);return dir;}
}
3、两个对象之间的引力
其实大体上看，如果把1中的鼠标看做一个独立的对象，一团球粒子看做另一个独立的对象，就是2的实现结果，但是2用了另一种方法，并不是给系统添加引力，而是记录两个对象的位置，其中一个对象的位置即鼠标的位置，不停地计算两个对象之间的距离，采用循环的方法，画点。而两个对象之间不会完全重合，距离足够小时，一个对象绕着另一个做一个自定义的sin、cos函数运动。设置了透明度，让对象的运动看起来有影子的感觉。
int step = 24;
int margin = 50;void sence2()
{background(0);strokeWeight(sqrt(2));stroke(255);fill(255,30);int mx = mouseX;int my = mouseY;float cx = cos(radians(frameCount))*width/3 +width/3;float cy = sin(radians(frameCount))*height/3 +height/3;for (int aa=step/2-margin; aa<width+margin; aa+=step) {beginShape();for (int bb=step/2-margin; bb<height+margin; bb+=step) {float dism = dist(mx, my, aa, bb);float disc = dist(cx, cy, aa, bb);float x1=aa-((aa-cx)/disc + (aa-mx)/dism)*60;float y1=bb-((bb-cy)/disc + (bb-my)/dism)*60;curveVertex(x1, y1);}endShape();}for (int bb=step/2-margin; bb<height+margin; bb+=step) {beginShape();for (int aa=step/2-margin; aa<width+margin; aa+=step) {float dism = dist(mx, my, aa, bb);float disc = dist(cx, cy, aa, bb);float x1=aa-((aa-cx)/disc + (aa-mx)/dism)*60;float y1=bb-((bb-cy)/disc + (bb-my)/dism)*60;curveVertex(x1, y1);}endShape();}
}
4、小型粒子系统
生成随机颜色的原型，上升到一定范围的随机高度再降落，一个简单的粒子系统，展示出来有一种烟花绽放的效果。系统有两个类，记录粒子的运动情况，重力，颜色，大小等基本参数，当粒子运动出屏幕时，就把该粒子删除，继续生成新的粒子。
void setup()
{partList = new ArrayList<Pparticle>();schrapnel = new ArrayList<Scrap>();for (int i = 0; i < NUMPARTICLES; i++) {createParticle();}
}
float rr = random(255);
float gg = random(255);
float bb = random(255);
ArrayList<Pparticle> partList;
ArrayList<Scrap> schrapnel;
float GRAV = .1;
PVector grav = new PVector(0, GRAV);
int NUMPARTICLES = 20;
void sence3()
{background(0);noFill();noStroke();displayPart();displaySch();
}
void createParticle()
{PVector pos = new PVector(random(width), height);float tempDir = ((width/2 - pos.x) > 0) ? 1 : -1; PVector vel = new PVector((dist(width/2, 0, pos.x, 0) * tempDir)/200, random(-10, -5));partList.add(new Pparticle(pos, vel, grav, 5, color(50)));
}
void displayPart()
{for (int i = 0; i < partList.size(); i++) {Pparticle temp = partList.get(i);if (temp.atApex()) {temp.explode();partList.remove(i);createParticle();}temp.display();}
}
void displaySch()
{for (int i = 0; i < schrapnel.size(); i++) {Scrap temp = schrapnel.get(i); temp.display(); if (temp.offScreen()) { schrapnel.remove(i);}}
}
class Pparticle
{PVector ppos, vvel, ggrav;int size;color col, schCol;Pparticle(PVector pos_, PVector vel_, PVector grav_, int size_, color col_) {ppos = pos_;vvel = vel_;ggrav = grav_;size = size_;col = col_;schCol = color(int(random(0, 255)), int(random(0, 255)), int(random(0, 255)));}void display() {//fill(180,col);fill(rr,gg,bb);calculate();ellipse(ppos.x, ppos.y, size, size);}void calculate() {ppos.add(vvel);vvel.add(ggrav);}void explode() { for (int i = 0; i < 50; i++) {createSchr();}}void createSchr() {PVector tempPos = new PVector(ppos.x, ppos.y);PVector tempVel = new PVector(random(-2, 2), random(-4, 0));schrapnel.add(new Scrap(tempPos, tempVel, ggrav, 2, schCol));}boolean atApex() {return(vvel.y > 0 && (vvel.y - ggrav.y) < 0);}boolean offScreen() {return(ppos.y > height);}
}
class Scrap
{PVector pppos, vvvel, gggrav;int size;color col, schCol;boolean fade;int life = 0;Scrap(PVector pos_, PVector vel_, PVector grav_, int size_, color col_) {pppos = pos_;vvvel = vel_;gggrav = grav_;size = size_;col = col_; }void display(){calculate();fill(200, red(col) - life * 2, blue(col) - life * 2, green(col) - life * 2);//fill(r,g,b);ellipse(pppos.x, pppos.y, size + 2, size + 2); } void calculate(){pppos.add(vvvel);vvvel.add(gggrav);life++; }boolean offScreen(){return(pppos.y > height); }
}
5、心得想法
这里是博主的一点心得碎碎念，可以跳过啦~
在做这个系统（其实是一门课的结课作业）时，想了很久关于自己要做什么，于是产生了很多写到一半就放弃的文件。
归根结底就是自己能力有限，在这里自我反思，为什么可以想却做不到，有时候走在路上也在想某个功能应该怎么实现，后来发现了processing网站，其实早应该发现了，里面有很多很好地例子，最感兴趣的其实是粒子系统生成的时钟，尝试了三个小时发现自己实现不了，无奈放弃。
这次的三个案例也是反反复复修改了很久，比如说全局变量命名重复、类的命名和使用，setup和draw函数里最终应该放什么代码，转到另一个场景时没有重置背景……一系列问题，简单的或复杂的，经过不停地搜索，终于一点一点解决了。
对于字体是后来才想起来加上去，之前的实验中没有做过这种，搜索怎么添加字体之后发现其实很简单，添加完之后又想，为什么不直接在ps里做一张图导入呢，只需两行，运行之后发现，忘记给字体添加颜色，后来跟系统同步了，算是一个小的柳暗花明吧。
这次实验收获很大，不仅仅是关于代码的学习，更重要的是自己一点一点解决问题的过程，有时候产生很弱智的问题，可那也是自己写出来的。还有根据自己的想法，一步一步搜索实现的过程，很累但是很有成就感。
参考文献
《代码本色》 网上有很多PDF链接，这里直接是老师发的>_<
https://processing.org/ 这绝对是个宝藏网站，三个场景都是在这里发现并且写出来修改的
基于Processing的动画交互相关推荐
- 基于processing的交互动态绘画系统
关于绘画 我认为绘画就是将自己的意识与思想通过一些手段呈现在载体上的作品,这种呈现方式可以是多种多样的,不论是用画笔涂鸦,颜料泼洒,或者是通过手势肢体控制,只要倾注了自己的感情自己的想法,那么就是一张 ...
- 融入动画技术的粒子效果文字动画交互应用
写在前面 本次实现的交互系统是基于粒子系统的粒子文本效果.本次课程设计主要参考代码本色一书中的内容,系统应用中运用了 <代码本色> 第一章 向量.第二章 力.第四章 粒子系统等章节的动画技 ...
- 动画交互应用——神秘力量
目录 一 前言 二 应用背景 三 主要功能及用法 场景一--一根橡皮绳 场景二--一个跷跷板 场景三--一座滑滑梯 四 应用创意 1 视觉独特的故事背景 2 真实的物理系统模拟 3 简单的画风及操作 ...
- 基于网络媒介的交互设计研究
随着网络的日益普及,交互性的话题也逐渐升温.虽然交互性是一个相当新的词汇,但它其实是一种早已存在的现象,早得超过任何人的想象.亘古至今,互动一直是人类文化的一部分.演讲.交谈.踢球.购物.画画.雕塑- ...
- 基于Canvas的动画基本原理与数理分析
转载自https://www.jianshu.com/p/e70c9cfbdb38 什么是动画? 就像思考哲学问题无法回避思维和存在的关系一样,制作动画同样无法逃避的问题是动画的原理是什么?这里提一句 ...
- 基于WPF框架—动画
文章目录 Animation 类 动画的生命周期 Timeline类 故事板 扔垃圾小动画 设计界面 主程序 WPF提供了一个更高级的模型,通过该模型可以只关注动画的定义,而不必考虑它们的渲染方式.这 ...
- 基于人机体感交互的电控轮椅系统设计
基于人机体感交互的电控轮椅系统设计 /2560 文件夹为 下位机控制程序 /processing 文件夹为 上位机程序 一.总体方案设计 该系统共设有三种控制模式. 跟随模式下, 通过抬手姿态来启动轮 ...
- Win32编程之基于MATLAB与VC交互的多项式回归
运行环境 Matlab R2018b x64 or x32 Visual Studio 2017 企业版 程序预览 文末有完整程序代码下载地址,有任何问题欢迎留言,谢谢点赞哟! 程序功能描述 矩阵运算 ...
- 【Flink】Flink Table 基于Processing Time、Event Time的多种Window实现
Flink Table 基于Processing Time.Event Time的多种Window实现 Flink 提供了Table Api,用来统一批流入口,使用Flink Table Api,直接 ...
最新文章
- 2021年的第一盆冷水：有人说别太把图神经网络当回事儿
- 汽车维修行业呼吁大学生加入修车行列
- J2EE,J2SE,J2ME,JDK,SDK,JRE,JVM区别
- 深入理解.NET Core的基元（三） - 深入理解runtimeconfig.json
- 泰山挑夫1（菜鸟题解）
- html 中avi视频插件,JDG让一追二击败V5！Kanavi降维打击，逆版本选英雄不按常理出牌...
- 【DSP开发】HyperLink 编程和性能考量
- Spring Data —— 完全统一的API？
- 计算机组成原理 蒋本珊pdf,计算机组成原理 蒋本珊 习题解答.pdf
- LAMP一键安装包是什么？
- JsonMappingException: Problem deserializing 'setterless' property '': get method returned null
- C语言实现求最小公倍数。
- 中兴力维动环监控_高新兴FSU中兴力维FSU艾默生FSU收购
- STM32CubeMX安装问题【尤其是Java环境没安装好的情况】
- 安装mysql 配置环境变量
- rt3070网卡 linux驱动,移植rt3070芯片网卡驱动到dm365全过程---yingru
- 2天线8状态空时网格码 c语言实现
- 鸿海集团董事长郭台铭：数字经济是中国制造2025的根基
- 苹果签名服务商必看！苹果企业签名去哪里找客户？
- [原创]测试用例设计之“正交实验设计”法