p5js实现丝带效果-html代码-BFW代码库

p5js实现丝带效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> Ribbons 4</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
        #controls {
            z-index: 2;
            margin: 20px;
            position: absolute;
            top: 0;
            left: 0;
            color: white;
        }
    </style>

</head>
<body translate="no">
    <div id="controls"></div>
    <script src='http://repo.bfw.wiki/bfwrepo/js/p5.min.js'></script>
    <script>
        let walkingSpeed = .5;
        let noiseSpeed = .4*walkingSpeed;
        let dirIncr = .01*walkingSpeed;

        let changeChance = .05*walkingSpeed;
        let angleChance = .01*walkingSpeed;

        let ribbonWidth = 200;

        let angleIncr = .01*walkingSpeed;

        let noiseScale = .02;
        let noiseHeight = 200;

        let hueShift = .001*walkingSpeed;

        let steps = 0;
        let stepsPerFrame = 20;
        let maxSteps = 5000;

        let numRibbons = 5;

        class Walker {
            constructor(x, y, hue) {
                this.x = x;
                this.y = y;
                this.z = 0;
                this.dir = random(TAU);
                this.dirMod = random() < .5 ? 1: -1;
                this.angleMod = random() < .5 ? 1: -1;
                this.angle = random(-PI, PI);
                this.hue = hue;
                this.hueMod = 0;
            }
            update() {
                this.x += cos(this.dir)*walkingSpeed;
                this.y += sin(this.dir)*walkingSpeed;
                this.dir += this.dirMod*dirIncr;
                if (random() < changeChance) {
                    this.dirMod = random() < .5 ? 1: -1;
                }
                if (random() < angleChance) {
                    this.angleMod = random() < .5 ? 1: -1;
            .........完整代码请登录后点击上方下载按钮下载查看