p5.js 三角形triangle的用法

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

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

triangle () 是什么?

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

基本用法:语法和参数

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

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 运行):

js 复制代码
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() 调边框粗细。

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

js 复制代码
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);
}

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

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

js 复制代码
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 吹吹水咯

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

相关推荐
say_fall4 小时前
精通C语言(1.内存函数)
c语言·开发语言
草莓熊Lotso4 小时前
《吃透 C++ vector:从基础使用到核心接口实战指南》
开发语言·c++·算法
-雷阵雨-5 小时前
数据结构——LinkedList和链表
java·开发语言·数据结构·链表·intellij-idea
小*-^-*九6 小时前
Electron vue项目 打包 exe文件
javascript·vue.js·electron
大飞pkz8 小时前
【设计模式】责任链模式
开发语言·设计模式·c#·责任链模式
gplitems1238 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
大飞pkz9 小时前
【设计模式】六大基本原则
开发语言·设计模式·c#·六大原则
iCxhust10 小时前
Intel8259汇编串口接收转C语言
c语言·开发语言·汇编
掘根10 小时前
【Qt】布局管理器
开发语言·qt
半夏知半秋11 小时前
skynet-socket.lua源码分析
服务器·开发语言·学习·架构·lua