p5实现动态花开富贵交互效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</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> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5.js"></script> <script type="text/javascript"> let size = 150; class Flower { constructor(s, a1, a2) { let l = pow(random(), 2)*size; let l2 = random(); this.l2 = l2; this.x = cos(a1)*(l + l2*size/2); this.y = sin(a1)*(l + l2*size/2); this.hue = random(); this.goalX = this.x; this.goalY = this.y; this.dx = 10; this.dy = 10; this.s = s*(l2*.5 + .5); this.a = a1; this.squash = 1 - (l/size)*.8; this.weights = []; for (let i = 0; i < 5; i++) { this.weights[i] = random()*.5 + .5; } } update() { this.x += this.dx; this.y += this.dy; this.dx *= .95; this.dy *= .95; let mx = (width/2 + this.x) - mouseX; let my = (height/2 + this.y) - mouseY; let d = dist(width/2 + this.x, height/2 + this.y, mouseX, mouseY); let a = atan2(my, mx); if (d > 1) { this.dx += cos(a)*size/d; this.dy += sin(a)*size/d; } this.x = (this.goalX + this.x)/2; this.y = (this.goalY + this.y)/2; } renderStem() { pushPop(() => { noFill(); strokeWeight(this.l2*2 + 1); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0