p5.js入门学习-数组1

80 阅读1分钟

数组是将类型相同的元素聚集在一起的一种数据类型,通过位置索引来查找相应的元素。第一个元素的索引标号为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();

p5js 开源社区 - 乐述云享 (aleshu.com)