用编程对P5中的一些“线条”效果进行扩充

一.实现对接口line的扩展

1.实现动态的绘制直线，同时添加线宽和颜色的随机生成。

核心代码：

    push();
	for(var i=1;i<res;i++)
	{
		var t = i/res;
		var xt = lerp(x0,x1,t);
		var yt = lerp(y0,y1,t);
		var x = xt;
		var y = yt;		
		strokeWeight(10);//设置线宽
		stroke(random(0,255),random(0,255),random(0,255));//颜色随机生成
		line(xp,yp,x,y);
		xp = x;
		yp = y;
	}
	pop();

2.实现对sin曲线的扩展，形成类似声波的线条。

（增加了sin函数的振幅随着i的增加而增加）

核心代码：

	for(var i=1;i<res;i++)
	{
		var t = i/res;
		var xt = lerp(x0,x1,t);
		var yt = lerp(y0,y1,t);
		var x = xt + i;
		var y = yt + radius *i* sin(100*i);
		strokeWeight(5);
		stroke(random(0,255),random(0,255),random(0,255));
		line(xp,yp,x,y);
		xp = x;
		yp = y;
	}

3.绘制sin函数时，用大小随机的圆来代替直线。

（其实就是绘制sin函数的时候，每一小段不是用直线来画，而是绘制一个大小和颜色随机的圆）
核心代码：

	for(var i=1;i<res;i++)
	{
		var t = i/res;
		var xt = lerp(x0,x1,t);
		var yt = lerp(y0,y1,t);
		var x = xt + i;
		var y = yt + radius*sin(50*i);
		//r=random(100,250);g=random(100,250);b=random(100,250);
		r=random(200,250);g=random(100,140);b=random(150,200);
        fill(r,g,b,random(50,255));
        var t=random(0.1,8);
        ellipse(random(x-5,x+5),random(y-5,y+5),t,t);
		xp = x;
		yp = y;
		
	}
    //注释这句就会出现动态的serin曲线
	//nostroke();

4.用noise噪声来绘制山丘

主要使用了noise函数，其与random函数最大的不同点在于前者是在一个无限的n维空间内定义的。实现山的起伏效果使用了两个noise噪声，第一个用来顶定山脉存在较大起伏的地方，第二个噪声值在第一个的基础上使山脉的细节变化更多些。
核心代码：

var noiseScale=0.01;
	var noiseScale2=0.02;
	for(var k=0;k<mountainNum;k++){
		for(var x=0;x<width;x++){
			var noiseVal=noise((-mouseX+x)*noiseScale+k*100);
			var noiseVal2=noise((-mouseX+x+100)*noiseScale2+k*100);
			stroke(230-40*k);
			var mountainstall=height-mountainTall+noiseVal*160-50+noiseVal2*60+50*k;
			line(x, mountainstall, x, height);
		}
		var tem=height-mountainstall+180+50*k;
		mountainShade(tem,230-40*k,shade);在这里插入代码片

5.通过鼠标控制Bezier曲线的绘制。

通过P5的官网了解到，bezier（）函数的用法，通过鼠标的位置决定控制点的位置。
核心代码：

    var r=random(10,20);
	stroke(random(10,150),random(100,250),random(100,250));
	strokeWeight(2);
	noFill();
	bezier(mouseX,mouseY,mouseX-100,
		mouseY+100,mouseX+100,mouseY-100,40,3);里插入代码片

二.实现2D图形的扩展（主要是circle）

1.随机绘制大小颜色不一样的圆

核心代码：

stroke(random(10,250),random(10,250),random(10,250));
	var d=random(10,30);
	//ellipse(mouseX,mouseY,d,d);
	ellipse(random(0,weight),random(0,height),d,d);

2.绘制由内向外，圆的半径依次增大，一个周期的变化，参考网址：https://m.yisu.com/zixun/158611.html

核心代码：

for(var i=13;i>0;i--){
		var y=22*sin(PI*frameCount/30-13*(i-1));
		if(y>=10){
			a=y;
		}
		else{
			a=0;
		}
		fill(0,93,172,a);
		ellipse(x0,y0,a+50*i);
		fill(0,93,172,a);
		ellipse(x0,y0,25+50*(i-1));
	}

3.绘制圆运动撞墙反弹并继续运动。

实验核心代码：

function bounceOnEdge() {
  //if条件判断
  if (x >= width - ballSize / 2) {
    xSpeed *= -1;
    x = width - ballSize / 2;
  }
  if (x <= ballSize / 2) {
    xSpeed *= -1;
    x = ballSize / 2;
  }
  if (y >= height - ballSize / 2) {
    ySpeed *= -1;
    y = height - ballSize / 2;
  }
  if (y <= ballSize / 2) {
    ySpeed *= -1;
    y = ballSize / 2;
  }
}

修改小球的大小，不覆盖小球运动的路径时会出现：

4.实现被拖拽的小球始终回到画布中间的效果

用向量控制小球运动的轨迹，同时边缘检测和控制使小球不会出界
核心代码：

 //边缘检测和控制
  //if条件判断
  if (pos.x >= width - ballSize / 2) {
    vel.x *= -1;
    pos.x = width - ballSize / 2;
    //fill(random(255), random(255),random(255));
  }
  if (pos.x <= ballSize / 2) {
    vel.x *= -1;
    pos.x = ballSize / 2;
    //fill(random(255), random(255),random(255));
  }
  if (pos.y >= height - ballSize / 2) {
    vel.y *= -1;
    pos.y = height - ballSize / 2;
    //fill(random(255), random(255),random(255));
  }
  if (pos.y <= ballSize / 2) {
    vel.y *= -1;
    pos.y = ballSize / 2;
    //fill(random(255), random(255),random(255));
  }
}

无论怎么拖拽，小球都会回到画布中心：

//回到画布中心
function moveTo(target) {
  let force = p5.Vector.sub(target, pos);
  force.mult(1 / 7);
  vel.add(force);//向量加法
  vel.mult(0.5);
}

实验源代码下载：https://download.csdn.net/download/N0BUGLL/13204670