带有处理编程的 Hitomezashi Stitch 图案

Posted 2023-04-19

【中文标题】带有处理编程的 Hitomezashi Stitch 图案

【英文标题】：Hitimezashi Stich patterns with Processing programming

【发布时间】：2022-01-23 07:50:18

【问题描述】：

我看了这个很棒的视频 https://www.youtube.com/watch?v=JbfhzlMk2eY&ab_channel=Numberphile 来自 numberphile 并想使用 Processing 重新创建它。 概念是这样的：用 2 个二进制数数组创建随机模式，第一组可以是句子中的元音和辅音，下一组可以是长数中的偶数和奇数，例如 phi。

所以我的问题是，我如何遍历我的数组，然后根据数字的结果绘制带有或不带有初始偏移的线条，首先是垂直然后是水平或其他方式。 我得到了一些，但为什么我的代码没有画出所有的垂直线？有人对这个有趣的小问题有意见吗？

fill(0);

int y = 0;
int x = 0;


size(500, 500);
background(102);
noStroke();

int name[] = 1,0,1,0,0,0,1,1,0,1,0,1,1,0,0,1,0;

int pi[]   = 3,1,4,1,5,9,2,6,5,3,5,8,9,7,3,2,3;
IntList  oddEven;
oddEven = new IntList();


for (int i = 0; i < pi.length; i++) 
     if (pi[i] % 2 == 0) 
         oddEven.append(0); 
         
         else 
            oddEven.append(1);
         
          



for(int g = 0; g < 17; g++) 

  for(int l = 0; l < 17; l++) 
        
        rect(x, y, 25, 1); 
        x+=50;

  
  if (oddEven.get(g) % 2 == 0)
  
   x=25;
   y+=25;
  
  else
    x= 0;
    y+=25;
  
  
  





for(int xxx = 0; xxx < 14; xxx++) 

  for(int l = 0; l < 3; l++) 
          
        rect(x, y, 1, 25); 
        y+=50;

  
  if (oddEven.get(xxx) % 2 == 0)
  
   x=25;
   y+=25;
  
  else
    y= 0;
    x+=25;
  
  


  [1]: https://www.youtube.com/watch?v=JbfhzlMk2eY&ab_channel=Numberphile

【问题讨论】：

在你的第二个循环中，我认为你是在增加 y 而你的意思是增加 x。

【参考方案1】：

我添加了 setup() 和 draw() 并修改了绘制垂直线的第二个循环。

int y = 0;
int x = 0;
IntList  oddEven;
int name[] = 1, 0, 1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0;
int pi[]   = 3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 8, 9, 7, 3, 2, 3;

void setup() 
  size(850, 425);
  background(102);
  //noStroke();
  fill(0);
  oddEven = new IntList();

  for (int i = 0; i < pi.length; i++) 
    if (pi[i] % 2 == 0) 
      oddEven.append(0);
     else 
      oddEven.append(1);
    
  


void draw() 
  // Horizontal lines
  for (int m = 0; m < name.length; m++) 
    for (int n = 0; n < name.length; n++) 
      rect(x, y, 25, 1); 
      x+=50;
    
    if (oddEven.get(m) % 2 == 0) 
      x=25;
      y+=25;
     else 
      x= 0;
      y+=25;
    
    

  // Vertical lines
  for (int a = 0; a < 34; a++) 
    for (int b = 0; b < 9; b++) 
      rect(x, y, 1, 25); 
      y+=50;
    
    x+=25;
    y= 0;
  

修改后的版本取消了 IntList 并改为使用两个 1 和 0 数组。第二个阵列的奇数/偶数检查也用于垂直线。该演示被修改为使用线而不是矩形进行缝合；因此，使用了两个线网格，一个用于水平针迹，一个用于垂直针迹。 XOffset为每行第一个水平针偏移的距离，yOffset为每列第一个垂直针偏移的距离；两者都是根据各自的数组值设置的。请注意，垂直针迹阵列（cols）是水平针迹阵列（行）大小的两倍，因为每个水平针迹都有两端。反之，每一列的垂直针数是行数的二分之一，因为每个垂直针连接两个水平针，并且每连接的两行之间有一个跳跃。

final int _horzRows = 17;
final int _horzCols = 17;
final int _vertRows = 8;
final int _vertCols = 34;

int rows[] = 1, 0, 1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0;
int cols[] = 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0;

int x = 0;
int y = 0;
int xOffset = 0;
int yOffset = 0;

void horzGrid(int l, int t, int stitchLength) 
  for (int j = 0; j < _horzCols; j++) 
    for (int k = 0; k < _horzRows; k++) 
      x = l + j*(stitchLength*2); // stitch + skip
      y = t + k*(stitchLength);
      if (rows[k] == 1) 
        xOffset = stitchLength;
       else 
        xOffset = 0;
      
      line(x+xOffset, y, x+xOffset + stitchLength, y);
    
  


void vertGrid(int l, int t, int stitchLength) 
  for (int m = 0; m < _vertCols; m++) 
    for (int n = 0; n < _vertRows; n++) 
      x = l + m*(stitchLength);
      y = t + n*(stitchLength*2); // stitch + skip
      if (cols[m] == 1) 
        yOffset = stitchLength;
       else 
        yOffset = 0;
      
      line(x, y+yOffset, x, y+yOffset + stitchLength);
    
  


void setup()  
  size(920, 480);
  background(255);
  strokeWeight(2);
  horzGrid(30, 40, 25);
  vertGrid(30, 40, 25);


void draw() 

【讨论】：

非常好，但是如果您想要与水平线相同的机制，它会检查 Array 的 0 或 1 并相应地偏移 rect() 坐标的开始？

参见上面的修订版。

我同意，这可能是我在第一个版本中省略了这个的原因。我认为代码需要重写。我再次查看了视频，数组所做的只是设置每行或每列中第一个水平或垂直针迹的位置。此外，垂直针迹的阵列需要是水平阵列大小的两倍；每个水平针迹都有两端。到目前为止的演示都使用了相同大小的数组，这需要更改。

参见上面的第二个修订版。

感谢您发帖并让我们了解这项技术。使用源代码可能还可以做更多事情。如果您发现它有帮助并回答了您的问题，请检查它是否是答案。