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();
}