p5实现线条锚点弯曲区域动画效果代码-html代码-BFW代码库

p5实现线条锚点弯曲区域动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现线条锚点弯曲区域动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {margin:0px; padding:0px; overflow: hidden}
</style>

  
  
</head>

<body translate="no">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5-1.9.0.js"></script>
  
      <script>
let points = [];

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

function draw() {
  background("#FFFF6A");
  
  points = [];
  for (let i = 0; i <= 16; i ++) {
    const t = frameCount / 360 + i * 12345;
    const amp = height;
    points.push(new p5.Vector((noise(t + 32.4) - noise(t +523.4)) * amp,(noise(t) - noise(t +123.4)) * amp));
  }
  
  translate(width / 2, height / 2);
  
  const cubics = hobby(points, 0.5);
  
  noStroke();
  fill(255);
  beginShape();
  const vertices = [];
  for (const cubic of cubics) {
    const res = 64;
    for (let i = 0; i <= res; i ++) {
      const t = i / res;
      const p = cubic.pointOnCurve(t);
      vertex(p.x, p.y);
    }
  }
  endShape();
  
  stroke(0);
  strokeWeight(2);
  noFill();
  for (const cubic of cubics) {
    cubic.draw();
  }
  
  fill(255);
  points.forEach(p => {
    circle(p.x, p.y, 12);
  });
}

// based on https://www.jakelow.com/blog/hobby-curves/hobby.js

function hobby(points, omega = 0.0) {
  let n = points.length;
  let chords = Array(n);
  let d = Array(n);
  for (let i = 0; i < n; i++) {
    chords[i] = p5.Vector.sub(points[(i + 1) % n], points[i]); // Loop around
    d[i] = chords[i].mag();
  }

  let gamma = Array(n);
  for (let i = 0; i < n; i++) {
    gamma[i] = chords[i === 0 ? n - 1 : i - 1].angleBetween(chords[i]);
  }

  let A = Array(n).fill(0);
  let B = Array(n).fill(0);
  let C = Array(n).fill(0);
  let D = Array(n).fill(0);

  for (let i = 0; i < n; i++) {
    A[i] = 1 / d[(i === 0) ? n - 1 : i - 1];
    B[i] = (2 * d[(i === 0) ? n - 1 : i - 1] + 2 * d[i]) / (d[(i === 0) ? n - 1 : i - 1] * d[i]);
    C[i] = 1 / d[i];
    D[i] = (-1 * (2 * gamma.........完整代码请登录后点击上方下载按钮下载查看