[0115资资]扩展P5.js的Line接口

1 彩带线——颜色随机粗细随机

1.1 效果展示

1.2 函数调用方法

1.2.1 函数参数解释

/*************************************
彩带线
1. (x0,y0)是起始点坐标
2. (x1,y1)是终止点坐标
**************************************/
function CreateRibbonLine(x0,y0,x1,y1)

1.2.2 调用方法案例(demo)

var RibbonLines = []
function setup() {
	createCanvas(windowWidth,windowHeight);
    RibbonLines = CreateRibbonLine(50,50,400,400);
	}

function draw() {
  	noStroke()
	RibbonLines.forEach(line=>{
			line.update()
			line.draw()
	})
}

2 文字线——用文字作为内容填充线

2.1 效果展示

• 文字内容可以自己指定
  

2.2 函数调用方法

1.2.1 函数参数解释

文字线调用方法:

• （x0,y0）是起始坐标位置
• （x1,y1）是终止坐标位置
• x0的大小必须小于x1的大小
• letters是绘制线的字符串内容

1.2.2 调用方法案例(demo)

WordLine(100,100,400,400,"我爱编程");

3 蝴蝶线

3.1 效果展示

3.1.2 蝴蝶直线

3.1.2 蝴蝶曲线（沿轨迹飞行的蝴蝶）

3.2 函数调用方法

3.2.1 函数参数解释

3.2.1.1 蝴蝶直线

/*****************************************
蝴蝶线
1.(x0,y0)是起始位置的坐标
2.(x1,y1)是终止位置的坐标
 *****************************************/

class ButterflyLine
{
	constructor(x0,y0,x1,y1) 
	{}
}

3.2.1.2 蝴蝶曲线

• 采用曲线数据和模型图案分开的方法，在画图时，先生成曲线轨迹，再画标准图案。

3.2.2 调用方法案例(demo)

3.2.2.1 蝴蝶直线调用案例

  a = new ButterflyLine(100,100,400,400);
  a.draw();

3.2.2.2 蝴蝶曲线调用案例

var Traces;
var ButterflySets = [];
var ButterflyIndex;
function setup() 
{
  createCanvas(windowWidth,windowHeight);
  Traces = new Array();
  ButterflySets = generateButterflies();
  ButterflyIndex = 0;
}

function draw() {
	fill(255,100);
	rect(-1,-1,width+2,height+2);
  	// 线条轨迹变化
	Traces = lineAry_noise_0011(50,150,550,150,0.1*mouseY,0.1*mouseX,200);
	renderTrace_Line(Traces);
	renderTrace3_MovingSprites(Traces,0.1,0.5,0.05,drawStdFace,0.3);
}

4 繁花曲线

4.1 效果展示

4.2 函数调用方法

4.2.1 函数参数解释

/*********************************************
繁花曲线
1.（x,y）代表中心位置
2. size是繁花曲线的大小
**********************************************/
class FlowerCurve 
{
  constructor(x,y,size);
}

4.2.2 调用方法案例(demo)

function setup() 
{
  createCanvas(windowWidth,windowHeight);
  //生成一个繁花曲线
  curvs = new FlowerCurve(300,300,60);
  //显示
  curvs.show();
  smooth();
}

function draw() 
{
}

5 波浪线

5.1 效果展示

5.1.1 长度方向一致的波浪线

5.1.2 长度一致方向改变的波浪线

5.1.3 长度方向改变的波浪线(模拟海浪）

5.1.4 长度方向改变的波浪线（模拟山脉）

5.2 函数调用方法

5.2.1 函数参数解释

/*****************************************
长度方向一致的波浪线
1. (locationx,locationy)是直线起始位置
2. length是直线的长度
******************************************/
function drawStreamLine(locationx,locationy,length) 

/*****************************************
方向改变的波浪线
1. (locationx,locationy)是直线起始位置
2. length是直线的长度
******************************************/
function drawStreamLineChangeDirection(locationx,locationy,length) 

/*****************************************
长度方向改变的波浪线(模拟海浪)
******************************************/
function drawStreamWaveLine()

/*****************************************
长度方向改变的波浪线(模拟山脉)
******************************************/
function StreamMountainLine()

5.2.2 调用方法案例(demo)

• 长度方向一致的波浪线

var nx = 0;
var ny = 0;
var nz = 0;

function setup() 
{
  createCanvas(900, 600);
  strokeWeight (2);
}

function draw() 
{
  background (255);
  drawStreamLine(200,200,300);
}

• 方向改变的波浪线

var nx = 0;
var ny = 0;
var nz = 0;

function setup() 
{
  createCanvas(900, 600);
  strokeWeight (2);
}

function draw() 
{
  background (255);
  drawStreamLineChangeDirection(200,200,300);
}

• 长度方向改变的波浪线（海浪）

varthing=0
mountainLevel=1000
function setup() {
	createCanvas(windowWidth,windowHeight, WEBGL);
	background(255);
}

function draw() {
	drawStreamWaveLine();
}

• 长度方向改变的波浪线(模拟山脉)

function setup() 
{
  createCanvas(windowWidth,windowHeight);
  background(0);
}

function draw() 
{
   background(0);
   StreamMountainLine();
}

6 波纹音频线

6.1 效果展示

6.2 函数调用方法

6.2.1 函数参数解释

/*************************************
波纹音频线
1.baseLoc 是线的起点，是一个向量
1.loc 是线的终点，是一个向量
**************************************/
class MusicLine 
{
  constructor(baseLoc_, loc_) 
  {}
}

6.2.2 调用方法案例(demo)

var middleLines = [];
var lineWidth = 10;
function setup() 
{
  createCanvas(780, 780);
  smooth(8);
  for (var i = 0; i < width; i += lineWidth+lineWidth/2) 
  {
    middleLines.push(new MusicLine(createVector(i, height/2),createVector(i, height/2)));
  }
}

function draw() 
{
  background(255);
  for(var i = 0;i<middleLines.length;i++)
  {
    middleLines[i].drawLine();
    middleLines[i].update();
  }
}

7 水纹线

7.1 效果展示

• 长度为200，宽度为8
  
• 长度为300，宽度为13
  

7.2 函数调用方法

7.2.1 函数参数解释

/*******************************
水纹线
1.（x,y）是水开始的位置
2. length是水纹的长度
3. width是水纹的宽度
********************************/
class DrawWaterLine
{
	constructor(x,y,length,width)
	{}
}

7.2.2 调用方法案例(demo)

var a;
function setup() 
{
	background(0)
	createCanvas(600, 600);
	ellipseMode(CENTER)
	a = new DrawWaterLine(50,50,200,6);
}

function draw() 
{
	background(255);
	a.calWave();
	a.drawWave();
}