p5实现贝塞尔花漩涡效果-html代码-BFW代码库

p5实现贝塞尔花漩涡效果

代码语言：html

所属分类：背景

代码描述：p5实现贝塞尔花漩涡效果

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

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


</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script>
<script >
class Courbe {
    constructor(firstControlX, firstControlY, secondControlX, secondControlY, pointX, pointY) {
        this.firstControlX = firstControlX;
        this.firstControlY = firstControlY;
        this.secondControlX = secondControlX;
        this.secondControlY = secondControlY;
        this.pointX = pointX;
        this.pointY = pointY;
    }
}

class Blossom {
    constructor(radius) {
        this.courbesNumber = 48;  // should be a multiple of 4
        this.courbes = [];
        this.courbesAngles = [];
        this.angle = Math.PI * 2 / this.courbesNumber;
        this.radius = radius;
        this.radiusAjust = 20;
    }
    computeAngles() {

        let fullCurveCounter = 0;

        for (let i = 0; i < this.courbesNumber; i++) {

            let firstControlTheta,
                secondControlTheta,
                pointTheta;

            let startTheta = this.angle * i;
            let middleTheta = startTheta + (this.angle / 2);
            let stopTheta = this.angle * (i + 1);
    
            if ( i % 2 == 0 ) {
    
                firstControlTheta = middleTheta;
                secondControlTheta = stopTheta * 0.995;
                pointTheta = stopTheta;
                
            } else {
    
                firstControlTheta = startTheta * 1.005;
                secondControlTheta = middleTheta;
                pointTheta = stopTheta;
            }
     
            let angles = [
                cos(firstControlTheta),
                sin(firstControlTheta),
                cos(secondControlTheta),
                sin(secondControlTheta),
                cos(pointTheta),
                sin(pointTheta)
            ];
            
            this.courbesAngles[i] = angles;
        }

    }

    render() {

        courbeIncrement = courbeIncrement + 0.0006;
        let courbeVariator = cos(courbeIncrement) * this.radius / 200;
        let fullCurveCounter = 0;
        
        for (let i = 0; i < this.courbesNumber; i++) {

            let firstControlRadiusAjust,
                secondControlRadiusAjust,
                pointRadius,
                radiusPlusAjust;
            
            let ajust = this.radiusAjust;

            a.........完整代码请登录后点击上方下载按钮下载查看