Рубрика «графика»

Объемная задача

В обновлении «Новая сила» в War Thunder у самых результативных игроков в бою появилась возможность использовать атомное оружие. И появилась чертовски интересная задача создания визуального эффекта атомной бомбардировки.

Исходя из существующих в 40-х и 50-х годах калибров советского и американского тактического атомного вооружения, мощность взрыва была выбрана на уровне 30-40 килотонн (бомбы Mark 4 и РДС-2Читать полностью »

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

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

Памятка по работе с Canvas API - 1

Доброго времени суток, друзья!

Данная статья представляет собой небольшую подборку примеров работы с Canvas API, к которой удобно обращаться при необходимости вспомнить изученный материал.

Это не руководство по работе с холстом, а лишь демонстрация некоторых из его основных инструментов.

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

Код разбит на отдельные блоки-песочницы, которые для удобства чтения помещены под «кат».

Парочка важных моментов.

Ширину и высоту холста лучше определять с помощью атрибутов:

<canvas width="300" height="300"></canvas>

Если мы хотим, чтобы холстом была вся область просмотра, то делаем следующее:

const width = canvas.width = innerWidth
const height = canvas.height = innerHeight

Холст и двумерный контекст рисования я определяю следующим образом:

const canvas = document.querySelector('canvas')
// не путать с объектом jQuery
const $ = canvas.getContext('2d')

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

Спецификация по отзывчивым изображениям — это фантастический документ, в котором описано множество вариантов использования таких изображений. Но опыт подсказывает мне, что чаще всего при работе с ними нужно знать лишь о том, как отдавать клиенту копии одного и того же изображения разного размера, выбирая их в зависимости от ширины области просмотра страницы. Мы называем это «переключением разрешения». Для решения этой задачи можно воспользоваться атрибутами srcset и sizes.

Вывод отзывчивых изображений предусматривает применение достаточно сложной логики. Сюда, кроме прочего, входит определение того, изображение какого размера будет выведено, а также выяснение того, работает ли пользователь с экраном высокого разрешения. К счастью, браузеры лучше, чем люди, умеют определять то, какие именно изображения лучше всего подходят каждому конкретному пользователю. Всё, что нам нужно — это дать им некоторые подсказки. Атрибут srcset даёт браузеру список графических ресурсов, из которых он может выбирать наиболее подходящее изображение. Атрибут sizes позволяет сообщить браузеру о том, изображение какого размера нужно показать в том или ином случае.

Простой подход к работе с отзывчивыми изображениями - 1

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

Многие говорят, что цвет — это чисто субъективная вещь и в ней нет каких то правил или принципов. На самом же деле, как и в любой науке, здесь есть место и теории. Цвет помогает дополнить тот смысл и идею, которые вы хотите вложить в свою работу, и правильное его использование помогает сделать ваш продукт более заметным и профессионально выглядящим.

Многие исследователи занимались вопросами цвета, и одним из самых заметных, несомненно, был Иоханнес Иттен, автор книги «Искусство цвета». В своей работе автор рассматривает множество аспектов колористики: психологическое воздействие цвета, «вес» каждого оттенка, сочетание цвета и формы и многое другое.

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

Привет! Представляю вашему вниманию перевод статьи «How to optimize image loading on your website».

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

Представьте, что вы заходите на такой сайт через медленный мобильный интернет, это может занять очень много времени и большинство пользователей в такой ситуации просто закроют ваш сайт еще до его загрузки. Хороший способ протестировать это — воспользоваться возможностью ограничить скорость интернета через Chrome Devtools.

Проблема

Проблема в том, что часто бывает так, что сам контент уже загружен, а изображения все еще загружаются. В итоге пользователь может увидеть пустое пространство там, где изображения загружаются медленно. Это явно не то, чего вы хотели бы.
Читать полностью »

Привет! Представляю вашему вниманию перевод статьи «5 Reasons You Should Stop Using System.Drawing from ASP.NET».

image

Ну что ж, они таки сделали это. Команда corefx в конце концов согласилась на многочисленные просьбы и включила System.Drawing в .NET Core. Читать полностью »

Вторая часть: Принципы работы видеокодека


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

Если рассматривать итоговый цвет как комбинацию т.н. основных цветов (красного, зеленого и синего), в нашей трёхмерной матрице определяем три плоскости: первая для красного цвета, вторая для зеленого и последняя для синего.

3D матрица RGB


Будем называть каждую точку в этой матрице пикселем (элементом изображения). Каждый пиксель содержит информацию об интенсивности (обычно в виде числового значение) каждого цвета. Например, красный пиксель означает, что в нём 0 зеленого цвета, 0 синего и максимум красного. Пиксель розового цвета может быть сформирован с помощью комбинации трех цветов. Используя числовой диапазон от 0 до 255, розовый пиксель определяется как Красный = 255, Зелёный = 192 и Синий = 203.Читать полностью »

Всем привет!

Я Михаил Кравченко, дизайнер игровых интерфейсов.

Это статья о том как нарисовать пак иконок для игры. Ниже вы видите результат.

Дизайн интерфейса для игры, рисуем пак иконок - 1

Фиксируем требования к результату

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

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

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

Вот пример такого списка:

  • Предметы должны быть похожи на другие подобные предметы из прошлых вторжений;
  • Будет 5 типов предметов — кольца, браслеты, броши, подвески и камни;
  • У каждого типа предмета будет три степени редкости. Чем более редкий предмет, тем больше силы он дает;
  • Степень редкости предмета нужно как-то показать визуально;
  • У камней помимо редкости есть 4 цвета — синий, красный, желтый и зеленый;
  • Предметы выпадают из бойцов армии вторжения, поэтому должны иметь характерные для этих противников черты и цвета;
  • Картинки нужны в формате Tga, размер — 128x128 пикселей.

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

В последние годы новостные ленты наводнили сообщения о появляющихся буквально из ниоткуда распределенных вычислительных сетях нового типа, решающих (точнее, пытающихся решить) самые разнообразные задачи — сделать город умным, спасти мир от нарушителей авторских прав или наоборот, тайно передать информацию или ресурсы, сбежать из-под контроля государства в той или иной сфере. Вне зависимости от сферы, все они обладают рядом общих черт, обусловленных тем, что топливом для их роста явились алгоритмы и методики, вышедшие в широкие массы во время недавнего бума криптовалют и связанных с ними технологий. Наверное, каждая третья статья на профильных ресурсах в то время в названии имела слово “блокчейн” — обсуждение новых программных решений и экономических моделей некоторое время стало доминирующим трендом, на фоне которого иные сферы применения систем распределенных вычислений были отодвинуты на второй план.

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


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