How to become an author

User

ProfileArticlesPostsNewsComments2

Stdit Feb 21 2012 at 16:31

Пиксельные искажения с билинейной фильтрацией в HTML5 canvas

3 min

8.9K

Canvas*Image processing*JavaScript*

flower

В данном посте я хочу описать простую методику пиксельного искажения изображения на «чистом» javascript в 2D-Canvas без использования специальных библиотек и шейдеров, путём прямого доступа к пикселям изображения. Надеюсь, это будет интересно и полезно как для общего развития, так и для решения каких-то задач.

Читать дальше →

+49

prentopros Jun 20 2017 at 08:52

GraphicsJS – графическая JavaScript библиотека

9 min

30K

JavaScript*Open source*Website development*

Перевод статьи. Англоязычный оригинал опубликован на SitePoint – "Introducing GraphicsJS, a Powerful Lightweight Graphics Library".

HTML5 – основа основ современного веба. И сегодня, когда встает задача создать интерактивную графику, выбор чаще всего падает на такие технологии, как SVG и Canvas. Flash позабыт, Silverlight – редкая птица, обитающая на задворках веба, и почти никто не помнит сторонние ActiveX и Java-плагины.

Плюсы и минусы SVG и Canvas хорошо известны – в целом все сводится к тому, что для создания интерактивных элементов и работы с ними больше подходит SVG. Это векторный формат, основанный на XML, и, когда изображение загружается на страницу с использованием тега <svg>, каждый его внутренний элемент становится доступен в SVG DOM.

В данной статье я хочу рассказать о GraphicsJS. Это мощная графическая JavaScript-библиотека с открытым исходным кодом, основанная на технологии SVG (VML для старых версий IE). Начну с краткого введения в основы GraphicsJS, а затем проиллюстрирую возможности библиотеки двумя небольшими, но наглядными примерами. Первый из них посвящен изобразительному искусству. Второй покажет, как менее чем за 50 строк кода сделать простую арт-игру в жанре таймкиллера.

+18

ilusha_sergeevich Sep 6 2013 at 12:32

Понятно про CSS Masking и Shapes Modules, или Будущая революция дизайна контента

6 min

60K

IT Standards*HTML*CSS*

Доброго времени суток уважаемые хабражители. На сегодняшний день с помощью CSS можно создать множество различных элементов. Это безусловно очень радует, вспоминая веб несколько лет назад. Но порой так «устаешь» от всех этих изощрений с :before и :after… Недавно я нашел две интересных спецификации CSS Masking Level 1 и CSS Shapes Level 2, благодаря которым в недалеком будущем перед нами откроются совершенно новые возможности оформления контента и разработки форм элементов.

CSS Masking

Совместимость

Все современные браузеры поддерживают свойства mask и clip-path, как определено в SVG 1.1 для элементов SVG. Но только Firefox позволяет применять эти свойства к HTML элементам, причем без префиксов. Но говоря конкретно про спецификацию CSS Masking, то свойства mask, clip-path, mask-box-image поддерживаются только на последних Webkit/Blink с префиксом webkit.

clip-path

Свойство clip-path создает область отсечения для любого из HTML элементов или графических элементов, в том числе элементам-контейнерам SVG — clipPath. Образовавшиеся элементы возможно анимировать. Одно впечатляющее демо (к сожалению работает только на последних Chrome).

Читать дальше →

+25

SLY_G Nov 29 2014 at 20:49

Выразительный JavaScript: Рисование на холсте

23 min

126K

JavaScript*Programming*

Translation

Содержание

Рисование — это обман.
М.К.Эшер

Браузеры позволяют нам рисовать графику разными способами. Проще всего использовать стили для расположения и расцветки стандартных элементов DOM. Так можно добиться многого, как показал пример игры из предыдущей главы. Добавляя частично прозрачные картинки узлам, мы можем придать им любой нужный вид. Возможно даже поворачивать или искажать узлы через стиль transform.

Но такое использование DOM – не то, для чего он создавался. Некоторые задачи, типа рисования линии между двумя произвольными точками, крайне неудобно выполнять при помощи обычных элементов HTML.

Есть две альтернативы. Первая – SVG, масштабируемая векторная графика, также основанная на DOM, но без участия HTML. SVG – диалект для описания документов, который концентрируется на формах, а не тексте. SVG можно встроить в HTML, или включить через тег <img>.

Вторая альтернатива – холст (canvas). Холст – это один элемент DOM, в котором находится картинка. Он предоставляет API для рисования форм на том месте, которое занимает элемент. Разница между холстом и SVG в том, что в SVG хранится начальное описание форм – их можно в любой момент сдвигать или менять размер. Холст же преобразовывает формы в пиксели (цветные точки растра), как только нарисует их, и не запоминает, что эти пиксели из себя представляют. Единственным способом сдвинуть форма на холсте является очистить холст (или ту часть, которая окружает форму) и перерисовать её на другом месте.

Читать дальше →

+33

alexzfort Jul 8 2018 at 20:02

Дайджест свежих материалов из мира фронтенда за последнюю неделю №322 (2 — 8 июля 2018)

4 min

16K

Zfort Group corporate blogWebsite development*JavaScript*HTML*CSS*

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Читать дальше →

+26

slayez Jul 10 2018 at 13:34

Алгоритм поиска пути A* в воксельной 3d игре на Unity

7 min

19K

Game development*Algorithms*Unity3D*C#*

Введение

При разработке своей игры, я дошёл до момента создания первых NPC. И появился вопрос как заставить NPC обойти стену а не "идти в неё".

Полазив по интернету я нашёл такие алгоритмы:

Поиск в ширину (BFS, Breadth-First Search)
Алгоритм Дейкстры (Dijkstra)
А Star "A со звёздочкой"
Поиск по первому наилучшему совпадению (Best-First Search)
IDA (A с итеративным углублением)
Jump Point Search

И решил попробовать реализовать свой A* на воксельной 3д сетке.

Читать дальше →

+17

PatientZero Jul 12 2018 at 09:18

Создание крюка-кошки в Unity. Часть 2

9 min

5.2K

Unity3D*Game development*

Translation

Примечание: этот туториал предназначен для продвинутых и опытных пользователей, и в нём не рассматриваются такие темы, как добавление компонентов, создание новых скриптов GameObject и синтаксис C#. Если вам нужно повысить навыки владения Unity, то изучите наши туториалы Getting Started with Unity и Introduction to Unity Scripting.

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

Читать дальше →

+22

dm_p2016 Jul 4 2018 at 08:54

Arduino — микромощный передатчик радиовещательного АМ-диапазона

4 min

37K

DIYMathematics*Developing for Arduino*Electronics for beginners

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

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

+49

PatientZero Jul 17 2017 at 06:41

Создание шейдеров

27 min

200K

WebGL*Image processing*Game development*

Translation

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

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

Сцена из Minecraft, до и после добавления нескольких шейдеров.

Задача этого туториала

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

+105

ru_vds Jul 6 2018 at 08:54

Основы JavaScript для начинающих разработчиков

11 min

171K

RUVDS.com corporate blogJavaScript*Website development*

Translation

Материал, перевод которого мы сегодня публикуем, посвящён основам JavaScript и предназначен для начинающих программистов. Его можно рассматривать и как небольшой справочник по базовым конструкциям JS. Здесь мы, в частности, поговорим о системе типов данных, о переменных, о массивах, о функциях, о прототипах объектов, и о некоторых других особенностях языка.

Читать дальше →

+19

EnglishDom Apr 27 2017 at 15:29

14 полезных сервисов и приложений для изучения английского

4 min

89K

EnglishDom corporate blogReading roomStudying in IT

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

Читать дальше →

+15

ru_vds Jun 15 2018 at 09:36

Особенности работы и внутреннего устройства express.js

7 min

43K

RUVDS.com corporate blogJavaScript*Node.JS*Website development*

Translation

Если вы занимались разработкой для платформы node.js, то вы, наверняка, слышали об express.js. Это — один из самых популярных легковесных фреймворков, используемых при создании веб-приложений для node.

Автор материала, перевод которого мы сегодня публикуем, предлагает изучить особенности внутреннего устройства фреймворка express через анализ его исходного кода и рассмотрение примера его использования. Он полагает, что изучение механизмов, лежащих в основе популярных опенсорсных библиотек, способствует более глубокому их пониманию, снимает с них завесу «таинственности» и помогает создавать более качественные приложения на их основе.

Читать дальше →

+26

zarytskiy Nov 29 2016 at 17:07

20 полезных Node.js фреймворков

8 min

84K

JavaScript*Node.JS*Programming*Website development*

За последние годы Node.js значительно повысил свой статус от экспериментальной технологии до основы для серьезных проектов. Node.js дает возможность построить достаточно сложные, высоконагруженные приложения на простом, элегантном и, самое главное, легковесном механизме. Но прежде всего Node.js – это совершенно увлекательная и захватывающая вещь, с которой по-настоящему интересно работать!

Читать дальше →

+34

PatientZero Jun 15 2018 at 13:04

Создание игры Tower Defense в Unity — Часть 2

18 min

22K

Game development*Unity3D*

Translation

Это вторая часть туториала «Создание игры Tower Defense в Unity». Мы создаём в Unity игру жанра tower defense, и к концу первой части, научились размещать и апгрейдить монстров. Также у нас есть один враг, нападающий на печенье.

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

Читать дальше →

+22

malkovsky Jun 11 2018 at 19:12

Обзор градиентных методов в задачах математической оптимизации

11 min

110K

Mathematics*Machine learning*

Предисловие

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

Читать дальше →

+76

shagimuratov Apr 19 2016 at 11:31

Решаем проблему с кешированием динамического JavaScript кода на фронтенд WordPress

4 min

5.7K

CleanTalk Anti-Spam corporate blogCMS*WordPress*Website development*

В процессе разработки анти-спам плагина CleanTalk для WordPress мы стокнулись с проблемой кеширования динамического JavaScript кода на фронтенде сайтов. А именно, если разместить JavaScript содержащий какие либо куски кода динамически подставляемые из бекенд сайта, то при наличии на сайте любого плагина кеширования страниц, JavaScript код становится не возможно использовать по назначению.

Читать дальше →

-1

eustatos Oct 14 2016 at 18:04

Добавление классов bootstrap 4 в меню WordPress

2 min

14K

Tutorial

Многие хотят уже сейчас использовать возможности bootstrap 4 при создании сайтов на WordPress. Ниже описывается одно из решений по созданию меню с использованием классов bootstrap 4.
Классы для navbar в bootstrap 4 отличаются от bootstrap 3.

Bootstrap 3

<ul class="nav navbar-nav">
  <li><a href="#">Первый</a></li>
  <li><a href="#">Второй</a></li>
  <li><a href="#">Третий</a></li>
</ul>

Bootstrap 4

<ul class="nav navbar-nav">
  <li class="nav-item"><a class="nav-link" href="#">Первый</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Второй</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Третий</a></li>
</ul>

Если в WordPress используется bootstrap 3 можно ограничиться добавлением к wp_nav_menu аргумента 'menu_class' => 'nav navbar-nav'. Если используется bootstrap 4 потребуется чуть больше движений.

Читать дальше →

-3

PatientZero Feb 26 2018 at 07:49

Система типов в математике

11 min

16K

Mathematics*Programming*

Translation

Время от времени мне встречаются вопросы по математике, которые в каком-то смысле можно назвать «грамматически неверными».

Пример. «Интервал

$inline$ является замкнутым или открытым?»
Пример. «Является ли

$\{ 1, 2, 3 \}$ группой?»
Пример. «Каков ряд Фурье для

$\sin x + \sin \pi x$ ?»

А вот ещё более глупые примеры.

Пример. «Является ли прямоугольник простым?»
Пример. "

$17 \in 3$ ?"
Пример. «Каков ряд Фурье для пустого множества?»

Объединяет все эти примеры то, что они являются ошибками типизации: это попытки применения некого математического процесса к математическому объекту, который никак не может быть входными данными для него. Если для ответа на эти вопросы вы попытаетесь написать программу на каком-нибудь высоко математическом языке программирования, то она (я надеюсь!) не скомпилируется.

Математические объекты обычно не воспринимаются явно как имеющие типы в том же смысле, что и объекты в языках программирования с системой типов. Предполагается, что обычная математика должна формализироваться в системе Цермело — Френкеля (ZF), возможно, с аксиомой выбора, а в ZF каждый математический объект конструируется как множество. В этом смысле все эти объекты имеют одинаковый тип. (В частности, вопрос "

$17 \in 3$ " вполне логичен в ZF! И это одна из причин, по которой стоит не любить ZF в качестве основы для математики.) Однако, мне кажется, что на практике математические объекты неявно воспринимаются, как имеющие типы, и такой образ мышления математики усваивают, но не часто обсуждают.

Читать дальше →

+40

lol_wat Mar 3 2018 at 14:57

Подборка: 12 сервисов для защиты от DDoS-атак

5 min

29K

Information Security*

По статистике, около 33% компаний попадают под DDoS-атаки. Предсказать атаку невозможно, а некоторые из них могут быть действительно мощными и достигать 300-500 Гб/с. Для того чтобы обезопасить себя от DDoS-атак можно воспользоваться услугами специализированных сервисов. Не все владельцы сайтов знают, куда бежать, если попал под атаку — так что я решил собрать несколько вариантов в одном топике.

Примечание: при подготовке к посту использовались англоязычные материалы и публикации на Хабре

Читать дальше →

+12

Harrix Mar 13 2018 at 07:04

Простой статический сайт на Webpack 4

15 min

143K

CSS*HTML*JavaScript*Node.JS*Website development*

Tutorial

После прочтения ряда статей (например, этой) решил перейти на современный подход с использованием Node.js при написании простых сайтов с подхода «динозавров». Ниже представлен разбор примера сборки простого статического сайта с помощью Webpack 4. Статья написана, так как инструкции с решением моей задачи не нашел: пришлось собирать всё по кусочкам.

Читать дальше →

+24

1 2 ...

9

10 11 ...