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>
'use strict';
/* Another result of playing with curves to create an artistically interesting animation 
 * -------------------------------------------------------------------------------------
 * @author:    Caleb Nii Tetteh Tsuru Addy
 * @date:      15th July, 2020 
 * @email:     calebniitettehaddy@gmail.com 
 * @twitter:   @cnttaddy
 * @github :   https://github.com/niitettehtsuru/SpaceFlap
 * @codepen:   https://codepen.io/niitettehtsuru/pen/vYLVLBd
 * @license:   GNU General Public License v3.0 
 */
//The curve 
class Curve
{
    constructor(data)
    {          
        this.screenHeight = data.screenHeight;  
        this.screenWidth = data.screenWidth;      
        this.param  = 0;//the parameter in the parametric equation 
        this.xCoord = data.xCoord;//set x coordinate of the center of the curve  
        this.yCoord = data.yCoord;//set y coordinate of the center of the curve      
        this.color =  data.color; 
        //so the angle will increase from min to max and then vice versa
        this.maxAngle = 1; 
        this.minAngle = 0; 
        this.angle = this.minAngle;
        this.angleIncrement = 0.009; 
        this.toggleAngle = true;//true to move the angle from min to max, false for the reverse 
        //so the height will increase from min to max and vice versa 
        this.maxHeight = data.maxHeight; 
        this.minHeight = Math.min(20,this.maxHeight) === this.maxHeight? 10: 20; 
        this.height = this.minHeight; 
        this.toggleHeight = true;//true to move the height from min to max, false for the reverse  
    }  
    update() 
    { 
        //increases and reduces the angle, creating the effect of a rotating curve 
        if(this.toggleAngle)
        {
            this.angle+= this.angleIncrement; 
            //ensure angle never goes above the max
            if(this.angle >= this.maxAngle)
            { 
                this.toggleAngle = !this.toggleAngle;
            }
        }
        else 
        {
            this.angle-= this.angleIncrement; 
            //ensure angle never goes below the min
            if(this.angle <= this.minAngle)
            { 
                this.toggleAngle = !this.toggleAngle;
            }
        }  
        //increases and reduces the height
        if(this.toggleHeight)
        {
            this.height+= 1; 
            //ensure height never goes above the max
            if(this.height >= this.maxHeight)
            { 
              this.toggleHeight = !this.toggleHeight;
            }
        }
        else 
        {
            this.height-= 1; 
            //ensure height never goes below the min
            if(this.height <= this.minHeight)
            { 
                this.toggleHeight = !this.toggleHeight;
            }
        } 
    } 
    draw()//draws the curve
    {        
        let coordinates = []; 
        this.param = 0;//reset parameter   
        //iterate the parameter from 0 to 12 * PI 
        for(this.param = 0; this.param <  12 * Math.PI;this.param+= 0.017) 
        {    
            //first parametric equation
            let x = 50* sin(this.angle*this.param) * ((exp(sin(this.param))) - (2 * cos(0 * this.param)) - (pow(sin(this.param / 12), 1))) + this.xCoord;
            //second parametric equation
            let y = this.height* cos(this.param) * ((exp(cos(this.param ))) + (2 * cos(this.angle* this.param)) - (pow(sin(this.param / 12), 5))) + this.yCoord;
            coordinates.push({x:x,y:y});     
        }   
        this.drawLines(coordi.........完整代码请登录后点击上方下载按钮下载查看