p5.js码绘：表现物象特性的线库

p5.js码绘：表现物象特性的线库

---

---

前言

提示：本文记载的是自己用p5.js绘制的几条能表现物象特性的可交互线条，分别用来表现弹力、摩擦阻力以及拉力。

---

一、SpringLine（可鼠标交互）

目的： 表现弹力
简介： 这是模拟弹簧伸缩变化的曲线，可以根据所给力的大小进行相应的伸缩变化（弹簧静止时点击鼠标左键给弹簧施加力）
函数原型： function SpringLine_0126(ix,iy,len)
参数说明： (ix,iy)为弹簧起始点的位置，len为曲线未发生形变时的长度。该曲线暂时只能水平放置。

• 负责弹簧交互性

function SpringLine_0126(ix,iy,len)//ix,iy:start position
{
  if(F<1&&mouseIsPressed){F=40*mouseX/width;rEdg=F+1;}
  if (F>lEdg&&F<rEdg) {
    F=F-0.5*a;
  }
  if (F<=lEdg||F>=rEdg) {
    a=a*(-1);
    F=F-0.5*a;
    change=1;
  }
  if (change==1&&F<(af*rEdg)) {
    rEdg=af*rEdg;
    change=0;
  }
  draw_Spring(F,ix,iy,len);
}

• 负责绘制弹簧

function draw_Spring(F,ix,iy,len)
{
  dx=F/2;
  gap=len/num+dx;
  x=ix;
  y=iy;
  k=10;
  t=0;
  noFill();
  while (t<50)
  {
    ellipse(x, y, 20, 40);
    x=x+gap;
    t++;
  }
}

动态效果:（静止时鼠标点击）

二、TireLine（可鼠标交互）

目的： 表现摩擦阻力
简介： 这是绘制轮胎与地面剧烈摩擦产生的印记线的函数，用来表现摩擦阻力。鼠标自上向下拖动可完成绘制。
函数原型： function TireLine_0126(x0,y0,x1,y1)
参数说明： (x0,y0)为轮胎印记线的起始位置，(x1,y1)为轮胎印记线的终点，从起点到终点颜色渐变深，表示摩擦越来越剧烈。

• 负责将印记元素串成线

function TireLine_0126(x0,y0,x1,y1)
{
  let r=10;
  let c=0;
  push();
  translate(x0,y0);
  scale(1,1.25);
  rotate(atan((x0-x1)/(y1-y0)));
  for(let i=y0;i<dist(x0,y0,x1,y1);i=i+sqrt(3)*r+4)
  {
    c=255-i*255/dist(x0,y0,x1,y1);
    TireElement(0,i,r,c);
  }
  pop();
}

• 负责绘制基本元素

function TireElement(x,y,r,c)
{
  fill(c);
  push();
  translate(x, y);
  polygon(0, 0, r, 6);
  translate(3*r+2,0);
  polygon(0, 0, r, 6);
  translate(3*r+2, 0);
  polygon(0, 0, r, 6);
  translate(-(1.5*r+1), sqrt(3)*r/2+1);
  polygon(0, 0, r, 6);
  translate(-32, 0);
  polygon(0, 0, r, 6);
  pop();
}

• 负责绘制正六边形

function polygon(x, y, radius, npoints) {
  let angle = TWO_PI / npoints;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius;
    let sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

动态效果:（鼠标绘制）

三、ShowFLine（可鼠标交互）

目的： 表现拉力
简介： 这是绘制能够表现拉力线条的函数，鼠标拖拽能使线条发生形变，同时线条颜色也会发生变化，形变后的线条上的点距离初始线条的距离越远则越红。
函数原型： function ShowFLine_0126(x0,y0,x1,y1)
参数说明： (x0,y0)为线条的起始位置，(x1,y1)为线条的终点。

• 负责将线段元素串成线

function ShowFLine_0126(x0, y0, x1, y1)
{
  stroke(0);
  strokeWeight(5);
  if (mouseIsPressed)
  {
    a=1;
    b=-1;
    let k1=(y0-mouseY)/(x0-mouseX);
    for (let i=1; i<abs(x0-mouseX); i++)
    {
      if (mouseX<x0) {
        a=-1;
      } else {
      }
      newx=x0+i*a;
      newy=y0+k1*i*a;
      oldx=newx-1*a;
      oldy=y0+k1*(i-1)*a;
      //line(oldx, oldy, newx, newy);
      showFline(x0, y0, x1, y1, newx, newy, oldx, oldy);
    }

    let k2=(y1-mouseY)/(x1-mouseX);
    for (let i=1; i<abs(x1-mouseX); i++)
    {
      if (mouseX>x1) {
        b=1;
      } else {
      }
      newx=x1+i*b;
      newy=y1+k2*i*b;
      oldx=newx-1*b;
      oldy=y1+k2*(i-1)*b;
      //line(oldx, oldy, newx, newy);
      showFline(x0, y0, x1, y1, newx, newy, oldx, oldy);
    }
  } else {
    line(x0, y0, x1, y1);
  }
}

• 负责绘制线段元素以及该段的颜色

function showFline(x0, y0, x1, y1, x, y, ix, iy)
{
  let a=sqrt(pow(x0-x1, 2)+pow(y0-y1, 2));
  let b=abs((x0-x1)*y+(y1-y0)*x+x1*y0-x0*y1);
  let d=b/a;
  print(b);
  if (d>255) {
    d=255;
  }
  stroke(d, 0, 0);
  line(ix, iy, x, y);
}

动态效果:（鼠标拖拽）

---

总结

到目前为止暂时只想到了这些，后续如果还有想法的话会慢慢补充。完整代码已经上传，如果喜欢的话可以自行下载。