用程式設計對P5中的一些“線條”效果進行擴充

用程式設計對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曲線的擴充套件，形成類似聲波的線條。

核心程式碼：

	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函式時，用大小隨機的圓來代替直線。

核心程式碼：

	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噪聲來繪製山丘

核心程式碼：

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曲線的繪製。

核心程式碼：

    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.此外參考了一些其他部落格，由於程式碼量較大，以下僅展示結果：


上訴實驗的所有原始碼：