p5实现一个旋转花瓣动画效果代码-html代码-BFW代码库

p5实现一个旋转花瓣动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现一个旋转花瓣动画效果代码

代码标签： p5 花瓣

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

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

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

</head>

<body>
<script type="text/javascript" src="//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 =.........完整代码请登录后点击上方下载按钮下载查看