java - 如何在处理中使用加载的图像制作多列行？

Question

我在处理中制作了一个代码，从数据上传了一张图片，并使用这张图片在处理中制作了一条线，有点像你如何在 Photoshop 中使用有机外观画笔，除了我希望程序为我画线.

我希望能够让程序最多绘制 16 行，但我现在只绘制了 5 行进行测试。为此，我使用了嵌套的 for 循环。然而，所发生的只是生产了 4 条线，而只有两条线是完整的。

这是代码。

PImage brush;

void setup() {

    size(1000, 800);

    brush = loadImage("verticalOrganic.png");
    //load the file verticalOrganic from data. this is our "brush head".


    float i;
    float j;
    float distance;
    brush.resize(7, 0);
    for (j = 0; j < width; j += width / 5) { //this should create five rows, by updating j by 1/5 of 1000
        for (i = 0; i < height; i += distance) {  //distance determines the new position of the brush going down
            //the column.
            image(brush, j, i);  //when j updates, it should create a new column....should.

            distance = random(-10, (brush.height) * 3 / 4);

        }
        println("FINISHED"); //i thought what may be wrong was that j was not updating, so this tests that.
    }

}

这是刷头的文件/ （如果要使用它，则必须将其更改为png。因为imgur。）

标签： javafor-loopprocessing

Answer 1

i我的预感是计数器 ( )的内循环增量distance是有问题的。

首先，它被定义为float distance;并且没有初始值（默认为 0），所以第一次i将保持为 0。

第二个也是更大的问题是值距离被分配给：

distance = random(-10, (brush.height) * 3 / 4);

这意味着distance可以（并且将）具有小于 0 的值。

当您distance作为循环增量 ( i += distance) 应用时，这意味着您可以朝错误的方向移动（distance将从中减去i而不是添加），您可能会超过相同的 i 值，或者更糟的是可能会卡住，永远不会退出循环那么小（即使是负值） ofi永远不会满足循环退出条件：i < height;

我建议保持距离为正值：

distance = random((brush.height) * 3 / 4);

这是您的程序的一个稍微修改的版本，带有一个额外的变量来计算i调用的迭代次数iCount（并使用 jpg 而不是 png）：

PImage brush;

void setup() {

    size(1000, 800);

    brush = loadImage("uHrk2.jpg");
    //load the file verticalOrganic from data. this is our "brush head".


    float i;
    float j;
    float distance;
    brush.resize(7, 0);
    
    int iCount = 0;
    
    for (j = 0; j < width; j += width / 5) { //this should create five rows, by updating j by 1/5 of 1000
        for (i = 0; i < height; i += distance) {  //distance determines the new position of the brush going down
            //the column.
            image(brush, j, i);  //when j updates, it should create a new column....should.

            distance = random((brush.height) * 3 / 4);
            iCount++;
        }
        
        println(iCount, "i iterations, column index", j, "FINISHED"); //i thought what may be wrong was that j was not updating, so this tests that.
        iCount = 0;
    }

}

请注意，iCount当它仅使用正数时，每列都有数字，并尝试将其更改回distance = random(-10, (brush.height) * 3 / 4);并注意需要多少次迭代i才能达到height。

从美学的角度来看，也许您确实希望 Y 轴 ( i) 内部循环在退出和永远迭代之间摆动？如果是这样，您可能想考虑以视觉方式强调这一点。当前，随着每次重复发生，最新的图像i将被绘制在围绕该i位置渲染的任何先前图像的顶部（删除它的历史记录）。

可能有多种选择，但这里有两种简单的方法：

1. using blendMode()：这些与 Photoshop 中的图层混合模式非常相似。在这种情况下DIFFERENCE，EXCLUSION和REPLACE（如果您的 png 具有 alpha 通道）。
2. 用于tint()添加透明度（例如tint(255, 32);，这将设置 32/255 不透明度 (%12.5)）

致电后应该很容易做到这一点size()：

  size(1000, 800);
  background(255);
  blendMode(EXCLUSION);

并产生更多故障外观：

只需使用：

  size(1000, 800);
  background(255);
  tint(255, 32);

会产生类似的东西：

我添加了一个较小的 x 偏移量，因此列居中：

PImage brush;

void setup() {

  size(1000, 800);
  background(255);
  tint(255, 32);

  brush = loadImage("uHrk2.jpg");

  //load the file verticalOrganic from data. this is our "brush head".
  

  float i;
  float j;
  float distance;
  brush.resize(14, 0);
  println(brush.height);

  int iCount = 0;
  
  int offsetX = width / 10;
  
  for (j = 0; j < width; j += width / 5) { //this should create five rows, by updating j by 1/5 of 1000
    for (i = 0; i < height; i += distance) {  //distance determines the new position of the brush going down
      //the column.
      image(brush, offsetX + j, i);  //when j updates, it should create a new column....should.

      distance = random(-10, (brush.height) * 3 / 4);
      iCount++;
    }

    println(iCount, "i iterations, column index", j, "FINISHED"); //i thought what may be wrong was that j was not updating, so this tests that.
    iCount = 0;
  }


  save("fade.jpg");
}

请注意i来回移动的区域（由于负值distance）如何变得更暗。如果您要切换到distance = random(-10, (brush.height) * 3 / 4);较暗的区域：