Метка «Canvas» - 7

На кинопоиске есть викторина под названием «Угадай знаменитость». В ней необходимо за 10 секунд отгадать актёра (режиссёра, сценариста, просто известную личность) на фотографии. Правила просты, однако узнать человека бывает не так-то просто. Особенно, если не знаешь. Вот тут-то и родилась идея «помочь» себе в разгадывании.
Читать полностью »

Ray tracing не только в 3DМногие в общих чертах представляют, как работает лучевая трассировка: через каждый пиксель сцены алгоритм пропускает луч и вычисляет, с какими объектами сцены он пересекается и как в результате данный пиксель должен быть освещён. Алгоритм по сути требует, чтобы у нас была функция, которая для каждой позиции возвращает цвет точки. Разумеется, тот же подход можно применять не только для трёхмерной графики: любое изображение можно растеризовать таким образом, если у нас есть подходящая функция. Рассмотрим для примера, как с помощью такого подхода решить задачу визуализации диаграмм разложения на простые множители, о которой написал helarqjsc.

Моя реализация здесь. На картинке изображено 10! = 3628800, хотя всех деталей, разумеется, не видно.
Читать полностью »

Визуализация характеристической функцииМногие в общих чертах представляют, как работает обратная лучевая трассировка: через каждый пиксель окна вывода алгоритм пропускает луч и вычисляет, с какими объектами сцены он пересекается и как в результате данный пиксель должен быть освещён. Алгоритм по сути требует, чтобы у нас была функция, которая для каждой позиции возвращает цвет точки. Разумеется, тот же подход можно применять не только для трёхмерной графики: любое изображение можно растеризовать таким образом, если у нас есть подходящая функция. Рассмотрим для примера, как с помощью такого подхода решить задачу визуализации диаграмм разложения на простые множители, о которой написал helarqjsc.

Моя реализация здесь. На картинке изображено 10! = 3628800, хотя всех деталей, разумеется, не видно.
Читать полностью »

Эффектная анимация разрушения (Pixel Dust) В процессе развития нашей игры на HTML5, мы столкнулись с дилеммой: рисовать для каждого элемента эффект разрушения или попробовать сделать это программно на JavaScript (canvas). Если с первым способом всё понятно (проверенно работает, но много работы художнику), то со вторым у нас были сомнения относительно скорости рендера, ведь это 60FPS x 64 x 4 байта ~ 1 МБ/сек. на один элемент, а если их 40 на одном экране?

Читать полностью »

Сегодня на днях я написать небольшую библиотеку для вставки Canvas в изображения. Репозиторий можно найти здесь github.com/Alexei03a/u-content. Под катом я описал спецификацию данной библиотеки.

Читать полностью »

Основная идея

Много кто в процессе изучения Web Workers сталкивался с проблемой работы с canvas-ом. В основном это происходит из-за того, что в web worker нельзя передать элементы DOM. Решением может быть использование getImageData(). Внимание! Статья не рассчитана для новичков. Для изучения данного материала рекомендую ознакомиться с основами canvas и webworker.

Я попытаюсь продемонстрировать вам работу с getImageData() на примере создания асинхронно работающего сложного фильтра размывания изображений — blur. Для этого нам понадобится 2 файла: index.html и filter_worker.js
Читать полностью »

Хочу поделиться с вами моим последним проектом.

Примерно год назад я скачал приложение Aelios Weather на iPad.
Оно задело мне глаз своей простотой и необычным интерфейсом.

И вот что получилось:
image

Смотреть тут

Как всегда, мне было интересно, насколько продвинут HTML5, и можно ли создать что-нибудь такое же.

В основе интерфейса лежит кружок, который вроде как компас и часы в одном лице.
Компас можно крутить, дабы показать дни недели или время суток.
На нем же можно увидеть время закатов и рассветов.

Внутри кружка появляется стрелка, которая автоматически направляется на самый большой по населению пункт в данном радиусе.

Читать полностью »

Apple кодирует видео с помощью JPEG, JSON и <canvas>
Фрагмент файла unlock_001.jpg

Компания Apple имеет огромный опыт в разработке веб-технологий, но сейчас попала в абсурдную ситуацию. Если зайти на страницу с описанием дизайнерских инноваций iPhone, то можно увидеть странное: видеоролик с анимацией разблокировки «айфона» закодирован с помощью нескольких JPEG-файлов необычного вида.
Читать полностью »

HTML5 Canvas — элемент созданный для создания динамической графики на WebGL или обычном 2D контексте. Однако Canvas можно (и можно будет) использовать в браузерах в качестве фона CSS. Это мы рассмотрим в этой статье.

Эта небольшая статья делалась с упором на кроссбраузерность и стандарт W3C (CSS4 Images). На сегодняшний момент это можно использовать в браузерах: Mozilla Firefox, Safari, Google Chrome и прочих браузерах, поддерживающие -webkit-canvas, element или -moz-element в фонах CSS.

Эта идея нигде не была своровона — она тщательно продумана мной. Является дополнением к уже существующим темам о CSS, однако она касается и темы JavaScript в частности.

Читать полностью »

Сегодня на днях я сделал Parallax эффект на HTML5 Canvas. К сожелению я не смог сделать живой пример, поскольку программа Github (Windows) не подчиняется мне, даже не хочет заливать в gh-pages (пришлось на master). Я с трудом уговорил залить JNG пример.

Вот собственно сам пример (точнее ее исходники): github.com/Alexei03a/html5-parallax
Мне нечем было снимать видео, поэтому этот топик останется без самого интересного.

Это сцена зеленого круга с падающей тенью и фоном в стиле паттерн. Самое интересное — никакого WebGL.
Правда сделал на скорую руку. Кроме того, нету Motion Blur, высококачественной тени, более хорошего parallax (как в WebGL).
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js