p5模拟容器中的水流动动画效果代码
代码语言:html
所属分类:动画
代码描述:p5模拟容器中的水流动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100%; background: #05022e; } canvas { position: absolute; inset: 50%; border-radius: 4px; border: 1px solid #7ac5ff; transform: translate(-50%, -50%); } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.7.0.js"></script> <script > const w = 850; const h = 600; const scale = 25; const cols = w / scale; const rows = h / scale; const vertices = new Array(~~cols). fill(). map(() => new Array(~~rows).fill().map(() => new Array(1).fill())); const getColor = z => { if (z < -30) return "rgb(7, 40, 61)";else if (z < 0) return "rgb(9, 64, 105)";else if (z < 30) return "rgb(23, 95, 143)";else return "rgb(33, 150, 243)"; }; class Vertex { constructor(x, y, xoff, yoff) { this.x = x * scale; this.y = y * scale; this.xoff = xoff; this.yoff = yof.........完整代码请登录后点击上方下载按钮下载查看
网友评论0