环形扩散

这是我用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 noiseint  [] 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 pointsbeginShape();float xoff = 0;   // Option #1: 2D Noise//float xoff = yoff; // Option #2: 1D Noise// Iterate over horizontal pixelsfor (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 vertexvertex(x, y);// Increment x dimension for noisexoff += 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 vertexvertex(x2, y2); // Increment x dimension for noisexoff += 0.05;}// increment y dimension for noiseyoff += 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 noiseint  [] 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\-1int directY = 1;// Y轴移动方向1\-1float 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几种简单动画相关推荐

js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
有哪些能给视频加特效字幕的软件？试试这几种简单方法
什么软件能够给视频添加特效字幕呢?添加字幕可以提高视频的可访问性,使得听力障碍者和非母语者也能够理解视频的内容.此外,字幕也可以让人们更容易地跟上视频的内容,从而提高学习效率和理解度.在一些情况下,字 ...
python图表制作方法_Python中一种简单的动态图表制作方法
在读技术博客的过程中,我们会发现那些能够把知识.成果讲透的博主很多都会做动态图表.他们的图是怎么做的?难度大吗?这篇文章就介绍了Python中一种简单的动态图表制作方法. 数据暴增的年代,数据科学家. ...
一种简单快速的方式实现 Android App 的夜间模式
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主威威喵原创,请多支持与指教. 本文首发于此博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
three.js创建简单动画(vue中使用three.js59)
简单动画 1.demo效果 2.知识要点 2.1 three.js动画分类 2.1.1基础动画 2.1.2移动相机 2.1.3变形和蒙皮 2.1.4加载外部动画 2.2 基础动画实现方式 2.2.1 ...
Android实现箭头无限循环上升的简单动画
需求说明一个箭头图片在某个区域做上升的动画,到区域顶部时,消失的部分又从底部出现,如此循环往复. 先看实现的效果图,如下. 缺点:实际上并不是连贯的循环重复,而是第二次上升的箭头消失并没有再从底部出 ...
html5 特效框架,带37种3D动画特效的跨浏览器CSS3动画框架
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架.它可以轻松的制作出各种CSS3 3D动画效果,可以在移动手机上使用.并且使用极其简单,使用时只需要添加相应的cla ...
（论文精读）PCANet：一种简单的图像分类的深度学习基线
PCANet:一种简单的图像分类的深度学习基线 \quad\quad这篇文章主要对论文<PCANet: A Simple Deep Learning Baseline forImage Clas ...
20210506“收听”22kHz以下的无线电波的几种简单方法
https://www.eet-china.com/news/39a11448.html 20210506"收听"22kHz以下的无线电波的几种简单方法时间:2021-05-06 ...

processing几种简单动画

环形扩散

火焰

河流

海域

火焰

河流

海域

processing几种简单动画相关推荐

最新文章

热门文章

processing几种简单动画

环形扩散

火 焰

河 流

海 域

火焰

河流

海域

processing几种简单动画相关推荐

最新文章

热门文章

火焰

河流

海域