在p5.js中,可以使用alpha()函数来更改形状的不透明度。alpha()函数接受一个参数,该参数定义了形状的不透明度。该参数的取值范围是0(完全透明)到255(完全不透明)。
以下是一个示例代码,演示如何在数组中的每个形状上更改不透明度:
let shapes = [];
function setup() {
createCanvas(400, 400);
// 创建一系列形状
for(let i = 0; i < 10; i++) {
let x = random(width);
let y = random(height);
let size = random(50, 100);
let opacity = random(255);
let shape = createShape(x, y, size, opacity);
shapes.push(shape);
}
}
function draw() {
background(220);
// 更新和绘制每个形状
for(let i = 0; i < shapes.length; i++) {
let shape = shapes[i];
// 更改不透明度
let opacity = random(255);
shape.alpha(opacity);
// 绘制形状
shape.draw();
}
}
// 创建一个形状对象
function createShape(x, y, size, opacity) {
let shape = {
x: x,
y: y,
size: size,
opacity: opacity,
// 更改不透明度
alpha: function(opacity) {
this.opacity = opacity;
},
// 绘制形状
draw: function() {
fill(255, this.opacity);
rect(this.x, this.y, this.size, this.size);
}
};
return shape;
}
在上述代码中,我们首先创建了一个包含10个形状对象的数组shapes。每个形状对象具有x、y、size和opacity属性,以及alpha()和draw()方法。
在setup()函数中,我们使用随机值生成了每个形状对象,并将其添加到shapes数组中。
在draw()函数中,我们遍历shapes数组并更新每个形状对象的不透明度。通过调用shape.alpha()方法并传入一个随机的不透明度值来更改不透明度。
最后,我们调用shape.draw()方法来绘制每个形状。
这是一个简单的示例,演示了如何在数组p5.js中分别更改每个形状的不透明度。根据实际需求,你可以根据数组中的每个元素进行更复杂的操作,以实现更多功能。
腾讯云相关产品和产品介绍链接地址:
请注意,以上链接仅作为参考,具体产品选择应根据实际需求和个人喜好进行决策。
领取专属 10元无门槛券
手把手带您无忧上云