Как инвертировать фото с помощью HTML5 canvas
Сегодня работа как-то не клеилась, поэтому я решила поучаствовать в еженедельном Codepen Challenge. В этот раз тема — эффекты наведения на изображениях.
https://codepen.io/gnykka/pen/LYpxJEe
Это небольшой пример инвертирования части картинки. Я загружаю фото, рисую его на HTML5 canvas, попутно сохраняя и инвертируя цвета. При наведении мышки я определяю, какая часть изображения попала в область, и рисую её в инвертированном варианте.
Похожий подход я использовала, когда делала один из проектов в прошлогоднем Парке Интуиции, MDWRLD. Там все фото и картинки рисуются на наскольких canvas. Они смещаются с разной скоростью и этим создают эффект параллакса. Быстрой перерисовки и плавности скролла удалось добиться благодаря предобработке фото при загрузке. Каждое фото загружается, запоминается в виде последовательности своих пикселей и на всякий случай сразу же инвертируется. А потом уже очень просто при любом сдвиге поместить эту последовательность в новое место.
Главная проблема canvas в том, что обычно при любых изменениях перерисовывать приходится сразу всё. В svg проще — изменил один элемент и всё готово. Ну и векторная графика прекрасно масштабируется, а на canvas вечно надо ухищряться, чтобы избежать размытости.
#практика #canvas
Сегодня работа как-то не клеилась, поэтому я решила поучаствовать в еженедельном Codepen Challenge. В этот раз тема — эффекты наведения на изображениях.
https://codepen.io/gnykka/pen/LYpxJEe
Это небольшой пример инвертирования части картинки. Я загружаю фото, рисую его на HTML5 canvas, попутно сохраняя и инвертируя цвета. При наведении мышки я определяю, какая часть изображения попала в область, и рисую её в инвертированном варианте.
Похожий подход я использовала, когда делала один из проектов в прошлогоднем Парке Интуиции, MDWRLD. Там все фото и картинки рисуются на наскольких canvas. Они смещаются с разной скоростью и этим создают эффект параллакса. Быстрой перерисовки и плавности скролла удалось добиться благодаря предобработке фото при загрузке. Каждое фото загружается, запоминается в виде последовательности своих пикселей и на всякий случай сразу же инвертируется. А потом уже очень просто при любом сдвиге поместить эту последовательность в новое место.
Главная проблема canvas в том, что обычно при любых изменениях перерисовывать приходится сразу всё. В svg проще — изменил один элемент и всё готово. Ну и векторная графика прекрасно масштабируется, а на canvas вечно надо ухищряться, чтобы избежать размытости.
#практика #canvas
MDWRLD
Inspiration and great creative power!
👍1
Сравнение библиотек для рисования
На прошлой неделе я углубилась в изучение существующих библиотек рисования графики. Их оказалось просто огромное количество под совершенно разные нужды. Например, PixiJS — очень мощный и популярный движок для создания игр, а Draw2d заточен под рисование диаграмм или графов.
Моя задача была понять, у какой библиотеки больше возможностей и фич, с какой удобнее работать и какая быстрее всего перерисовывает сцены с большим количеством элементов. Я выбрала три библиотеки (PixiJS, Two.js и Paper.js) и решила их сравнить.
Результат можно найти тут: benchmarks.slaylines.io
Код — здесь: github.com/slaylines/canvas-engines-comparison
Почему такой выбор? Нужна была библиотека, которая умела бы быстро перерисовывать весь экран, а значит, нужен был canvas (желательно с поддержкой webgl). PixiJS — очень популярная штука, вокруг которой есть большое комьюнити (это обычно безумно важно при разработке чего-то не одноразового). Two.js на первый взгляд показался очень симпатичным, простым и минималистичным. Paper.js приглянулся направленностью на работу с векторной графикой.
А выводы из сравнения у меня такие:
1. PixiJS — очень крутой и шустрый движок, который умеет без проседания fps рисовать тысячи элементов. При этом он довольно сложный, с огромным количеством всего. Не стала бы брать его на маленькие и простые проекты, но вот для больших и долгих он в самый раз.
2. Two.js умеет переключаться между webgl, canvas и svg. В режиме webgl может без заметных тормозов перерисовывать 5 тысяч элементов. Но первый раз рисует эти 5 тысяч очень долго.
3. У Paper.js нет поддержки webgl, поэтому даже 2 тысячи элементов начинают тормозить. Ещё там можно использовать специальный тип скриптов для быстрого создания сцены, хотя я этим не воспользовалась и писала всё в обычном JS коде.
#практика #canvas
На прошлой неделе я углубилась в изучение существующих библиотек рисования графики. Их оказалось просто огромное количество под совершенно разные нужды. Например, PixiJS — очень мощный и популярный движок для создания игр, а Draw2d заточен под рисование диаграмм или графов.
Моя задача была понять, у какой библиотеки больше возможностей и фич, с какой удобнее работать и какая быстрее всего перерисовывает сцены с большим количеством элементов. Я выбрала три библиотеки (PixiJS, Two.js и Paper.js) и решила их сравнить.
Результат можно найти тут: benchmarks.slaylines.io
Код — здесь: github.com/slaylines/canvas-engines-comparison
Почему такой выбор? Нужна была библиотека, которая умела бы быстро перерисовывать весь экран, а значит, нужен был canvas (желательно с поддержкой webgl). PixiJS — очень популярная штука, вокруг которой есть большое комьюнити (это обычно безумно важно при разработке чего-то не одноразового). Two.js на первый взгляд показался очень симпатичным, простым и минималистичным. Paper.js приглянулся направленностью на работу с векторной графикой.
А выводы из сравнения у меня такие:
1. PixiJS — очень крутой и шустрый движок, который умеет без проседания fps рисовать тысячи элементов. При этом он довольно сложный, с огромным количеством всего. Не стала бы брать его на маленькие и простые проекты, но вот для больших и долгих он в самый раз.
2. Two.js умеет переключаться между webgl, canvas и svg. В режиме webgl может без заметных тормозов перерисовывать 5 тысяч элементов. Но первый раз рисует эти 5 тысяч очень долго.
3. У Paper.js нет поддержки webgl, поэтому даже 2 тысячи элементов начинают тормозить. Ещё там можно использовать специальный тип скриптов для быстрого создания сцены, хотя я этим не воспользовалась и писала всё в обычном JS коде.
#практика #canvas
benchmarks.slaylines.io
Canvas Engines Comparison
Render multiple moving rectangles to compare a number of canvas engines.