简介
在本教程中，您将学习如何使用 p5.js 创建动态且丰富多彩的几何动画。形状将在画布上随机移动，改变颜色并创建视觉上迷人的效果。
第 1 步：设置您的环境
下载p5.js：
前往 p5.js 网站并下载最新版本的 p5.js。或者，您可以使用在线 p5.js 编辑器 editor.p5js.org，它允许您直接在浏览器中编写和运行代码。
创建一个新项目：
如果您使用在线编辑器，请单击左上角的“新建”来创建新草图。如果您在本地编码，请创建一个新的 html 文件并链接 p5.js 库。
第二步：编写基本结构
让我们首先设置 p5.js 草图的基本结构。这包括定义 setup() 和 draw() 函数。
function setup() { createcanvas(windowwidth, windowheight); nostroke(); // disable stroke for the shapes}function draw() { background(30, 30, 60, 25); // dark background with transparency}
说明：
createcanvas(windowwidth, windowheight);：这会设置画布大小以匹配您的浏览器窗口。nostroke();：这会删除我们将创建的形状的边框。背景(30, 30, 60, 25);：这将背景颜色设置为具有一定透明度的深蓝色，为形状创建拖尾效果。
第三步：添加动态几何形状
现在，让我们添加代码来创建具有不同颜色、位置和大小的随机形状。
function draw() { background(30, 30, 60, 25); // dark background with transparency for (let i = 0; i < 5; i++) { let x = random(width); let y = random(height); let size = random(20, 80); let colorr = random(255); let colorg = random(255); let colorb = random(255); let shapetype = random(['ellipse', 'rect', 'triangle']); fill(colorr, colorg, colorb, 150); // set fill color with some transparency if (shapetype === 'ellipse') { ellipse(x, y, size, size); } else if (shapetype === 'rect') { rect(x, y, size, size); } else if (shapetype === 'triangle') { triangle(x, y, x + size, y, x + size / 2, y - size); } }}
说明：
随机变量：
x 和 y 确定画布上每个形状的位置。size 控制每个形状的大小。colorr、colorg、colorb 为填充颜色的红色、绿色和蓝色分量生成随机值。fill(colorr, colorg, colorb, 150);：这设置了稍微透明的填充颜色。
形状类型：
ellipse(x, y, size, size);：绘制圆形或椭圆形。rect(x, y, size, size);: 绘制正方形或矩形。triangle(x, y, x + size, y, x + size / 2, y – size);: 绘制一个三角形。
第四步：使动画响应式
为了确保画布随窗口调整大小，请添加以下函数：
function windowResized() { resizeCanvas(windowWidth, windowHeight);}
第五步：运行你的草图
如果您使用 p5.js 在线编辑器，只需按“播放”按钮即可查看动画。如果您在本地编码，请在网络浏览器中打开 html 文件以查看动画。
以上就是使用 ps 创建动态几何动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1490927.html
微信扫一扫 
支付宝扫一扫 
