如何解决p5.js使用数组为每个矩形着色
我这里有一个简单的2x3矩形网格。我想用特定的颜色分别填充每个矩形。我还很新,我认为这需要一个数组。它应该看起来 something like this image。
var colours =[];
function setup() {
createCanvas(1000,700);
}
function draw() {
background(220);
for (let y = 0; y < 2; y++) {
for (let x = 0; x < 3; x++) {
let xpos = x *200;
let ypos = y *200;
rect(xpos,ypos,200,200);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
解决方法
使用color
定义颜色数组:
let colors = [color(255,0),color(255,255,color(0,255)];
通过fill
设置填充颜色:
fill(colors[x]);
var colours =[];
function setup() {
createCanvas(1000,700);
}
function draw() {
background(220);
let colors = [color(255,255)];
for (let y = 0; y < 2; y++) {
for (let x = 0; x < 3; x++) {
let xpos = x *200;
let ypos = y *200;
fill(colors[x]);
rect(xpos,ypos,200,200);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。