P5透明度

P5中提供了多种方法来控制图形的透明度和不透明度。透明度可以让我们在绘制时产生更加真实和有趣的效果。

设置透明度

设置透明度的最常见方式是使用alpha()函数，该函数的参数从0到255的范围内指定透明度。 0表示完全透明，255表示完全不透明。

fill(255, 0, 0, 100); // 设置颜色为红色，透明度为100
rect(50, 50, 100, 100); // 绘制矩形

以上代码将绘制一个红色的矩形，透明度为100。注意，在fill()函数中指定颜色时，透明度应该在RGB颜色值之后指定。

获取透明度值

在P5中，我们可以使用alpha()函数获取颜色的透明度值。该函数的参数为rgba颜色数组。

let c = color(255, 0, 0, 100); // 创建一个颜色
let alphaValue = alpha(c); // 获取颜色的透明度值

更改透明度

我们可以使用red()、green()、blue()和alpha()函数分别获取RGBA颜色数组的值。再通过更改颜色数组中的透明度值来改变透明度。

let c = color(255, 0, 0, 100); // 创建一个颜色
let a = alpha(c); // 获取颜色的透明度
c = color(red(c), green(c), blue(c), a - 50); // 将透明度减少50
fill(c); // 设置颜色
rect(50, 50, 100, 100); // 绘制矩形

以上代码中，我们首先获取颜色的透明度并将其减少50。然后使用color()函数创建一个新的颜色，其中a的值已经更改。最后，我们使用fill()函数设置颜色，并绘制矩形。

可见度

除了指定透明度之外，P5还提供了方法来控制图形对象的可见度。我们可以使用visible属性将对象设置为可见或不可见。

let isVisible = true;
let rectX = 50;
let rectY = 50;

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

function draw() {
  background(220);
  rect(rectX, rectY, 100, 100);
  rectX += 1;
  rectY += 1;
  rectX = rectX % 400;
  rectY = rectY % 400;
  if (isVisible) {
    rect(rectX, rectY, 100, 100);
  }
}

function keyTyped() {
  if (key === ' ') {
    isVisible = !isVisible;
  }
}

以上代码将创建一个矩形，其位置每当进行绘制时都改变，我们还可以通过按下空格键来切换矩形的可见性。

结论

透明度和可见性是制作精美视觉效果的关键。P5提供了丰富的方法来控制可见度和透明度，以产生惊人的图形效果。