• ## processing几种简单动画

万次阅读 多人点赞 2018-11-27 11:14:10
这是我用processing写出的扩散效果 package Exercise; import processing.core.PApplet; import processing.core.PGraphics; import processing.core.PImage; /** * @author Administrator * */ public class ...
环形扩散
这是我用processing写出的扩散效果

package Exercise;
import processing.core.PApplet;
import processing.core.PGraphics;
import processing.core.PImage;

/**
*
*/
public class Animation {
//声明全局变量
PApplet zoomApplet;

扩散的圆圈
PImage photo;
int animateWidth;
int animateHeigth;
int centerX;
int centerY;

private int progressive = 1;
private int circleAlpha = 255;

//构造函数
public Animation(PApplet zoomApplet,int animateWidth,int animateHeigth,int centerX,int centerY) {
this.zoomApplet = zoomApplet;
this.animateWidth = animateWidth;
this.animateHeigth = animateHeigth;
this.centerX = centerX;
this.centerY = centerY;
}

//镭射线效果

}

zoomGraphics.noFill();
//zoomGraphics.image(photo, 0, 0);
float pointX;
float pointY;
zoomGraphics.strokeWeight(10);
for(int i=0;i<180;i++)
{
int angle = i*2;
zoomGraphics.stroke(zoomGraphics.color(angle,180,60));
float originX = centerX + PApplet.cos((float) (angle*Math.PI/180))*radius;
float originY = centerY + PApplet.sin((float) (angle*Math.PI/180))*radius;
pointX = centerX + PApplet.cos((float) (angle*Math.PI/180))*(radius - 20);
pointY = centerY + PApplet.sin((float) (angle*Math.PI/180))*(radius - 20);
zoomGraphics.line(originX, originY, pointX, pointY);
float pointX1 = centerX + PApplet.cos((float) (angle*Math.PI/180))*(secondRadius-20);
float pointY1 = centerY + PApplet.sin((float) (angle*Math.PI/180))*(secondRadius-20);
float pointX2 = centerX + PApplet.cos((float) (angle*Math.PI/180))*secondRadius;
float pointY2 = centerY + PApplet.sin((float) (angle*Math.PI/180))*secondRadius;
zoomGraphics.line(pointX1, pointY1, pointX2, pointY2);
}
}
}
}
}

}

}

}

火 焰
这是我用processing写出的火焰效果

河 流
这是我用processing写出的类似于河流的效果

海 域
这是我用processing写出的一片海域的效果

以上三个是做出来的效果，下面上processing代码
火焰
package Exercise;

import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.ObjectInputStream;
import java.io.ObjectOutputStream;
import java.io.Serializable;
import java.util.ArrayList;

import processing.core.PApplet;
import processing.core.PImage;
import processing.core.PVector;

public class FireApplet extends PApplet{
/**
*
*/
private static final long serialVersionUID = 1L;

//初始化自定义粒子系统类变量
ParticleSystem particleSystem;

//动画的初始化方法
public void setup()
{
size(800,800);
particleSystem = new ParticleSystem(0, new PVector(width/2,500), image);
}
//动画的绘画方法
public void draw()
{
background(0);
float dx = map((float)mouseX, 0, (float)width, (float)-0.2, (float)0.2);
PVector wind = new PVector(dx,0);
//particleSystem.applyForce(wind);
particleSystem.run();
for (int i = 0; i < 2; i++) {
}
}

// TODO 创建Particle类有助于降低复杂度
class Particle {
PVector loc;
PVector vel;
PVector acc;
float lifespan;
PImage image;
Particle(PVector pVector,PImage img) {
acc = new PVector(0,0);
float vx = (float) (randomGaussian()*0.3);
float vy = (float) (randomGaussian()*0.3 -1.0);
vel = new PVector(vx,vy);
loc = CloneSeries.clone(pVector);
lifespan = 100;
image = img;

}
void run()
{
update();
render();
}
void applyForce(PVector fPVector)
{
}
void update()
{
lifespan -= 2.5;
acc.mult(0);
}
void render()
{
imageMode(CENTER);
tint(255,lifespan);
image(image,loc.x,loc.y);
}
{
if (lifespan<=0) {
return true;
}
else
{
return false;
}
}
}

// TODO 创建Particle系统类
class ParticleSystem
{
ArrayList<Particle>particles;
PVector origin;
PImage image;

ParticleSystem(int num,PVector v,PImage img) {
particles = new ArrayList<Particle>();
origin = CloneSeries.clone(v);
image = img;
for(int i=0;i<num;i++)
{
}
}
void run()
{
for(int i=particles.size()-1;i>=0;i--)
{
Particle particle = particles.get(i);
particle.run();
particles.remove(i);
}
}
}
void applyForce(PVector dir)
{
for(Particle p:particles)
{
p.applyForce(dir);
}
}
{
}
}

static class CloneSeries {
@SuppressWarnings("unchecked")
public static <T extends Serializable> T clone(T obj){
T cloneObj = null;
try {
//写入字节流
ByteArrayOutputStream out = new ByteArrayOutputStream();
ObjectOutputStream obs = new ObjectOutputStream(out);
obs.writeObject(obj);
obs.close();
//分配内存，写入原始对象，生成新对象
ByteArrayInputStream ios = new ByteArrayInputStream(out.toByteArray());
ObjectInputStream ois = new ObjectInputStream(ios);
//返回生成的新对象
ois.close();
} catch (Exception e) {
e.printStackTrace();
}
return cloneObj;
}
}
}


河流
package Exercise;

import java.awt.Container;

import processing.core.PApplet;
import processing.core.PGraphics;
import processing.core.PImage;

public class RiverApplet extends PApplet{

/**
*
*/
private static final long serialVersionUID = 1L;
PGraphics riverPhics;
PApplet riverApplet;
float yoff = (float) 0.0;        // 2nd dimension of perlin noise
int  [] xRows;
int  [] yRows1;
int  [] yRows2;
PImage[] plan3DImage;

public void setup() {
size(1000,1000);
}

public void draw() {

//
clear();
background(color(16,120,180));
fill(color(60,140,255));
// We are going to draw a polygon out of the wave points
beginShape();
float xoff = 0;   // Option #1: 2D Noise
//float xoff = yoff; // Option #2: 1D Noise
// Iterate over horizontal pixels
for (float x = 0; x <= width; x += 5) {
// Calculate a y value according to noise, map to
float y = map(noise(xoff, yoff), 0, 1, 250,300); // Option #1: 2D Noise
//float y = map(noise(xoff), 0, 1, 200,300); // Option #2: 1D Noise
// Set the vertex
vertex(x, y);
// Increment x dimension for noise
xoff += 0.05;
}
for (float x2 = width; x2 >=0; x2 -= 5) {
// Calculate a y value according to noise, map to
float y2 = map(noise(xoff, yoff), 0, 1, 450,500); // Option #1: 2D Noise
//float y = map(noise(xoff), 0, 1, 200,300); // Option #2: 1D Noise
// Set the vertex
vertex(x2, y2);
// Increment x dimension for noise
xoff += 0.05;
}
// increment y dimension for noise
yoff += 0.01;
endShape(CLOSE);

}


//以上这个是使用noise（）方法绘制出来的效果，这种效果很逼真，但是无法根据实际的河流坐标进行修改，所以我使用了下面的这个方法，绘制特定路线的河流，并添加河流的动画效果
package Exercise;

import java.awt.Container;

import processing.core.PApplet;
import processing.core.PGraphics;
import processing.core.PImage;

public class RiverApplet extends PApplet{

/**
*
*/
private static final long serialVersionUID = 1L;
PGraphics riverPhics;
PApplet riverApplet;
float yoff = (float) 0.0;        // 2nd dimension of perlin noise
int  [] xRows;
int  [] yRows1;
int  [] yRows2;
PImage[] plan3DImage;

public void setup() {
size(1000,1000);

setupRiverLines();
}

public void draw() {

riverPhics.beginDraw();
riverPhics.background(102);
riverPhics.stroke(255);
drawRiverLines();
riverPhics.endDraw();
plan3DImage[0] = riverPhics.get();
image(riverPhics, 100, 100);
frameRate(5);
//

public void setupRiverLines()
{
plan3DImage = new PImage[1];
//background(255);
riverPhics = createGraphics(800, 800);

riverPhics.background(255);
xRows = new int [21];
yRows1 = new int [21];
yRows2 = new int [21];
}
public void drawRiverLines() {

riverPhics.stroke(color(0));
riverPhics.strokeWeight(8);
//riverPhics.fill(75,121,199);
for(int i=0;i<=20;i++)
{
xRows[i] = 40*i;
yRows1[i] = (int) (random(100, 150) + 60);
yRows2[i] = (int) (random(200, 250) + 160);
}

riverPhics.beginShape();

for(int j=0;j<xRows.length;j++)
{
riverPhics.curveVertex(xRows[j], yRows1[j]);
}
for(int k=xRows.length;k>0;k--)
{
riverPhics.curveVertex(xRows[k-1], yRows2[k-1]);
}
riverPhics.endShape();

}

}


海域
package Exercise;

import processing.core.PApplet;
import processing.core.PShape;

public class SeaApplet extends PApplet {
/**
*
*/
private static final long serialVersionUID = 1L;
int screenWidth = 800;
int screenHeigth = 800;
float increment = (float) 0.01;
int directX = -1;// X轴移动方向1\-1
int directY = 1;// Y轴移动方向1\-1
float moveMent = (float) 0.05;// 代表海面移动速度0.1--0.01之间
float xoff = 0;
float yoff = 0;
int  [] xRows;
int  [] yRows;
int loopNum;

// 启动程序入口
public void setup() {

size(screenWidth, screenHeigth,P2D);
background(15, 101, 180);

drawShapeLine();

fill(color(60, 140, 255));
stroke(0);
}

// 循环绘画方法
public void draw() {

// 循环海域，绘制noise即浪花
xoff = yoff = increment;
for (int x = 0; x <= 650; x++) {
yoff = increment;
for (int y = 0; y < height; y++) {
float rcolor = map(noise(xoff, yoff), 0, 1, 10, 60);
float gcolor = map(noise(xoff, yoff), 0, 1, 80, 120);
float bcolor = map(noise(xoff, yoff), 0, 1, 160, 255);
// System.out.println("R:"+rcolor+"G:"+gcolor+"B:"+bcolor);
if (x<=100) {
set(x, y, color(rcolor, gcolor, bcolor));
}
else if (x>100&&x<=200) {
caculateMethod(100, 800, 250, 550);
boolean isIn = DownAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>200&&x<=250&&y>550) {
caculateMethod(100, 800, 250, 550);
boolean isIn = DownAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>200&&x<=250&&y<=550) {
caculateMethod(200, 0, 500, 80);
boolean isIn = UpAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>250&&x<=350&&y<=550) {
caculateMethod(200, 0, 500, 80);
boolean isIn = UpAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>250&&x<=350&&y>550) {
caculateMethod(350, 750, 250, 550);
boolean isIn = DownAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>350&&x<=500&&y<=80) {
caculateMethod(200, 0, 500, 80);
boolean isIn = UpAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>350&&x<=500&&y>80) {
caculateMethod(350, 750, 600, 500);
boolean isIn = DownAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>500&&x<=550&&y<=350) {
caculateMethod(500, 80, 600, 50);
boolean isIn = UpAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>500&&x<=550&&y>350) {
caculateMethod(350, 750, 600, 500);
boolean isIn = DownAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>550&&x<=600&&y<=80) {
caculateMethod(500, 80, 600, 50);
boolean isIn = UpAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>550&&x<=600&&y<=350&&y>80) {
caculateMethod(550, 350, 650, 150);
boolean isIn = DownAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>550&&x<=600&&y>350&&y<=500) {
caculateMethod(550, 350, 600, 500);
boolean isIn = UpAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>550&&x<=600&&y>500) {
caculateMethod(350, 750, 600, 500);
boolean isIn = DownAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>600&&x<=650&&y<=350&&y<=150) {
caculateMethod(600, 50, 650, 150);
boolean isIn = UpAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}
else if (x>600&&x<=650&&y<=350&&y>150) {
caculateMethod(550, 350, 650, 150);
boolean isIn = DownAnalysePoint(x, y);
if (isIn) {
set(x, y, color(rcolor, gcolor, bcolor));
}
}

yoff += (0.01 * directY);
}
xoff += (0.01 * directX);
}
increment += moveMent;

// 海岸线拐点(0,0)(200,0)(500,80)(600,50)(650,150)(550,350)(650,500)(350,750)(250,550)(100,800)(0,800)
// 开始绘制海域
//		noFill();
//				beginShape();
//				vertex(width, 0);
//				vertex(200, 0);
//				vertex(500, 80);
//				vertex(600, 50);
//				vertex(650, 150);
//				vertex(550, 350);
//				vertex(600, 500);
//				vertex(350, 750);
//				vertex(250, 550);
//				vertex(100, 800);
//				vertex(width, height);
//				endShape(CORNER);
// 绘画帧数
frameRate(20);

}

public void drawShapeLine()
{
loopNum = 0;
//坐标数组
xRows = new int [11];
yRows = new int [11];
xRows[0] = width;
yRows[0] = 0;
xRows[1] = 200;
yRows[1] = 0;
xRows[2] = 500;
yRows[2] = 80;
xRows[3] = 600;
yRows[3] = 50;
xRows[4] = 650;
yRows[4] = 150;
xRows[5] = 550;
yRows[5] = 350;
xRows[6] = 600;
yRows[6] = 500;
xRows[7] = 350;
yRows[7] = 750;
xRows[8] = 250;
yRows[8] = 550;
xRows[9] = 100;
yRows[9] = height;
xRows[10] = width;
yRows[10] = height;
System.out.println("数组："+xRows+yRows);

noFill();
stroke(color(123,123,123));
beginShape();
curveVertex(xRows[loopNum], yRows[loopNum]);
for(int i=loopNum;i<=10;i++)
{
curveVertex(xRows[i], yRows[i]);
}
if (loopNum>0&&loopNum<11) {
for(int i=0;i<loopNum;i++)
{
curveVertex(xRows[i], yRows[i]);
}
curveVertex(xRows[loopNum], yRows[loopNum]);
}
else
{
curveVertex(xRows[10], yRows[10]);
}
loopNum++;
if (loopNum>10) {
loopNum=0;
}
endShape(CLOSE);
}
double [] result;
public double[] caculateMethod(int x1,int y1,int x2,int y2)
{
y1 = screenHeigth-y1;
y2 = screenHeigth-y2;
result = new double[2];
float k,a;
k=(float)(y2-y1)/(x2-x1);
a=y2-k*x2;
result[0]=k;
result[1]=a;
return result;
}
public boolean UpAnalysePoint(int x,int y)
{
float resultY = 0;
y = screenHeigth-y;
if (result!=null) {
float k=(float) result[0];
float a=(float) result[1];
resultY=  k*x + a;
}
if (resultY>=y) {
return true;
}
else
{
return false;
}

}

public boolean DownAnalysePoint(int x,int y)
{
float resultY = 0;
y = screenHeigth-y;
if (result!=null) {
float k=(float) result[0];
float a=(float) result[1];
resultY=  k*x + a;
}
if (resultY<=y) {
return true;
}
else
{
return false;
}

}

}


//这个方法的核心依然是noise（）。
以上就是项目中使用到的动画效果。


展开全文
• Processing——《下雪的季节》可视化流程 一、前言 灵感来源（也谈不上灵感吧）：正值冬季，下雪的季节，做做雪花飘落的“特效 ”也别有一番风味（虽然挺low的，哈哈哈）。更者，正好有一首歌，即名为《下雪的季 ...
Processing——《下雪的季节》可视化流程
一、前言
             灵感来源（也谈不上灵感吧）：正值冬季，下雪的季节，做做雪花飘落的“特效
”也别有一番风味（虽然挺low的，哈哈哈）。更者，正好有一首歌，即名为《下雪的季
节》，所以就又想做些音乐可视化的东西吧，也算锦上添花。


二、飘雪的实现
       有了有趣的想法就开始实现吧，先从比较容易的来写，雪花的绘制。
雪花如果一点点的画那就很难画了，所以这里用了分形的方法画——即递归。
废话不多说直接上代码，代码上有注释

import java.util.Iterator;

snowsystem snow;

void setup() //建画板
{
size(1280,1080);
snow =new snowsystem(0.3);  //雪花下落频率
}
void draw() //重复执行，绘制雪花及其下落过程（动态）
{
background(40);
stroke(240);
snow.run();
}

class Branch  //雪花6个主分叉的其中一个的绘制——分支类
{
ratio=ratio_;
rotation=rot;
}
void generate()//类方法 ——生成完整的一支雪花分枝
{
pushMatrix();
branch(len);//递归函数
popMatrix();
}
void branch(float len)//主递归函数
{
strokeWeight(len*0.15); //线粗细
strokeCap(ROUND);      //线端点平滑
line(0,0,0,-len);              //画线
translate(0,-len);            //移动

if(len>2) //递归终止条件
{
pushMatrix();
branch(len*ratio);
popMatrix();

pushMatrix();
branch(getStartLength(len,ratio));
popMatrix();

pushMatrix();
branch(getStartLength(len,ratio));
popMatrix();
}
}

float getStartLength(float length,float  ratio)//生成下次开始产生分叉的起点长度
{
float len=(1-ratio)*length;
return len;
}
}

class snowflake  //雪花类
{
PVector position ,velocity;
Branch[] branches=new Branch[6];

snowflake(PVector pos,PVector vel,float rot,float aVel,float r,float rat)//构造函数并赋值
{
position =pos;
velocity=vel;
rotation=rot;
aVelocity=aVel;
ratio=rat;

}

void update()
{
rotation+=aVelocity;  //角速度
}
void show()
{
pushMatrix();
translate(position.x,position.y);
for(Branch b:branches)
{b.generate();}
popMatrix();
}
}

class snowsystem   //雪花下落类
{
float speed ;
ArrayList<snowflake> snowflakes;

snowsystem (float speed_){
speed=speed_;
snowflakes=new ArrayList<snowflake>();
}

void  generate() //随机生成新雪花（多个）
{
PVector position =new PVector(random(0,width),0);
PVector velocity =new PVector(0,random(5,10));
float rotation =random(0,360);
float aVel=random(-2,5);
float ratio=0.618;
}

void  emit()  //控制雪的大小的函数 （speed一般小于1，否则会比较卡，看电脑配置吧）
{
if(speed >=1)
{
for(int i=0;i<speed;i++){ generate();}
}
else if(speed>0){if(random(1)<speed){generate();}}
}

void update()  //清除落到画布外的雪花
{
Iterator<snowflake> ite=snowflakes.iterator(); //迭代器，相当于c++中的队列，按顺序移除进入的雪花
while(ite.hasNext()){snowflake s=ite.next();s.update();s.show(); //在画布中显示下雪的情状
}
}
void run () //执行雪花下落
{ emit();update();}
}


音乐可视化
            雪花效果出来了 ，下面就是可视化的流程了
processing 提供了两个音频库，一个是sound库；一个是minim库。
这里我用的minim。
ok，直接上代码了就。（部分代码）（比较简单就不写注释了）

import ddf.minim.*;

Minim minim;
AudioPlayer player;
void setup(){
size(1280,626);
minim = new Minim(this);
frameRate(24);
}
void draw(){
background(0);
if(player.left.level()<=player.right.level()){
int r=int(random(255));
int g=int(random(255));
int b=int(random(255));
stroke(r,g,b);
}
translate(width /9, height / 5);
float bins=1024;//最大1024
for(int i=0;i<bins -1;i++) {
strokeWeight(2);
float r1 = 200 + 150 * player.left.get(i);
float r2 = 200 + 150 * player.left.get(i+1);
float R1 = 200 + 150 * player.right.get(i);
float R2 = 200 + 150 * player.right.get(i+1);
float rad1 = 2 * PI * (i / bins);
float rad2 = 2 * PI * ((i + 1) / bins);
float Rad1 = 2 * PI * (i / bins);
float Rad2 = 2 * PI * ((i + 1) / bins);
}
noFill();
arc(500, 200, 300*player.left.level()*5, 300*player.left.level()*5, -2*PIE, 2*PIE);
arc(500, 200, 300*player.right.level()*5, 300*player.right.level()*5, -2*PIE, 2*PIE);

translate(-width / 9, -height / 5);
if( player.isPlaying() )
{
text("Press any to pause playback.", 10, 20);
}
else
{
text("Press any key to start playback.", 10, 20
);
}
stroke(225);
snow.run();
}
void keyPressed() //键盘交互
{
if( player.isPlaying() ) {
player.pause();
}
else if ( player.position() == player.length() ) {
player.rewind();
player.play();
} else
{
player.play();
}
}


              这样一个demo就出来了，难免有些单调，后面优化一下。

三、完成了哦！

     加了背景，简短的几句代码，就不写了

四、总结
       只是做了些比较简单粗糙的可视化的内容，但是色彩以及波纹的变换还是会带来一定的
视觉冲击的。同时雪花的飘落配上bgm也是非常有意境的。
而往往更多被用到的手绘，想要达到这种效果简直难到头秃。所以对于做些酷酷的东西
还是果断选择码绘吧。

五、参考链接
openprocessing的大佬示例
b站 ： AV11187821(分形雪花教学)。


展开全文
• processing写的数据可视化的效果，具体分析的是企业网络数据，约十万行的数据。。采用的可视化效果是星空图。星空图有简单的交互功能。 自己参考文献写出来的小东西，没有用什么高深的算法，很简单理解。 做了一些...
• 自己敲的唯美processing屏保，有助于新手学processing的一些原理
• 这是本人第一次写博客，是写给自己看的吧，标志着我下定决心开始走程序媛这条路了。 而且这也是我第一次用Processing写小游戏，算是纪念了。
这是本人第一次写博客，是写给自己看的吧，标志着我下定决心开始走程序媛这条路了。
而且这也是我第一次用Processing写小游戏，算是纪念了。

首先帖一张运行初始界面图：

我们可以看到最下面那个警察是玩家，上面有4只僵尸，一只狙击手还有一个杀手。
医生是横着走而且超出界面后不会返回。
然后我们要对每个NPC定义它特有的属性，它是横着走还是竖着走，速度怎么样还有它和玩家相碰之后的结果。

下面是僵尸、狙击以及杀手的特性：
碰到僵尸后游戏不会结束，但是要找医生才能解除屏幕上的提示，当医生不在后如果再碰到僵尸游戏立刻结束。

PImage img=new PImage();

float speed;   //将速度定义为全局变量
Enemy  enemy1_1,enemy1_2,enemy1_3,enemy1_4;  //4只僵尸
class Enemy
{
float img_x,img_y;

Enemy(float x, float y,float sd)
{
img_x=x;
img_y=y;
speed=sd;
}

void movel1()
{  img_x+=speed;
if(img_x>width-80)  //僵尸是来回走的
{
img_x=40;
}

}

void movel2()
{ img_x-=speed;
if(img_x<40)
{
img_x=width-80;
}

}

boolean contact()     //检测是否和僵尸碰到
{
float Offset = dist(img_x,img_y,X,Y);  //距离
boolean bContact =false ;
if(Offset<=55)   //如果两个距离小于55说明相碰返回true
{
bContact=true;
}
return bContact;

}

void display()
{
image(img,img_x,img_y);

if(life==1)
{
color c=color(255,204,0);
pushStyle();
fill(c);
textFont(font,25);
text("You have to find the doctor!",width/2-140,height/2);
//生命值为1说明和僵尸相碰了
popStyle();

}

}
}

PImage img6=new PImage();   //狙击
Juji juji;
class Juji
{ float img6_x,img6_y;

Juji(float x, float y,float sd)
{
img6_x=x;
img6_y=y;
speed=sd;
}
void display()
{
image(img6,img6_x,img6_y);
}

void movel3()
{
img6_y+=speed;
if(img6_y>450)
{
img6_y=150;
}
}

boolean contact()     //检测是否和狙击碰到
{
float Offset = dist(img6_x,img6_y,X,Y);  //distance
boolean bContact =false ;
if(Offset<=55)
{
bContact=true;
}
return bContact;

}

}

PImage img3=new PImage();  //杀手
Shashou shashou;
float speed1=0.1;
class Shashou
{
float angle=0.0;
float offset=270;
float scalar=30;

float sha_x,sha_y;
Shashou()
{
}
void move()   //这里是定义了杀手以怎样的方式移动，大概是画圈的形式
{
sha_x= offset+cos(angle)*scalar;
sha_y= (offset+sin(angle)*scalar-180)*1.5;
angle+=speed1;

}
void display()
{
image(img3,sha_x,sha_y);
}
}

然后下面是医生的特性

/**
本页是有关医生的函数及定义
**/
Doctor doctor;
PImage img5=new PImage();  //医生
boolean disapper=false;
int doctor_speed=5;
class Doctor
{
float img5_x,img5_y;
Doctor(float x, float y)

{
img5_x=x;
img5_y=y;
}

void movel()
{
img5_x+=doctor_speed;
if(img5_x>width)
{
disapper=true;
}

}
void display()
{
image(img5,img5_x,img5_y);

}

boolean contact()     //检测是否和医生碰到
{
float Offset = dist(img5_x,img5_y,X,Y);  //distance
boolean bContact =false ;
if(Offset<=35)
{
bContact=true;
}
return bContact;

}

}

基本和前面敌人的定义方式差不多所以就不多说了。

还有最重要的玩家：


PImage img2=new PImage();  //警察
int X;
int Y;
int life;
boolean arrive=false;
class Player{
Player(int XX,int YY)     {
X=XX;
Y=YY;
life=2;
}

void move()
{
if(mousePressed&&life!=3)
{
X+=(mouseX-X)/2.000;
Y+=(mouseY-Y)/2.000;

}

if(mousePressed&&mouseButton==RIGHT)
{
X=mouseX-10;
Y=mouseY-5;

}

if(life==0)
{
X=width/2-20;
Y=height-70;
speed=0;
speed1=0;
color c=color(255,204,0);
fill(c);
textFont(font,25);
text("Game Over,you failed!",width/2-120,height/2);
drawbutton(width/2-30,height/2+20);
player.close();

}

if((X>width/2-50)&&(X<width/2+30)&&(Y>120)&&(Y<175))
{
arrive=true;  //判断是否到达目的地

}
else
{
arrive=false;
}
}

void drawbutton(int xx,int yy)  //在游戏结束时弄一个类似按钮的东西，点击一下退出游戏
{
noFill();
rect(xx,yy,40,20);
stroke(204, 102, 0);
textSize(15);
text("EXIT",xx+8,yy+14);
if(mousePressed&&(mouseX>xx)
&&(mouseX<xx+40)&&(mouseY>yy)&&(mouseY<yy+20))
{
exit();
}

}
void display()
{
image(img2,X,Y);
}

void update()
{

}

}

编到中后期的时候才想说把字体换一下，用默认的太丑了，而processing的字体是要下载的，在这里顺便说一下换字体的方法：
点击 【工具】->【创建字体】，然后选一个自己喜欢的字体，复制好它的名字如AxureHandwriting-Italic-38.vlw，然后按确认。
调用代码可以这样写:

PFont font;
textFont(font,25);
text("hello,girl!",width/2-120,height/2);

大家还可以像我游戏中那样定义一个颜色什么的。

最后是主界面的绘制以及那些写好的函数的调用：

/**
本页是调用函数
其中包含初始界面、背景音乐以及玩家敌人的调用
**/

import ddf.minim.*;
Minim minim;
AudioPlayer player;
int diameter;
Time timer;
PFont font;
int situation=0;

PImage img4=new PImage();  //背景1

int rectX,rectY;    //按钮的长宽
int rectSize=90;
color rectColor;
color currentColor;
boolean rectOver=false;

Player   protagonist;

void setup()
{
size(640,680);
timer=new Time(40);

minim=new Minim(this);
player.play();

protagonist = new Player(width/2-25,height-70);//生成主角

enemy1_1=new Enemy(3,120,22);  //生成僵尸
enemy1_2=new Enemy(width-200,230,20);
enemy1_3=new Enemy(width/2-30,340,32);
enemy1_4=new Enemy(width/2-10,450,25);
doctor=new Doctor(0,height-130);
juji=new Juji(width/2-20,170,10);
shashou=new Shashou();

}

void drawGameOver1()
{
color c=color(255,0,0);
fill(c);
textFont(font,25);
text("Congratulations,You  win!",width/2-120,height/2);
}

void drawGameOver3()
{

color c=color(255,204,0);
fill(c);
textFont(font,25);
text("Time is up,you failed!",width/2-120,height/2);
}

void draw()
{
frameRate(10);
image(img4,0,0);
if(situation==0)
{
pushStyle();
textSize(20);
text(millis()/1000,10,height-10);
popStyle();
}

protagonist.display();
protagonist.move();
enemy1_1.display();
enemy1_1.movel1();

enemy1_2.display();
enemy1_2.movel2();

enemy1_3.display();
enemy1_3.movel1();

enemy1_4.display();
enemy1_4.movel2();
doctor.display();
doctor.movel();

juji.display();
juji.movel3();

shashou.display();
shashou.move();

if(enemy1_1.contact()||enemy1_2.contact()
||enemy1_3.contact()||enemy1_4.contact())  //如果遇到的是僵尸，

{
life=1;   //碰到僵尸后生命值为1
speed=0;

if(disapper)   //如果碰到了僵尸且医生不在了
{
life=0;
situation=1;
}

}

if(juji.contact())
{
life=0;
doctor_speed=0;
situation=1;
}

if(doctor.contact())
{
life=2;
speed=22;

}

if(timer.isFinished())
{
if(arrive&&life!=1) //如果没到时间且到达终点且生命值不为1
{           //life==1表示遇到了丧尸，即使到了目的地也不能算赢
situation=1;
life=3;   //如果赢了将生命置为3，这样就不能拖动玩家了
speed=0;
speed1=0;
doctor_speed=0;
player.close();
drawGameOver1();
protagonist.drawbutton(width/2-30,height/2+20);
}
}
else if(!timer.isFinished()&&life!=0)
{ situation=1;
life=3;
speed=0;
speed1=0;
doctor_speed=0;
player.close();
drawGameOver3();
protagonist.drawbutton(width/2-30,height/2+20);
}
}



细致的你们应该会发现我还弄了一个计时的，我定义的游戏时间是40s，如果到时间了你没能到达目的地就算输；还有如果碰到了僵尸但是你没能找到医生救你就算到了目的地也不会显示赢；还有当游戏结束了所有的都不能动，时间也不会显示，你也不能拖动玩家了，为了解决这些问题我就设了life,situation,speed,arrive等全局变量。
所以之间的逻辑还是有点复杂的，我也是弄了好久才理清；

下面是Time 这个类：

class Time{
int totaltime;
Time(int temptotaltime)    //将40s传递给totaltime
{
totaltime=temptotaltime;
}

boolean isFinished()
{
int passedtime=millis()/1000;
if(passedtime>totaltime)
{
return false;     //如果过去的时间大于40s返回false
}
else
{
return true;
}
}
}

时间到了之后会提示，并且游戏结束：
大家可以看到医生已经看不见，移出界了。

在显示时间的时候一开始我也是懵逼的，因为我想着是用second()，但是时间总是显示不对，而且就算把游戏叉掉再打开运行，它的时间也不是从零开始算而是接着前面的时间。
后来我才发现要用millis（）。

整个游戏有4个类外加一个调用的：

由于接触processing不多，一开始连怎样引用音频、改字体、用中文写注释、添加类等等这些很简单的东西都不会，但是自己一点一点摸索还是弄出了这个游戏。而且代码不够精炼。

不过还是想吐槽一下processing，它不像vs,eclipse等编辑器那样给你提示哪个函数有问题，应该怎样写等等，比如我写textSize时写成了textsize，它也只会显示红线而不会说改成什么，我觉得这点很不好。而且它的有些错误提示本身就是错的。

最后还是感谢一下“爱上processing”这篇文章。

如果有人能看到这篇博客，也希望它能在你使用processing时对你有点帮助~
展开全文
• 本系列文章参考官方网站，《爱上processing》和《Processing编程学习指南(第2版)》 一：Processing 是什么？ Processing是一种交互式的软件和框架，语法类似于java，用于学习如何在视觉艺术中进行编码。自2001年...
本系列文章参考官方网站，《爱上processing》和《Processing编程学习指南(第2版)》

一：Processing 是什么？

Processing是一种交互式的软件和框架，语法类似于java，用于学习如何在视觉艺术中进行编码。自2001年以来，有数以万计的学生、艺术家、设计师、研究人员和爱好者使用Processing技术进行学习和原型制作。在生活中你往往会看到一些令你惊奇的酷炫视觉效果作品，如电脑音乐播放器中那随声舞动的绚丽动画、各国博物馆墙壁上悬挂的一幅幅抽象艺术画，这些美妙神奇的作品都可以通过Processing来实现。

它的特点是：

开源的，免费下载。
可以和2D, 3D, PDF, or SVG output等多种媒体进行交互。
集成了OpenGL，大大的提升了2D和3D的性能。
跨平台： GNU/Linux, Mac OS X, Windows, Android, and ARM
丰富的学习资料，开发社区和书籍较多。
Processing需要掌握基本的编程概念，如变量，函数，条件语句，循环，数组、面向对象等。这个在后面再细讲。

二、Processing IDE 下载

下载后，不用安装，打开里面的processing.exe，即可运行IDE

各部分作用如下：

三、2D图形绘制

1，坐标系，Processing默认坐标系的原点（0，0）是屏幕左上角，x轴向右增大，y轴向下增大。调用不同的函数，在不同的坐标点可以画出想要的2d图形。

一些常见的属性设置函数有：

Size（300，200）：运行对话框的大小是300*200。

Background(r,g,b)： 背景颜色值。

noStroke()和stroke()： 禁用或填充图形边框颜色。

noFill()和fill()：禁用或填充图形内部颜色。

Fill(r,g,b,a)：填充r、g、b颜色和a透明度。

strokeWeight(x)：边框画笔尺寸。

有这些属性设置函数和上面的绘制函数，就可以在Processing里画上不同颜色，不同形状的2d图形了。

四、Processing程序运行流程

主要是两个函数，void setup()和void draw（），有的中间要加上 void update（）；

代码是如何运行的？当你运行一个程序，它会严格地按照指令运行：首先执行setup()中的代码，然后执行draw()中的代码。这个运行顺序就像这样：

1a,1b,1c,2a,2b,2a,2b,2a,2b,2a,2b…

setup()中的代码运行一次，一般把变量初始值放在里面。draw（）中的代码不断循环，把需要循环变化的代码放在这里面。

例子：

五、Processing 中的范例

打开Processing IDE skech  文件中的范例程序，里面包含了大量的范例，运行它们看看，感觉下Processing的强大吧。

Processing 有很多方面的应用，还可以参考官方案例https://processing.org/exhibition/

展开全文
• processing的快速入门资料，包括软件介绍，如何快速上手，下载安装，连续作画，变量，函数，座标，逻辑表达，循环，以及更多的参考资料等等。你让在较短的时间内快速体验到该软件的魅力。
• processing 导出html5 小游戏 适合新手的demo
• Processing 是一门开源编程语言和与之配套的集成开发环境（IDE）的名称。
• Processing】 #Processing五项实验汇总 第0章 随机游走 实验结果： 这个实现的图案就是火箭发射的样子，两个三角形构成火箭的简易形象，然后运用了粒子的效果，实现了尾气的感觉。 相关代码如下： main： ...
• Processing 在 2001 年诞生于麻省理工学院（MIT）的媒体实验室，主创者为 Ben Fry 和 Casey Reas，项目发起的初衷，本是为了满足他们自身的教学和学习需要。后来，当Casey在意大利的伊夫雷亚交互设计学院...
• 最早基于java开发，几年来同时推出了JavaScript版本p5.js,以及python版本processing.py。同时对于安卓机和树莓派也有了针对性的支持。它为艺术家和各种创意编程视觉表达的人士提供了有效的编程语言和数字接口，目前...
• 首先定义一些辅助线函数，并且测试； float cm = 3.767; void setup() {  size(720,404);  frameRate(2); } // 画垂直线的函数，参数为x； void lineX(float x) {  line(x,0,x,height);  text(">"+str(x),x,.../
• processing最新安装包，Processing是一种具有革命前瞻性的新兴计算机语言，它的概念是在电子艺术的环境下介绍程序语言，并将电子艺术的概念介绍给程序设计师。它是 Java 语言的延伸，并支持许多现有的 Java 语言架构...
• 1.下载processing-3.1.2-windows32.zip 当然这里也可以下载64位的。 2.解压复制到机器的某个位置我这里是D:\Program Files (x86) 3.发送快捷方式到桌面，方便以后打开软件。 4.打开软件（我这里因为预装了...
• ## processing所有代码

千次阅读 2019-10-11 17:31:10
地址：https://www.douban.com/group/topic/36456131/
• processing练习题目，有数据，有代码
• 首先介绍一个学习processing非常好的网站： http://learn.travelchinawith.me/?p=494，以下有好些代码都是来自这个网站，非常感谢！ 1、mouseX和mouseY 鼠标当前值 2、pmouseX, pmouseY：鼠标的上一个坐标值 3、...
• Processing，粒子系统。点击鼠标，在鼠标位置出现烟花
• 内含：爱上Processing，LearningPROCESSING，ProcessingCreativeCodingandComputationalArt三套
• 开始Processing编程
• 提供一份基于鼠标响应的动画的Processing代码 重头戏：描述动态文字打乱功能实现的重要细节，并将源码公开 1.什么是Processing编程？ 这里是~~非官方~~ 简介：Processing是一个为开发面向图形的应用（visually ...
• 2.5　Processing中的代码 是时候用第1章中学习的知识来编写一些代码了。首先，复习一些基本的句法规则（syntax rule）。你可以编写三种类型的陈述语句: 函数调用 赋值操作 结构控制 目前为止，每一行代码都是对一个...
• processing的一个机器人函数的代码
• 所有程序的基础结构（不要试图抛弃这两个函数而构建processing程序） 这两个函数和普通函数相比有很多特殊性 在空缺中填入自己的语句（注意缩进） setup将会被开始时执行一次，然后循环不断地多次执行draw内的内容 ...
• Processing写的简单AR代码，在摄像头的画面中点击特定的颜色，蛋糕（图片可以替换）就出现在那个地方。
• 最近机缘巧合知道了processing，加上原本对艺术方面感兴趣，便试着学了下，中间也做出了很多有趣的作品，下面简单介绍下processing和近期写的程序。 官网介绍如下： Processing is a flexible software ...
• PROCESSING基础入门，基本程序函数用法介绍
• processing 粒子文字 使用简单的粒子系统，另加图层生成文字 然后像素画，没有GPU非常占用CPU资源，毕竟只是一个普通的测试吧，如果感兴趣的同学可以借鉴，很感兴趣的就去GLSL
• processing课程代码

...