Как я рисую облака? - PullRequest
Новая
       42

Как я рисую облака?

5 голосов
/ 05 июля 2010

Мне нужен алгоритм для рисования облаков или облачных фигур. Очевидно, я бы не хотел, чтобы все они были похожи.
Что я должен использовать для генерации соответствующих серий координат X, Y для рисования облаков?
Я собираюсь реализовать это либо в SVG или Canvas

Ответы [ 7 ]

11 голосов
/ 05 июля 2010

Это зависит от того, какие именно облака вы собираетесь. Вы можете попробовать Perlin noise , который довольно популярен среди разработчиков игр.

4 голосов
/ 05 июля 2010

Вы можете использовать примитив фильтра SVG feTurbulence для генерации шума Перлина, который можно использовать для создания облачных текстур.

Некоторая помощь и примеры:

В векторном графическом редакторе Inkscape также имеется большая коллекция предопределенных фильтров svg, см. здесь , для примера , использующего лишь несколько из них для текста , «Заполнение шума» использует feTurbulence, и, вероятно, его легко настроить. Inkscape также имеет графический интерфейс для настройки параметров каждого фильтра, выберите любую фигуру, затем выберите «Фильтр> Редактор фильтров ...» в меню.

3 голосов
/ 05 июля 2010

Чтобы подарить своим деревьям друзей, нарисуйте много счастливых маленьких несчастных случаев.

Я рекомендую холст - вы можете сойти с ума с помощью кисти!

Я бы хотел пожелать вам счастливой живописи, иБоже, благослови моего друга.

2 голосов
/ 05 июля 2010

Вот пример шума Перлина, созданного с помощью silverlight: http://kodierer.blogspot.com/2009/05/oscar-algorithm-silverlight-real-time.html

это, вероятно, то, что вы можете использовать и / или адаптировать.

0 голосов
/ 09 июля 2010

Создайте группу пузырьков (кругов или горизонтальных эллипсов) и возьмите объединение форм для каждого облака.

0 голосов
/ 09 июля 2010

этот код делает кучу кругов в массиве цветов, может быть, он поможет вам с облаками 

    for (var i = 0; i < 12; i++)
    {
      for (var j = 0; j < 12; j++)
      {
        var ctx = document.getElementById('c1').getContext('2d');
        ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + 
        Math.floor(255 - 42.5 * j) + ')';
        ctx.beginPath();
        ctx.arc(40 + j * 25, 40 + i * 25, 10, 0, Math.PI * 2, true);
        ctx.stroke();
       }
     }
0 голосов
/ 05 июля 2010

Если вы реализуете на холсте и хотите, чтобы форма пухлого облака не была шумовой, я бы сказал, нарисуйте прямоугольник произвольной длины, а затем добавьте круги разного размера сначала по сторонам, а затем к вершине, чтобы получить эффект облака.Вы должны были бы сделать некоторую математику, чтобы удостовериться, что облака не показывались ниже прямоугольника и что у вершины прямоугольника не было никаких прямых секций.Но это не должно быть трудно реализовать в canvas.

...