Javascript 二维无限循环元素数组

目标：

其想法是创建一个元素网格（例如图像库），它将在两个轴上无限循环滚动。 不应该有洞，也不应该有太多的随机性（避免同一个元素从自身随机掉落）。不管有多少元素在第一位（似乎很容易无限循环通过16（4*4）个元素的网格，而不是超过17（17*1）个）

所以我发现了一个很好的例子：

它实际上比我想象的更接近（可能更好）。现在它使用canvas，我试着查看javascript，它是一个30000行的小脚本，所以我真的看不懂它背后的任何核心逻辑

---

---

数学方面/问题解决：

这是问题背后的逻辑和理论，涉及的数学和心态。 程序应该如何处理元素列表，这样我们就没有孔、无限网格、所有轴上元素的最佳重新分区

我的猜测是，它必须是程序化的。我不确定我们是否应该在每个轴上创建网格或循环列表（有点像数独？我不知道）

---

---

实践方面/UI/UX:

关于所涉及的技术和代码的任何建议。我猜经典DOM已经过时了，canvas或2D webgl将是强制性的。但我很乐意听到这方面的任何建议

除了网格处理的所有元素之外，在DOM或renderer中探索2D无限或巨大布局所涉及的UI和UX在某种程度上并不经典。最好的技术或建议是值得欢迎的

---

---

示例：

我欢迎任何与此问题有共同点的工作示例。

我已经设置了一个用于排列2d网格的示例

它通过使用水平和垂直的“步长”来工作。因此，在网格中向右移动一步会提高列表中的水平步长。向下移动一步会提高列表中的垂直步长（并且它们会累积）

当到达终点时，我们允许列表中的前进循环回零

使用1的水平步长可能是有意义的（因此网格中的一行将保持列表顺序）。对于垂直步长，您需要一个与列表长度不共享公约数的整数。虽然不能保证，但我使用了列表长度的（四舍五入）平方根，这在很多情况下都适用

我将在这里复制小提琴：

var list=[‘红色’、‘绿色’、‘蓝色’、‘青色’、‘橙色’、‘黄色’、‘粉色’]；
var-hstep=1；
var-vstep=Math.ceil（Math.sqrt（list.length））；
函数getListItem（x，y）{
var指数=x*hstep+y*vstep；
返回列表[索引%list.length]；
}
var-elementSize=30；
var gutterSize=10；
函数getOffset（x，y）{
返回[10+（elementSize+gutterSize）*x，10+（elementSize+gutterSize）*y]；
}
var frame=$（'.frame'）；
函数（x，y）{
var listItem=getListItem（x，y）；
var offset=getOffset（x，y）；
var element=$（''）.addClass（'element'）.css({
左：偏移量[0]+“px”，
顶部：偏移量[1]+“px”，
“背景色”：列表项
});
追加（元素）；
}
函数元素（）{
变量x=0，y=0；
而（10+（elementSize+gutterSize）*x

.frame{
边框：2件纯黑；
利润率：40px自动；
高度：300px；
宽度：300px；
位置：相对位置；
溢出：隐藏；
}
.框架.元素{
位置：绝对位置；
宽度：30px；
高度：30px；
}
.按钮{
位置：绝对位置；
顶部：0px；
宽度：100%；
}
.按钮{
位置：绝对位置；
宽度：30px；
高度：30px；
填充物：5px；
}
button.up{top:0px；left:46%；}
button.down{top:355px；left:46%；}
button.left{top:160px；left:15px；}
button.right{top:160px；right:15px；}

&uarr；
&达尔；
&larr；
&rarr；

@arbuthnott我编辑了你的代码，通过递减relativeX和relativeY变量来实现探索。我还插入了一个“origin”div（1x1 px，溢出可见）。这个DOM元素将代表X和Y原点。我不确定这是否必要，但它非常方便

现在，我的函数当前删除所有元素，并在每次更新时重新插入所有元素（目前每500毫秒一次）

理想的方法是找到一种方法来比较我需要的元素和已经存在的元素。 可能将现有元素存储到一个数组中，并将该数组与“查询”数组进行比较。然后只查看缺少的元素

这是理想，不确定实现（我在处理数组方面很差劲）

var源=[“红色”、“绿色”、“蓝色”、“青色”、“橙色”、“黄色”、“粉色”、“紫色”]；
变量frame=$（'.frame'），
原产地=$（'.origin'）；
var fWidth=600，
FHheight=300，
srcTotal=sources.length，
srcSquare=Math.ceil（Math.sqrt（srctall）），
rX=0，
rY=0；
var gridSize=30，
排水沟尺寸=5，
elementSize=gridSize-gutterSize；
函数getSourceItem（x，y）{
var指数=x+y*srcSquare；
返回源[Math.abs（索引）%srcTotal]；
}
函数getOffset（x，y）{
返回[gridSize*x，gridSize*y]；
}
函数（x，y）{
var sourceItem=getSourceItem（x，y）；
var offset=getOffset（x，y）；
var element=$（''）.addClass（'element'）.css({
左：偏移量[0]+“px”，
顶部：偏移量[1]+“px”，
“背景色”：sourceItem，
});
来源.附加（元素）；
}
函数init（）{
变量x=0，y=0；
while（网格大小*x