p5.js作业A1

基本介绍

接下来你将看到的是一个小白选手编写的p5.js基本形状拓展库，若有不足，还请多多包涵。

line库

噪声线

单线效果

多线效果（随帧移动）

//s_x,e_x控制起始x坐标，ranges控制幅度，speed控制速度
function noiseline0423(s_x,e_x,ranges,speed)
{
  background(0);
  noFill();
  strokeWeight(2);
  for (var i = 0; i < ranges; i++) 
  {
    var paint = map(i, 0, ranges, 0, 255);
    stroke(paint);
    beginShape();
    for (var x = s_x; x < e_x + 11; x += 20) {
      var n = noise(x * 0.001,  0.01, frameCount * speed);
      var y = map(n, 0, 1, 0, height);
      vertex(x, y);
    }
    endShape();
  } 
}

心形线

小图效果

大图效果

通过心形线方程来构造该图，公式如下。

为了使得这个图有足够的立体感，选择相位差为1/n的前后两点相连。由于使用的是极坐标方程，所以前后两点不是相邻的，而是出现在心形线上较远的一处。由于连线切线斜率是与外圈心斜率有满足特定三角关系，通过对变换矩阵求其第二特征值就可以得到内部图形的形状，所以大心形的连接弧线又在内圈构成了一个窄心形。

//设置起始、终止位置和数量
function cardioid0423(startx, starty,endx,endy,num) {
    for (var i = 0 ; i < num;++i)
    {
        x = lerp(startx, endx, i / num);
        y = lerp(starty, endy, i / num);
        cardioid(cx, cy, 0.5);
    }
}
//cx，cy表示中心点位置，size表示大小
function cardioid(cx, cy, size) {
    for (let i = 0 ; i < 500; ++i) {
        x = size * 16 * pow(sin(i), 3) + cx;
        y = -size * (13 * cos(i) - 5 * cos(2 * i) - 2 * cos(3 * i) - cos(4 * i)) + cy;

        x1 = size * 16 * pow(sin(i + 1), 3) + cx;
        y1 = -size * (13 * cos(i + 1) - 5 * cos(2 * i + 2) - 2 * cos(3 * i + 3) - cos(4 * i + 4)) + cy;
        strokeWeight(0.65);
        stroke('black');
        line(x, y, x1, y1);
    }
}

渐变圆线

//s_x,s_y，e_x,e_y表示起止位置，num表示个数
function circleline0423(s_x,s_y,e_x,e_y,num)
{
  for(var i =0 ;i <num;++i)
  {
    c_x = lerp(s_x,e_x,i/num);
    c_y = lerp(s_y,e_y,i/num);
    noStroke();
    ecolor = 255- 255*i/num;
    fill(ecolor);
    ellipse(c_x,c_y,i,i);
  }
}

circle库

环绕圆

设置好中心点后，绕中心点画多个圆。

//x_c,y_c是是多圆中心，r是控制生成圆的半径，seg是圆的个数
function round_circle0423(x_c, y_c, r, seg) {
    for (var i = 0; i <= seg; i++) {
        var x = x_c + cos(i * 2 * PI / seg) * r;  //算出x的位置
        var y = y_c + sin(i * 2 * PI / seg) * r;  //算出y的位置
        var c = map(r, 0, 300, 0, 255);
        var d = map(r, 0, 300, 1, 1.5);
        stroke(255, random(255), random(255));
        strokeWeight(d);
        noFill();
        ellipse(x, y, r * r / 100, r * r / 100);
    }
}

ellipse库

椭圆线

通过散列点的逼近以及对椭圆切线加速度连线拼接成完整的椭圆。

//cx,cy,cX,cY分别控制中心点坐标以及拟合坐标，rate和ease控制曲率，threshold控制随机性（为了后面A2使用）
function rcircle0423(cx, cy,cX,cY,rate,ease, threshold) {
    var w = 0, Yv= 0, Xv=0, X=0, Y=0, pX=0, pY=0;
    w = random(1/threshold,threshold);
    for (var i = 0 ; i < 10000;++i)
    {
    cX +=  rate * (cx - cX);
    cY +=  ( cy - cY);
    Xv += ease * (cX - X);
    Yv += ease * (cY - Y);
    X += Xv;
    Y += Yv;
    line(X, Y,pX,pY);
    pX = X;
    pY = Y;
    }
}

arc库

添加了生成空缺，还有x与y方向的椭圆化功能。

function arc0423(x, y, w, h, start, stop,color,mode)
{
  fill(color);
  if(mode== 0)
  {
    arc(x, y, w, h, start,stop);   
  }
  else if(mode == 1)
  {
    for(var i = 0;i<5;++i)
    {
      cur = lerp(start,stop,2*i/10);
      curn = lerp(start,stop,(2*i+1)/10);
      arc(x, y, w, h, cur,curn);   
    }
  }
  else if(mode == 2)
  {
    for(var i =0 ;i <5;++i)
    {
      for(var i = 0;i<5;++i)
    {
      cur = lerp(start,stop,2*i/10);
      curn = lerp(start,stop,(2*i+1)/10);
      arc(x, y, w, h/2, cur,curn);   
    }
    }
  }
  else if(mode ==3)
  {
    
    for(var i =0 ;i <5;++i)
    {
      for(var i = 0;i<5;++i)
    {
      cur = lerp(start,stop,2*i/10);
      curn = lerp(start,stop,(2*i+1)/10);
      arc(x, y, w/2, h, cur,curn);   
    }
    }
  }
}

point库

简单的随机灰度构成圈点。

//x,y设置位置，num设置大小
function point0423(x, y, num) {
    for (var i = num; i > 0; --i) {
        stroke(random(255));
        strokeWeight(i);
        point(x, y);
    }
}

quad库

“四边形”

通过线性插值的方法在四个点间来找到若干个四边形进行插值。

//x,y设置四个点的位置，color设置颜色,cx是新点位置，num控制中间四边形的数量
function quad0423(x1, y1, x2, y2, x3, y3, x4, y4, color,cx,cy,num) {
    fill(color);
    noStroke();   
    quad(x1, y1, x2, y2, x3, y3, x4, y4);
    for(var i  = 0 ; i<num;++i)
    {
       drawquad(x1, y1, x2, y2, x3, y3, x4, y4,cx,cy,num);
       drawquad(width -x1, height -y1, width -x2, height -y2, width -x3, height -y3, width -x4, height -y4,width - cx,height -cy,num);
       drawquad(x1, y1, x2, y2, x3, y3, x4, y4,width -cx,height -cy,num);
      drawquad(width -x1, height -y1, width -x2, height -y2, width -x3, height -y3, width -x4, height -y4,cx,cy,num);
    }
}
function drawquad(x1, y1, x2, y2, x3, y3, x4, y4,cx,cy,num)
{
   for(var i  = 0 ; i<num;++i)
    {
       dx1 = lerp(x1,cx,i/num);
       dx2 = lerp(x2,cx,i/num);
       dx3 = lerp(x3,cx,i/num);
       dx4 = lerp(x4,cx,i/num);
      
       dy1 = lerp(y1,cy,i/num);
       dy2 = lerp(y2,cy,i/num);
       dy3 = lerp(y3,cy,i/num);
       dy4 = lerp(y4,cy,i/num);
       quad(dx1, dy1, dx2, dy2, dx3, dy3, dx4, dy4);
      
    }
}

square库

在中心点设置一个正方形，剩下的圆和正方形绕该正方形旋转。

//cx,cy控制中心位置，radius控制半径，pieces控制数量
function square0423(cx, cy, radius, pieces) {
    var c = map(radius, 0, 300, 100, 255);
    var d = map(radius, 0, 300, 1, 3);
    var f = map(radius, 0, 300, 10, 255);
    for (var i = 0; i < pieces; i++)
    {
        var x = cos(i / pieces * TWO_PI) * radius + cx;
        var y = sin(i / pieces * TWO_PI) * radius + cy;
        stroke(random(100, 255));
        strokeWeight(d);
        fill(random(50, 255));
        noFill();
        translate(x, y);
        ellipse(x, y, radius * radius / 100, radius * radius / 100);
        rotate(200 / radius * frameCount / 300 + x + y);
        rectMode(CENTER);
        rect(0, 0, radius * radius / 20, radius * radius / 20);
    }
}

triangle库

在三角形内部生成一条随机折线，折线是cx、cy到某个顶点的间的一段折线。

//x,y控制三角形三个顶点,cx控制中心点,cy控制中心点,size控制中三角形内部的线
function triangles0423(x1, y1, x2, y2, x3, y3, cx, cy,size) {
    r = floor(random(3));
    strokeWeight(5);
    switch (r) {
        case 0:
            cx = (cx + x1) / size;
            cy = (cy + y1) / size;
            break;
        case 1:
            cx = (cx + x2) / size;
            cy = (cy + y2) / size;
            break;
        case 2:
            cx = (cx + x3) / size;
            cy = (cy + y3) / size;
            break;
    }
    var v  = createVector(cx,cy);
    return v;
}