创意编程——表现随机行为及牛顿运动学

最新推荐文章于 2020-09-09 17:02:51 发布

衡兔阳。

最新推荐文章于 2020-09-09 17:02:51 发布

阅读量301

点赞数

分类专栏：互动媒体技术

本文链接：https://blog.csdn.net/weixin_43913978/article/details/103835092

版权

本文通过编程实现Perlin噪声、向量、力、振荡和粒子系统，展示了随机行为和牛顿运动学原理。Perlin噪声用于变换颜色，向量则描述了小球的运动，力的计算基于万有引力和牛顿定律，振荡模拟了真实世界的摆动现象，粒子系统则结合鼠标交互动态生成颜色变化的粒子。每个部分都深入浅出地解释了背后的数学和物理原理。

摘要由CSDN通过智能技术生成

主题：
创作一组编程习作，体现随机行为及牛顿运动学
要求：

编程语言与工具：编程工具不限；
作品：参考《代码本色》的第0~4章内容及其实例程序（自行在processing内下载），针对这5章分别编写1个习作（一共5个），每个习作都有不少于2个案例参考，且必须有一定的拓展；
报告：写一篇文章（也可以多篇文章，但最好有一个总的导航文章），发表为博文/推文等形式，描述运用的规律，若用到了数学/物理/化学等学科中的知识，要用平实易懂的语言介绍原理，尝试运用凝练的数学语言表达（公式、方程、推导等），特别要描述出这些原理如何在作品中呈现的。
习作索引
- Perlin噪声
- 向量
- 力
- 振荡
- 粒子系统

Perlin噪声

代码：

let cell_size,w,h;
let cols,rows;
let xoff,yoff,zoff;
let z=[];
let theta = 0.0;

function setup() {
   
  // put setup code here
  createCanvas(500,500,WEBGL);//创建画布
  colorMode(HSB,360,100,100);
  cell_size=20;
  w=600;
  h=600;
  cols=width/cell_size;
  rows=height/cell_size;
  zoff = 0.0;
  for(let i=0;i<cols;i++){
   
	  z[i]=[];
  }
}

function draw() {
   
  // put drawing code here
  background(0);
  rotateX(PI/3);
  rotateZ(theta);
  show();
  calculate();
  theta += 0.0025;
}

function calculate() {
   
	xoff = 0;
	for (let i = 0; i < cols; i++) {
   
		yoff = 0;
		for (let j = 0; j < rows; j++) {
   
			z[i][j] = map(noise(xoff, yoff, zoff), 0, 1, -200, 200);
			yoff += 0.05;
		}
		xoff += 0.05;
	}
	zoff+=0.002;
}

function show() {
   
	translate(-width/2, -height/2);
	for (let x = 0; x < z.length-1; x++) {
   
      beginShape(TRIANGLE_STRIP);
      for (let y = 0; y < z[x].length; y++) {
   
        let col = map(z[x][y], -200, 200, 0, 360);
        stroke(col, 100);
        fill(col, 100, 100);        
        vertex(   x *cell_size, y*cell_size, z[x  ][y]);
        vertex((x+1)*cell_size, y*cell_size, z[x+1][y]);
      }
      endShape();
    }
}

原理说明：
简单的berlin噪声的应用，根据z轴方向的高度来变换颜色。
结果：

向量

代码：

class Mover{
   
  constructor() {
   
    this.position = createVector(random(width),random(height));
    this.velocity = createVector();
    this.acceleration = createVector();
    this.maxspeed = 6;
  }

  update() {
   
    var mouse = createVector(mouseX,mouseY);
    this.acceleration = p5.Vector.sub(mouse,this.position);
    this.acceleration.setMag(0.2);
    this.velocity.add(this.acceleration);
    this.velocity.limit(this.maxspeed);
    this.position.add(this.velocity);
	this.position.add(this.velocity);
    if ((this.position.x > width) || (this.position.x < 0)) {
   
      this.velocity.x = this.velocity.x * -1;
    }
    if ((this.position.y > height) || (this.position.y < 0)) {
   
      this.