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 .........完整代码请登录后点击上方下载按钮下载查看