使用不重复的随机模式生成图像

我一直在尝试创建一段特殊的随机模式。例如随机的黑点，像这样：使用不重复的随机模式生成图像

https://picload.org/thumbnail/riogwpll/pattern2.jpg

但是，我需要约10万点/圈更大的图像。原则上，没有任何问题，但是，带有几个MB的SVG随后会变得太大而无法打开它，例如使用Inkscape，因为每个圆圈都是单独绘制的。任何想法如何能更好地实现，从而产生更小的文件。我已经尝试了一些模式。问题是它应该是一个真正的随机的，不重复的模式。

这是没有必要用点它也可能是这样做的： [在这里输入的形象描述] [1] https://picload.org/thumbnail/riogwwdr/pattern1.jpg

的想法/建议，我很感激。

来源

2017-05-29 Oliver W

欢迎来到StackOverflow。请参考[游览]，学习问好问题stackoverflow.com/help/how-to-ask，做个[mcve]。请显示您的编码尝试。代码不应该在MB中，或者它是？ – Yunnosch

查看[Perlin动荡]（https://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement）的SVG过滤器基元。从一目了然，你的例子可以通过它来直观地实现。它的适当性可能是一个数学分析的问题。 – ccprog

看看David Dailey关于动荡的信息，了解它们是如何工作的：http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/filters2.htm –

这是你之后的事情吗？

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600"> 
 
    <defs> 
 
    <filter id="dots" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB"> 
 
     <feTurbulence baseFrequency=".1" numOctaves="1" seed="42" /> 
 
     <feColorMatrix type="saturate" values="0"/> 
 
     <feGaussianBlur result="blur" stdDeviation="2" /> 
 
     <feComponentTransfer> 
 
     <feFuncA type="discrete" tableValues="0 1 1 1 1"/> 
 
     </feComponentTransfer> 
 
    </filter> 
 
    </defs> 
 
    <rect x="0" y="0" width="600" height="600" style="fill:#888; stroke:#bbd; stroke-width:2px; filter: url(#dots)" /> 
 
</svg>

这是如何工作：

<feTurbulence baseFrequency=".1" numOctaves="1" seed="42" />产生一些随机噪声。如果您每次都想要不同的图案，请删除seed属性。
<feColorMatrix type="saturate" values="0"/>将噪声转换为灰度。
<feGaussianBlur result="blur" stdDeviation="2" />模糊noisey模式，使点合并在一起。试用这个值来改变“blobbiness”。
<feComponentTransfer>将灰度值限制为黑色或白色。

来源

2017-05-29 16:07:06

佩林噪音要小心，因为它通常以某种方式实施它在512个单位后重复。根据特征和图像大小，您呈现的技术可以生成重复图案。 – plasmacel

使用不重复的随机模式生成图像

回答

相关问题