L-системы онлайн

Продолжая тему L-system, мне хотелось бы поделиться ссылками на онлайн утилиты для рисования их. В прошлом посте я уже упоминал одну такую, а сегодня сделаю небольшой обзор.

LSystemFiddle – утилита из прошлого поста. Мне она показалась очень удобной, позволяет раскрашивать разные итерации. Написана на HTML5 и имеет большой набор сразу готовых фракталов, плюс позволяет постить результаты ваших экспериментов на imgur.com. Вот например:

LSystemFiddle rocks!

lsystems – еще одна утилита для отображения L-систем. Тоже написана на HTML5 и c большим набором готовых фракталов. Не такая красивая как предыдущая, но тоже очень полезная.

lsystem – эту утилиту тоже хочу отметить. Написана она на Flash, и в принципе ее достаточно, чтобы посмотреть примитивные фракталы. Очень много настроек, но очень не удобное использование.

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

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

Posted in Фракталы | Tagged , , | 109 Comments

Снежинка Джона Ву Кима

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

snowflake

Данная снежинка в книге описывается так:

Угол поворота черепахи:PI/3
Аксиома: [F]+[F]+[F]+[F]+[F]+[F]
И всего одно правило: F = F[++F][–FF]FF[+F][–F]FF

За такую простоту, я выбрал ее для реализации логики обработки символов ‘[‘ и ‘]’. Технически ничего сложного: организовал стек, по одной команде запоминаю туда координаты и угол, по другой достаю и перенастраиваю черепаху. Но в процессе рисования у меня получается так:

snowflake bad

Вроде бы все правильно, и ошибок в реализации нет, но мне такая ситуация не понравилась. Нашел такую утилиту для онлайн L-систем. С помощью нее выяснил, что ошибка действительно в формуле, и путем недолгих трудов, мне удалось подобрать правильные значения.
Вот, на мой взгляд, правильная формулировка снежинки Снежинка Джона Ву Кима:

Угол поворота черепахи:PI/3
Аксиома: [F]+[F]+[F]+[F]+[F]+[F]
Правило: F = F[+FF][-FF]FF[+F][-F]FF

Очень жаль, что подобные опечатки присутствую в данной книге. У меня есть подозрения, их там много, так как я вначале пытался брать и другие фракталы, но они тоже выглядели не так как на рисунках. А еще грустно, то что подобная опечатка присутствует не только в книге, вот например тут точно такая же не правильная формула.

Posted in Фракталы | Tagged , | 1 Comment

Фракталы: L-Systems

Попалась под руку книга: “Фракталы и хаос в динамических системах”. Пока только начал ее читать, но сразу же захотелось применить знания из нее. В этой книге все начинается с описание L-систем. Я уже сталкивался с ними, когда-то давно. С их помощью я хотел генерировать карту, похожую на ту, которая в игре цивилизация. Тогда мне L-системы показались очень сложными, и я оставил эту идею, сделав генерацию на основе шума Перлина. Теперь же, после этой книги, L-системы, для меня, стали очень простыми. Я проникся этим и решил попробовать написать простое рисование таких фракталов.
Вот что получилось:


Tiny L-System – wonderfl build flash online


Все свелось к простой обработке строк и черепашьей графике. Если в двух словах работа алгоритма построения L-системы работает следующем образом. У вас есть начальная аксиома – это последовательность символов, которая может быть достаточно проста, но не всегда. У вас есть список правил. Их все можно описать фразой: этот символ заменить на эту последовательность. Ну и конечно у вас есть алфавит, который вы используете и в правилах и в аксиоме. Алфавит достаточно простой и может состоять из произвольного количества букв и цифр, а так же специальных знаков. Для генерации основной последовательности важны только правила. Обычно задается количество итераций, сколько раз правила применяются на строку. Вот тут, тут или тут можно почитать про это и без книги.
Вторым шагом является рисование полученной последовательности команд с помощь “Черепашей графики“. Наша черепаха обрабатывает эти команды следующим образом: F – идти в перед и рисовать, b – идти в перед и не рисовать, ‘-‘ и ‘+’ повернуть против часовой или по часовой на заданный угол, ‘[‘ – положить в стек текущие значения координат и угол направления черепашки, ‘]’ – извлечь последние координаты черепахи и угол ее поворота.
Вот так, все просто. Единственное, что смущает почему выбрали b в качестве движения вперед без рисования. Я бы выбрал для этого букву f, мне кажется так было бы понятней. Причем в некоторых формулах присутствует B – которое означает двигаться назад с рисованием. Видимо для этого было какое-то логично объяснение.

Posted in Фракталы | Tagged , , | Leave a comment

Первый барьер

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

Posted in Мысли | Leave a comment

Уроки по PixelArt

Разбираюсь с уроками по PixelArt. Накопал их много из подборок ссылок см. тут и тут. И сегодня я хочу сделать небольшой обзор тех ссылок что у меня набрались. Прорабатывать я их буду чуть позже, а сегодня так скажем – беглый взгляд.

Итак начнем:

Gas13 – самое на мой взгляд классическое. Я находил эти уроки еще много лет назад, когда меня в первые посещали мысли освоить данный метод рисования.

Вот еще очень древние, но довольно интересные уроки.

Очень интересные уроки попались на deviantart. Они оформлены как длинные картинки, но мне кажутся они очень полезными. Вот еще похожие – и еще. И еще В целом мне такие уроки нравятся больше всего.

Вот интересный урок, мене очень понравился, все довольно подробно.
Этот урок. Мне он показался интересным, хотя в подробности я не вчитывался, но урок очень хорошо показывает, как делать анимацию.

Мега урок для профессионалов, видимо – http://www.drububu.com/tutorial/

Еще есть класс уроков, которые вроде бы простые, но после них возникает очень странное чувство… все, что в них объясняется с виду довольно просто, но для меня переход между некоторыми шагами не совсем очевидный. Вот примеры таких уроков: раз, два и три. Можно было бы привести еще таких примеров, но не буду. Так как до их адекватного восприятия мне надо еще, видимо, дорасти.

В процессе разбирания подборок ссылок на уроки, набрел на еще большие подборки. Просто приведу ссылки на них: огромная подборка ссылок, вот еще и еще.

Скорее всего я проработаю сначала те уроки, что привел тут. А потом уже буду разбираться с новыми подборками.

Posted in pixelart | Tagged , , | Leave a comment

На чем рисовать PixelArt в Ubuntu 2

Посмотрел еще несколько редакторов для создания PixelArt-а. Тут кратко напишу свое мнение об тех которые посмотрел:

Кrita – есть в реппозитории Ubuntu. Очень интересный редактор, но он больше для простого рисования. Хотя можно изловчиться и делать на нем PixelArt, но картины должны на нем получаться очень крутые.

Pencil – тоже есть в реппозитории. Интересный тем, что позволяет рисовать анимации по кадрам. Может рисовать вектор. Соответственно выгонять это в sheets последовательности картинок или даже во Flash. Думаю я найду ему применение.

Aseprite – очень знакомый кажется я его видел где-то на LudumDare. OpenSource. Лежит на github. Сам редактор выполнен в стиле PixelArt, видимо для олдсульных художников. Я не стал пробовать, так как нет в реппозитории, а из предложенных deb-ов у меня ничего в встало.

grafx2 – тоже выполненная в дизайне старого приложения. Есть в реппозитории Ubuntu, но надо смотреть уроки или долго сидеть и разбираться. Я в этом интерфейсе мало чего понимаю.

TinySprite – Вот это классная вещь. Online. Хотя, как я понял, практической пользы наверное не много, так как позволяет делать спрайты только под MSX. Зато умеет выдавать код спрайтов на Basic-е 🙂

Picssel-art – тоже online. Позволяет сделать PixelArt рисунок и сразу получить его код на CSS. Это очень интересно, думаю это можно попробовать применить в оформлении того же блога.

Pixel-Editor – online, нарисовал и сразу скачал. Особенно понравился инструмент симметрии. Я в других редакторах подобные видел, но он тут выделен в отдельный, что очень интересно.

В итоге: Нашел себе на будущее пару интересных инструментов, но именно на будущее. А сейчас остаюсь на GIMP, настроил его как полагается и теперь тренируюсь. К сожалению, использовать что-то сложнее я пока не могу.

Да, вот еще одна отличная подборка ссылок на редакторы и уроки по PixelArt.

Posted in pixelart | Tagged , , , | Leave a comment

Проба IntelliJ Idea для разработки Flash

После пробы веб интерфейса Wonderfl.net. Появилось стойкое желание настроить себе ActionScript разработку на своем Ubuntu. Хотелось именно IDE, на не какой-нибудь самопал из блокнота, скриптов и SDK. Начал искать, и оказалось выбор под Linux не очень большой. Это либо IntelliJ Idea, либо FDT. Оба платные. Idea, есть бесплатный вариант, но там нет разработки под Flash. FDT продается по подписке, что для меня необычно.
До FDT, собственно, я так и не добрался – поставил себе Idea и мне понравилось. У меня пока trial на 30 дней, дальше посмотрим. Оказалось, что из коробки там так же есть разработка и под Android. Она, кстати, не такая тормозная как, была когда-то, не смотря на то, что ноутбук у меня довольно слабый. Хотя, конечно, может дело в Linux.
После Idea чего-то другого не захотелось ставить и я решил сразу попробовать ее в деле переписал свой Pacman Proto. Поменял там графический вывод, и сделал другое перемещение.
Получилось следующее:

Pacman Proto 2 – wonderfl build flash online

Видео процесса создания:

Выводы: Хотя я и не использовал далеко не всю мощь Idea, она безусловно выигрывает по сравнению с веб редактором. Хотя тут приходится ждать когда swf собереться, и откроется браузер. Но мне в любом случае разработка с помощью нее показалась значительно быстрее.

На будущее для себя: разобраться с debug версией flash проигрывателя. Ее надо как-то поставить, а то я не вижу trace-ы и debugger не может подключиться.

Posted in ActionScript | Tagged , , , , , | Leave a comment

На чем рисовать PixelArt в Ubuntu

Начал разбираться на чем же можно рисовать PixelArt. Оказалось, что существует огромное множество редакторов, как специально заточеных под PixelArt, так и которые можно для этого настроит.

Вот очень хорошая подборка. Я как раз её сейчас изучаю. В ней оказались не только ссылки на редакторы, но огромное множество Tutorial-ов. И ссылки на плейлисты с видео уроками. Меня правда огорчает, что большинство видео уроков представляют из себя просто timelapse видео: о том как кто-то что-то рисует. Без комментариев и объяснений. Хотя может я чего не понимаю и это действительно самые настоящие уроки для тру художников, но видимо я еще до такого уровня не дорос.

Из редакторов успел посмотреть пока не так много:

  • mtpaint – напоминает простой paint. С открытым исходным кодом. Но по мне так больно навороченный и не привычный. Использовать не стал.
  • pinta – очень похож на Paint.net, так как является его портом. Довольно удобный, но мне он тоже не подошел. Хотя я может быть к нему еще вернусь.
  • piq – очень понравился, тем что он онлайн. Видео по нему можно посмотреть тут.
  • gimp – да старый добрый gimp. И как ни странно, я пока на нем остановился. Может быть я конечно к нему привык, а может он действительно удобный. Правда, чтобы легче было делать в нем PixelArt, его надо настроить. Хорошая текстовая инструкция тут или можно посмотреть видео урок.

Думаю я на этом не остановлюсь и попробую еще редакторы, но пока я думаю будет полезнее начать осваивать уроки.

Posted in pixelart | Tagged , , , | Leave a comment

Проба Wonderfl или тряхнуть стариной

Периодически, чтобы не потерять навыки, я стараюсь писать на ActionScript. И сейчас, чтобы поддержать эту традицию и я решил очень быстро накидать прототип игры Pacman. Что бы было понятно какие сложности могут возникнуть, и за одно продумать архитектуру.

На Windows я обычно использую FlashDevelop, но сейчас я использую Ubuntu. Я не хотел много времени тратить на разбирательство, что сейчас используют для создания Flash под Linux. Да и в консоли с SDK, тоже ковыряться не было желания. Подумав, я вспомнил, про wonderFL.net. Этот сервис позволяет писать ActionScript прямо в браузере и тут же видеть результат компиляции. В интернете есть много таких сервисов, но что-то на вскидку я не смог вспомнить другие. Да и это сервис заточен чисто под ActionScript, поэтому я решил использовать именно его.

Получилось замечательно:

Pacman Proto – wonderfl build flash online

Были правда и проблемы. Иногда переставал работать копи-паст. Для этого приходилось перезагружать страницу и как результат, иногда пропадала часть написанного кода. Скролл не получалось использовать, он очень часто перепрыгивает обратно к курсору. Выделение мышкой довольно часто приводило к удалению выделенного куска.

Но в остальном просто замечательно! Я даже не ожидал, что будут такие замечательные сниппеты. Очень удобная концепция написал и сразу увидел результат. Автоматическое добавление import-ов. Конечно это не FlashDevelop, но очень близко, и на скорую руку и без необходимости ставить что-то на свою машину – этот сервис очень хорош.

Кстати, небольшое timelapse видео моей работы:

Posted in ActionScript | Tagged , , , | Leave a comment

Отображение PixelArt стиля в Cocos2d-x

Начал создавать графику для своей игры. И так как я пока выбрал стиль pixelart. Решил рисовать небольшие картинки и потом их в игре растягивать до необходимого размера. Сделав пробный рисунок размером 100х60, с удивлением обнаружил, что при растягивании его в 8 раз, до 800х480. Весь рисунок превращается в мыло. Примерно так:
Screenshot from 2013-08-08 21:20:48

Вроде бы не критично, но если рисовать детализированные спрайты, и при условии достаточно большого увеличения, все это начинает смотреться отвратительно. Стал искать и оказалось, что у спрайтов поумолчанию включен антиалиасинг. И его надо принудительно отключать, чтоб не размывало картинку, когда мы ее увеличиваем.

Вот тут можно почитать подробнее.

Применительно к cocos2d-x это выглядит так:

pSprite->getTexture()->setAliasTexParameters();
pSprite->setScale(8);

В результате, получаются очень четкие, хорошо видные пиксели:
Screenshot from 2013-08-08 21:21:16

Posted in cocos2d-x | Tagged , , , , , | Leave a comment