​​Hunt and Kill алгоритм

Продолжаю изучать алгоритмы генерации лабиринтов. И чтобы уж точно закрепить новые знания, я решила сделать визуализацию работы hunt and kill алгоритма:

https://codepen.io/gnykka/pen/qBbMrxK

#алгоритмы #лабиринты

Пара ссылок в копилочку

Недавно наткнулась на ещё один сайт про генеративную графику. Это подкаст и сборник из нескольких небольших и несложных туториалов.

А здесь можно найти прямо кладезь примеров разных графиков на d3js — все возможные типы чартов, работа с картами, осями, анимацией и т.д.

#ссылки

Генератор супрематизма

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

Спустя два месяца я внезапно к этой идее вернулась и сделала на выходных небольшой генератор супрематических картин:

https://codepen.io/gnykka/pen/bGEJddK

Расскажу, как это всё работает. На полотне создаются от 6 до 10 случайных фигур (прямоугольников или эллипсов) в случайных местах и случайного размера. Ещё на полотне случайно располагаются две точки притяжения, которые влияют на положение созданных фигур. Степень влияния определяет ещё один случайный параметр каждой фигуры — масса. Чем больше масса, тем меньше сдвигается фигура под воздействием притяжения.

А кредитсы за помощь в адаптации гравитационной теории уходят Мише в @ohblog.

#практика #generativeart

Картографические проекции

Недавно наткнулась на неплохое демо со сравнением разных картографических проекций:
https://bl.ocks.org/syntagmatic/ba569633d51ebec6ec6e

А вот здесь можно скачать статью про то, как выбирать проекцию. Всего их есть 4 типа: equal-area (сохраняют относительные размеры элементов), conformal (сохраняют углы), equidistant (сохраняют расстояния между точками) и сompromise (ничего по-отдельности не сохраняют кроме, разве что, общего вида). Привычный большинству меркатор — conformal проекция.

#карты #ссылки

Про доступность приложений

Летом я наткнулась на вот это видео, демонстрирующее как пользуются телефоном слабовидящие люди:
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.

#ссылки

Временная ось на D3js

Года 2 назад я работала над одним проектом, где делала систему визуализаций медиакампаний. Там было порядочно графиков: тренды, сентимент, распространение новостей. Объединяло их то, что везде была нужна удобная и понятная временная ось.

Оси в D3js меня порядочно раздражают обычно, потому что они очень неуниверсально сделаны. Даже у простой числовой оси нельзя из коробки сделать бесконечный зум, чтобы двигаться по адекватным значениям. Казалось бы, очевидный случай: округляемые тики с шагом кратным 1, 2, 5 или 10 — но нет, такое приходится делать вручную.

В итоге для временной оси мне пришлось сделать свою реализацию:
https://codepen.io/gnykka/pen/xyKJZL

У этой оси есть 4 типа отображения (в зависимости от размера и уровня зума) — года, кварталы, месяцы и дни. Полупрозрачным красным обозначены выходные.

Здесь всего 2 зависимости: D3js (для модификаций svg элементов и преобразования дат в координаты экрана) и moment.js (простых и удобных операций с датами).

#практика #d3

​​Как создавать лабиринты

На днях я наконец-то дочитала книгу Mazes for Programmers и теперь знаю аж 12 разных алгоритмов для генерации лабиринтов, несколько методов для их решения и даже умею адаптировать эти методы под разные формы и поверхности.

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

https://teletype.in/@gnykka/mazes

Если вам будет интересно, код можно найти у меня на github. Все примеры написаны на Ruby, но в будущем я хочу переписать их на JS и снабдить визуализациями.

#алгоритмы #лабиринты

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

Так, некоторое время назад у меня возникла идея создать цикл небольших статей-туториалов по D3.js. Пока я вижу это как нечто похожее на «как сделать такой-то график» или «как работает такая-то функция». То есть не просто пример кода, а подробное пошаговое объяcнение. Возможно, в будущем из этого могут вырасти почтовая рассылка или даже курс.

Но пока что я хочу понять, куда мне имеет смысл в этом деле двигаться. Поэтому я прикрутила к каналу комментарии, и под этим постом вы можете написать, было бы вам интересно читать технические детали про D3, что именно и насколько глубоко. Или вдруг вы хотите у меня что-нибудь спросить?

Сегодняшняя партия ссылок про красоту и пользу:

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

2. Визуализации дорог в любом городе. Код выложен на github. Данные для рендеринга берутся из OpenStreetMap с помощью открытого API и кешируются.

3. Немного digital искусства. Это для любителей генеративной графики и красивых минималистических визуализаций под музыку.

#ссылки

​​Туториал как делать простые D3 графики

Я думала, с чего начать, и решила в первой статье разобрать создание line и scatter графиков. А ещё немного углубиться в код D3 и понять, зачем нужны те или иные функции.

Я часто натыкаюсь на разные гайды, как что-то сделать с помощью D3, и меня смущает, что там почти нет объяснений. Большинство статей содержат алгоритм, что, куда и откуда надо скопировать, чтобы благодаря какой-то неведомой магии в результате получилась картинка. Иногда этого достаточно, но часто непонимание, зачем что-то делается в коде, может приводить к странным ошибкам.

Мне хочется больше уделять внимание разбору кода, а не командам формата «скопируйте следующие строчки». Пока что я пытаюсь нащупать баланс в сложности и глубине объяснений. Оставьте мне комментарий, если что-то непонятно или хочется чего-то ещё, и лайкните статью, если всё понравилось!

https://teletype.in/@gnykka/d3-line-scatter

#d3 #статья

Ссылки в этот раз не столько полезные, сколько залипательные.

1. Нашла сегодня очень интересный генератор картин по номерам. Код написан на питоне и выложен на github. Оказывается, картины по номерам называются prime portraits (простые портреты) и есть научные статьи, описывающие алгоритмы их составления.

2. Несколько месяцев назад я выкладывала демо с разными картографическими проекциями. Вот ещё в копилочку: динамическая объяснялка, как какая-то выделенная область проекции выглядит на глобусе. Самое странное — как проекция Робинсона вытягивается около полюса. Кроме демо интересен и сам сайт — там много визуальных тестов и статей про математику. Сделан больше для детей, но всё равно любопытно и красиво =)

3. Я нечасто выкладываю примеры визуализаций, но тут захотелось поделиться: красивая инфографика с историей концертов группы Metallica с 1982 по 2012 года.

#ссылки

​​Хотела успеть написать второй туториал до Нового Года, но не успела. Будет уже в следующем году. Планирую разобрать бар чарты.

А пока принесу вам немного новогоднего настроения! На выходных Миша (@ohblog) написал небольшой скрипт с WebGL, который позволяет добавить снежинки на любой сайт. Это мы вспоминали девяностые и двухтысячные, когда подобные снежинки появлялись почти везде.

Демо можно увидеть тут: https://codepen.io/mkalygin/pen/ZEpveZp
Код тут: https://github.com/mkalygin/snowflakes

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

​​Очень красивый проект: тепловые фотографии природы Исландии, снятые на инфракрасную камеру.

https://petapixel.com/2019/07/13/shooting-high-res-thermal-photos-of-iceland-to-show-nature-at-work/?q=5

#ссылки

​​Туториал как сделать bar chart

Продолжаю писать про создание визуализаций. Третьим графиком становится bar chart. По-русски он называется столбчатой диаграммой, и почему-то мне кажется это название очень забавным.

https://teletype.in/@gnykka/d3-grouped-bars

Как всегда, буду рада комментариям =)

#d3 #статья

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

#ссылки

​​Старые карты

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

Летом 2019 года в Лос-Анджелесе я была на выставке Book of Beasts, посвящённой средневековым бестиариям. Помимо изображений и описаний мифических животных, мне запомнилась одна карта. В её центре было Средиземное море и центральная Европа, по краям — Россия, Северная Африка и терра инкогнита. И вот эта неизвестность вокруг была заполнена драконами, змеями, монгольскими всадниками, чуть ли не белыми ходоками.

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

А возвращаясь к картам, вчера наткнулась я на огромную онлайн коллекцию:
https://www.davidrumsey.com

Это карта Москвы и России 1665 года ↓

​​Я редко занимаюсь генеративной графикой, но очень люблю её рассматривать. Сегодня хочу поделиться двумя интересными ссылками:

1. Генератор средневековых городов. Он сделан в рамках одного из челенджей в сообществе reddit. Код написан на языке Haxe и выложен на github.

2. Большое creative coding портфолио оформленное как один большой observable блокнот. Там настолько много всего, что браузер почти сразу начинает заметно подтормаживать.

Недавно вспоминала, как в D3 делать тримапы и сделала небольшой пример, вдохновлённый картинами Мондриана:
https://codepen.io/gnykka/pen/mdOyepW

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

#ссылки