互动应用开发p5.js——Perlin噪声生成烟雾（柏林噪声）

小咪咪 2023-10-01 15:49 4阅读 0赞

## Perlin噪声生成烟雾 ##

### 一、实验内容： ###

和鼠标交互结合生成Perlin Noise的烟雾效果

要求使用p5.js实现烟雾随机生成效果：

1.  流场利用Perlin噪声实现；（30分）
2.  粒子按照流场运动；（30分）
3.  速度、数量等可由参数控制；（15分）（HTML页面交互传递参数8分，代码中变量控制7分）
4.  使用类来实现粒子；（15分）
5.  文档和注释清楚；（10分）

提交工程目录压缩的zip或者rar，以及一个readme.txt简要说明实现思路和重要参数的功能

### 二、实验说明： ###

所有实验是通过 Visual Studio Code引入p5.js包编写，所以首先要去p5.js官网下载相关包，或是在联网状态下把html中引入包的代码改成例如<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>等。

### 三、实验代码：    ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>噪声提交</title>
    
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    
    </head>
    
    <body>
    
    	<input type="text" id="inputBox" placeholder="输入数量1-5000">
      
    
      <input type="text" id="inputBox2" placeholder="输入速度1-10">
      
    
      <input type="submit" id="submit"  value="确认" >
    
    	<script src="sketch.js"></script>
    </body>
    
    </html>

var scl=10;//每行每列格子数量
    var inc=0.1;
    var rows,cols;
    var zoff=0;
    
    var particles=[];
    var flowfield;
    
    var speed=1;//速度
    
    //数量
    let input = document.getElementById("inputBox");
    
    //速度
    let input_1 = document.getElementById("inputBox2");
    
    //按钮
    let submit = document.getElementById("submit");
    
    submit.onmousedown = function (e) {
    
      //速度
      speed=parseInt(input_1.value);
      //清空数组
      particles.splice(0,particles.length);
    
      for(var i=0;i<parseInt(input.value);i++){
        particles[i]=new Particle();
      }
      clear();
    }
    
    function setup() {
    
      createCanvas(400,400);
      
      cols=floor(width/scl);
      rows=floor(height/scl);
    
      flowfield=new Array(cols*rows);      
    
      //  for(var i=0;i<500;i++){
      //  	particles[i]=new Particle();
      //  }
       
      background(255);
    }
    
    function draw() {
      var yoff=0;
      for(var y=0;y<rows;y++){
      var xoff=0;
      for(var x=0;x<cols;x++){
       	var index=x+y*cols;
    
        //乘4是为了放大噪声生成的angle值可以使粒子更加的分散
       	var angle=noise(xoff,yoff,zoff)*TWO_PI*4;
         
       	var v=p5.Vector.fromAngle(angle);
       	v.setMag(2);
       	flowfield[index]=v;
       	xoff+=inc;
      }  
      yoff+=inc;
      zoff+=0.0005;
      }
    
      for(var i=0;i<particles.length;i++){
      particles[i].follow(flowfield);
      particles[i].update();
      particles[i].edges();
      particles[i].show();
      }
    }
    
    function Particle(){
    	this.pos=createVector(random(width),random(height));//起始位置
    	this.vel=createVector(0,0);//初速度
    	this.acc=createVector(0,0);//初加速度
    	this.maxspeed=speed;//速度上限
    
    	this.prevPos=this.pos.copy();
    
    	this.update=function(){
    		this.vel.add(this.acc);  
    		this.vel.limit(this.maxspeed);    
    	  this.pos.add(this.vel);     
    	  this.acc.mult(0);             
    	}
    
    	this.follow=function(vectors){
    		var x=floor(this.pos.x/scl);
    		var y=floor(this.pos.y/scl);
    		var index=x+y*cols;
    		var force=vectors[index];
    		this.applyForce(force);
    	}
    
    	this.applyForce=function(force){
    		this.acc.add(force);
    	}
    
    	this.show=function(){
    		stroke(0,5);
    		strokeWeight(1);
        //用线连接粒子
    		line(this.pos.x,this.pos.y,this.prevPos.x,this.prevPos.y);
    
    		this.updataPrev();
    	}
      //更新上一粒子位置
      this.updataPrev=function(){
        	this.prevPos.x=this.pos.x;
        	this.prevPos.y=this.pos.y;
      }
      //使粒子在画布范围内
    	this.edges=function(){
    		if(this.pos.x<0)
    		{
    			this.pos.x=width;
    			this.updataPrev();
    		}
    		if(this.pos.x>width)
    		{
    			this.pos.x=0;
    			this.updataPrev();
    		}
    		if(this.pos.y<0)
    		{
    			this.pos.y=height;
    			this.updataPrev();
    		}
    		if(this.pos.y>height)
    		{
    			this.pos.y=0;
    			this.updataPrev();
    		}
    		
    	}
    }

### 四、实验结果： ###

![a38d237d89e74aa2aeccf9b1b82e8e5e.png][]

![deb2f1085296448ba289d169f79edb52.png][]

![b5868dc90f214e60a288aea03e19051c.png][]

根据实验代码，先实现普通随机生成的网格色块，再实现柏林噪声生成的网格色块。  
为每个方格绘制方向线，再为绘制方向线变化赋予一个柏林噪声，让方向线动起来。  
然后构造Particle类来实现烟雾效果。  
根据上个实验思路，添加输入框及按钮，可以赋予不同的数量以及生成烟雾的速度。  
添加按钮功能，以及draw函数中使用Particles类中函数的补写。  
各个代码的作用在代码中有注释。

[a38d237d89e74aa2aeccf9b1b82e8e5e.png]: https://img-blog.csdnimg.cn/a38d237d89e74aa2aeccf9b1b82e8e5e.png
[deb2f1085296448ba289d169f79edb52.png]: https://img-blog.csdnimg.cn/deb2f1085296448ba289d169f79edb52.png
[b5868dc90f214e60a288aea03e19051c.png]: https://img-blog.csdnimg.cn/b5868dc90f214e60a288aea03e19051c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关《噪声》阅读总结

噪声是我们在做判断时不希望存在的变异，然而噪声实在太多了，本书的核心目标就在于解释为何会如此，以及我们应该如何应对噪声。本书涵盖的内容十分丰富，我们在这里仅从一个宽泛的视角来对

「爱情、让人受尽委屈。」/ 2024年04月01日 09:32/ 0 赞/ 84 阅读

相关互动应用开发p5.js——音视频交互

音视频交互一、实验内容：音频可视化，是指一种以视觉为核心，以音频为载体，以大众为诉求对象，借助多种新媒体技术等传播媒介，通过画面、影像来诠释音乐内容的、视听结合

你的名字/ 2023年10月01日 15:49/ 0 赞/ 4 阅读

相关互动应用开发p5.js——Perlin噪声生成烟雾（柏林噪声）

Perlin噪声生成烟雾一、实验内容：和鼠标交互结合生成Perlin Noise的烟雾效果要求使用p5.js实现烟雾随机生成效果： 1. 流场利用Per

小咪咪/ 2023年10月01日 15:49/ 0 赞/ 5 阅读

相关互动应用开发p5.js——星星的运动

星星的运动一、实验内容：按照章节要求使用p5.js实现星星随机向画布边界运动的效果： 1. 星星近大远小；（20分） 2. 能拖出尾迹；（30分） 3.

╰+哭是因爲堅強的太久メ/ 2023年10月01日 15:48/ 0 赞/ 8 阅读

相关计算机噪声

序　　大家多少都遇到过关于“随机数”和“噪声”的问题，随机数和噪声直接关系到仿真结果的好坏。而计算机产生的随机数是伪随机数，不真正的随机，那么我们使用的随机数，包括Matl

左手的ㄟ右手/ 2023年07月16日 03:46/ 0 赞/ 22 阅读

相关白噪声和有色噪声

在论文去噪算法的比较过程中，我们通常加入高斯白噪声来模拟现实世界中的噪声。但是真实世界中属于有色噪声。 1：白噪声高斯白噪声是指信号的幅度分布服从高

浅浅的花香味﹌/ 2023年07月01日 07:29/ 0 赞/ 66 阅读

相关图像处理Java代码-椒盐噪声、胡椒噪声、盐噪声

图像处理-椒盐噪声、胡椒噪声、盐噪声 package com.ydfind.image.biz.util; import com.ydfind.

谁借莪１个温暖的怀抱￠/ 2023年05月31日 07:57/ 0 赞/ 32 阅读

相关对比噪声比cnr_LDO基础8理解噪声

在电子产品设计中，如果想要要获得干净的直流电源，使用低压降线性稳压器 (LDO) 确实是大家第一时间想到的办法，大家很自以为的认为我都用上LDO了，噪声我就不用去考虑了。没错，

水深无声/ 2023年01月05日 05:23/ 0 赞/ 199 阅读

相关 cadence版图——噪声

噪声产生的原因 1. 串扰 Cross-talk 2. 电磁场耦合 3. 衬底噪声噪声解决方法 1. 解决衬底噪声一般使用：保护环 Guard ring

不念不忘少年蓝@/ 2022年10月12日 01:06/ 0 赞/ 268 阅读

相关噪声的利用

using UnityEngine; using System.Collections; public class ExampleClass

逃离我推掉我的手/ 2022年07月12日 03:22/ 0 赞/ 199 阅读