如何使用处理创建适当的渐变

问题描述

我是编程新手，我想创建如图所示的图表。

size(300,300);
colorMode(HSB,360,100,100);
background(#FFFFFF);


int x,y;
for (x = 0; x <100 ; x++ )
{
  for(y = 0 ; y <100 ; y++)
  {
    stroke (0,x,y );
    rect(y,y*3,x*3);

  }
}

当我运行程序时，我得到这样的图表，其中缺少图表的右下角。

我该如何解决问题？

谢谢！

解决方法

您当前的代码正在绘制一堆具有不同轮廓颜色的白色矩形。图表的左上角是您要查找的内容。如果你想让它填满整个屏幕，我会这样做：

for (int x = 0; x < 100; x++) {
  for (int y = 0; y < 100; y++) {
    fill(0,x,y);
    rect(map(x,100,width),map(y,height),width/100,height/100);
  }
}

使用 map() 命令。

,

这将产生您正在寻找的输出。您可能想看看 lerpColor()。

void setup(){
  size(300,300);
}

void draw(){
  colorMode(HSB,360,100);
  background(#FFFFFF);
  
  for (int x = 0; x < width; x++ ){
    for(int y = 0; y < height; y++){
      stroke(0,y);
      point(y,x);
    }
  }
}