如何使用 Processing 中加载的图像制作多列行？

如何解决如何使用 Processing 中加载的图像制作多列行？

我在处理中制作了一个代码，从数据上传图像并使用该图像在处理中制作一条线，有点像如何在 photoshop 中使用有机外观画笔，除了我希望程序绘制给我排队。

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

这是代码。

- orphaned lock
- locked
- lock

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

解决方法

我的预感是使用 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","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 需要多少次迭代才能达到 {{1 }}。

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

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

使用 blendMode()：这些与 Photoshop 中的图层混合模式非常相似。在本例中，i、DIFFERENCE 和 EXCLUSION（如果您的 png 具有 alpha 通道）。
使用 tint() 添加透明度（例如 REPLACE 这将设置 32/255 不透明度 (%12.5)）

这在您调用 tint(255,32); 后应该很容易做到：

size()

并产生更故障的外观：

简单地使用：

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

会产生类似：

我添加了一个较小的 x 偏移，以便列居中：

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

注意 PImage brush; void setup() { size(1000,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,it should create a new column....should. distance = random(-10,(brush.height) * 3 / 4); iCount++; } println(iCount,so this tests that. iCount = 0; } save("fade.jpg"); } 来回移动的区域（由于 i 负值）如何变得更暗。如果您要切换到 distance，那么深色区域会减少：