分别更改数组中每个形状的不透明度 p5.js
Changing opacity of each shape seperately in an array p5.js
我是编码新手。我创建了一个简单的代码,我需要帮助分别定位数组中的每个元素(每个矩形)。我的目标是更改每个矩形的不透明度或透明度。
我可以简单地 fill(0, 255, 100, 50)
并添加一个 alpha 值,但这会改变所有的矩形..
我想更改透明度 - Alpha 值:每个矩形分别为 50、100、150、200、250。
我试图为它创建一个数组并将其实现到矩形,但我似乎做不到。
这是代码,如有任何帮助,我们将不胜感激:)
function setup() {
createCanvas(500, 110);
}
function draw() {
background(0, 100, 180);
stroke(2);
rectMode(CENTER);
for (var i = 0; i < 5; i++) {
fill(0,255, 100);
rect((i+1)*80, 50, 50, 50, 15);
}
}
您可以使用 color() 函数动态定义颜色(包括 alpha
属性)。
这是一个工作示例:https://editor.p5js.org/chen-ni/sketches/aWnKXEYh1
var alphaValues = [50, 100, 150, 200, 250];
function setup() {
createCanvas(500, 110);
}
function draw() {
background(0, 100, 180);
stroke(2);
rectMode(CENTER);
for (var i = 0; i < alphaValues.length; i++) {
var _alpha = alphaValues[i];
var _color = color(0, 255, 100, _alpha);
fill(_color);
rect((i + 1) * 80, 50, 50, 50, 15);
}
}
我是编码新手。我创建了一个简单的代码,我需要帮助分别定位数组中的每个元素(每个矩形)。我的目标是更改每个矩形的不透明度或透明度。
我可以简单地 fill(0, 255, 100, 50)
并添加一个 alpha 值,但这会改变所有的矩形..
我想更改透明度 - Alpha 值:每个矩形分别为 50、100、150、200、250。
我试图为它创建一个数组并将其实现到矩形,但我似乎做不到。
这是代码,如有任何帮助,我们将不胜感激:)
function setup() {
createCanvas(500, 110);
}
function draw() {
background(0, 100, 180);
stroke(2);
rectMode(CENTER);
for (var i = 0; i < 5; i++) {
fill(0,255, 100);
rect((i+1)*80, 50, 50, 50, 15);
}
}
您可以使用 color() 函数动态定义颜色(包括 alpha
属性)。
这是一个工作示例:https://editor.p5js.org/chen-ni/sketches/aWnKXEYh1
var alphaValues = [50, 100, 150, 200, 250];
function setup() {
createCanvas(500, 110);
}
function draw() {
background(0, 100, 180);
stroke(2);
rectMode(CENTER);
for (var i = 0; i < alphaValues.length; i++) {
var _alpha = alphaValues[i];
var _color = color(0, 255, 100, _alpha);
fill(_color);
rect((i + 1) * 80, 50, 50, 50, 15);
}
}