Colorful Mountain

async function setup() {

  createCanvas(600, 250);

  colorMode(HSB);

​

  let baseY = random(175, 200); //山底位置

  let peakHeight; //每個三角形的最大高度

  let leftX = 0;

  let leftY = baseY;

​

  let colorH = random(0, 360);

  let colorS = random(0, 20);

  let colorB = random(60, 80);

​

  //生成背景顏色，從兩側同時開始

  let midPoint = width / 2;

  for (let i = 0; i <= midPoint; i++) {

    let noiseValueLeft = noise(i) * 15; 

    let noiseValueRight = noise(width - i) * 15;

​

    //左側

    stroke(colorH, colorS, colorB + noiseValueLeft);

    line(i, 0, i, height);

    //右側

    stroke(colorH, colorS, colorB + noiseValueRight);

    line(width - i, 0, width - i, height); 

​

    await sleep(5);

  }

​

  for (let x = 0; x < width;) {

    // 繪製內層山

    let colorH = random(50, 250);

    let colorS = random(0, 10);

    let colorB = random(70, 80);

    fill(colorH, colorS, colorB);

    noStroke();

​

    peakHeight = random(70, 130);

    let middleX = x + random(40, 80); // 中間點的XY

    let middleY = leftY - peakHeight;

    let rightX = middleX + random(40, 80); // 右側點的XY

    let rightY = baseY;

​

    triangle(leftX, leftY, middleX, middleY, rightX, rightY);

​

    //繪製外層山

    fill(colorH + 50, colorS + 20, colorB - 10);

    let shadow = -10; //偏移量

    triangle(leftX + shadow, leftY, middleX + shadow, middleY - shadow, rightX + shadow, rightY);

​

    x = rightX; //將x變為右邊點的x

    leftX = x;  //下一個山峰的左邊點變為右邊點

​

    await sleep(150);

  }

}

​

function draw() {

}

​

function sleep(ms) {

  return new Promise(resolve => setTimeout(resolve, ms));

}