Для вдохновения
Очень классный пример, как даже из ошибок можно сделать артпроект. В инстаграме DataGlitches собраны наброски, черновики и ошибки при создании разных визуализаций. Некоторые прямо как готовые картины выглядят.
Ещё иногда я люблю рассматривать генеративную графику. И тут у меня есть 2 сайта с крутыми примерами: Tyler Hobbs и Generated Space.
#ссылки
Очень классный пример, как даже из ошибок можно сделать артпроект. В инстаграме DataGlitches собраны наброски, черновики и ошибки при создании разных визуализаций. Некоторые прямо как готовые картины выглядят.
Ещё иногда я люблю рассматривать генеративную графику. И тут у меня есть 2 сайта с крутыми примерами: Tyler Hobbs и Generated Space.
#ссылки
Tyler Hobbs
Home | Tyler Hobbs
The artwork of Tyler Hobbs, a practicing generative artist, creative coder, and painter, whose work has been featured in numerous exhibitions and has been...
👍1
Код и искусство
Миша скинул мне сегодня очень классную лекцию The Art of Code. Она про использование кода для создания бесполезных на первый взгляд вещей, про написание кода как вид искусства, не ради результата, а ради самого процесса. Это не совсем техническая лекция, если что, хотя там есть код в виде сонетов Шекспира, например.
А вот несколько особенно интересных и классных мест в видео:
4:36 — знаменитая игра «Жизнь» Джона Конвея (Conway's Game of Life). Это клеточный автомат, живущий по нескольким простым правилам. С его помощью можно создавать паттерны, живущие вечно, повторяющиеся во времени или генерирующие новые паттерны.
20:00 — как работает распознавание изображений и какие безумные картинки можно получить, если поиграться с ним.
25:43 — про написание программ, где сам текст программы выглядит как произведение искусства. Например, код в виде фрактала Мандельброта.
36:41 — можете представить себе язык в стиле сонетов Шекспира? А такой есть — Shakespeare Programming Language! Или язык, где программы — реальные рецепты, по которым можно приготовить шоколадный торт, например.
39:42 — язык Piet (назван в честь Пита Мондриана). Программы на нём пишутся с помощью цветных блоков и похожи скорее на абстрактные картины. Можно писать картины, в которых будут зашифрованы стихи (написанные на языке из сонетов Шекспира, ага).
43:27 — язык Sonic Pi, придуманный для создания электронной музыки.
46:40 — а это прям самая офигенная часть! В 2018 году автор лекции придумал на салфетке в баре свой язык Rockstar, где весь код похож на тексты песен из heavy metal. Например:
Сегодня у меня появилась новая цель в жизни: теперь я хочу стать certified rockstar developer!
#ссылки
Миша скинул мне сегодня очень классную лекцию The Art of Code. Она про использование кода для создания бесполезных на первый взгляд вещей, про написание кода как вид искусства, не ради результата, а ради самого процесса. Это не совсем техническая лекция, если что, хотя там есть код в виде сонетов Шекспира, например.
А вот несколько особенно интересных и классных мест в видео:
4:36 — знаменитая игра «Жизнь» Джона Конвея (Conway's Game of Life). Это клеточный автомат, живущий по нескольким простым правилам. С его помощью можно создавать паттерны, живущие вечно, повторяющиеся во времени или генерирующие новые паттерны.
20:00 — как работает распознавание изображений и какие безумные картинки можно получить, если поиграться с ним.
25:43 — про написание программ, где сам текст программы выглядит как произведение искусства. Например, код в виде фрактала Мандельброта.
36:41 — можете представить себе язык в стиле сонетов Шекспира? А такой есть — Shakespeare Programming Language! Или язык, где программы — реальные рецепты, по которым можно приготовить шоколадный торт, например.
39:42 — язык Piet (назван в честь Пита Мондриана). Программы на нём пишутся с помощью цветных блоков и похожи скорее на абстрактные картины. Можно писать картины, в которых будут зашифрованы стихи (написанные на языке из сонетов Шекспира, ага).
43:27 — язык Sonic Pi, придуманный для создания электронной музыки.
46:40 — а это прям самая офигенная часть! В 2018 году автор лекции придумал на салфетке в баре свой язык Rockstar, где весь код похож на тексты песен из heavy metal. Например:
Rockstar is a big bad monster — присвоение переменной Rockstar значения 1337.Сегодня у меня появилась новая цель в жизни: теперь я хочу стать certified rockstar developer!
#ссылки
DataFest Tbilisi
В прошедшие выходные я участвовала в онлайн конференции DataFest Tbilisi. Вернее, я скорее следила за ней, чем полноценно участвовала, но что-то интересное почерпнула.
Понравился второй день, особенно вокршоп Valentina D'Efilippo про карты (Maps in the Time of Corona). Задание было забавное: сначала нужно было по памяти от руки нарисовать карту мира, а потом на ней нарисовать визуализацию чего-то повседневного из жизни. Я в итоге показала все свои чаты и созвоны за май, аж 10 разных городов набралось.
Мне это показалось похожим на проект Dear Data — две девушки из разных стран каждую неделю в течении года рисовали друг другу открытки с визуализациями из своей жизни. Сколько раз за неделю здоровались и прощались, сколько смотрели на часы или сколько дверей открыли и закрыли.
Ещё из запомнившегося: Gabrielle Merite показывала примеры красивых обработки и совмещения графиков, фотографий и рисунков и рассказывала о том, как можно оживить данные и придать им эмоциональную окраску.
#ссылки #визуализация
В прошедшие выходные я участвовала в онлайн конференции DataFest Tbilisi. Вернее, я скорее следила за ней, чем полноценно участвовала, но что-то интересное почерпнула.
Понравился второй день, особенно вокршоп Valentina D'Efilippo про карты (Maps in the Time of Corona). Задание было забавное: сначала нужно было по памяти от руки нарисовать карту мира, а потом на ней нарисовать визуализацию чего-то повседневного из жизни. Я в итоге показала все свои чаты и созвоны за май, аж 10 разных городов набралось.
Мне это показалось похожим на проект Dear Data — две девушки из разных стран каждую неделю в течении года рисовали друг другу открытки с визуализациями из своей жизни. Сколько раз за неделю здоровались и прощались, сколько смотрели на часы или сколько дверей открыли и закрыли.
Ещё из запомнившегося: Gabrielle Merite показывала примеры красивых обработки и совмещения графиков, фотографий и рисунков и рассказывала о том, как можно оживить данные и придать им эмоциональную окраску.
#ссылки #визуализация
👍1
Пара ссылок в копилочку
Недавно наткнулась на ещё один сайт про генеративную графику. Это подкаст и сборник из нескольких небольших и несложных туториалов.
А здесь можно найти прямо кладезь примеров разных графиков на d3js — все возможные типы чартов, работа с картами, осями, анимацией и т.д.
#ссылки
Недавно наткнулась на ещё один сайт про генеративную графику. Это подкаст и сборник из нескольких небольших и несложных туториалов.
А здесь можно найти прямо кладезь примеров разных графиков на d3js — все возможные типы чартов, работа с картами, осями, анимацией и т.д.
#ссылки
Generativeartistry
Generative Artistry
Generative art tutorials, news and love.
Картографические проекции
Недавно наткнулась на неплохое демо со сравнением разных картографических проекций:
https://bl.ocks.org/syntagmatic/ba569633d51ebec6ec6e
А вот здесь можно скачать статью про то, как выбирать проекцию. Всего их есть 4 типа: equal-area (сохраняют относительные размеры элементов), conformal (сохраняют углы), equidistant (сохраняют расстояния между точками) и сompromise (ничего по-отдельности не сохраняют кроме, разве что, общего вида). Привычный большинству меркатор — conformal проекция.
#карты #ссылки
Недавно наткнулась на неплохое демо со сравнением разных картографических проекций:
https://bl.ocks.org/syntagmatic/ba569633d51ebec6ec6e
А вот здесь можно скачать статью про то, как выбирать проекцию. Всего их есть 4 типа: equal-area (сохраняют относительные размеры элементов), conformal (сохраняют углы), equidistant (сохраняют расстояния между точками) и сompromise (ничего по-отдельности не сохраняют кроме, разве что, общего вида). Привычный большинству меркатор — conformal проекция.
#карты #ссылки
Gist
Comparing Map Projections
Comparing Map Projections. GitHub Gist: instantly share code, notes, and snippets.
Про доступность приложений
Летом я наткнулась на вот это видео, демонстрирующее как пользуются телефоном слабовидящие люди:
https://twitter.com/Kristy_Viers/status/1287189581926981634
А на днях Сбербанк опубликовал подробный гайд по доступности интерфейсов:
http://specialbank.ru/guide/
Это важная тема, которой часто пренебрегают. Я регулярно наталкиваюсь на формы, которые не работают с клавиатуры, кнопки, которые завёрстаны обычными span элементами или ссылки, которые не ссылки, а просто текст, клик на который обрабатывается в коде. А ещё стоит помнить про цвета: до 8% людей в мире имеют разные нарушения восприятия цвета.
Ещё полезные ссылки по теме:
• W3C стандарты и гайдлайны
• Lighthouse — встроенный инструмент Chrome для аудита страницы (проверяет скорость загрузки, доступность, сео и т.д.)
#ссылки
Летом я наткнулась на вот это видео, демонстрирующее как пользуются телефоном слабовидящие люди:
https://twitter.com/Kristy_Viers/status/1287189581926981634
А на днях Сбербанк опубликовал подробный гайд по доступности интерфейсов:
http://specialbank.ru/guide/
Это важная тема, которой часто пренебрегают. Я регулярно наталкиваюсь на формы, которые не работают с клавиатуры, кнопки, которые завёрстаны обычными span элементами или ссылки, которые не ссылки, а просто текст, клик на который обрабатывается в коде. А ещё стоит помнить про цвета: до 8% людей в мире имеют разные нарушения восприятия цвета.
Ещё полезные ссылки по теме:
• W3C стандарты и гайдлайны
• Lighthouse — встроенный инструмент Chrome для аудита страницы (проверяет скорость загрузки, доступность, сео и т.д.)
#ссылки
Возвращаюсь с несколькими потенциально полезными ссылками в копилочку.
1. https://riccardoscalco.it/textures — JavaScript библиотека для создания SVG паттернов. Если хотели следующую карту залить не цветом, а узорами в полоску или клетку, то это как раз оно!
2. http://sergeychikin.ru/365 — огромный набор иконок и пиктограмм. Автор добавляет по одной каждый день, пользоваться можно бесплатно, если вы не юр. лицо или не зарабатываете, их используя.
3. http://histography.io — красивая и интересная визуализация статей Википедии с момента Большого взрыва до наших дней. Кстати, сделана на PIXI.js с использованием WebGL.
#ссылки
1. https://riccardoscalco.it/textures — JavaScript библиотека для создания SVG паттернов. Если хотели следующую карту залить не цветом, а узорами в полоску или клетку, то это как раз оно!
2. http://sergeychikin.ru/365 — огромный набор иконок и пиктограмм. Автор добавляет по одной каждый день, пользоваться можно бесплатно, если вы не юр. лицо или не зарабатываете, их используя.
3. http://histography.io — красивая и интересная визуализация статей Википедии с момента Большого взрыва до наших дней. Кстати, сделана на PIXI.js с использованием WebGL.
#ссылки
Сегодняшняя партия ссылок про красоту и пользу:
1. Список современных веб API и технологий, сделанный в виде периодической таблицы. Задизайнено немного странно, поэтому смотреть лучше на компьютере. Будет полезно, чтобы понять, что, насколько и в каких браузерах поддерживается.
2. Визуализации дорог в любом городе. Код выложен на github. Данные для рендеринга берутся из OpenStreetMap с помощью открытого API и кешируются.
3. Немного digital искусства. Это для любителей генеративной графики и красивых минималистических визуализаций под музыку.
#ссылки
1. Список современных веб API и технологий, сделанный в виде периодической таблицы. Задизайнено немного странно, поэтому смотреть лучше на компьютере. Будет полезно, чтобы понять, что, насколько и в каких браузерах поддерживается.
2. Визуализации дорог в любом городе. Код выложен на github. Данные для рендеринга берутся из OpenStreetMap с помощью открытого API и кешируются.
3. Немного digital искусства. Это для любителей генеративной графики и красивых минималистических визуализаций под музыку.
#ссылки
Ссылки в этот раз не столько полезные, сколько залипательные.
1. Нашла сегодня очень интересный генератор картин по номерам. Код написан на питоне и выложен на github. Оказывается, картины по номерам называются prime portraits (простые портреты) и есть научные статьи, описывающие алгоритмы их составления.
2. Несколько месяцев назад я выкладывала демо с разными картографическими проекциями. Вот ещё в копилочку: динамическая объяснялка, как какая-то выделенная область проекции выглядит на глобусе. Самое странное — как проекция Робинсона вытягивается около полюса. Кроме демо интересен и сам сайт — там много визуальных тестов и статей про математику. Сделан больше для детей, но всё равно любопытно и красиво =)
3. Я нечасто выкладываю примеры визуализаций, но тут захотелось поделиться: красивая инфографика с историей концертов группы Metallica с 1982 по 2012 года.
#ссылки
1. Нашла сегодня очень интересный генератор картин по номерам. Код написан на питоне и выложен на github. Оказывается, картины по номерам называются prime portraits (простые портреты) и есть научные статьи, описывающие алгоритмы их составления.
2. Несколько месяцев назад я выкладывала демо с разными картографическими проекциями. Вот ещё в копилочку: динамическая объяснялка, как какая-то выделенная область проекции выглядит на глобусе. Самое странное — как проекция Робинсона вытягивается около полюса. Кроме демо интересен и сам сайт — там много визуальных тестов и статей про математику. Сделан больше для детей, но всё равно любопытно и красиво =)
3. Я нечасто выкладываю примеры визуализаций, но тут захотелось поделиться: красивая инфографика с историей концертов группы Metallica с 1982 по 2012 года.
#ссылки
Очень красивый проект: тепловые фотографии природы Исландии, снятые на инфракрасную камеру.
https://petapixel.com/2019/07/13/shooting-high-res-thermal-photos-of-iceland-to-show-nature-at-work/?q=5
#ссылки
https://petapixel.com/2019/07/13/shooting-high-res-thermal-photos-of-iceland-to-show-nature-at-work/?q=5
#ссылки
State of JS
На днях появилась ежегодная статистика State of JS. Она собрана по ответам на анкеты программистами в разных странах. Это общее представление о состоянии и трендах веб разработки.
На что я обратила внимание:
1. В JS укрепляются новые модные фичи (хотя часть типа webGL или webAssembly пока мало кто пробовал), в целом он становится всё удобнее сразу из коробки. Но и тайпскрипта стало ещё больше, он уверенно на первом месте из расширений, что показывает, что запрос на типизацию в JS по-прежнему актуален.
2. Svelte обогнал React. Это круто, что появилась стабильная и уверенная альтернатива. Я сама последнее время мало использую фреймворки, но Svelte с удовольствием попробую в одном из будущих подходящий под него проектов.
3. В плане слоёв данных Redux наконец свалился вниз, а верхние строчки окончательно захватили GraphQL и Apollo. GraphQL это язык запросов к серверу и API, а Apollo — одна из его имплементаций. Они позволяет настроить сервер и клиент так, чтобы клиент мог быстро и удобно запрашивать только нужные ему в данный момент данные. Я использовала эту связку при разработке одного мобильного приложения полтора года назад — очень удобно менеджить состояние и взаимодействия с сервером. Redux я не люблю, потому что это немного портал в ад и простая концепция сделанная сложно.
https://2020.stateofjs.com/ru-RU
#ссылки
На днях появилась ежегодная статистика State of JS. Она собрана по ответам на анкеты программистами в разных странах. Это общее представление о состоянии и трендах веб разработки.
На что я обратила внимание:
1. В JS укрепляются новые модные фичи (хотя часть типа webGL или webAssembly пока мало кто пробовал), в целом он становится всё удобнее сразу из коробки. Но и тайпскрипта стало ещё больше, он уверенно на первом месте из расширений, что показывает, что запрос на типизацию в JS по-прежнему актуален.
2. Svelte обогнал React. Это круто, что появилась стабильная и уверенная альтернатива. Я сама последнее время мало использую фреймворки, но Svelte с удовольствием попробую в одном из будущих подходящий под него проектов.
3. В плане слоёв данных Redux наконец свалился вниз, а верхние строчки окончательно захватили GraphQL и Apollo. GraphQL это язык запросов к серверу и API, а Apollo — одна из его имплементаций. Они позволяет настроить сервер и клиент так, чтобы клиент мог быстро и удобно запрашивать только нужные ему в данный момент данные. Я использовала эту связку при разработке одного мобильного приложения полтора года назад — очень удобно менеджить состояние и взаимодействия с сервером. Redux я не люблю, потому что это немного портал в ад и простая концепция сделанная сложно.
https://2020.stateofjs.com/ru-RU
#ссылки
Я редко занимаюсь генеративной графикой, но очень люблю её рассматривать. Сегодня хочу поделиться двумя интересными ссылками:
1. Генератор средневековых городов. Он сделан в рамках одного из челенджей в сообществе reddit. Код написан на языке Haxe и выложен на github.
2. Большое creative coding портфолио оформленное как один большой observable блокнот. Там настолько много всего, что браузер почти сразу начинает заметно подтормаживать.
Недавно вспоминала, как в D3 делать тримапы и сделала небольшой пример, вдохновлённый картинами Мондриана:
https://codepen.io/gnykka/pen/mdOyepW
Мне тяжело воспринимать генеративный арт как что-то большее чем цифровое искусство. Оно красивое, но оно скорее про форму и концепцию, чем про содержание и смысл. Я видела крутой арт в оформлении сайтов или выставок, на задниках во время фестивалей электронной музыки и, пожалуй, всё. А где ещё это может быть применимо и востребовано?
#ссылки
1. Генератор средневековых городов. Он сделан в рамках одного из челенджей в сообществе reddit. Код написан на языке Haxe и выложен на github.
2. Большое creative coding портфолио оформленное как один большой observable блокнот. Там настолько много всего, что браузер почти сразу начинает заметно подтормаживать.
Недавно вспоминала, как в D3 делать тримапы и сделала небольшой пример, вдохновлённый картинами Мондриана:
https://codepen.io/gnykka/pen/mdOyepW
Мне тяжело воспринимать генеративный арт как что-то большее чем цифровое искусство. Оно красивое, но оно скорее про форму и концепцию, чем про содержание и смысл. Я видела крутой арт в оформлении сайтов или выставок, на задниках во время фестивалей электронной музыки и, пожалуй, всё. А где ещё это может быть применимо и востребовано?
#ссылки