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

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.
    }

}

这是刷头的文件/(if you want to use it, you will have to change it to png. because imgur.)

Answer 1

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

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

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

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

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

当您应用 distance 作为循环增量 (i += distance) 时，这意味着您可以向错误的方向移动（distance 将从 i 中减去而不是添加）它要么你会超过相同的 i 值，要么更糟糕的是可能会卡住永远不会退出循环，因为 i 的小值（甚至是负值）永远不会满足循环退出条件：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 位置周围渲染的任何先前图像之上（擦除其历史记录）。

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

使用 blendMode()：这些与 Photoshop 中的图层混合模式非常相似。在这种情况下 DIFFERENCE、EXCLUSION 和 REPLACE（如果你的 png 有一个 alpha 通道）。
使用 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);，那么较暗的区域会更少：

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

How do i make multiple columns of lines using a loaded image in Processing?

java

processing

for-loop