时间戳

首页 > 解决方案 > 如何在处理中创建多色光栅化图片

java - 如何在处理中创建多色光栅化图片

问题描述

我在Youtube 上遵循了这个教程，并且成功地为黑白图片添加了颜色。但是，我的意图是创建多色或渐变效果（如此处或此处），而不是在移动光标时切换颜色。

我在处理方面很新，我尝试过使用变量，但没有成功。

这是草图的代码片段：`

PImage img;

void setup() {
  size(598,336);
  colorMode(HSB);
  img = loadImage("picture-in-data-folder.jpg");
  img.resize(598,336);
  //ellipseMode(RADIUS);
  frameRate(30);
}

void draw() {
  background(255);
  noStroke();
  

//  fill(0);
  
  float tiles = mouseX/10;
  float tileSize = width/tiles;
  
// color section 

  fill(color(tiles, 255, 255));
  tileSize++;
  if (tiles > width / 2) {
    tileSize = 0;
  } 

// end color section

  translate(tileSize/2, tileSize/2);
  
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      
      color c = img.get(int(x*tileSize),int(y*tileSize));
      float size = map(brightness(c), 0, 255, tileSize, 0);
      
    ellipse(x*tileSize, y*tileSize, size, size);
  // image(img, mouseX, mouseY);
    }
  }
}

如果您有任何提示，或者您可以提供建议，我将不胜感激。

谢谢。

标签： javaprocessing

解决方案

简短的回答：您需要在循环中放置一个fill()命令。for

长答案：

现在，您的代码正在执行以下操作：

  1. 定义tiles基于mouseX
  2. 将填充颜色设置为(tiles, 255, 255)
  3. 画出所有的圆圈

我认为你想要它做的是这样的：

  1. 将填充颜色设置为(21, 255, 255)（或任何您想要的第一种颜色）
  2. 画第一个圆圈
  3. 将填充颜色设置为渐变中的下一个颜色
  4. 画第二个圆圈
  5. 等等

为此，您需要将命令放入for更改填充颜色的循环中。这是一种方法：

for (int x = 0; x < tiles; x++) {
  for (int y = 0; y < tiles; y++) {
    color c = img.get(int(x*tileSize),int(y*tileSize));
    float size = map(brightness(c), 0, 255, tileSize, 0);

    fill(map(x, 0, tiles, 0, 255), 255, 255);
    ellipse(x*tileSize, y*tileSize, size, size);
  }
}

我刚刚将该填充命令添加为 的函数x，但您可以随意制作。为了使其成为渐变，它需要随着x或有所变化y。

推荐阅读