p5实现ik多关节跟随鼠标爬行的壁虎小动物代码-html代码-BFW代码库

p5实现ik多关节跟随鼠标爬行的壁虎小动物代码

代码语言：html

所属分类：动画

代码描述：p5实现ik多关节跟随鼠标爬行的壁虎小动物代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Natural Tail Gecko</title>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; background-color: #f0f8ff; }
        canvas { display: block; }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
</head>
<body>

<script>
/**
 * 更加自然的壁虎模拟
 * 
 * 核心优化：Gecko.updateIK()
 * 引入了正弦波叠加算法，模拟爬行时的脊柱S型摆动。
 * 摆动幅度(Amplitude)随节段索引增加。
 * 摆动相位(Phase)随节段索引延迟。
 */

let gecko;

function setup() {
    createCanvas(windowWidth, windowHeight);
    gecko = new Gecko(width / 2, height / 2);
}

function draw() {
    background('#e0f7fa');
    
    // 地面装饰
    noStroke();
    fill(200, 230, 235);
    for(let i=0; i<50; i++) {
        let x = (i * 123456) % width;
        let y = (i * 654321) % height;
        ellipse(x, y, 10, 10);
    }

    let mousePos = createVector(mouseX || width/2, mouseY || height/2);
    
    gecko.updateBehavior(mousePos.........完整代码请登录后点击上方下载按钮下载查看