日落深浅变化

作 品 说 明

整张图由代码一次性生成，没有 draw() 循环。背景用 for (y += 90) 铺出六条色带，RGB 三个通道各自用 map() 从画面顶部线性过渡到画面底部， 于是越往下越暖、越暗。

红圆是画面的主体：位置、大小全部由 random() 决定， 关键在透明度 —— alpha = map(y, 0.3h, 0.85h, 40, 90)， 圆越靠下，红就越实、越沉，和背景的暖色压在一起，像日落时往下沉的光。

源 码 · sketch.js

// 创意代码 日落重叠圆效果 380*570
function setup() {
  createCanvas(380, 570);
  background("#F7F3ED");
  noStroke();

  // 分层背景色带
  for(let y = 0; y < height; y += 90){
    let r = map(y,0,height,130,210);
    let g = map(y,0,height,150,90);
    let b = map(y,0,height,170,120);
    fill(r,g,b);
    rect(0, y, width, 80);
  }

  // 日落重叠圆形：y位置决定透明度，下方圆颜色更深
  for(let i = 0; i < 18; i++){
    let x = random(40, width - 40);
    let y = random(height*0.3, height*0.85);
    let size = random(40, 110);

    // 关键：y越大（越靠画面下方）alpha透明度越大，颜色越深
    let alphaVal = map(y, height*0.3, height*0.85, 40, 90);
    fill("#D83020", alphaVal);
    ellipse(x, y, size, size);
  }

}

function draw() {

}

// 按s保存png图片
function keyPressed(){
  if(key === 's'){
    save("几何构成_日落深浅变化.png");
  }
}

页面里运行的是同一份逻辑，只额外把绘制包成了 paint()，好让「重新生成」按钮能重画一次。