数组是将类型相同的元素聚集在一起的一种数据类型,通过位置索引来查找相应的元素。第一个元素的索引标号为0,第二个元素是1,依此类推。
// 创建全局变量 coswave 数组,[]表示空数组。
let coswave = [];
function setup() {
// 画布:720*360
createCanvas(720, 360);
// map函数是将i从0~width映射至0~PI
// abs取绝对值,cos为三角函数
// 由于宽度为720,因此此处会获得一个有720个元素的数组
// 注意看循环,可以思考一下为什么不写(i = 1; i <= width; i++)呢?
for (let i = 0; i < width; i++) {
let amount = map(i, 0, width, 0, PI);
coswave[i] = abs(cos(amount));
}
background(255);
noLoop();
}
function draw() {
// 第一行线段
let y1 = 0;
let y2 = height / 3;
// 每一次循环,在coswave数组中去对应的一个元素*255后,作为当前线段的颜色,注意此处i的自增值为3,所以想想一共会循环多少次?
for (let i = 0; i < width; i += 3) {
stroke(coswave[i] * 255);
line(i, y1, i, y2);
}
// 第二行线段
y1 = y2;
y2 = y1 + y1;
// 该循环改变了线段颜色的计算方式
for (let i = 0; i < width; i += 3) {
stroke((coswave[i] * 255) / 4);
line(i, y1, i, y2);
}
// 第三行线段
y1 = y2;
y2 = height;
// 该循环改变了线段颜色的计算方式
for (let i = 0; i < width; i += 3) {
stroke(255 - coswave[i] * 255);
line(i, y1, i, y2);
}
}
new p5();