Генерация изображений с random patterns

285

08 декабря 2017, 02:30

Я пытался создать специальный random pattern.
Например, случайные черные точки, как на рисунке:

Однако, мне необходимо гораздо большее изображение, чем на рисунке, с 100 000 точек / кругов.
В принципе, никаких проблем, но SVG с несколькими МБ становится слишком большим, чтобы открыть его, например, с помощью Inkscape, потому что каждый круг нарисован индивидуально.
Принимаю любые идеи, как это может быть реализовано лучше, чтобы получить в результате меньший файл. Я уже пробовал с pattern. Проблема в том, что это должен быть по-настоящему случайный, неповторяюшийся шаблон.

Не нужно это делать с точками, которые могут также выглядеть:

Источник:

Answer 1

Можно его сочетать из меньших повторяющихся кусков, я имею ввиду не просто одинаковые квадраты, а большие области которые пересекаясь накладываются друг на друга, а значит общее число точек для сохранения уменьшается. Но не уверен что это спасёт Inscape, так как он может виснуть и значительно на меньших изображениях.

Поясню, всего может быть например 100 случайных линий (фрагментов), но за счёт их случайного расположения на холсте и повторения картинка будет полностью рандомной и не иметь повторяющегося паттерна.

Я делал концентрические круги на Inscape и их было порядка 30, и при этом программа дико тормозила... возможно просто нужно другой редактор использовать и это решит проблему.

UPD:

Можно варьировать количество патернов (одинаковых), их размер, количество каждого в общей картинке. Так же изменение масштаба при наложении каждого отдельного паттерна на общую картинку. В примере используется два паттерна, и различными вращениями и положением из них собирается общая картинка. Для вашей задачи разных паттернов может быть например 100, а использование каждого например 10-20.

В приведённом примере используется 2 паттерна и около 5 использований каждого.

Answer 2

Это что-то вроде того, что вам надо?

<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, если вы хотите, чтобы каждый раз был выбран другой pattern.

<feColorMatrix type="saturate" values="0"/> преобразует шум в greyscale

3.<feGaussianBlur result="blur" stdDeviation="2" />
размывает шаблон noisey, так что точки немного сливаются. Поэкспериментируйте с этим значением, чтобы изменить blobbiness.

Источник