Рубрика «canvas» - 22

в 22:06, , рубрики: canvas, javascript, браузеры, графика, Киберпанк, метки: , , , ,

I. Предисловие.

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

Можно представить, что рано или поздно на таком экране могли бы появиться разные удивительные вещи: страница из «Войны и мира», «Джоконда», первые такты «Лунной сонаты», гениальное решение известного уравнения, фотография любого человека, эта страница Хабра, сообщение о безвестном событии прошлого или подробное предсказание будущего.

С тех пор я периодически пытался сделать что-то по касательной, были какие-то мелкие поделки на Perl. А недавно захотелось сделать что-то подобное на JavaScript.

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

в 12:28, , рубрики: canvas, game development, браузерная игра, симулятор, метки: ,

Разрушитель usDe Tornado, США

Приглашаю в открытый бета тест — http://www.casus-belli.com
Читать полностью »

в 7:34, , рубрики: android, canvas, mobile development, Блог компании Luxoft, метки: ,

Предположим мы решили написать новое Android приложение. В силу же дизайнерских соображений, стандарные UI компоненты нам не подходят и мы будет рисовать много графики через Canvas или OpenGL ES. Последний способ несколько более трудоемкий, поэтому мы его пока рассматривать не будем. Нас интересует производительность вывода графики на Canvas. Можно ли её ускорить? Если зайти на официальный сайт андроида или блог разработчиков, то можно заметить, что начиная с Android 3.0 (API level 11), в платформе появилась возможность включать аппаратное ускорение Canvas для вывода 2D графики.

Вы можете подумать: "Супер! Я сейчас же добавлю флаг аппаратного ускорения в мое приложение!". Тем более, некоторые сайты утверждают, что приложение спокойно будет работать на Android 2.x — такие приложения просто будут игнорировать флаг ускорения. Другие же сайты говорят, что аппаратное ускорение включено по-умолчанию начиная с Android 4.0. На самом же деле все не так.

И конечно же нас интересует вопрос, насколько повысится производительность приложения при включении аппаратного ускорения.

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

в 8:15, , рубрики: canvas, game development, GameDevelop, javascript, web-разработка, метки: , , ,

Изометрия — вещь, стара как компьютерные игры.
Сейчас пришло время, когда интернет и игры стали совмещаться в браузере (flash не в счет).
Примеров браузерных игр много, большая часть из них казуалки, но для гиков
более интересны жанры action, RTS и RPG, а для разработчиков — их реализация.

Для жанра RTS, RPG и пошаговых стратегий матрица является основным механизмом для движения
юнитов, рисования текстур и многое другое. Но когда Вы попробуете объеденить
матрицу и изометрические текстуры, Вы попадете в ад, с которого вы не вылезите,
пока не напишете прослойку для управления и воздействия на эту матрицу.

Под катом я расскажу:

  1. Как рисовать изометрическую матрицу
  2. Как нарисовать fullscreen изометрическую матрицу

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

в 10:46, , рубрики: canvas, html5, javascript, WebGL, Веб-разработка

WebGL-2d — весьма интересная javascript библиотека, реализующая стандартные методы для работы с 2d контекстом Canvas на WebGL контексте.

Ни для кого не секрет, что сегодня Canvas не может похвастаться хорошей производительностью и отрисовка сложных сцен в реальном времени может стать проблемой. С WebGL ситуация с производительностью существенно лучше, но этот стандарт поддерживают не все популярные браузеры, в частности Microsoft даже не планирует внедрять его поддержку в IE (сторонние разработчики по этой причине уже начали делать плагин).

Подключив WebGL-2d и добавив всего пару строчек, мы можем существенно ускорить отрисовку графики, реализованную с средствами Canvas 2d API в браузерах, поддерживающих WebGL и обеспечить fallback к обычному 2d контексту.

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

в 18:05, , рубрики: canvas, javascript, life, Алгоритмы, жизнь, ненормальное программирование, метки: , ,

Пишем и оптимизируем Жизнь Конуэя на JSОбновляя недавно дизайн своего хомяка, подумал – а не сделать ли мне какую-нибудь необычную страницу с 404-й ошибкой? Поскольку в детстве я был впечатлен Жизнью Конуэя (как возможно и многие из читателей), решил её на JS и реализовать.

Казалось бы, что сложного в Жизни: если у занятой клетки 2 или 3 соседа – она остается, если у пустой ровно 3 – рождается? В этой статье я и расскажу о своей оптимизации алгоритма и отрисовки в canvas-е, и некоторых не очевидных моментах целочисленной/бинарной арифметики в JavaScript.

Забегая вперед, конечный результат можно увидеть тут, исходники видны там же (да еще и по лицензии CC BY).Читать полностью »

в 9:15, , рубрики: canvas, gauges, html5, javascript, метки: , , ,

Добрый день!

Сегодня я хочу поделиться своей небольшой разработкой, которую я делал для одного из своих проектов. На самом деле, в сети множество реализаций gauge, как платных, так и бесплатных. Но найти хооть одно решение с использованием именно canvas мне не удалось, поэтому было принято решение написать свое.
Читать полностью »

в 5:57, , рубрики: canvas, jquery, jquery plugins, озеро, метки: ,

[скриншот]Стал известен скрипт lake.js — плагин jQuery, который берёт иллюстрацию (элемент <img>) и помещает её на холст (вставляет элемент <canvas>), располагая сразу под нею зеркальное отражение, идущее волнами — будто в воде озера.

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

Холст имеет ту же ширину, что и обрабатываемая иллюстрация, и вдвое бóльшую высоту.

Вызов плагина выглядит сравнительно просто и самоочевидно:

<script src="jquery.js"></script>
<script src="lake.js"></script>
<script>
$(function() {
   $('#lake-img').lake({
      'speed': 1,
      'scale': 0.5,
      'waves': 10
   });
});
</script>
...
<img id="lake-img" src="lake.png" style="display: none;"/>

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

в 11:33, , рубрики: canvas, html5, javascript, тригонометрия, метки: , , ,

Давно хотел начать изучение HTML5 canvas, и наконец решительно за него взялся. Первое что я решил попробовать это отображение различных фигур с помощью стандартных линий в «псевдо 3D». Когда-то давно я подсмотрел очень интересный способ в плагине к winamp'у и решил реализовать его самостоятельно. В 2002 году я это сделал на C++, ну а теперь пришло время для переноса этого чуда на HTML и JavaScript.
Читать полностью »

в 20:14, , рубрики: canvas, css, техники, треугольники

Скорее всего, вы уже знаете, как сделать треугольник на чистом CSS, использовав свойство border. Если же не знаете, то можно почитать, например, здесь. Но что, если вам понадобятся треугольники с тенью?

Треугольники с тенью на CSS

Классическая манипуляция с бордером не может изменить форму объекта, это всего лишь визуальный обман.
Т.е. нельзя просто взять и добавить box-shadow к такому треугольнику, потому что получим что-нибудь в таком роде:

Треугольники с тенью на CSS

Давайте посмотрим на несколько альтернативных решений.
Читать полностью »

1...10...212223...24
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js