p5实现水滴落下涟漪动画代码
代码语言:html
所属分类:动画
代码描述:p5实现水滴落下涟漪动画代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; padding: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: black; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script> <script> //press space to reset - codepen challenge - rain let drops = []; //let there be drops function setup() { createCanvas(windowWidth, windowHeight, WEBGL); //to fall within this space setAttributes("alpha", true); //allowed to fade } function draw() { t = frameCount / 400 + 2; //and move in time background(255, 255, 255, 255 * abs(cos(t / 2))); //with the light of day orbitControl(); //in your perspective rotateX(t / 2); //that turns rotateY(t / 3); //on rotateZ(t / 4); //these axes if (drops.length < 50) { //less is more drops.push(new Drops()); //more is more } for (let i = 0; i < drops.length; i++) { drops[i].display(); //a call to being if (drops[i].r > 255) { drops.splice(i, 1).........完整代码请登录后点击上方下载按钮下载查看
网友评论0