p5.js 入门：用 point () 绘制点的超简单教程

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

刚接触 p5.js 时，要是想从最基础的图形入手，point () 会是个不错的选择。它就像一支小巧的画笔，能在画布上精准画出一个个 "点"------ 操作起来很简单，却能组合出不少有趣的效果。接下来会结合具体例子，带你慢慢熟悉它的用法，即使是新手也能跟着试起来。

什么是 point ()？

point() 是 p5.js 里专门用来画「点」的工具。就像你用铅笔在纸上戳一个小点，point() 能在画布上指定位置画一个点。

它有几个重要特性（记不住也没关系，后面会举例）：

点的默认大小是「1 个像素」（像电脑屏幕上最小的格子）。
点的颜色由 stroke() 控制（比如红色、蓝色）。
点的大小由 strokeWeight() 控制（比如变粗成 5 像素）。
用 fill() 给点填色是无效的（点不需要填充，只要边框色）。

最基础：画 2D 点（平面上的点）

先从最简单的「在平面上画点」开始，只需要告诉 point() 两个信息：点的 x 坐标和 y 坐标（就像地图上的横纵位置）。

画 4 个点组成正方形4个顶点

js 复制代码

// 准备阶段：设置画布
function setup() {
  // 创建一个200x200像素的画布
  createCanvas(200, 200);
  // 给画布涂一个浅灰色背景（200是灰度值，0是黑，255是白）
  background(200);
}

// 绘制阶段：画点
function draw() {
  // 左上角的点：x=50，y=50
  point(50, 50);
  // 右上角的点：x=150，y=50（x变大往右移）
  point(150, 50);
  // 右下角的点：x=150，y=150（y变大往下移）
  point(150, 150);
  // 左下角的点：x=50，y=150
  point(50, 150);
}

运行后会看到浅灰色画布上有 4 个黑色小点，刚好组成正方形的 4 个顶点。

给点换颜色和大小

默认的点是 1 像素黑色，有点不起眼？用两个工具就能改造它：

stroke(颜色)：改点的颜色（比如 stroke('red') 变红）；
strokeWeight(数字)：改点的大小（比如 strokeWeight(5) 变成 5 像素粗）。

js 复制代码

function setup() {
  createCanvas(200, 200);
  background(200);
}

function draw() {
  // 第一组点：默认样式（1像素黑色）
  point(50, 50); // 左上角
  point(150, 50); // 右上角

  // 从这里开始，后面的点用新样式
  stroke('purple'); // 颜色改成紫色
  strokeWeight(8); // 大小改成8像素

  // 第二组点：紫色大圆点
  point(150, 150); // 右下角
  point(50, 150); // 左下角
}

运行后会看到,两个小黑点和两个紫色大圆点，依然组成正方形的4个顶点。

用「矢量」画点（更灵活的位置控制）

如果觉得每次写 x,y 麻烦，还可以用「矢量对象」（p5.Vector）保存坐标，再传给 point()。就像把坐标存在一个小盒子里，用的时候直接拿盒子就行。

用矢量对象画点

如果觉得每次写 x,y 麻烦，还可以用「矢量对象」（p5.Vector）保存坐标，再传给 point()。就像把坐标存在一个小盒子里，用的时候直接拿盒子就行。

js 复制代码

function setup() {
  createCanvas(200, 200);
  background(200);

  // 用矢量对象保存4个角的坐标
  let topLeft = createVector(50, 50); // 左上角：x=50,y=50
  let topRight = createVector(150, 50); // 右上角
  let bottomRight = createVector(150, 150); // 右下角
  let bottomLeft = createVector(50, 150); // 左下角

  // 直接用矢量对象画点
  point(topLeft);
  point(topRight);
  point(bottomRight);
  point(bottomLeft);
}

function draw() {
  // 这里不用写内容，因为点在setup里已经画好了
}

运行后效果和第1个示例一样，但代码更整洁 ------ 如果要改位置，只需要改矢量对象里的数值就行。

让点动起来

这个 3D 点动画案例有以下特点，能清晰展示空间感：

场景中有 50 个随机分布在 3D 空间的彩色点
所有点会缓慢旋转，展示不同角度的空间关系
近处的点（z 值大）会更大，远处的点（z 值小）会更小，模拟真实透视效果
可以用鼠标拖动场景，从任意角度观察这些点的空间分布

js 复制代码

let points = [];
let angle = 0;

function setup() {
  // 创建3D画布
  createCanvas(600, 400, WEBGL);
  
  // 生成50个随机分布在3D空间中的点
  for (let i = 0; i < 50; i++) {
    points.push({
      x: random(-200, 200),
      y: random(-200, 200),
      z: random(-200, 200),
      // 随机颜色
      color: color(random(100, 255), random(100, 255), random(100, 255))
    });
  }
}

function draw() {
  background(20);
  noFill();
  
  // 旋转整个场景，产生3D视角变化
  orbitControl(); // 允许鼠标拖动旋转视角
  
  // 遍历所有点并绘制
  for (let p of points) {
    // 根据z轴位置改变点的大小（越近越大）
    let size = map(p.z, -200, 200, 2, 8);
    strokeWeight(size);
    
    // 使用点的颜色
    stroke(p.color);
    
    // 让点围绕中心旋转
    let x = p.x * cos(angle) - p.z * sin(angle);
    let z = p.x * sin(angle) + p.z * cos(angle);
    
    // 绘制3D点
    point(x, p.y, z);
  }
  
  // 增加角度，让动画持续进行
  angle += 0.01;
}

运行后会看到点在空间中旋转，有些点会从后面移动到前面，有些则会从前面转到后面，非常直观地展示了 3D 空间的深度感。通过鼠标交互，还能更清楚地理解这些点在三维空间中的位置关系。

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

也可以➕我 green bubble 吹吹水咯

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