#pie #fun #experiment
Градиентов пока нет, но кто меня остановит? =) https://cloud.protopie.io/p/2075794b79

#news
Новый сайт выкатили https://www.protopie.io/

#news
Ну и внезапный релиз 5.0 раньше обещанных сроков удивляет

#news #challenge
Конкурсы подъехали. Макбук я наверно себе заберу), но там ещё есть наушники и годовые подписки..
Шутка, конечно же. На самом деле критериев оценки нет, поэтому победить может каждый. Вот тут то точно сработает корейский рандом)
https://dribbble.com/shots/12485507-ProtoPie-5-0-Playoff-Interactions-Speak-Louder-Than-Words

#news #challenge #pie
Итак конкурс таки завершился. https://blog.protopie.io/14-interactive-prototypes-reimagining-everyday-interfaces-688699f94695
1 место: Khonok Lee и его календарь

2 места:
Ahmed Amr
Edmund Boey
Briandito Priambodo

3 места:
Arpit Agrawal
Vikram Singh
Junhyuk Jang
Migue Nodos
Kalpesh Prithyani
Kang Changmo
Ariunbold Ankhaa
Я тут тоже в призёрах
Max A. Acres
Jiaxin Z

Поигрался с войс-прототипированием в бетке 5.1.
Вот примерное описание функционала. Вроде круто.
https://telegra.ph/Protopie-51-09-17
Какие-ньть прикольные прототипчики тоже покажу, как доделаю)

а вот и релиз 5.1 https://blog.protopie.io/protopie-5-1-give-your-interactions-a-voice-444e54b721c9

​​Редко такое бывает)

Нахожусь в поиске специалиста для решения дизайнерской задачи – на основе эскизных макетов, раскадровок и текстовых описаний нужно сделать интерактивный прототип будущего продукта (сервис в сфере nocode-разработки), и на его основе сделать небольшие анимированные иллюстрации, которые бы объяснили как будут работать ключевые интерфейсные механики (примерно, как это сделано на сайтах
retool.com или airtable.com)

Кому было бы интересно взяться за такую работу? Пишите в личку @gordeev – обсудим.

Релизнули 5.2
Основной упор был сделан на новом плагине для импорта из фигмы.
https://blog.protopie.io/protopie-plugin-for-figma-a-revamped-import-experience-to-boost-productivity-5758892c4c58?gi=c62b4ee4ba2b

Захожу я в слак протопая, а там армяне в нарды играют https://cloud.protopie.io/p/93c27347a8

А вот и псевдо 3д игры подвезли)) https://cloud.protopie.io/p/7800901f65

Основной упор новой версии (которая скоро выйдет) - плагин для Adobe XD.
Также в обновлении добавят поддержку ориентации телефона (по факту просто в параметре Device можно будет указать ориентацию) туда же добавят шаблончики для iPhone 12 и Google Pixel 5.
Нуу.... и добавят хоткей Ctrl(CMD)+X для вырезания слоя! 😂

Вот и 5.3 подъехала https://blog.protopie.io/adobe-xd-protopie-the-perfect-duo-in-your-design-stack-e0024262e080
а плагин к Xd возможно даже лучше плагина к фигме)

Внезапное обновление ProtoPie Cloud:

1. Добавили возможность делать публичные рецепты взаимодействий.
Вот так это выглядит

2. Теперь можно добавить пароль на облачный прототип.
Например так (пароль 123456)

Кстати, если пирог запаролен, то ссылка на его рецепт тоже требует пароль. Пример (пароль 123456)

Ну и подробнее можно почитать в блоге

Даж интересно стало. Чо там у кого по юиксу.

Вот вам загадки Жеки Фреско:
1. В чем отличие флинга от свайпа?
2. А чем они отличаются от драга?
3. Почему в протопае есть драг, флинг, но нету свайпа?
Пишите ваши идеи в чат, а я скажу кто молодец)

Вчера было обсуждение идей сообщества с командой разработчиков.

Вкратце такие дела:

1. Export to html - Очень много запросов на эту функцию. Мы никогда не ставили цель делать конечный продукт в среде Protopie, поэтому не очень понимаем этот запрос. Насчёт функции экспорта в html для оффлайн демонстрации прототипа - у нас ведутся работы.

2. In-built User Testing Platform - Мы рассматриваем возможность сотрудничества с некоторыми инструментами пользовательского тестирования вместо того, чтобы встраивать его в ProtoPie.
Сейчас обсуждаем и смотрим что лучше подойдет из этих сервисов: Maze, UXArmy, UserTesting, Lookback.

3. Hide Cursor in Preview - Вы хотите, чтобы значок курсора был скрыт в записанном файле или во время записи в режиме предварительного просмотра? Если и то, и другое, по каким причинам вам нужна возможность скрыть его во время записи? Разве это не затруднит испытание прототипа? Возможность смены типа курсора (на руку или стрелочку) находится в разработке.

Q: Как определить пересечение двух объектов при перетаскивании?
A: Для веб прототипов можно использовать переменную, которая будет различать движется мышь пустая или с объектом.

Touch Down (Rectangle 1): Assign (z = 1)
Touch Up (Rectangle 1): Assign (z = 0)

• Затем просто используем функции Mouse Over и Out:

Mouse Over (Oval 1): Cond (z = 1): Scale (Oval 1 = 200%)
Mouse Out (Oval 1): Cond (z = 1): Scale (Oval 1 = 100%)

• P.S. И квадрату и кругу я поставил Origin point в центр. Так удобнее делать проверки)

• P.P.S. в этой реализации, необходимо не забыть поставить галочку в параметрах квадратика Make lower layers Touchable.

• Реализация в прикрепленном пироге на первой сцене с названием Web.


Q: А как сделать подобное на мобилках? ведь в смартфонах нет мыши, чтобы детектить Mouse Over?
A: Самым очевидным и простым способом будет проверка попадания координат квадрата в координаты квадрата в котором находится окружность.

• Для того чтобы триггер Detect определял движение квадратика я использую трюк с суммированием координат:

Detect (Rectangle 1: X): Assign (z = Rectangle 1.x + Rectangle 1.y)
Detect (Rectangle 1: Y): Assign (z = Rectangle 1.x + Rectangle 1.y)

• Таким образом при любом движении квадратика переменная z будет изменяться.

Detect (z):

• Отслеживая её изменения делаем 4 проверки:
1. Больше ли X квадрата, чем в X круга минус радиус круга
2. Меньше ли X квадрата, чем в X круга плюс радиус круга
3. Больше ли Y квадрата, чем в Y круга минус радиус круга
4. Меньше ли Y квадрата, чем в Y круга плюс радиус круга

Condition:
Rectangle 1 (X) > 138 and
Rectangle 1 (X) < 238 and
Rectangle 1 (Y) > 351 and
Rectangle 1 (Y) < 451

• Только при соблюдении всех 4-х условий можно считать что объекты пересекаются.

(Oval 1): Factor 200%

• Однако надо добавить еще 4 условия при которых надо возвращать овал в исходное положение:

Сondition: Rectangle 1 (X) <= 138
Scale (Oval 1): Factor 100%
Сondition: Rectangle 1 (X) >= 238
Scale (Oval 1): Factor 100%
Condition: Rectangle 1 (Y) <= 351
Scale (Oval 1): Factor 100%
Condition: Rectangle 1 (Y) >= 451
Scale (Oval 1): Factor 100%

• Реализация в прикрепленном пироге на второй сцене с названием Easy.


Q: А что если овал перемещается?
A: Делаем всё тоже самое, только вместо точных значений ставим координаты овала и его радиус.

• Реализация в прикрепленном пироге на третьей сцене с названием Medium.


A: Ну и бонусом элегантная реализация используя знания геометрии средней школы 😂

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

(x - x0)^2 + (y - y0)^2 <= R^2

где x и y - координаты вашей точки, x0 и y0 - координаты центра окружности, R - радиус окружности, ^2 - возведение в квадрат. Если условие выполняется, то точка находится внутри (или на окружности, в случае равенства левой и правой частей). Если не выполняется, то точка вне окружности. В Protopie это делается 2мя условиями:

Detect (z):
Condition 1:
pow((Rectangle 1.x - Oval 1.x),2) + pow((Rectangle 1.y - Oval 1.y),2) <= pow((Oval 1.width/2),2)
(Oval 1): Factor 200%
Condition 2:
pow((Rectangle 1.x - Oval 1.x),2) + pow((Rectangle 1.y - Oval 1.y),2) <= pow((Oval 1.width/2),2)
(Oval 1): Factor 100%

• pow (a,b) - функция возведения числа a в степень b

• Реализация в прикрепленном пироге на четвертой сцене с названием Hardcore.