p5.js | circle()函数

简介

circle() 函数是 p5.js 中用来绘制圆形的函数。它可以用来绘制实心圆或空心圆，可以通过在 sketch 中的指定位置、大小、颜色等参数来进行自定义绘制。

语法

circle(x, y, d)

• x：圆的中心点 x 坐标。
• y：圆的中心点 y 坐标。
• d：圆的直径。

示例

基本圆形绘制

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

function draw() {
  background(200);
  stroke(0);
  fill(255,0,0);
  circle(200, 200, 100);
}

在上面的示例中，我们绘制了一个填充颜色为红色，直径为100的圆形，并指定了中心点在(200, 200)的位置。

空心圆绘制

我们可以将圆形的 fill() 函数设置为透明色，这样就能够绘制空心的圆形了。

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

function draw() {
  background(200);
  stroke(255,0,0);
  noFill();
  circle(200, 200, 100);
}

上面的例子中，我们设置了 stroke() 函数的颜色为红色，并将 fill() 函数设置为透明色，这样绘图出来的圆形就成了空心的。

圆形的交互动画

圆形也可以跟鼠标的位置进行互动。下面的例子中，我们使用了 mouseX 和 mouseY 这两个全局变量代表鼠标在 sketch 中的位置，实现了圆形跟随鼠标进行移动的交互动画。

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

function draw() {
  background(200);
  stroke(0);
  fill(255,0,0);
  circle(mouseX, mouseY, 50);
}

上面的例子中，我们将圆形的中心点设为鼠标的位置，直径为50，这样圆形就跟随着鼠标进行了移动。

总结

以上就是 circle() 函数的介绍和例子展示。使用 circle() 函数，我们可以很方便地在 sketch 中绘制出所需要的圆形，而圆形在交互动画中也能发挥出很好的效果，希望能够对你的 p5.js 学习有所帮助。