Видео как рисовать браузеров
Существует множество терминов, с помощью которых описываются визуальные эксперименты на компьютере, такие как dev art , code sketch , demo и интерактивное искусство, но в конечном итоге я выбрал термин программная поэма. Идея поэмы заключается в том, что это должна быть отшлифованная проза, легко передаваемая, краткая и эстетичная.
Для собственного удовольствия я читал книги по математике, вычислительным алгоритмам, физике и биологии. Очень быстро я понял, что, если просто носиться с идеей, это скоро надоест людям.
Но я могу взять некоторые из тех идей, которые я нахожу увлекательными, и представить их визуально, и тогда люди проникаются ощущением чуда, даже если они не понимают теорию, которая лежит в основе визуального представления, и концепции, которые приводят его в действие.
Вам не нужна какая-то сложная философия или математика, чтобы написать программную поэму, только желание увидеть что-то живое и яркое на экране.
Код и примеры, которые я собрал ниже, помогут вам понять, как осуществляется этот не слишком продолжительный, но очень насыщенный процесс. Если вы хотите разбираться параллельно с кодом, вы можете скачать исходные файлы здесь .
Введение по холстам
Если вкратце, холст по существу представляет собой двухмерный растровый элемент изображения, существующий в DOM , с помощью которого его можно нарисовать.
Рисунок может быть создан либо с помощью 2d -контекста, либо с помощью WebGL -контекста. Контекст является объектом JavaScript , который вы используете, чтобы получить доступ к инструментам рисования. События JavaScript , которые доступны для холста, очень кратки, в отличие от SVG .
Любое возникающее событие относится ко всему элементу в целом, а не какому-нибудь отдельному элементу, нарисованному на холсте, как в обычных элементах изображений. Вот простой пример холста:
С ним довольно просто начать работу. Единственное, что может быть немного сложным, это контекст, для которого перед запуском непосредственно рисования должны быть заданы такие настройки, как стили заполнения, ширина линии, шрифт и стили штрихов.
Очень легко забыть, что эти настройки должны быть обновлены или восстановлены, и тогда вы получите неожиданные результаты.
Приведение элементов в движение
В первом примере прямоугольник просто пробегается один раз через весь экран и остается в виде статического изображения на холсте. Это неплохо, но анимация действительно приносит удовольствие, когда картинка обновляется с частотой 60 кадров в секунду.
Современные браузеры имеют встроенную функцию requestAnimationFrame , которая синхронизирует пользовательский код рисования с циклом рисования браузера. Это помогает в плане эффективности и качества. Целью визуализации должен быть код, который работает с частотой 60 кадров в секунду.
( Замечание относительно поддержки браузерами: Есть несколько простых polyfills, если вам нужно обеспечить поддержку в старых браузерах ):
Рисование с помощью математики
Несмотря на эту любовь, я был несколько разочарован тем, как ее преподавали в школе. Все это было очень формально, что, конечно, отлично подходит математикам, но в этом не хватало волнения, глубокого исследования и прагматизма, что могло бы помочь в изучении некоторых очень простых концепций. Однако программисты игнорируют абстрактные доказательства и сосредотачиваются на интересных приложениях.
Позвольте мне отнять несколько секунд вашего времени, чтобы пояснить, как работает функция синуса. Это будет полезно, в плане того, чтобы задуматься, как с помощью математических функций можно создавать движение. Приведенные ниже миниатюры являются ссылками на интерактивный график функции синуса.
Теперь я перепишу формулу из предыдущего примера кода и создам другую версию, которую будет легче читать:
Если вы хотите поэкспериментировать с тем кодом, что я уже показал, я бы советовал вам попробовать добавить перемещение вдоль оси у. Попробуйте изменить значения в функции синуса или возьмите другую тригонометрическую функцию, чтобы поэкспериментировать с ней и посмотреть, что происходит.
Ввод данных пользователем
По ходу рассмотрения движения с помощью математики, хочу воспользоваться моментом и прикинуть, что вы можете сделать с помощью различных устройств ввода для перемещения прямоугольника по странице. Браузеры поддерживают все возможные варианты ввода, в том числе микрофон, веб-камеру, мышь, клавиатуру и геймпад.
Возможно также подключить дополнительные варианты ввода с помощью плагинов наподобие Leap Motion или Kinect . Используя WebSockets и сервер, вы можете подключить к визуализации свое оборудование.
Подключите микрофон к Web Audio API , и вы сможете управлять пикселями с помощью звука. Вы даже можете создать на базе веб-камеры датчик движения и распугивать виртуальных рыбок ( что-то подобное я сделал на Flash пять или около того лет назад ).
Теперь, когда мы разобрались с этим, давайте вернемся обратно и рассмотрим еще несколько примеров. Один квадрат это скучно, давайте поднимем ставки. Во-первых, давайте создадим функцию квадрата, который сможет делать многие вещи. Мы назовем ее Dot .
Еще одна вещь, которая здорово помогает при работе с движущимися объектами, это векторы, вместо использования отдельных переменных х и у .
В этих примерах кода, которые я подтянул из Three.js, есть класс Vector2 . Намного проще использовать сразу vector.x и vector.y , но этот класс также содержит несколько удобных методов. Для получения более подробной информации вы можете ознакомиться с документацией .
Всемогущая Dot
В этом примере все уже немного сложнее, потому что это взаимодействия с объектами, но оно того стоит. Посмотрите пример кода, в котором вы увидите новый объект Scene, который управляет рисованием на холсте.
Наш новый класс Dot будет работать с этим объектом, чтобы получить доступ к переменным, которые ему будут нужны, например, к контексту холста:
Чтобы приступить к разработке конструктора для Dot , настраиваем конфигурацию его поведения и устанавливаем некоторые переменные, которые мы будем использовать. Опять же, с помощью класса векторов Three.js .
При выводе содержимого с частотой 60 кадров в секунду, важно предварительно инициализировать объекты, а не создавать новые во время анимации. Потому что это съедает ресурсы памяти и может привести к прерывистой работе анимации. Кроме того, обратите внимание, как в Dot через ссылку передается копия scene . Это помогает поддерживать чистоту кода:
Все остальные части кода будут установлены в прототипе объекта Dot таким образом, чтобы каждый новый создаваемый Dot имел доступ к этим методам. Ниже я разберу все функции одну за другой:
Я обновляю код рисования из обновленного кода. Таким образом, значительно проще поддерживать код и увеличивать производительность объекта. Точно также в шаблоне проектирования MVC выделяется управление и логика представления. Переменная dt начинает изменяться каждую миллисекунду с момента последнего вызова обновлений.
Название хорошее, короткое и происходит от ( не пугайтесь ) производных исчислений. Это отделяет перемещение от скорости смены кадров. Таким образом, вы избежите замедления стиля NES , когда все станет слишком сложным. Если нагрузка будет слишком большой, из анимации выпадут некоторые кадры, но скорость останется той же самой:
Эта функция имеет немного запутанную структуру, но она удобна для визуализации. Она действительно потребляет много памяти. Переменная moveDistance устанавливается один раз и может повторно использоваться в любое время при вызове функции.
Этот вектор используется только, чтобы помочь вычислить новое положение, но не используется за пределами функции. Это первый элемент векторной математики, который мы использовали.
Сейчас вектор направления умножается на каждое изменение во времени, а затем добавляется к позиции. В конце концов, мы производим модульные действия, чтобы сохранить dot в пределах screen:
Теперь я добавляю новый Dot через вызов this.dot = new Dot(x, y, this) в конструкторе scene, а затем в методе обновления основного пространства действия добавляю this.dot.update( dt ) и получаю масштабирование точки по всему экрану. ( Чтобы увидеть весь код в контексте, посмотрите исходный код к статье ).
Удобнее, если мы соберем этот функционал в отдельный объект, чтобы код был проще и чище, так как сам процесс у нас все больше усложняется:
Теперь вместо того, чтобы создавать и обновлять Dot , мы используем scene, чтобы создавать и обновлять DotManager . Для начала мы создадим 5000 точек:
Хорошо, это уже лучше, чем просто одна точка. Сейчас самое время приступить к добавлению кода к методу обновления для одиночной Dot . Все меняется, когда код объекта влияет на каждую точку на экране. Вот когда на вещи начинает действовать магия. Помните функцию синуса? Как насчет того, чтобы добавить сейчас небольшой волновой эффект?
Мы создадим переменную wavePosition для объекта Dot . В финальном процессе рисования мы добавим эту переменную к позиции относительно оси Y :
До недавнего времени я работал в команде Яндекс.Браузера и по следам этого опыта сделал доклад на конференции YaTalks. Доклад был о том, что у браузера под капотом и как ваши странички превращаются в пиксели на экране. Минимум фронтенда, только внутренности браузера, только хардкор.
— Всем привет, меня зовут Костя. Удивительно — сейчас я работаю в команде виртуальной сети Яндекс.Облака. До этого я пять с лишним лет проработал в команде Браузера, так что сегодня буду говорить о вещах, общих для нас с вами.
Как можно догадаться, я не очень хорошо понимаю во фронтенде. Если вы будете говорить со мной о React или еще о чем-нибудь в этом духе, я, скорее всего, вас не пойму. Но я делал очень много вещей в браузере: декодирование видео, бизнес-логику. В том числе я провел много времени, делая разные вещи в отрисовке браузера. Сегодня у нас будет такой, скажем, ликбез о внутреннем устройстве браузера. Я постараюсь пройтись по наиболее интересным вещам, которые мы делали в Яндекс.Браузере или Google в Chromium.
Если говорить про отрисовку в браузере, то это очень сложная штука, которая состоит из большого количества компонентов. В первую очередь вы должны загрузить ресурсы, чтобы показать их. Потом вы должны их распарсить, построить DOM-дерево, стили, лейауты и т. д. Первые три пункта вам, скорее всего, знакомы. Мой доклад будет больше посвящен другим трем частям: Painting, Rasterization и Compositing — тому, что происходит под капотом, когда верстку вы уже написали. Только по словам может показаться, что это примерно об одном и том же — на самом деле это совершенно разные компоненты.

Начнем с Painting и Compositing. Что это вообще такое? Давайте вернемся на много-много лет назад, когда веб был не таким сложным, как сейчас, когда не было всяких 3D, CSS-анимации и прочих штук. Как тогда рисовал браузер? Представьте, что у вас есть ваша страница, на ней какие-то чудесные элементы, картиночки и т. д. Браузер все это рисовал на одну здоровенную текстуру, в большой блок памяти. Он знал, как нарисовать каждый элемент, и если у нас случались какие-то изменения, тут они выделены желтым, то происходило примерно следующее.
Браузер агрегировал их в области, которые здесь обозначены синим цветом. В этой области произошло какое-то изменение, давайте ее перерисуем. Все, что в этой области находилось, просто перерисовывалось и копировалось на текстуру.
Это вполне себе работало. Потом умные люди придумали 3D CSS-анимацию, другие вещи. У нас могло происходить очень много отрисовок в разных местах. Если мы крутим один спиннер, перерисовывать весь пирог элементов, которые под ним расположены, не очень эффективно.
Тогда другие умные люди решили это все немного переделать. У нас есть какое-то DOM-дерево, мы построили его в памяти. Это плюсовые объекты, они сравниваются с тем, какую верстку вы написали.
А потом начинает происходить магия. Браузер преобразует все DOM-дерево в дерево Render Object. Эта штука знает, как нарисовать каждый конкретный DOM-элемент. То есть она знает, что нужно сделать, чтобы на экране появилось что-то вместо вашего дерева или P-элемента.
Следующее дерево — дерево слоев. Что это? Каждый наш элемент может быть ассоциирован с каким-то одним слоем, причем один Render Layer может содержать сразу несколько объектов. Для чего так сделано? Здесь это очень хорошо показано. Мы генерируем набор слоев, на каждом из них есть определенные элементы. Теперь, предположим, на одном из слоев что-то меняется — происходит анимация, пролетает марки-элемент. Тогда мы перерисовываем только один слой, а остальные, например бэкграунд, остаются неизменными. Мы их потом просто склеиваем в композиты и на выходе получаем итоговую картинку — текущий кадр анимации.
Для создания новых слоев есть фиксированный набор причин. Например, слой создается, чтобы вынести на него 3D CSS-анимацию, canvas, видео-элемент — в общем, нечто связанное с тяжелой анимацией, пригодное для перерисов отдельно от всего остального содержимого.
Но такой подход имеет несколько проблем. Сейчас нужно включить мыслетопливо. Подумайте, что здесь будет изображено? Тут всего два элемента.
Вот. Хотя, казалось бы, элементы расположены один за одним. Почему canvas вылетает наверх? У нас же они последовательно расположены, я не задавал никакой порядок.
Давайте усложним. Тут у нас появляется еще один div, вот такой.
В общем, ожидаемое поведение. У нас div поверх div, но canvas почему-то сверху. Магия! Хорошо, давайте снова усложним этот пример.
Изменилась ровно одна строка, я добавил transform.
И теперь у нас все расположено правильно — по крайней мере, в терминах canvas и div. Но вот этот div все еще располагается внизу, хотя он был следующим элементом в нашей верстке.
Это так называемый фундаментальный баг композитинга. Если вы поищете по трекеру Chromium, то увидите кучу багов, которые слинкованы с одним древнющим. Он так и называется.
Так что произошло? Как я уже говорил, некоторые элементы выносятся на Render Layer, некоторые не выносятся. Какие-то рисуются совместно с другими. Здесь произошло следующее: div-элементы остаются в том же слое, что и бэкграунд. Canvas вылетает на отдельный слой. А z-ordering осуществляется только между слоями. Из-за того, что у нас бэкграунд и div в одном слое, а canvas в другом, получается баг: canvas перекрывает div.
Но как только мы выносим этот div-элемент на отдельный слой и он начинает нормально использовать z-order, он также начинает понимать, кто за кем расположен. И тут уже все отрисовывается «нормально».
И одна из последних инициатив, развивающихся уже несколько лет, — так называемая Slimming Paint, которая должна это починить. Ее смысл в том, что нам нужно отделить Painting от вынесения на слои, то есть понимание, что нужно сделать для отрисовки этих элементов, от того, как их потом композитить друг с другом. Если у нас вот такая простая верстка, она превращается во что-то подобное. Есть простой список команд, которые нужно сделать, чтобы получить контент страницы. И если мы вернемся к этому примеру, она будет выглядеть примерно так.

То есть мы сказали: вот тебе Paint, вот тебе контент — пожалуйста, дай мне что-нибудь. Он дает список для отрисовки, который уходит в Compositor, и Compositor понимает, как нужно разбить весь контент на слои, чтобы они были нормально расположены друг относительно друга.
И если вы не заметили, это скриншот из Chrome. Я сделал его где-то недели две назад, то есть баг все еще живой. Проект еще не закончен, он сейчас в процессе разработки.

То есть Compositor по этому списку и по каким-то тайным знаниям, которые передает plink, может понять, как правильно разбить это все на слои.

Помимо того, что такой подход в принципе починит этот баг, мы также получаем довольно дешевые изменения в отрисовке. Предположим, у нас был список команд отрисовки и происходят изменения — скажем, элемент B уходит, элемент E добавляется. Тогда мы можем просто смержить два списка, не парясь с деревьями и т. д. На выходе мы получим новый список элементов для отрисовки, и, возможно, новый список слоев, которые в дальнейшем будут композититься.
Это был короткий рассказ о том, что происходит, когда браузер осуществляет Paint, и что происходит потом, когда он пытается скомпозитить слои.

Давайте перейдем к другой теме: Rasterization. Как раз в Rasterization в Яндекс.Браузере было сделано много всего, и я этим тоже занимался. В чем смысл растеризации? На выходе предыдущего этапа, когда мы сделали Paint, есть список команд, которые мы должны осуществить, чтобы получилась какая-то картинка. Растеризация — это превращение списка команд в реальные пиксели.
Если вы откроете в инспекторе браузера вкладку More tools → Rendering, то там есть галочка Layer borders. И вы видите вот такую сетку. Что здесь происходит? Когда браузер рисует страницу, он на самом деле теперь не делает ее целиком. Каждый слой браузер берет и разбивает на какое-то количество вот таких квадратиков. Исторически сложилось, что они размером 256 на 256 пикселей. То есть каждый слой разбивается на вот такое количество отдельных текстур. На каждую текстуру потом рисуется контент текущего тайла, и потом они все склеиваются в одну большую текстуру.
Это помогает во многом. Прежде всего, мы можем перерисовывать только те тайлы, которые изменились. Но еще это позволяет нам приоритизировать отрисовку. То есть в первую очередь должны быть нарисованы те тайлы, которые видит пользователь, так называемые viewport. Затем мы должны нарисовать soon border, это то, что вокруг viewport. Дальше — направление скролла: если ее скроллят вниз, мы прорисовываем как можно больше вниз. Если вверх — прорисовываем как можно больше вверх. Если у нас осталась квота памяти, мы нарисуем что-нибудь еще, но не факт, что она останется к этому моменту.
Так мы получаем довольно дешевое обновление контента на странице. Предположим, мы взяли текущий кадр и пользователь что-то проинвалидировал — например, выделил текст. Тогда мы пририсуем только те тайлики, которые изменились.
То есть зеленые тайлы — это которые остаются от предыдущей отрисовки, красные — это которые мы перерисовали. Но у такого подхода есть и другие преимущества.
Мы можем сделать — и в Chrome это сделали — так называемую оптимизацию маленьких перерисовок. Предположим, у вас есть какой-то throbber, курсор или еще что-то в этом духе, выполняющее небольшую перерисовочку в маленьком прямоугольнике. Тогда нам нет необходимости перерисовывать весь квадрат. Это логично. Например, если у нас моргает курсор, то перерисовывается только он. Это существенно экономит CPU.
Следующая оптимизация, которую они сделали. Где тут может быть неэффективность? Тайлы сдвинуты? Хорошая идея, но я клоню к другому. Вот просто белый прямоугольник. Это белый тайл, на котором не нарисовано ни единого пикселя. Но это текстура. Она занимает память 256 на 256 на четыре байта.
Еще одна оптимизация, которую придумали в Chrome: а давайте мы возьмем еще эти тайлы, одноцветные, и закодируем их не кучей пикселей, а, по сути, координаторами, размером и цветом. Интернет сейчас полон страницами с большим количеством одноцветных областей для больших мониторов. И такие страницы, соответственно, оптимизируются, мы получаем большую экономию памяти.
Мы в Яндексе пошли немножко дальше и решили сделать более специфичный эксперимент. Как вы думаете, где тут еще можно сэкономить?
У нас есть тайл. Контент на нем расположен в какой-то крохотной области — полоска, слово «Яндекс». Зачем нам рисовать целиком, если контента очень мало, а все остальное одноцветное?
Что мы сделали? Этим занимался конкретно я. Мы разбили каждый тайл на пять тайлов. Если контент в нем только в серединке, то мы выделяем текстуру для этого контента только под то, что сделано в серединке. Вот красная область. Все остальное мы кодируем так же — размер, координаты и цвет.
То есть конкретно на данной странице все эти области теперь стали не текстурой. Используются не байты в памяти, а просто команды о том, что нам нужно тут нарисовать, залить одним цветом. Это дало нам экономию примерно в 40% по памяти GPU в среднем на пользователя.
На более сложных страницах это выглядит так. Учитывая то, что более сложные страницы используют больше слоев, а каждый слой — отдельный тайлинг, то на любом слое можно немножко поэкономить.
Если вы сейчас включите эту галочку, то увидите не такую сетку из прямоугольников, а вот такую.
Что это такое, почему тайлы здесь такие широкие, и почему их мало? Смысл здесь в следующем. В Chrome подумали: почему бы нам не сделать не только хардварный композитинг, но и хардварную отрисовку. Что они делают? У нас есть список команд о том, что нужно сделать: нарисовать прямоугольник, залить цветом и т. д. Все это уходит на GPU, и GPU рисует такую текстуру. Перерисовка происходит очень быстро, поэтому тайлы тоже можно сделать большими. Вот немножко шакалистое видео, но оно очень хорошо показывает преимущество, которое случилось на телефонах как раз за счет того, что отрисовка стала хардварно ускоренной. Я думаю, разница тут очень-очень заметная.
Общение разработчиков браузера с фронтендерами мне кажется очень полезным. Оно случается не очень часто, но дает много пользы. Поэтому когда к нам приходят наши коллеги из других отделов и спрашивают, как нам сделать верстку побыстрее и получше, то мы стараемся им помочь и рассказать о местах, где что-то не оптимально и можно ускориться.
И я не устану повторять свои советы. (Не буду приводить здесь конспект, на эту тему был отдельный большой доклад. — прим. автора.)
Здесь я собрал набор полезных ссылок, про отрисовку и не только, а также немножко про Яндекс.Браузер. Спасибо.
Стоило человеку отложить в сторону вкусный сладкий банан, спуститься с пальмы, научиться балансировать на двух ногах и обзавестись палкой-копалкой, как его душа неумолимо потянулась к прекрасному. Древние романтики с замиранием сердца выводили тростинками на глиняных стенах пещер изображения своих возлюбленных, охотники малевали копьями самые памятные сцены охоты, шаманы лепили из перемешанной с собственными выделениями и кровью глины фигурки богов, женщины напевали своим младенцам наспех придуманные колыбельные, а какой-нибудь архитектор начала антропогена пытался украсить свое жилище при помощи шишек и сушеных мухоморов.
За свой относительно недолгий эволюционный путь человек впитал в себя тягу к творчеству буквально на генетическом уровне. Правильнее будет даже сказать, что именно эта тяга обусловила становление нас как биологического вида. Любой ребенок, едва научившись ползать, уже тянет ручонки к кубикам и пытается сложить из них примитивную постройку, став постарше, малюет на листке бумаги каракули цветными карандашами, потом дело доходит до кисти и красок, аппликаций, коллажей и икебан.
Вот только, повзрослев, многие из нас забывают о творчестве, выбирают профессию, руководствуясь зачастую принципом «здесь больше платят», а не «мне нравится этим заниматься». А ведь психологи давно подметили, что нереализованное творческое начало может аукнуться серьезными проблемами. И хорошо, если все закончится лишь маленьким комплексом или кризисом переходного возраста (кстати, если не знаете, то основная его причина именно в том, что человек чувствует, будто не проявил себя), а ведь могут и проблемы со здоровьем начаться. Тахикардия, аритмия, нарушение сна. Это лишь маленький перечень возможных неприятностей.
И почему-то мало кто понимает, что для реализации своего творческого начала совсем не обязательно долго учиться, вполне достаточно просто выйти в интернет. Основной принцип пресловутого веб 2.0 заключается в том, что пользователи должны сами принимать непосредственное участие в создании контента.
На самом деле, творчеством можно назвать очень многое. Даже простое ведение блога или создание домашней странички это, как ни крути, творчество. Но мы сегодня поговорим о самых ярких, самых наглядных его проявлениях. О рисовании, анимации, архитектуре и музыке. В интернете есть немало сайтов, где можно попробовать себя в роли художника, примерить виртуальный костюм архитектора или возомнить себя композитором. И при этом вам не придется изучать длинные инструкции, тратить месяцы на освоение профессиональных программ или посещать лекции в институте. В Сети творчество может стать необычайно легким, приятным, упоительным занятием.
Подражая мастеру
Наше путешествие мы начнем с сайтов, посвященных изобразительному искусству в том или ином его проявлении. Теоретически для того, чтобы хорошо рисовать, надо обзавестись графическим планшетом, лет пять помять пятую точку за партой в изобразительной школе, да еще и талант не помешал бы. Но интернет тем и хорош, что сглаживает, уменьшает ощущение собственной бездарности. Картинка, которая на бумаге выглядит как минимум нелепо, в Сети многих может позабавить, спровоцировать бурное обсуждение на форуме, а то и вовсе попасть в какой-нибудь чарт безбашенных зарисовок. Даже Пабло Пикассо не раз говорил своим заказчикам: «Я заканчиваю ваш портрет. А теперь постарайтесь быть похожим на него».
Оказывается, рисовать в стиле Пикассо не так уж сложно, если все основные штрихи приготовлены заранее.
Онлайновый мольберт
Сальвадор Дали нередко пользовался техникой коллажа. Конечно, до его работ нам далеко, но кое-что интересное сочинить вполне можно.
Картины, выполненные в стиле абстрактного экспрессионизма, выглядят словно кто-то пролил на бумагу несколько ведерок краски. Но рисовать их увлекательно.
Очень забавно путешествовать по сайту. В центре плотность рисунков самая высокая, они буквально наслаиваются друг на друга и, судя по всему, модерируются администрацией — по крайней мере, никаких пошлых надписей и изображений в центре нет. А вот на краях ситуация меняется. Во-первых, картинки здесь нанесены уже не так часто, во-вторых, появляется всякая похабщина. Все как в жизни: центр города поддерживается в чистоте, а на всякие Бутово и Бирюлево сил у виртуальной мэрии уже не остается.
На сайте Strip Generator можно рисовать небольшие комиксы. Кстати, это один из немногих комикс-генераторов, который адекватно отображает кириллицу.
Веселые картинки
Никаких баллончиков и трафаретов, прятаться от стражей правопорядка теперь тоже не придется: на Zewall можно рисовать хоть на кирпичной стене, хоть в переходе метро.
Карикатура как самостоятельный вид искусства оформилась в середине XIX века, но еще долго ютилась по бульварным газетенкам и уличным развалам, где открытки с карикатурами и веселыми шаржами можно было купить по копейке за штуку. Потом в США и Европе начали потихоньку появляться профильные юмористические журналы, целиком и полностью состоящие из карикатур, ну а в СССР этот вид творчества получил широкое распространение в начале 40-х как отличный инструмент идеологической войны с Западом. На самом деле нарисовать качественный шарж даже сложнее, чем обычный портрет. Ведь в портрете вам нужно лишь передать сходство с реальным человеком, а в шарже выявить и в гротескной форме подчеркнуть отдельные черты внешности, свойства характера и даже манеру поведения.
Искусство оживления
Еще лет двадцать назад мультипликация была уделом профессионалов. Максимум, на что могли рассчитывать обычные люди, — нарисовать на уголках книги человечка в различных позах, а затем «прокрутить» анимацию быстрым перелистыванием страниц. Некоторые умельцы снимали самопальные мультфильмы при помощи фотокамер, но это было уже дорого, да и времени отнимало неимоверное количество. Потом в домах потихоньку начали появляться компьютеры, а вместе с ними и программы для создания мультфильмов. Одной из первых была Fantavision, которая появилась на свет в 1986 году (кстати, именно на ней в 1991 году Эрик Шайи сделал легендарную игру Another World).
Но настоящий бум любительской анимации начался с появлением в 1995 году пакета Macromedia Flash. Практически любому стало возможно, недели три покопавшись в настройках и менюшках, сделать свой собственный мультфильм. За 13 лет программа сделала колоссальный скачок в развитии (один из самых серьезных скачков произошел после покупки Macromedia компанией Adobe Systems — тогда Macromedia Flash переименовали в Adobe Flash), но до сих пор довольно сложной для неподготовленного человека.
City Creator гордо именуется архитектурным симулятором, хотя больше напоминает детский конструктор «Лего».
Под музыку Вивальди
Desktop Blues — очень простенький генератор блюзов. Впрочем, на сайте есть разделы, где можно творить в стиле спид-металл, рок и даже в столь необычном музыкальном направлении, как «насвистывание в душе во время почесывания мочалкой левой лопатки».
Фрэнк Заппа, американский композитор и рок-гитарист, руководитель группы The Mothers of Invention, однажды сказал, что говорить о музыке — это все равно, что танцевать об архитектуре. И, в общем-то, он прав. Либо вы наделены талантом и творите музыку, либо вы ее слушаете, а вот разговоры здесь совершенно неуместны.
Но чтобы слушать, особого умения не нужно, а вот творить могут лишь единицы. Но и здесь прогресс не стоит на месте. С появлением программных синтезаторов, микшеров и секвенсоров в музыкальную индустрию пришло огромное количество людей без музыкального образования. И непросто пришло, а даже добилось на этом поприще заметных успехов. Ну а с развитием интернета создавать свою музыку получили возможность и самые обычные люди.
Между прочим, это тоже импровизированный музыкальный генератор. Девушки мило попискивают и ойкают, если щекотать их курсором мышки: при желании можно наигрывать простенькие мелодии.
| Зодчие интернета | |
| Имена великих художников знакомы всем: Ван-Гог, Репин, Пикассо, Дали, Гоген — даже школьник-двоечник легко продолжит список еще двумя-тремя десятками фамилий. Мультипликаторы и аниматоры менее известны, но и тут есть фамилии, которые у всех на слуху: Дисней, Татарский, Котеночкин, Норштейн, Кавамото, Миядзаки. А вот людей, внесших значимый вклад в архитектуру, практически никто не знает. Вам что-нибудь говорят такие имена, как Заха Хадид, Норман Фостер, Массимилиано Фуксас? Действительно, когда речь заходит об архитектуре, вспоминают в лучшем случае Константина Церетели (да и тот был не архитектором, а инженером-строителем), потому что он отец Зураба Церетели, и Растрелли, потому что он построил Зимний дворец. Несмотря на то что архитектура имеет, скажем так, куда большее прикладное значение, чем изобразительное искусство или мультипликация (все-таки в домах мы живем), она находится в тени своих «старших» собратьев. В интернете проектов, позволяющих почувствовать себя архитектором, тоже не очень много, но они есть. Здесь ты можешь рисовать онлайн. Представлены самые разные рисовалки и профессиональные растровые и векторные графические редакторы в онлайн исполнении, сервисы для совместного рисования и создания анимации. Есть 3D сервисы.
Рисовалка с базовами инструментами для рисования: различные кисти, перья, заливка, слои. Фоторедактор с возможностями трансформации изображения, а также кистями, фильтрами, фигурами, стикерами, текстом.
Изящная онлайновая рисовалка c реалистично расплывающейся у вас на глазах краской.
Программируемое рисование SVG графики с помощью блоков языка Snap! Крайне необычно. Для "ботаников". Конструктор 3d моделей с оригинальной технологией, подходящей даже для малышей. Современный редактор и аниматор пиксельарта с удобными инструментами и шкалой кадров.
Бесплатный конструктор иллюстраций с большой библиотекой готовых изображений: фото, предметов, интерьеров, пейзажей, персонажей.
Векторный редактор с большой коллекцией изометрических объектов, сгруппированных по темам. Легкая, податливая рисовалка с разными кистями и режимами наложения.
3D редактор в котором можно лепить и раскрашивать модели как из пластилина. Необычной концепции рисовалка по точкам с максимально точным позиционированием линий и фигур. Экспорт в SVG. Cамое популярное в мире приложение для построения и анализа геометрических фигур и графиков алгебраических функций.
Качественный конвертор ваших фото в мультяшный вид. Есть и другие эффекты и инструменты редактирования.
Онлайновый генератор фоновых изображений (паттернов) с настройками и возможностью сохранения. 3D редактор с хорошими возможностями воксельной графики и экспорта в растр и obj.
Простое приложение для покадровой анимации в онлайне. См. справку по кнопкам под рисовалкой.
Визуальный редактор css-свойства clip-path. Шаблоны фигур, настройка узлов мышкой, генерация кода.
Несложное приложение для быстрого создания эстетичных деформированных многоугольников с общим центром. Улётный фоторедактор, онлайновый младший брат Adobe Photoshop. Может даже что-то больше.
Оргигинальный сервис, позволяющий на основе вашей картинки генерить разные паттерны для фона за секунды.
Новая версия лаконичного графического редактора, в кот. можно создавать фигуры, линии, применять эффекты к растровым изображениям.
Онлайн сервис для преобразования готовой картинки в текстуру из символов. Онлайн сервис для создания пиксельной графики и её анимации с удобными инструментами для этого.
Онлайн сервис по наложению на фотографию полигонального эффекта. Есть настройки алгоритмов и сохранение на диск. Онлайн сервис по наложению на фотографию или на видео с вебкамеры интересного анимированного эффекта.
Очень продвинутый генератор и редактор бесшовных фоновых текстур для нужд html верстальщиков и web дизайнеров. Простая рисовалка с возможностью анимировать весь ваш процесс рисования.
Онлайн-сервис для создания анимации с векторным редактором, таймлайном, редактором js-скриптов.
Студия фотоэффектов от популярных художников и дизайнеров последнего столетия. Векторный редактор с базовыми инструментами векторной графики, в том числе с узлами контура. Фоторедактор с хорошо работающими инструментами для обработки фотографий. Много разнообразных стикеров. Конвертирует картинку в кубический стиль живописи с разнообразными настройками и возможностью сохранения в svg-формате.
Из нарисованного вами контура-шаблона эта программка создаст художественную картинку: дом, котика, обувь или сумку! В этом онлайновом сервисе вы сможете замостить вашу картинку узором по вашему выбору и настройкам, и сохранить в SVG, PNG.
Простой редактор, позволяющий превратить вашу фотографию в стильный набор кружков, квадратов или линий.
Забавная рисовлка в трехмерной области, которая все время крутится. Рисование дрожжащими линями разного цвета и размера. Сила вибрации регулируется. Удобный сервис составления коллажа из ваших картинок, есть предустановленные шаблоны.
В этой рисовалке можно создавать красивые симметричные орнаменты линиями и формами различной прозрачности. Умеет обрабатывать единичные фотографии различными способами, а также делать фотоколлажи.
Фоторедактор, работающий с растровыми форматами, включая RAW. Умеет из картинок собирать PDF. Умеет открывать PDF. Редактор для создания веб-анимации и сохранения её в форматах HTML5, GIF или в VIDEO. Напоминает десктопный Adobe Flash редактор.
Сервис для создания оригинальных коллажей. Карточки заполняют площадь коллажа по любому трафарету. Несмотря на старомодный интерфейс, этот редактор даст фору многим другим онлайновым фоторедарторам. Лёгкое и быстрое онлайн приложение для подбора цветов и получение их кода.
Задаете параметры и нажимаете кнопку "Пробел" - простой фрактал готов. Его можно сохранить.
Эта инновационная рисовалка позволяет создавать фрактальную графику - самоподобные орнаменты.
А не слабо ли тебе нарисовать портрет непрерывной разноцветной линией? Попробуй, что-нибудь обязательно получится.
Простой, быстрый и эффективный редактор векторной графики. Экспорт/импорт - SVG и PNG.
Добротный фоторедактор с приятным дизайном, похож на Аватан, но четче и без рекламы. Удобная рисовалка со множеством тематических кистей и с возможностью проигрывать процесс рисования.
Создай и отредактируй коллаж из своих картинок в простом и удобном редакторе коллажей. Полноценный редактор 3D сцен и 3D объектов с возможностью экспорта/импорта в формате obj.
Рисует симметричными кистями, узорами, можно провести линию с градиентом, сохранить рисунок на компьютере.
Очень и очень достойный редактор векторной и растровой графики с библиотекой текстовых эффектов!
Удобный и многофункциональный фоторедактор - полный аналог Аватана с точностью до деталей. Работает надежно!
Самый "крутой" фоторедактор. Три изюминки сверх стандартных инструментов - составление коллажей, открытки и HDR.
Старая, добрая магнитная доска для малышей. Рисуй, стирай, рисуй, стирай. Ставь штампики. Печатай. Лего-подобный 3D конструктор с огромной библиотекой строительных материалов. Хороший фоторедактор, предлагающий удобные инструменты для быстрой обработки вашего изображения, поддерживаются слои.
Простая приятная рисовалка с сохранением и настраиваемыми кистями, чем-то по манере рисования напоминает САИ. Нарисуйт свое граффити. 9 различных стилей. Сохранение в PDF или вывод на принтер.
Супер реалистичная рисовалка акварелью и даже маслом. Можно менять влажность холста и смешивать краски.
Предельно понятный и эффективный фоторедактор. Есть интересные фильтры под потертые временем фотографии.
Простая рисовалка для художников. Легкие кисти, смешивание красок, текстуры, слои.
Легко и красиво нарисовать диаграмму тебе поможет это удобное приложение.
Вылепи как из пластилина трехмерную модель с помощью простых инструментов.
Очень удачная программа. Много шаблонных объектов и клипартов. Сохранять и загружать можно самые разные форматы файлов.
Шустрый, внушающий доверие, редактор, который умеет производить основные операции с векторной графикой.
Интеллектуальная рисовалка, которая угадывает, что вы хотите нарисовать, и предлагает на замену вашим каракулям свои арты.
Несмотря на вид "попсовый" это классный фоторедактор! Особенно хороши возможности по созданию коллажей.
Повезло мальчикам и девочкам, которые любят раскрашивать трафареты, причем не заливкой из ведерка, а кисточками.
Не просто песня, а песня с управляемыми визуальными эффектами. Высший пилотаж эстетического наслаждения!
То ли рисовалка, то ли игралка, то ли насыпалка. Можно засыпать экран разноцветными слоями песка. Много раскрасок для малышей на разные темы: мультфильмы, люди, животные, техника.
Красивая рисовалка кистью, которая похожа на огонь. Рисовать трудно, но интересно.
Цветы, цветочки и еще раз цветочки. Можно менять цвет фона клавишей "Пробел".
Cервис специализируется на создании галактик. Выбирай цвет, кисть и мышкуй по космическим просторам, создавая шлейф звездных скоплений.
Ничего лишнего - только создание векторной графики в виде линий, контуров, библиотечных фигур. Есть слои.
Вполне приличная легкая рисовалка с необходимым набором для творчества. Проигрывает то, что вы нарисовали.
Очень понравилась эта рисовалка с богатым разнообразием кистей, текстур и генератором узоров. Надо приноровиться.
Ну была у Яндекса рисовалка, ну было навешено на неё, как на новогоднюю ёлку, ну бросил Яндекс детей и закрыл рисовалку. Осталась старая версия. Знаешь что такое реклама? Это как правило что-то ненужное, иногда интересное и всегда неожиданное.
Рисование по звездному небу. Рисует векторными линиями с возможностью последующего 3D просмотра.
Рисование курсорами различного вида и различной динамики. Странная рисовалка. Экспериментируйте. Последняя версия одного из самых продвинутых растровых онлайн-редакторов для дизайнеров.
Популярный в сети редактор, похожий на 5 и 6, чуть меньше функционала, но всё необходимое есть!
Рисование на бесконечном рисовальном полотне вместе с незнакомыми художниками.
Рисование кистью-огнем под музыку. Два режима с симметрией и один без симметрии. Для медитации.
Зайдя на эту страницу, вы попадете в детство, т.к. сможете мастерить трехмерные объекты из разноцветных кубиков.
Очень гармоничная рисовалка. Ничего лишнего. Умеет сохранять ваше творение на вашем же компьютере. Разнооборазие кистей, стикеры, русские шрифты. привлекут внимание широкой аудитории оформителей.
Это удобный редактор векторной графики. Умеет читать и сохранять файлы в формате SVG. Редактор серии кадров с достаточно удобным интерфейсом, позволяет сохранять 100 кадров в анимированный gif-файл.
Несколько он-лайн редакторов для создания мультфильмов и анимации. Сохраняют ваши фильмы во flash или gif.
Это эволюционная версия популярного растрового графического редактора, работающая по новой технологии HTML5.
Исключительно удобный фоторедактор, который порадует пользователя своей податливостью и функциональностью.
Рисование разными дизайнерскими кистями с возможностью сохранить сделанную работу на своем компьютере.
Рисование анимированными кистями - линии твоего рисунка будут дрожать, прыгать и дергаться.
Рисование фломастером с выбором цветов, толщины линии, проигрыванием процесса рисования после завершения рисунка. В браузере Edge от Microsoft, установленном по умолчанию на устройствах с Windows 10, есть несколько новых функций, на которые хотелось бы обратить особое внимание, в том числе очень шустрый и безопасный движок рендеринга (который был доступен в качестве экспериментальной функции в сборке 9926) . Как начать рисованиеКогда в браузере вы перешли на веб-страницу и захотели сделать отметку, щелкните маленький значок, который выглядит как ручка и бумага в верхнем правом углу окна. Там их немного, найти необходимый очень просто.
Веб-страница обновится, и панель инструментов будет выглядеть поверх обычной панели инструментов. С левой стороны панели инструментов можно увидеть пять значков: перо, маркер, ластик, текст и булавка. Инструмент «Перо» выбран по умолчанию, поэтому вы можете просто начать писать, если хотите (средней толщины, светло-голубые чернила). Если вы хотите изменить цвет пера, щелкните значок пера, чтобы выбрать один из 12 цветов и трех размеров. Нарисуйте что-нибудьЕсли вы предпочитаете ввод текста, можно использовать текстовый инструмент, чтобы комментировать веб-страницу. Для этого нажмите кнопку текстового инструмента, а затем щелкните в любом месте страницы. В этом месте появится пронумерованный штифт, а рядом с ним вы увидите текстовое поле, в котором вы можете ввести все, что хотите. Если вы хотите убрать страницу, рекомендуем закрыть текстовое поле, нажав на пронумерованный вывод. Инструмент останется там, где он есть, но текстовое поле будет сведено к минимуму. Чтобы снова открыть текстовое поле, просто нажмите на него еще раз. Вы также можете переместить текстовое поле, нажав и перетащив пронумерованный штифт.
Чтобы удалить и вывод комментария, и текстовое поле, щелкните значок корзины в правом нижнем углу текстового поля. Одно замечание: при использовании текстового инструмента все маркеры «чернила» (перо и маркер) будут отображаться во всех текстовых полях. Поэтапное удалениеС правой стороны панели инструментов можно увидеть значок сохранения и значок общего доступа. Чтобы сохранить веб-страницу с вашими аннотациями, щелкните значок «Сохранить». Чтобы поделиться своими художествами, щелкните значок общей папки, чтобы открыть боковую панель совместного доступа Windows 10. В верхней части боковой панели вы увидите имя вашего файла. Нажмите на него, чтобы выбрать, предоставлять ли общий доступ к вашему файлу в виде ссылки или скриншота. Под ним вы увидите список приложений и программ, которые вы можете использовать для совместного использования вашего файла. Разработчики постоянно вносят корректировки в работу системы, поэтому заглядывайте чаще в наш путеводитель по Windows 10! Читайте также:
|
