wtc-math模拟橡皮筋中小球跳动带动橡皮圈变形动画效果代码-html代码-BFW代码库

wtc-math模拟橡皮筋中小球跳动带动橡皮圈变形动画效果代码

代码语言：html

所属分类：动画

代码描述：wtc-math模拟橡皮筋中小球跳动带动橡皮圈变形动画效果代码

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

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

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


  
  
<style>
body {
  margin: 0;
  overflow: hidden;
}
canvas {
  background: #E6E6E6;
  /* image-rendering: pixelated; */
  width: 100vw;
}
</style>


  
</head>

<body translate="no">
  
  
      <script type="module">
import { Vec2 } from "https://esm.sh/wtc-math";
import { Pane } from "//repo.bfw.wiki/bfwrepo/js/tweakpane.4.0.3.js";

console.clear();


// --- SETTINGS ---
const settings = {
  numPoints: 8,
  padding: 100,
  ropeEnds: .5,
  dimensions: new Vec2(window.innerWidth, window.innerHeight),
  dpr: 2,
  ballRadius: window.innerWidth / 30,
  rafid: 0,
  lineWidth: window.innerWidth / 80,
  linePadding: 0,
  anchorPadding: 100,
  drawPoints: true,
  debug: false,
  speed: 1,
  foreground: "#EEE",
  background: "#33333A" };

// --- PANE ---
const pane = new Pane();
const f1 = pane.addFolder({
  title: "Config",
  expanded: false });

const pointSetting = f1.addBinding(settings, "numPoints", {
  step: 1,
  min: 1,
  max: 50 });

pointSetting.on('change', e => {
  const diff = e.value - points.length;
  if (diff < 0) {
    points.splice(diff, Math.abs(diff));
  } else if (diff > 0) {
    points.push(...new Array(diff).
    fill(null).
    map(
    makePoint));

  }
});
f1.addBinding(settings, "anchorPadding", {
  min: -100,
  max: 200 });

f1.addBinding(settings, "ropeEnds", {
  min: .3,
  max: .7 });

const radiusSetting = f1.addBinding(settings, "ballRadius", {
  min: 0,
  max: 100 });

const linewidthSetting = f1.addBinding(settings, "lineWidth", {
  min: 0,
  max: 30 });

const linepaddinSgetting = f1.addBinding(settings, "linePadding", {
  min: 0,
  max: 30 });

function metricChange() {
  settings.lineDistance = settings.ballRadius + settings.lineWidth / 2 + settings.linePadding;
}
radiusSetting.........完整代码请登录后点击上方下载按钮下载查看