欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-07 21:43:38
p5.js码绘:表现物象特性的线库文章目录p5.js码绘:表现物象特性的线库前言一、SpringLine(可鼠标交互)二、TireLine(可鼠标交互)三、ShowFLine(可鼠标交互)总结前言提示:本文记载的是自己用p5.js绘制的几条能表现物象特性的可交互线条,分别用来表现弹力、摩擦阻力以及拉力。一、SpringLine(可鼠标交互)目的: 表现弹力简介: 这是模拟弹簧伸缩变化的曲线,可以根据所给力的大小进行相应的伸缩变化(弹簧静止时点击鼠标左键给弹簧施加力)函数原型: fun...

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++;
  }
}

动态效果:(静止时鼠标点击)
p5.js码绘:表现物象特性的线库

二、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);
}

动态效果:(鼠标绘制)
p5.js码绘:表现物象特性的线库

三、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);
}

动态效果:(鼠标拖拽)
p5.js码绘:表现物象特性的线库


总结

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

本文地址:https://blog.csdn.net/weixin_45736769/article/details/111114712