当前位置: 首页 > news >正文

p5.js 三角形triangle的用法

点赞 + 关注 + 收藏 = 学会了

如果你刚接触 p5.js,想画一个三角形,那 triangle() 这个 API 就是你的好帮手!

triangle () 是什么?

triangle() 是 p5.js 里专门用来画三角形的函数。只要你告诉它三个点的位置,它就能自动把这三个点连起来,形成一个三角形。

基本用法:语法和参数

画三角形的语法超级简单:

triangle(x1, y1, x2, y2, x3, y3)

这里的 6 个参数其实是三个点的坐标:

  • (x1, y1):第一个点的位置
  • (x2, y2):第二个点的位置
  • (x3, y3):第三个点的位置

注意:p5.js 的坐标系里,左上角是原点 (0,0),向右 x 变大,向下 y 变大(和我们数学课本里的坐标系有点不一样哦)。

一个简单的三角形

先来画个最基础的三角形试试手,代码如下(可以直接复制到 p5.js Web Editor 运行):

在这里插入图片描述

function setup() {createCanvas(400, 400); // 创建一个 400x400 的画布
}function draw() {background(220); // 灰色背景// 画三角形:三个点分别是 (100,50)、(50,150)、(150,150)triangle(100, 50, 50, 150, 150, 150);
}

画布上会出现一个等腰三角形,顶点在上方 (100,50),底边两端在 (50,150)(150,150)

给三角形加颜色和边框

我们可以用 fill() 给三角形填充颜色,用 stroke() 改边框颜色,用 strokeWeight() 调边框粗细。

左边是纯红色三角形,右边是蓝色边框的空心三角形。

在这里插入图片描述

function setup() {createCanvas(400, 400);
}function draw() {background(255); // 白色背景// 红色填充、无边框的三角形fill(255, 0, 0); // 红色(RGB值)noStroke(); // 取消边框triangle(50, 50, 50, 150, 150, 100);// 蓝色边框、无填充的三角形noFill(); // 取消填充stroke(0, 0, 255); // 蓝色边框strokeWeight(3); // 边框粗3像素triangle(200, 50, 150, 150, 250, 150);
}

会跟着鼠标跑的彩色三角形

最后来个好玩的!让三角形跟着鼠标移动,而且颜色会随鼠标位置变化~

在这里插入图片描述

function setup() {createCanvas(600, 400); // 更大的画布
}function draw() {background(0); // 黑色背景,每次刷新清空画面// 获取鼠标当前位置let mouseXPos = mouseX;let mouseYPos = mouseY;// 定义三角形的三个点(围绕鼠标位置)let topX = mouseXPos;         // 顶点x(鼠标x)let topY = mouseYPos - 60;    // 顶点y(鼠标上方60像素)let leftX = mouseXPos - 50;   // 左下x(鼠标左方50像素)let leftY = mouseYPos + 50;   // 左下y(鼠标下方50像素)let rightX = mouseXPos + 50;  // 右下x(鼠标右方50像素)let rightY = mouseYPos + 50;  // 右下y(鼠标下方50像素)// 颜色随鼠标x坐标变化(从红到绿)let colorValue = map(mouseXPos, 0, width, 0, 255); fill(colorValue, 255 - colorValue, 100); // 红→绿渐变// 画三角形triangle(topX, topY, leftX, leftY, rightX, rightY);
}

移动鼠标时,三角形会跟着跑,而且左边是红色,右边是绿色,中间是渐变的黄色~


以上就是本文的全部内容啦,想了解更多 P5.js 用法欢迎关注 《P5.js中文教程》。

也可以➕我 green bubble 吹吹水咯

在这里插入图片描述

点赞 + 关注 + 收藏 = 学会了

http://www.dtcms.com/a/304221.html

相关文章:

  • 中国贸促会融媒体中心出海活动负责人、出海星球创始人莅临绿算技术
  • FSMC的配置和应用
  • python类里面的魔法方法
  • 某雷限制解除:轻松获取原始下载链接,支持多任务转换
  • 运维笔记:HTTP 性能优化
  • python学习DAY26打卡
  • 二叉树的最大路径和C++
  • 2025手机软件上架各大应用市场大致流程
  • RabbitMQ消息确认机制有几个confirm?
  • 面向对象系统的单元测试层次
  • Node.js 是怎么一步步撼动PHP地位的
  • C#基础篇 - 正则表达式入门
  • 预过滤环境光贴图制作教程:第三阶段 - GGX 分布预过滤
  • Python爬虫实践:高效下载XKCD漫画全集
  • Vue3数组去重方法总结
  • 数据赋能(342)——技术平台——容错性
  • oneapi本地部署接口测试(curl命令方式+postman方式)
  • git中多仓库工作的常用命令
  • C 语言第 12 天学习笔记:函数进阶应用与变量特性解析
  • Accessibility Insights for Windows 使用教程
  • 【Nginx】Nginx进阶指南:解锁代理与负载均衡的多样玩法
  • Apache Ignite 的分布式锁Distributed Locks的介绍
  • VLA--Gemini Robotics On-Device: 将AI带到本地机器人设备上
  • SQL 怎么学?
  • 小程序发票合并功能升级!发票夹直接选,操作更便捷
  • Kafka——消费者组重平衡全流程解析
  • idea运行tomcat日志乱码问题
  • Vue El 基础
  • 考古学家 - 华为OD统一考试(JavaScript 题解)
  • npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本