p5实现一个旋转花瓣动画效果代码
代码语言:html
所属分类:动画
代码描述: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 = 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; aj.........完整代码请登录后点击上方下载按钮下载查看
网友评论0