processing_processing leap motion - CSDN
精华内容
参与话题
  • 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;
    
    /**
     * @author Administrator
     *
     */
    public class Animation {
    	//声明全局变量
    	PApplet zoomApplet;
    	
    	 扩散的圆圈
    	PImage photo;
    	int animateWidth;
    	int animateHeigth;
    	int centerX;
    	int centerY;
    	float radius;
    	
    	
    	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;
    	}
    
    	
    	//镭射线效果
    	float originRadius;
    	float secondRadius;
    	public void setupDiffusionRadiumRays(PGraphics zoomGraphics) {
    		
    		//photo = zoomApplet.loadImage("Resources\\Images\\3.jpg");
    		originRadius = radius;
    		secondRadius = radius-animateWidth/4;
    	}
    	public void drawDiffusionRadiumRays(PGraphics zoomGraphics) {
    		
    		zoomGraphics.noFill();
    		//zoomGraphics.image(photo, 0, 0);
    		radius += 1;
    		secondRadius += 1;
    		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);
    			if (secondRadius>0) {
    				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);
    			}
    		}	
    		if (radius>animateWidth/2) {
    			radius = originRadius;
    		}
    		if (secondRadius>animateWidth/2) {
    			secondRadius = originRadius;
    		}
    	}
    	
    	public float getRadius() {
    		return radius;
    	}
    
    	public void setRadius(float radius) {
    		this.radius = radius;
    	}
    	
    
    }
    

    火 焰

    这是我用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);
    			PImage image = loadImage("../Resources/Images/fire.png");
    			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++) {
    				particleSystem.addParticle();
    			}
    		}
    		
    		// 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)
    		 {
    			 acc.add(fPVector);
    		 }
    		 void update()
    		 {
    			 vel.add(acc);
    			 loc.add(vel);
    			 lifespan -= 2.5;
    			 acc.mult(0);
    		 }
    		 void render()
    		 {
    			 imageMode(CENTER);
    			 tint(255,lifespan);
    			 image(image,loc.x,loc.y);
    		 }
    		 boolean isDead()
    		 {
    			 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++)
    				{
    					particles.add(new Particle(origin, image));
    				}
    			}
    			void run()
    			{
    				for(int i=particles.size()-1;i>=0;i--)
    				{
    					Particle particle = particles.get(i);
    					particle.run();
    					if (particle.isDead()) {
    						particles.remove(i);
    					}
    				}
    			}
    			void applyForce(PVector dir)
    			{
    				for(Particle p:particles)
    				{
    					p.applyForce(dir);
    				}
    			}
    			void addParticle()
    			{
    				particles.add(new Particle(origin, image));
    			}
    		}
    		
    		 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);
    		            //返回生成的新对象
    		            cloneObj = (T) ois.readObject();
    		            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 星空图数据可视化效果

    热门讨论 2020-07-30 23:32:36
    processing写的数据可视化的效果,具体分析的是企业网络数据,约十万行的数据。。采用的可视化效果是星空图。星空图有简单的交互功能。 自己参考文献写出来的小东西,没有用什么高深的算法,很简单理解。 做了一些...
  • Processing——《下雪的季节》可视化流程

    千次阅读 多人点赞 2018-11-24 23:04:00
    Processing——《下雪的季节》可视化流程 一、前言 灵感来源(也谈不上灵感吧):正值冬季,下雪的季节,做做雪花飘落的“特效 ”也别有一番风味(虽然挺low的,哈哈哈)。更者,正好有一首歌,即名为《下雪的季 ...

    Processing——《下雪的季节》可视化流程

    一、前言

                 灵感来源(也谈不上灵感吧):正值冬季,下雪的季节,做做雪花飘落的“特效
             ”也别有一番风味(虽然挺low的,哈哈哈)。更者,正好有一首歌,即名为《下雪的季
             节》,所以就又想做些音乐可视化的东西吧,也算锦上添花。
    

    b站大佬做的可视化

    二、飘雪的实现

           有了有趣的想法就开始实现吧,先从比较容易的来写,雪花的绘制。
           雪花如果一点点的画那就很难画了,所以这里用了分形的方法画——即递归。
           废话不多说直接上代码,代码上有注释
    
    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个主分叉的其中一个的绘制——分支类
    {
     float radius,ratio,rotation;//类属性,类中全局变量
     Branch(float radius_,float ratio_,float rot)//构造函数并赋值{
      radius=radius_;
      ratio=ratio_;
      rotation=rot;
    }
     void generate()//类方法 ——生成完整的一支雪花分枝
    {
       pushMatrix();
       rotate(radians(rotation)); //旋转
       float len=getStartLength(radius,ratio);
       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();
           rotate(radians(-60)); //左
           branch(getStartLength(len,ratio));
           popMatrix();
           
           pushMatrix();
           rotate(radians(60)); //右
           branch(getStartLength(len,ratio));
           popMatrix();
         }
     }
     
     float getStartLength(float length,float  ratio)//生成下次开始产生分叉的起点长度
     {
        float len=(1-ratio)*length;
        return len;
     }
    }
    
    class snowflake  //雪花类
    {
       PVector position ,velocity;
       float rotation ,aVelocity,radius,ratio;
       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;
         radius=r;
         ratio=rat;
         
         for(int i=0;i<6;i++){ branches[i]=new Branch(radius,ratio,i*60);}//生成一个完整的雪花
        }
       
        void update()
        {
        position.add(velocity); //速度
        rotation+=aVelocity;  //角速度
        }
        void show()  
        {
        pushMatrix();
        translate(position.x,position.y);
        rotate(radians(rotation));
        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 radius =random(10,20);
     float ratio=0.618;
     snowflake s=new snowflake(position,velocity,rotation,aVel,radius,ratio);
     snowflakes.add(s);
    }
    
    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(); //在画布中显示下雪的情状
    if(s.position.y>(height+s.radius)){ite.remove();}                        //雪花落到画布外就移除
    } 
    }
    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);
    player= minim.loadFile("1.mp3"); //打开文件
    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);
        line(r1 * cos(rad1)+500, r1 * sin(rad1)+180, r2 * cos(rad2)+500, r2 * sin(rad2)+180);
        line(R1 * cos(Rad1)+500, R1 * sin(Rad1)+180, R2 * cos(Rad2)+500, R2 * sin(Rad2)+180); 
      }
        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

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

    三、完成了哦!

    在这里插入图片描述

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

    四、总结

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

    五、参考链接

    openprocessing的大佬示例
    b站 : AV11187821(分形雪花教学)。

    展开全文
  • processing编写的一个小游戏

    万次阅读 2016-10-23 18:35:18
    这是本人第一次写博客,是写给自己看的吧,标志着我下定决心开始走程序媛这条路了。 而且这也是我第一次用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;
    font = loadFont("AxureHandwriting-Italic-38.vlw");
    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);
        font = loadFont("AxureHandwriting-Italic-38.vlw");
    
        img = loadImage("僵尸1.png");
        img2=loadImage("警察.png");
        img3=loadImage("杀手.png");
        img4=loadImage("背景1.jpg");
        img5=loadImage("医生.png");
        img6=loadImage("狙击.png");
    
    
        minim=new Minim(this);
        player=minim.loadFile("background.mp3",560); //音频要事先准备好
        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来实现。

    它的特点是:

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

      二、Processing IDE 下载

      打开https://processing.org/download/官网下载地址,根据使用的电脑操作,下载对应的IDE。
    7. 下载后,不用安装,打开里面的processing.exe,即可运行IDE
    8. 各部分作用如下:

    三、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

    2020-07-28 23:32:01
    processing的快速入门资料,包括软件介绍,如何快速上手,下载安装,连续作画,变量,函数,座标,逻辑表达,循环,以及更多的参考资料等等。你让在较短的时间内快速体验到该软件的魅力。
  • Processing是一种简单的编程环境,其创建目的是使开发更容易开发面向视觉的应用程序(重点是动画)并通过交互为用户提供即时反馈变得更加容易。开发人员想要一种“素描”代码中想法的方法。随着其功能在过去十年中的...
  • Processing简介和环境搭建

    万次阅读 2018-08-25 15:31:00
    Processing 在 2001 年诞生于麻省理工学院(MIT)的媒体实验室,主创者为 Ben Fry 和 Casey Reas,项目发起的初衷,本是为了满足他们自身的教学和学习需要。后来,当Casey在意大利的伊夫雷亚交互设计学院...
  • Processing 教程(7) - 平移、旋转、放缩

    千次阅读 2015-09-07 20:20:27
    首先定义一些辅助线函数,并且测试; 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所有代码

    万次阅读 2016-11-27 18:37:57
    地址:https://www.douban.com/group/topic/36456131/
  • Processing

    2019-10-21 17:44:48
    这周开始接触processing,首先下载就很痛苦,莫名地github就很难下。最后同学发来环境,竟然不用安装,体量也小。(面向设计师的东西果然都将设置对用户透明了) 然后开始临摹,开始很懵,除了在OPenGL做过那么几次...
  • 网上找了很多方法都不行,唯独这个方法真的奏效了。 鉴于自己在装了某一个软件,修改了.net framework的配置,所以重新安装了.net framework成功解决。
  • Error:java: Annotation processing is not supported for module cycles. Please ensure that all modules from cycle [qrcode-common,qrcode-manager-pojo] are excluded from annotation processing ...
  • IDEA报: Lombok Requires Annotation Processing

    万次阅读 2016-11-06 18:34:54
    一、问题描述 IDEA使用lombok,提示: ...Lombok Requires Annotation ...Annotation processing seems to be disabled for the project "jhipster". For plugin to function correctly, please enable it u
  • java调用webservice时抛出该异常:Fault occurred while processing
  • jsp出现Processing instruction not closed问题

    万次阅读 多人点赞 2018-01-02 18:08:40
    当jsp出现了Processing instruction not closed此问题 解决方法: 1.关闭此页面,重新打开 2.看标签有没有没闭合的 3.关闭eclipse,重新打开
  • 在写一个方法的时候没有注意到依赖,然后就随手确订了模块的依赖,造成了循环依赖,现在找到了解决的办法。
  • 在执行更新或者安装软件命令时 ...遇到:Errors were encountered while processing 查看错误信息发现: not fully installed 解决方法:: cd /var/lib/dpkg sudo mv info info.bak sudo mkdir info...
  • Spring中的错误:The processing instruction target matching "[xX][mM][lL]" is not allowed.原因:很简单xml的的第一行在第二行去了。空行了。所以出现了匹配错误。这么简单的错误,只是不知情啊。哈哈。空行和
  • 出现Processing instruction not closed.

    万次阅读 2014-12-13 09:54:46
    当把jsp中加上xml头时,出现上述错误,关闭页面后再打开就没事了
1 2 3 4 5 ... 20
收藏数 302,046
精华内容 120,818
关键字:

processing