p5.js入门学习-点与线

点：point(p1, p2); 其中p1, p2分别表示点的坐标；

线：line(x1, y1, x2, y2); 其中x1, y1表示起始点的坐标、x2, y2表示结束点的坐标；

function setup() {
  let d = 70;
  let p1 = d;         // 70
  let p2 = p1 + d;    // 140
  let p3 = p2 + d;    // 210
  let p4 = p3 + d;    // 280
  // 画布大小：720*400
  createCanvas(720, 400);
  background(0);
  noSmooth();
  translate(140, 0);
  // 绘制灰色的方块
  stroke(153);
  line(p3, p3, p2, p3);
  line(p2, p3, p2, p2);
  line(p2, p2, p3, p2);
  line(p3, p2, p3, p3);
  // 绘制白色的点
  stroke(255);
  point(p1, p1);
  point(p1, p3);
  point(p2, p4);
  point(p3, p1);
  point(p4, p2);
  point(p4, p4);
}
new p5();

p5js 开源社区 - 乐述云享 (aleshu.com)