gd.js

{
  _id: "y3iK3rSwwHTSmQ5Sh",
  createdAt: 1403426169619,
  description: "Русско-британский институт управления, 24 июня 2014",
  show: "all",
  slides: [
    {
      class: "cover shout",
      code: "<img src=\"http://www.creativeapplications.net/wp-content/uploads/2009/09/snail00.png\" alt=\"\">\r\n\r\n## <a style=\"color: #fff;;\" href=\"http://sho.io/gd\">sho.io/gd</a>\r\n\r\n<p class=\"title place t\">Презентация на вашем устройстве</p>\r\n\r\n<p class=\"comment place b r\"><a href=\"http://www.creativeapplications.net/processing/the-snail-on-the-slope-processing\">Image from 'The Snail on the Slope'</a>, by Vladimir Todorović, Processing</p>\r\n\r\n<style>\r\n\t.half {\r\n\t\twidth: 50%;\r\n\t}\r\n\tp {\r\n\t\twidth: 80%;\r\n\t\tline-height: 140%;\r\n\t}\r\n\t.white {\r\n\t\tcolor: #fff;\r\n\t}\r\n\r\n\t.smallcapitals {\r\n\t\tfont-size: .875em;\r\n\t\tletter-spacing: .15em;\r\n\t\tmargin-right: -.15em;\r\n\t  }\r\n\r\n\t.overbox {\r\n\t\tpadding: 0 1em;\r\n\t\tcolor: #f0f0f0;\r\n\t\tbackground-color: rgba(0, 0, 0, 0.8);\r\n\t\twidth: auto;\r\n\t}\r\n\r\n\t.comment {\r\n\t\tpadding: 0.2em 1em;\r\n\t\tcolor: rgba(0, 0, 0, 0.8);\r\n\t\tfont-size: 60%;\r\n\t\tbackground-color: rgba(255, 255, 255, 0.8);\r\n\t\twidth: auto;\r\n\t}\r\n\r\n\t.title {\r\n\t\tpadding: 6em 2em 1em;\r\n\t\ttext-aligh: center;\r\n\t\tcolor: rgba(255, 255, 255, 0.8);\r\n\t\tbackground-color: rgba(0, 0, 0, 0.8);\r\n\t\twidth: auto;\r\n\t}\r\n</style>",
      first: false,
      i: 1,
      last: false,
      no: 2
    },
    {
      class: "cover",
      code: "<img src=\"https://farm4.staticflickr.com/3482/3934375722_911153689b_o.png\" alt=\"\">\r\n<h2 style=\"color: #000;\"><span class=\"smallcapitals\">ДИЗАЙН:</span> генеративный / вычислительный / алгоритмический</h2>\r\n\r\n* Что это?\r\n* Когда помогает?\r\n* Как взять в союзники?"
    },
    {
      class: "cover",
      code: "<img src=\"http://alwayssurfing.com/wp-content/uploads/2013/06/mybg3.jpg\" alt=\"\">\r\n\r\n<h2 style=\"color: #fff; width: 50%;\">Что обычно представляется при&nbsp;упоминании о&nbsp;генеративном дизайне?</h2>\r\n"
    },
    {
      class: "cover",
      code: "<img src=\"http://d.pr/i/CnwW+\" alt=\"Computation design \">\r\n\r\n<p class=\"overbox place t l\">«Какая-то модная архитектура»</p>\r\n<p class=\"comment place b r\">Гугл-картинки по запросам ‘computational design’\r\n\r\n"
    },
    {
      class: "cover",
      code: "<img src=\"http://d.pr/i/kmko+\" alt=\"Генеративный дизайн\">\r\n\r\n<p class=\"overbox place t l\">Или симуляция природных структур...</p>\r\n\r\n<p class=\"comment place b r\">Гугл-картинки по запросу ‘generative nature forms’</p>\r\n\r\n"
    },
    {
      class: "cover",
      code: "<img src=\"http://d.pr/i/9wFx+\" alt=\"Генерация природных форм\">\r\n\r\n<p class=\"overbox place t l\">...и форм,</p>\r\n\r\n<p class=\"comment place b r\">Гугл-картинки по запросу ‘generative nature forms’</p>\r\n"
    },
    {
      class: "cover",
      code: "<img src=\"http://d.pr/i/CS8g+\" alt=\"\">\r\n\r\n<p class=\"overbox place t l\">...текстуры и абстракщина.</p>\r\n\r\n<p class=\"comment place b r\"><a href=\"https://www.flickr.com/photos/martinlatter/with/5575999543/\">Flickr of Martin</a></p>"
    },
    {
      class: "cover",
      code: "<img src=\"https://farm3.staticflickr.com/2445/3934475952_224c753280_o.png\" alt=\"\">\r\n\r\n<h2 style=\"width: 50%;\">Разбираться что же это такое и&nbsp;как применять будем на&nbsp;примерах</h2>",
      first: false,
      i: 8,
      last: false,
      no: 9
    },
    {
      class: "",
      code: "<div class=\"right\" style=\"padding: 1em 0 0 1.5em;\">\r\n<h2>«Алгоритм»</h2>\r\n\r\n<p><a href=\"https://www.behance.net/gallery/Radiolarians-(Ilustrator-tutorial)/3531797\">Вот урок</a> о&nbsp;том, как рисовать прекрасные радиолярии в&nbsp;Иллюстраторе.</p>\r\n</div>\r\n\r\n<img  class=\"place l t\" src=\"https://m1.behance.net/rendition/modules/27338327/disp/d2d736d759dc441393a223dcee880436.png\" alt=\"\">\r\n\r\n\r\n<style>\r\n\t.right {\r\n\t\twidth: 40%;\r\n\t\tmargin-left: 60%;\r\n\t}\r\n\t.right p {\r\n\t\tline-height: 150%;\r\n\t}\r\n\r\n</style>"
    },
    {
      class: "",
      code: "Пример красивый. Но&nbsp;что характерно.\r\n\r\nМы видим алгоритм, пошаговую инструкцию. Если нужна немного другая радиолярия, путь приходится повторять заново.\r\n"
    },
    {
      class: "",
      code: "<img src=\"http://d.pr/i/NVIc+\" alt=\"\">\r\n\r\nПопробуем руками. Представим, что мы захотели нарисовать круглый стикер с волнистым краем. \r\n"
    },
    {
      class: "",
      code: "<img src=\"http://d.pr/i/UjtU+\" alt=\"\">\r\n\r\nВыбираем инструмент и модель: Иллюстратор Апиренс,  скруглить звезду.\r\n"
    },
    {
      class: "",
      code: "<img src=\"http://d.pr/i/FdKk+\" alt=\"\">\r\n\r\nВидим, например, что нужно менять количество вершин и внутренний радиус. С выбранной связкой инструмент&nbsp;— модель придётся начинать с начала.\r\n"
    },
    {
      class: "",
      code: "<div style=\"float: left; height: 50em;\"><img src=\"http://nodebox.net/media/homepage/xNB3iconoutlineonly.png.pagespeed.ic.YSDVXnFzwt.png\" alt=\"\" /></div>\r\n\r\n<div>\r\n<p>&nbsp;</p>\r\n<p>Попробуем сделать тоже самое в&nbsp;<a href=\"http://nodebox.net/node/\">Нодбокс 3</a>.</p>\r\n\r\n<p>Нодбокс 3 — комплекс для алгоритмической графики на&nbsp;основе блок-схем. Код писать не&nbsp;нужно, только расставлять кубы в&nbsp;нужном порядке и&nbsp;крутить параметры.\r\n</p>\r\n\r\n</div>"
    },
    {
      class: "cover",
      code: "<img src=\"http://d.pr/i/IPwy+\" alt=\"\">"
    },
    {
      class: "",
      code: "<img src=\"http://d.pr/i/Lsan+\" alt=\"\">\r\nСоздав цепь настраиваемых блоков в Нодбокс, мы построили\r\n<mark>инструмент</mark> рисования стикера. \r\n<p class=\"note\"><a href=\"https://www.dropbox.com/s/q8xlfh5l95x45bu/01-wavy-circle.ndbx\">Файл с примером</a> в формате Nodebox 3</p>"
    },
    {
      class: "",
      code: "<ul>Самое ценное здесь:\r\n<li><mark>мгновенно</mark> видеть результат при изменении параметров,</li>\r\n\t<li>видеть *труднопредставимые заранее* варианты решений, благодаря случайности</li>\r\n</ul><img src=\"http://d.pr/i/mNYY+\" alt=\"\">"
    },
    {
      class: "",
      code: "Новый инструмент уместно строить при большом объёме или часто сменяющихся данных и одинаковой схеме вывода.\r\n\r\nЦель — <mark>экономия времени</mark> на перестроения, дерутинизация"
    },
    {
      class: "shout grow",
      code: "## Дерутинизация"
    },
    {
      class: "",
      code: "Иван Пухкал, <a href=\"http://ivanpoukhkal.ru/blog/all/vizovaya-statistika-2003-2012/\">Визовая статистика стран 2003—2012</a>, Processing\r\n\r\n<img src=\"http://d.pr/i/LSKB+\" alt=\"\">\r\n"
    },
    {
      class: "",
      code: "Для  регулярных отчётов, листовок с часто изменяющимися данными.\r\n\r\n<img src=\"http://d.pr/i/Y5en+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">График доходности робота CIT Arbitrage для рекламной брошюры</p>"
    },
    {
      class: "cover white",
      code: "<img src=\"http://auroraplatform.com/img/background.png\" alt=\"\">\r\n\r\n<div class=\"right\">\r\n<h2 style=\"color: #fff;\">Аврора</h2>\r\n<p>Визуализация изменения цены ценных бумаг, Nodebox 1</p>\r\n<p style=\"font-size: 80%;\">Интерфейс торгового терминала <a href=\"http://auroraplatform.com/home.php\">«Аврора»,</a> Андрей&nbsp;Шапиро и&nbsp;Дмитрий&nbsp;Тростин.</p>\r\n</div>"
    },
    {
      class: "cover h white",
      code: "<!-- img src=\"http://d.pr/i/Sp4y+\" alt=\"\" -->\r\n<img src=\"http://d.pr/i/k9xb+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Графики строились в Нодбокс1</p>\r\n\r\n<style>\r\n\t.onblack {\r\n\t\tpadding: 1em 2em 2em 1em;\r\n\t\tcolor: rgba(255, 255, 255, 0.9);\r\n\t\tbackground-color: rgba(0, 0, 0, 0.8);\r\n\t}\r\n\t\r\n</style>"
    },
    {
      class: "cover h",
      code: "<img src=\"http://d.pr/i/CKdD+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Данные брались с сайта alor.ru</p>"
    },
    {
      class: "cover h",
      code: "<img src=\"http://d.pr/i/VVf3+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Данные брались с сайта alor.ru</p>\r\n"
    },
    {
      class: "cover h",
      code: "<img src=\"http://d.pr/i/D59Z+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Эксперимент на трешовость цветов на реальных данных</p>"
    },
    {
      class: "cover h",
      code: "<img src=\"http://d.pr/i/fwus+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Cистема водяных знаков на основе масок штампов, поворачиваемых на разные углы</p>"
    },
    {
      class: "shout grow",
      code: "## Для графики и&nbsp;анимации"
    },
    {
      class: "",
      code: "## <a href=\"http://www.youtube.com/watch?v=jYxZVKt0wV8\">Генеративные смайлы,</a> Процессинг\r\nБесконечное число образов из&nbsp;произвольного шрифта и&nbsp;схемы «лица»\r\n\r\n<img src=\"http://d.pr/i/cFhx+\" alt=\"\" align=\"right\"><pre><code><strong>глаза:</strong> 8 : |\r\n<strong>носы:</strong> * · - —\r\n<strong>рты:</strong> { / ( ] }\r\n</code></pre>"
    },
    {
      class: "cover w",
      code: "<img src=\"http://d.pr/i/yMJG+\" alt=\"\">\r\n<p class=\"comment place b r \">Score board #design1o1</p>"
    },
    {
      class: "cover white",
      code: "Векторные спрайты прелоадер Аврора. <br>Андрей Шапиро и Николай Аникеев, Nodebox 1\r\n\r\n<img src=\"http://d.pr/i/wrB8+\" alt=\"\">\r\n"
    },
    {
      class: "cover h",
      code: "<img src=\"http://d.pr/i/ghj7+\" alt=\"\">\r\n<p class=\"comment place b r \">А пусть индикатором ожидания при подгрузке данных<br> будет Аврора Бореалис</p>"
    },
    {
      class: "",
      code: "Сделали мешами, узнали, что разработчикам нужно в&nbsp;СВГ, а&nbsp;он меш не&nbsp;поддерживает\r\n<img style=\"margin-left: 4em;\" class=\"place l\" src=\"http://d.pr/i/2X85+\" alt=\"\">\r\n<img style=\"margin-right: 6em;\" class=\"place r\" src=\"http://d.pr/i/QILQ+\" alt=\"\">"
    },
    {
      class: "",
      code: "<img src=\"http://d.pr/i/9PU2+\" alt=\"\" style=\"margin-right: 2em; float: left;\">\r\nКроме того, эффект подошёл для диалога подтвердения запуска опасной команды\r\n\r\nЗорьку требовалось подкладывать под кнопку.\r\n"
    },
    {
      class: "cover h",
      code: "<img src=\"http://d.pr/i/94ay+\" alt=\"\">"
    },
    {
      class: "",
      code: "## Афиша этого воркшопа\r\n<img src=\"http://d.pr/i/g2fA+\" alt=\"\">"
    },
    {
      class: "cover w",
      code: "<img src=\"http://d.pr/i/Nny6+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\"><a href=\"http://uk.wikipedia.org/wiki/Суперформула\">Суперформула</a> — обощённая формула овала</p>"
    },
    {
      class: "",
      code: "<img src=\"http://d.pr/i/MNsX+\" alt=\"\">"
    },
    {
      class: "cover w",
      code: "<img src=\"http://d.pr/i/bQ2N+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Эта афиша сделана полностью в Nodebox 1. Никаких других графических редакторо. Исходный файл — 6 KB</p>"
    },
    {
      class: "cover w shout white",
      code: "<img src=\"https://farm3.staticflickr.com/2645/3934387570_58db8c2096_o.png\" alt=\"\">\r\n<h2 style=\"color: rgba(255, 255, 255, 0.4); letter-spacing: 0.05em;\">перерыв</h2>"
    },
    {
      class: "shout grow",
      code: "## Исследования, инфографика\r\n\r\n"
    },
    {
      class: "",
      code: "## Фильмы на плоскости рейтинг—год, Процессинг\r\n\r\n<img src=\"http://d.pr/i/dsYe+\" width=\"100%\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Задача — проверить будет ли интересно выбирать «соседа» по расположению плоскости</p>"
    },
    {
      class: "cover w",
      code: "<img src=\"http://d.pr/i/ngS9+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Стало любопытно посмотреть как относительно общей картины выглядят фильмы разных жанров</p>"
    },
    {
      class: "cover w",
      code: "<img src=\"http://d.pr/i/kLP0+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Какое у нас самое длинное название фильма?</p>"
    },
    {
      class: "cover w",
      code: "<img src=\"http://d.pr/i/w6OW+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Прототип изучения пространства</p>",
      first: false,
      i: 43,
      last: false,
      no: 44
    },
    {
      class: "cover white",
      code: "<img src=\"https://pp.vk.me/c540102/v540102930/1cda1/bXuwU-lgI3k.jpg\" alt=\"Бюджеты и сборы\">\r\n\r\n<p class=\"comment place b r\">Из спора о том, кому нужны эти параметры родилось исследование</p>"
    },
    {
      class: "cover w",
      code: "<img src=\"http://d.pr/i/UT1t+\" alt=\"Бюджеты и сборы, иинфографика\">\r\n\r\n<p class=\"comment place b r\">Предполагали и обнаружили неравномерность распределения количества фильмов по степени их выгодности</p>"
    },
    {
      class: "cover h",
      code: "<img src=\"http://d.pr/i/SdFD+\" alt=\"Пой мне ещё\">\r\n\r\n<p class=\"comment place b r\">Ритмограмма. «Набита» на iPad. Procoding</p>"
    },
    {
      class: "cover",
      code: "<img src=\"http://d.pr/i/eOSG+\" alt=\"Пой мне ещё\">\r\n\r\n"
    },
    {
      class: "cover",
      code: "<img src=\"http://d.pr/i/IKfu+\" alt=\"Пой мне ещё\">\r\n\r\n<p class=\"comment place b r\">Из желания спеть песню родилось исследование нового способа представления текста ритмически сложных песен</p>"
    },
    {
      class: "cover w",
      code: "<img src=\"http://eirikso.com/wp-content/uploads/2011/01/Allof2010.jpg\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Eirik Solheim, <a href=\"http://eirikso.com/2011/01/04/one-year-in-one-image/\">One year in one image</a>"
    },
    {
      class: "shout grow",
      code: "## Новые инструменты\r\n"
    },
    {
      class: "",
      code: "<blockquote style=\"width: 80%;\">\r\n«Иногда ты не можешь найти то, что тебе нужно. Значит, ты еще это не создал. Настала твоя очередь».\r\n</blockquote>\r\n\r\n\r\n<p style=\"margin-top: 0.3em;\">Майк Монтейро</p>"
    },
    {
      class: "",
      code: "##  Prototypo\r\n<a href=\"http://vimeo.com/24358631\">Прототип</a> параметрического редактора шрифта Прототайпо, Процессинг\r\n\r\nВ этом году разработчики <a href=\"https://www.kickstarter.com/projects/599698621/prototypo-streamlining-font-creation\">набрали средства на&nbsp;Кикстартере</a> и&nbsp;планируют к&nbsp;осени выпустить релиз редактора.\r\n\r\n<img src=\"http://d.pr/i/PT3B+\" alt=\"\" align=\"left\">"
    },
    {
      class: "",
      code: "## Питеронлайн. Инструмент для мудборда\r\n\r\n<img src=\"http://d.pr/i/8gg+\" alt=\"\">"
    },
    {
      class: "shout shrink",
      code: "## Так что же это?"
    },
    {
      class: "",
      code: "## Попытаюсь дать своё определение ГД\r\n\r\n<blockquote>Подход к созданию артефактов культуры на основе вычислительных алгоритмов \r\n<mark>экономящий время</mark>, дарящий идеи и <mark>озарения</mark> в ходе игры с построенным инструментом.</blockquote>"
    },
    {
      class: "",
      code: "## За что я это люблю\r\n1. Предпочитаю интеллектуальную рутину мышечной (но каллиграфия!)\r\n2. Обожаю использовать <mark>случайность</mark> для поиска идей\r\n"
    },
    {
      class: "cover h",
      code: "<img src=\"http://d.pr/i/OQJN+\" alt=\"\">\r\n<p class=\"comment place b r\">Случайно слетевший интерлиньяж на веб-странице</p>"
    },
    {
      class: "cover h",
      code: "<img src=\"http://d.pr/i/lJUl+\" alt=\"\">\r\n<p class=\"comment place b r\">Грязь траектории от перемещения объекта даёт шума для плаката. Sketch.app</p>"
    },
    {
      class: "cover h",
      code: "<img src=\"http://d.pr/i/iI4J+\" alt=\"\">\r\n\r\n<p class=\"comment place b r\">Слипшийся после намокания сборник иллюстраций группы  Алхимия</p>"
    },
    {
      class: "cover w",
      code: "<img src=\"http://d.pr/i/sVOC+\" alt=\"\">\r\n<p class=\"comment place b r\">Слипшийся после намокания сборник иллюстраций группы  Алхимия</p>\r\n",
      first: false,
      i: 57,
      last: false,
      no: 58
    },
    {
      class: "",
      code: "Наше мышление инертно. Нужна помощь, сдвиг точки сборки. Замеченные случайности.\r\n\r\nЧасто мука рассыпается красивее, чем мы её тщательно выложим."
    },
    {
      class: "",
      code: "## Два пути\r\n\r\n<ul class=\"next\">\r\n<li>Идея → Модель/алгоритм → Исполнение\r\n<li class=\"next\">Эксперимент → Неожиданная идея"
    },
    {
      class: "",
      code: "## Что понадобится\r\n<p>Любознательность и непреодолимая тяга</p>\r\n**Пригодятся**\r\n<ul>\r\n<li>Основы логики\r\n<li>Математика: геометрия, тригонометрия, линейная алгебра\r\n<li>Основы информатики: пиксель, цветовые модели \r\n<li>Основы программирования: циклы, ветвление, структуры данных, ввод-вывод\r\n</ul>"
    },
    {
      class: "shout",
      code: "## Какие среды сейчас есть?\r\n"
    },
    {
      class: "cover h",
      code: "<h2 style=\"color: #000;\">ИнДизайн </h2> \r\n<ul><li>— Примеры работ воркшоп <a style=\"color: #000;\" href=\"http://fabiantheblind.github.io/Typography-And-Automation/\">Typography and Automation Week</a>\r\n\r\n<li>— Фреймворк <a href=\"http://basiljs.ch\" style=\"color: #000;\">Basil</a>\r\n</ul>\r\n<img src=\"http://fabiantheblind.github.io/Typography-And-Automation/assets/images/teaser/a_auto-typo.png\" alt=\"\">"
    },
    {
      class: "",
      code: "## Веб\r\n<ul><li><a href=\"http://processingjs.org\">Processing JS,</a>\r\n<li><a href=\"http://d3js.org\">D3</a>\r\n<li><a href=\"http://paperjs.org\">PaperJS</a>  exx Scriptographer для Illustrator\r\n</ul>\r\n\r\n"
    },
    {
      class: "",
      code: "## Веб: Песочницы\r\n<ul><li><a href=\"http://jsfiddle.net\">JS Fiddle</a>\r\n<li><a href=\"http://dabblet.com\">Dabblet</a>\r\n<li><a href=\"http://codepen.io\">CodePen</a>\r\n<li><a href=\"http://habrahabr.ru/post/159999/\">другие...</a>\r\n<li>Консоль разработчика в браузере</a>"
    },
    {
      class: "",
      code: "## Самостоятельные\r\n<ul>\r\n<li><a href=\"http://www.processing.org, http://processingjs.org\">Процессинг (Java, JavaScript)</a> \r\n\r\n<li><a href=\"http://nodebox.net/node/\">Нодбокс 3 (бокс-модель)</a>\r\n\r\n<li><a href=\"http://nodebox.net/code/index.php/Home\">Нодбокс 1 (Python, only Mac OS X)</a>\r\n\r\n<li><a href=\"http://vvvv.org/documentation/vvvv-графическая-программная-среда\">VVVV (бокс-модель)</a>\r\n</ul>"
    },
    {
      class: "",
      code: "## Самостоятельные 2/2\r\n<ul>\r\n<li><a href=\"http://resolume.com\">Resolume</a> (бокс-модель) — генеративное видео\r\n\r\n<li><a href=\"http://www.madmapper.com\">Madmapper</a> (бокс-модель, Mac only) — инструмент проецирования\r\n\r\n<li><a href=\"http://www.r-project.org\">R,</a> статистические вычисления и визуализация\r\n\r\n<li><a href=\"http://www.openframeworks.cc\">Open Frameworks</a> (C++)\r\n</ul>"
    },
    {
      class: "cover w shout white",
      code: "<img src=\"https://farm3.staticflickr.com/2645/3934387570_58db8c2096_o.png\" alt=\"\">\r\n<h2 style=\"color: rgba(255, 255, 255, 0.4); letter-spacing: 0.05em;\">перерыв</h2>\r\n"
    },
    {
      class: "shout shrink",
      code: "## Практика\r\n"
    },
    {
      class: "",
      code: "## Что необходимо\r\nПонадобится установить  <a href=\"https://www.processing.org/download/?processing\">Процессинг</a> и <a href=\"http://nodebox.net/download/\">Нодбокс.</a>\r\n\r\n<a href=\"https://www.dropbox.com/sh/4k9rcx7ksuvhcg5/AACmZaQrKw1ymK8AkzHLFXmJa\">Файлы примеров</a>"
    },
    {
      class: "",
      code: "## Знакомство с Nodebox\r\n\r\nРасщепление надписи на частицы\r\n"
    },
    {
      class: "",
      code: "## Nodebox. Инфографика\r\n\r\nЛетняя температура в Челябинске. Цель — показать Южный Урал какой он есть.\r\nДанные из файла.\r\n\r\n"
    },
    {
      class: "",
      code: "## Знакомство с Процессинг\r\n\r\nИнтерактивная кисть для быстрого рисования текстур.\r\nКисть объём и, возможно цвет, которой изменяется при движении по холсту."
    },
    {
      class: "",
      code: "<pre><code>void <mark>setup()</mark> {\r\n  size(600, 600);   <mark class=\"comment\">// ширина и высота листа</mark>\r\n  background(255);  <mark class=\"comment\">// очистить экран белым</mark>\r\n  noStroke();  <mark class=\"comment\">// без обводки</mark>\r\n  fill(0);     <mark class=\"comment\">// заливать формы чёрным</mark>\r\n}\r\n\r\nvoid <mark>draw()</mark> {\r\n}</code></pre>"
    },
    {
      class: "",
      code: "## Режим Tweak\r\n<iframe src=\"//player.vimeo.com/video/74028935?autoplay=1\" width=\"800\" height=\"450\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>"
    },
    {
      class: "cover w shout white",
      code: "<img src=\"https://farm3.staticflickr.com/2701/4187315114_596ce82f66_o.jpg\" alt=\"\">\r\n<h2 style=\"color: rgba(0, 0, 0, 0.4);\">Спасибо!</h2>\r\n\r\n<a style=\"color: rgba(0, 0, 0, 0.8);\" href=\"mailto:[email protected]\">**[email protected]**</a>\r\n<br><a style=\"color: rgba(0, 0, 0, 0.8);\" href=\"http://vk.com/ashapiro\">vk.com/ashapiro</a>\r\n\r\n<p class=\"comment place b r\">Большинство <a href=\"https://www.flickr.com/photos/tadar/\">фоновых изображений</a> сгенерированы Владимиром Тодоровичем</p>"
    }
  ],
  theme: "ribbon",
  title: "Генеративный дизайн. Зачем, когда, как",
  url: "gd",
  userId: "JAWKeP2wu7S9ZLZpX"
}