绘制点 p5js - Javascript

简介

p5js 是一个基于 Javascript 的创意编程工具，它可以帮助程序员快速实现图形交互应用程序。在 p5js 中，绘制点是经常被使用的一个基本功能，所以掌握绘制点的方法非常重要。

绘制点的基本语法

在 p5js 中，绘制点的基本语法是 point(x, y)，其中 x 和 y 分别表示点在画布上的坐标。

绘制点的示例代码

以下是一个简单的绘制点的示例代码：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  strokeWeight(5);
  point(200, 200);
}

该代码会在画布上绘制一个位于 (200,200) 坐标处的点。也可以使用其他的颜色和大小参数对点进行自定义。

绘制多个点的示例代码

如果需要在画布上绘制多个点，可以使用循环语句和数组来实现。以下是一个绘制多个点的示例代码：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  strokeWeight(5);
  let points = [[100,100], [200,200], [300,300]];
  for(let i=0; i<points.length; i++){
    point(points[i][0], points[i][1]);
  }
}

该代码会在画布上绘制三个点，分别位于 (100,100)，(200,200)，(300,300) 坐标处。

总结

p5js 是一个强大的图形编程工具，掌握绘制点的方法是使用 p5js 的基础。通过本文的介绍，我们了解到了绘制点的基本语法和示例代码，同时也了解了如何绘制多个点。如果你对 p5js 感兴趣，可以进一步学习它的其他功能和语法。