Java Script

Описание: Наиболее перспективное направление развития компьютерных наук. Надо быть в теме!

dyvniy M
Автор темы, Администратор
Администратор
Аватара
dyvniy M
Автор темы, Администратор
Администратор
Возраст: 41
Репутация: 1
Лояльность: 1
Сообщения: 3579
Зарегистрирован: Ср, 10 октября 2012
С нами: 11 лет 5 месяцев
Профессия: Программист
Откуда: Россия, Москва
ICQ Сайт Skype ВКонтакте

#19 dyvniy » Вт, 20 октября 2015, 13:45:31

без фреймворков
http://habrahabr.ru/post/268915/
Изображение

dyvniy M
Автор темы, Администратор
Администратор
Аватара
dyvniy M
Автор темы, Администратор
Администратор
Возраст: 41
Репутация: 1
Лояльность: 1
Сообщения: 3579
Зарегистрирован: Ср, 10 октября 2012
С нами: 11 лет 5 месяцев
Профессия: Программист
Откуда: Россия, Москва
ICQ Сайт Skype ВКонтакте

#20 dyvniy » Вт, 27 октября 2015, 11:47:09

Изображение

dyvniy M
Автор темы, Администратор
Администратор
Аватара
dyvniy M
Автор темы, Администратор
Администратор
Возраст: 41
Репутация: 1
Лояльность: 1
Сообщения: 3579
Зарегистрирован: Ср, 10 октября 2012
С нами: 11 лет 5 месяцев
Профессия: Программист
Откуда: Россия, Москва
ICQ Сайт Skype ВКонтакте

#21 dyvniy » Сб, 31 октября 2015, 17:20:07

html, xml или json
http://javascript.ru/ajax/formats

Код: Выделить всё

var my_JSON_object =
!(/[^,:{}[]0-9.-+Eaeflnr-u nrt]/.test(data.replace(/"(.|[^"])*"/g, ''))) &&
eval('(' + data + ')')


Для отладки
https://jsfiddle.net/e0a8vtbt/
Изображение

dyvniy M
Автор темы, Администратор
Администратор
Аватара
dyvniy M
Автор темы, Администратор
Администратор
Возраст: 41
Репутация: 1
Лояльность: 1
Сообщения: 3579
Зарегистрирован: Ср, 10 октября 2012
С нами: 11 лет 5 месяцев
Профессия: Программист
Откуда: Россия, Москва
ICQ Сайт Skype ВКонтакте

#22 dyvniy » Сб, 31 октября 2015, 21:16:04

Взаимодействие с посетителем

Простейшие функции для взаимодействия с посетителем в браузере:

prompt(вопрос[, по_умолчанию])
Задать вопрос и возвратить введённую строку, либо null, если посетитель нажал «Отмена».

confirm(вопрос)
Задать вопрос и предложить кнопки «Ок», «Отмена». Возвращает, соответственно, true/false.

alert(сообщение)
Вывести сообщение на экран.
Изображение

dyvniy M
Автор темы, Администратор
Администратор
Аватара
dyvniy M
Автор темы, Администратор
Администратор
Возраст: 41
Репутация: 1
Лояльность: 1
Сообщения: 3579
Зарегистрирован: Ср, 10 октября 2012
С нами: 11 лет 5 месяцев
Профессия: Программист
Откуда: Россия, Москва
ICQ Сайт Skype ВКонтакте

#23 dyvniy » Вс, 1 ноября 2015, 09:27:37

fullscreen
http://html5.by/blog/fullscreen-javascript-api/
Спойлер
Fullscreen javascript API или как развернуть страницу на весь экран c html5.

8
Давайте познакомимся с еще одним, довольно молодым API, необходимость которого уже давно терзает умы разработчиков игр, видеосайтов и прочих полноэкранных сервисов. Fullscreen javascript API пока является черновиком, но уже поддерживается в chrome, safari, ff и опере.

Internet-explorer (включая Ie10) как всегда замедляет прогресс, ну и пусть себе умирает.

Без лишних слов перейдем к примеру:

Демо


открыть в новом окне

Как устроен fullscreen API?

Спецификация представляет из себя:

2 метода: requestFullScreen и cancelFullScreen
2 свойства обекта document: fullscreenElement и fullscreenEnabled
1 событие fullscreenchange
В идеальном мире после окончания споров, согласования всех вопросов между браузерами и обкатки стандарта это должно будет выглядеть так:

Запустить отображение в полноэкранном режиме

Javascript
document.documentElement.requestFullScreen(); // отобразить страницу в полноэкранном режиме
document.getElementById("video1").requestFullScreen(); // отобразить элемент в полноэкранном режиме
Выйти из полноэкранного режима

JavaScript
document.cancelFullScreen();
2 свойства объекта document

JavaScript
fullscreenElement = document.fullscreenElement; // элемент который в данный момент находится в полноэкранним режиме
fullscreenEnabled = document.fullscreenEnabled; // статус (true или false)
Событие об изменениии режима

JavaScript
element.addEventListener("fullscreenchange", function(e){
console.log('статус fullscreen = ', document.fullscreenEnabled);
});
Ну а пока API довольно новое, все свойства, события и методы можно использовать только с префиксами (03.2013)

Вот несколько функций, которые могут помочь.

JavaScript
//Запустить отображение в полноэкранном режиме
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Выход из полноэкранного режима
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
var onfullscreenchange = function(e){
var fullscreenElement =
document.fullscreenElement ||
document.mozFullscreenElement ||
document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled ||
document.mozFullscreenEnabled ||
document.webkitFullscreenEnabled;
console.log( 'fullscreenEnabled = ' + fullscreenEnabled, ', fullscreenElement = ', fullscreenElement, ', e = ', e);
}
// Событие об изменениии режима
el.addEventListener("webkitfullscreenchange", onfullscreenchange);
el.addEventListener("mozfullscreenchange", onfullscreenchange);
el.addEventListener("fullscreenchange", onfullscreenchange);
CSS для fullscreen API

Псевдокласс :full-screen предназначен для стилизации элементов в полноэкранном режиме.

Ниже приведен пример с префиксами -webkit- и -moz- , которые через некоторое время можно будет опустить и использовать просто :full-screen

CSS
/* красный фон для полноэкранного режима */
:-webkit-full-screen {
background: red;
}
:-moz-full-screen {
background: red;
}
/* полноэкранное отображение <video> */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}
:-moz-full-screen video {
width: 100%;
height: 100%;
}
Как открыть IFRAME в fullscreen?

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

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

html
<iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" src="http://google.com" />
В этом случае, браузер будет давать право встроенному фрейму открываться в режиме fullscreen.

Код примера в начале статьи

HTML
<div id="fs-container">
<div class="fs_section" id="fs_section_img">
<div id="i1"></div><div id="i2"></div><div id="i3"></div>
<button onclick="enterFullscreen('fs_section_img')">Toggle iframe content fullscreen</button>
</div>
<div class="fs_section" id="fs_section_video">
<video controls>
<source src="/blogdemo/video/chrome.webm" type="video/webm" />
<source src="/blogdemo/video/chrome.ogv" type="video/ogg" />
<source src="/blogdemo/video/chrome.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'" />
</video>
<button onclick="enterFullscreen('fs_section_video')">Toggle iframe content fullscreen</button>
</div>
</div>
JavaScript
document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen;
function onFullScreenEnter() {
console.log("Enter fullscreen initiated from iframe");
};
function onFullScreenExit() {
console.log("Exit fullscreen initiated from iframe");
};
// Note: FF nightly needs about:config full-screen-api.enabled set to true.
function enterFullscreen(id) {
onFullScreenEnter(id);
var el = document.getElementById(id);
var onfullscreenchange = function(e){
var fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled;
console.log( 'fullscreenEnabled = ' + fullscreenEnabled, ', fullscreenElement = ', fullscreenElement, ', e = ', e);
}
el.addEventListener("webkitfullscreenchange", onfullscreenchange);
el.addEventListener("mozfullscreenchange", onfullscreenchange);
el.addEventListener("fullscreenchange", onfullscreenchange);
if (el.webkitRequestFullScreen) {
el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else {
el.mozRequestFullScreen();
}
document.querySelector('#'+id + ' button').onclick = function(){
exitFullscreen(id);
}
}
function exitFullscreen(id) {
onFullScreenExit(id);
document.cancelFullScreen();
document.querySelector('#'+id + ' button').onclick = function(){
enterFullscreen(id);
}
}
CSS
:-webkit-full-screen{
background: black;
}
:-moz-full-screen {
background: black;
}
:-webkit-full-screen#fs_section_video.fs_section,
:-webkit-full-screen#fs_section_img.fs_section{
width:100%;
left:0;
top:0;
}
:-moz-full-screen#fs_section_video.fs_section,
:-moz-full-screen#fs_section_img.fs_section{
width:100%;
left:0;
}
:-webkit-full-screen#fs_section_img.fs_section #i1{
display:none;
}
:-moz-full-screen#fs_section_img.fs_section #i1{
display:none;
}
:-webkit-full-screen#fs_section_img.fs_section #i2{
display:block;
z-index:1;
}
:-moz-full-screen#fs_section_img.fs_section #i2{
display:block;
z-index:1;
}
:-webkit-full-screen#fs_section_img.fs_section #i3{
opacity:1;
display:block;
z-index:2;
-webkit-transition: all 2s 2s ease-in-out;
}
:-moz-full-screen#fs_section_img.fs_section #i3{
opacity:1;
display:block;
z-index:2;
-moz-transition: all 2s 2s ease-in-out;
}
Часть кода не приведена, что-бы не засорять статью. Вы всегда можете все посмотреть, проинпектировав пример в вашем любимом браузере.

Жду вопросов и отзывов в комментариях ;)

Print FriendlyPDF и версия для печати
Опубликовано Март 31, 2013
Автор: Nedudi Дудин Дмитрий
Комментариев: 19 ⇩
27,573 views
‹ Battery javascript API – состояние и статус зарядки батареи устройства c html5 javaScript classList API – идеальный способ добавления, удаления, переключения и проверки классов элемента в html5 ›
Метки: api, fullscreen, html5, javascript
19 КОММЕНТАРИЕВ НА “FULLSCREEN JAVASCRIPT API ИЛИ КАК РАЗВЕРНУТЬ СТРАНИЦУ НА ВЕСЬ ЭКРАН C HTML5.”

ram117 пишет:
Июль 14, 2013 в 20:25
Спасибо за статью.. Как по мне то это уже давно востребованная функция,
Жаль пока я так понял нет поддержки в Опере…
А также хотелось-бы узнать по-поводу вашего примера для Mozzila , нехочет нормально отображать :( В Хроме всё отлично!
В коде указана вроде проверка для Mozzila ,но пока не получаецо :)

Ответить
Вася пишет:
Август 5, 2013 в 8:19
Насчет оперы – новая, 15-я, уже на движке вебкита, так что проблема исчезла.

Ответить
Ростислав пишет:
Январь 2, 2014 в 13:10
Здравствуйте! А как сделать такое с флеш игрой swf? Просто когда пишу фиксированную ширину для сайта то потом когда сделаю на весь экран его размер такой же просто появится фон. А если поставлю процентами то все ок.

<param name="game" value="”>
<embed src="/games/” width=”800px” height=”650px”>

<button onclick="enterFullscreen('fs_section_video')">Toggle iframe content fullscreen</button>

Ответить
admin пишет:
Январь 5, 2014 в 15:53
Дайте ссылку на демо, если возможно.

Ответить
Сергей пишет:
Март 12, 2015 в 10:04
Подскажи пожалуйста как решил проблему?

Ответить
Ростислав пишет:
Январь 16, 2014 в 19:41
Все сделал, работает, спасибо за скрипт!

Ответить
Сергей пишет:
Март 12, 2015 в 10:06
Как решил проблему?

Ответить
Вадим пишет:
Январь 24, 2014 в 9:45
Удивительно, но срабатывает только при переходе с обычного режима в FullScreen, а открыть браузер по-умолчанию в режиме fullscreen не хочет.
Например так:
$(function(){
document.documentElement.requestFullScreen();
}

Ответить
admin пишет:
Февраль 24, 2014 в 20:31
requestFullscreen() не может быть вызван без действий пользователя (в хроме так точно). Поэтому он может быть запущен по:

click (кнопка или ссылка…)
нажатию клавиш (keydown, keypress…)
allowfullscreen аттрибут у iframe
в спеке от W3:

“…To prevent embedded content from going fullscreen only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen…”

Ответить
Alex пишет:
Февраль 24, 2014 в 15:07
Привет! Всё работает если только JS внутри HTML, когда пробую вынести код в подключённый JS- не работает. Как решить эту проблему?

Ответить
Alex пишет:
Февраль 24, 2014 в 15:09
Автору огромное СПАСИБО! Единственное адекватное решение в сети что мне удалось найти!

Ответить
admin пишет:
Февраль 24, 2014 в 20:32
Спасибо! Посмотрите пожалуйста комментарий выше, только что оставил Помогает?

Ответить
Станиалв пишет:
Апрель 4, 2014 в 10:53
Все работает замечательно, но после перехода по ссылке на другую страницу сайта fullscreen выходит в обычный режим. Тогда как при запуске fullscreen на f11 такого нет. Как добиться такого результата?

Ответить
Nedudi Дудин Дмитрий пишет:
Апрель 4, 2014 в 11:07
Думаю, что это логично для браузера.
Fullscreen режим попросила только Ваша страница.
При переходе на другой таб он отключает fullscreen.

В случае же f11 – вы включаете fullscreen для всех табов

Ответить
Sergio пишет:
Октябрь 23, 2014 в 12:10
Про IE11 забыли:
http://msdn.microsoft.com/ru-ru/library/ie/dn265028(v=vs.85).aspx

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

Ответить
zzz пишет:
Февраль 27, 2015 в 21:25
а готовый пример открытия фрейма архивом загрузить? как пример

Ответить
zzz пишет:
Февраль 28, 2015 в 10:25
проверил на Android 4.1 браузер 4.48 не открывается : / и на Safari + Windows
Как то можете поправить код? или подсказать работающие аналоги? Спасибо!!!!! очень нужно

Ответить
zzz пишет:
Март 2, 2015 в 17:01
автор ответишь или игнорить будешь? : /

Ответить
Nedudi Дудин Дмитрий пишет:
Март 2, 2015 в 17:41
Сори у меня нет и не будет времени править Ваш код или “пример открытия фрейма архивом загрузить”

Изображение

dyvniy M
Автор темы, Администратор
Администратор
Аватара
dyvniy M
Автор темы, Администратор
Администратор
Возраст: 41
Репутация: 1
Лояльность: 1
Сообщения: 3579
Зарегистрирован: Ср, 10 октября 2012
С нами: 11 лет 5 месяцев
Профессия: Программист
Откуда: Россия, Москва
ICQ Сайт Skype ВКонтакте

#24 dyvniy » Пн, 2 ноября 2015, 10:45:56

Графики как от руки
http://habrahabr.ru/post/269931/
то же на питоне http://nbviewer.ipython.org/url/jakevdp.github.co ... ads/notebooks/XKCD_plots.ipynb
Изображение
Спойлер
О том, как рисовать кривые графики в стиле XKCD
Программирование*, Ненормальное программирование*, Визуализация данных*, Веб-разработка*, JavaScript*
Недавно я публиковал статью на Хабре про гитарный тюнер, и многих заинтересовали анимированные графики которые я использовал для иллюстрации звуковых волн, в том числе технология создания таких графиков. Поэтому в этой статье я поделюсь своим подходом и библиотечкой на Node.js которая поможет строить подобные графики.






Предыстория

Зачем делать графики кривыми?

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

Именно на этом нюансе создаются комиксы XKCD, юмор которых базируется на простых зависимостях интерпретируемых в некоторой необычной манере:




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

Зачем писать скрипты для построения графиков?

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

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

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

Почему Node.js?

Существует много библиотек для построение графиков, в том числе с эффектом XKCD, есть расширения для matplotlib и специальный пакет для R. Тем не менее, Javascript имеет ряд преимуществ.

Для Javascript доступен довольной удобный браузерный Canvas и Node.js-библиотеки которые реализуют это поведение. В свою очередь, скрипт написанный для Canvas можно воспроизвести в браузере, что позволяет, например, отображать данные на сайте динамически. Так же Canvas удобен для отладки анимации в браузере, т.к. отрисовка происходит фактически на лету. Имея скрипт отрисовки на Node.js можно задействовать пакет GIFEncoder, который позволяет очень просто создать анимированный ролик.

Добавление искривлений

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




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

Описанное поведение может быть реализовано следующим образом:

self.replot = function(line, step, radius){
var accuracy = 0.25;

if(line.length < 2) return [];
var replottedLine = [];

var beginning = line[0];
replottedLine.push(beginning);

for(var i = 1; i < line.length; i++){
var point = line[i];
var dx = point.x - beginning.x;
var dy = point.y - beginning.y;
var d = Math.sqrt(dx*dx+dy*dy);

if(d < step * (1 - accuracy) && (i + 1 < line.length)){
// too short
continue;
}

if(d > step * (1 + accuracy)){
// too long
var n = Math.ceil(d / step);
for(var j = 1; j < n; j++){
replottedLine.push({
x: beginning.x + dx * j / n,
y: beginning.y + dy * j / n
});
}
}

replottedLine.push(point);
beginning = point;
};

for(var i = 1; i < replottedLine.length; i++){
var point = replottedLine[i];
replottedLine[i].x = point.x + radius * (self.random() - 0.5);
replottedLine[i].y = point.y + radius * (self.random() - 0.5);
};

return replottedLine;
};


Результат такой обработки:



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

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

ctx.beginPath();
ctx.moveTo(replottedLine[0].x, replottedLine[0].y);

for(var i = 1; i < replottedLine.length - 2; i ++){
var point = replottedLine[i];
var nextPoint = replottedLine[i+1];

var xc = (point.x + nextPoint.x) / 2;
var yc = (point.y + nextPoint.y) / 2;
ctx.quadraticCurveTo(point.x, point.y, xc, yc);
}

ctx.quadraticCurveTo(replottedLine[i].x, replottedLine[i].y, replottedLine[i+1].x,replottedLine[i+1].y);
ctx.stroke();


Полученная сглаженная линия как раз и будет соответствовать небрежному начертанию:




Библиотечка Clumsy


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

В случае Node.js процесс инициализации выглядит примерно так:

var Canvas = require('canvas');
var Clumsy = require('clumsy');

var canvas = new Canvas(800, 600);
var clumsy = new Clumsy(canvas);


Основные методы класса, необходимы для отрисовки простейшего графика:

range(xa, xb, ya, yb); // задает границы сетки графика
padding(size); // размер отступа в пикселах
draw(line); // отрисовывает линию
axis(axis, a, b); // отрисовывает ось
clear(color); // очищает canvas заданным цветом

tabulate(a, b, step, cb); // вспомогательный метод для табулирования данных


Более полный список методов и полей, а так же их описание и примеры использования можно найти в документации проекта на npm.

Как это работает можно продемонстрировать на примере синуса:

clumsy.font('24px VoronovFont');
clumsy.padding(100);
clumsy.range(0, 7, 2, 2);

var sine = clumsy.tabulate(0, 2*Math.PI, 0.01, Math.sin);
clumsy.draw(sine);

clumsy.axis('x', 0, 7, 0.5);
clumsy.axis('y', -2, 2, 0.5);

clumsy.fillTextAtCenter("Синус", 400, 50);





Анимация


Добиться движущегося изображения на Canvas'е в браузере довольно просто, достаточно обернуть алгоритм отрисовки в функцию и передать в setInterval. Такой подход удобен в первую очередь для отладки, т.к. результат наблюдается непосредственно. Что же касается генерации готового gif'а на Node.js, то в этом случае можно воспользоваться библиотекой GIFEncoder.

Для примера, возьмем спираль Архимеда, которую заставим вращаться со скоростью pi радиан в секунду.
Когда требуется анимировать некоторый график удобнее всего сделать отдельный файл отвечающий исключительно за отрисовку, и отдельно файлы настраивающие параметры анимации — fps, длительность ролика, и т.п. Назовем скрипт отрисовки spiral.js и создадим в нем функцию Spiral:

function Spiral(clumsy, phase){
clumsy.clear('white');
clumsy.padding(100);
clumsy.range(-2, 2, -2, 2);

clumsy.radius = 3;

var spiral = clumsy.tabulate(0, 3, 0.01, function(t){
var r = 0.5 * t;
return {
x: r * Math.cos(2 * Math.PI * t + phase),
y: r * Math.sin(2 * Math.PI * t + phase)
};
})

clumsy.draw(spiral);

clumsy.axis('x', -2, 2, 0.5);
clumsy.axis('y', -2, 2, 0.5);

clumsy.fillTextAtCenter('Спираль', clumsy.canvas.width/2, 50);
}

// Костыль для предотвращения экспорта в браузере
if(typeof module != 'undefined' && module.exports){
module.exports = Spiral;
}


Затем можно просмотреть результат в браузере, сделав отладочную страницу:

<!DOCUMENT html>
<script src="https://rawgit.com/kreshikhin/clumsy/master/clumsy.js"></script>
<link rel="stylesheet" type="text/css" href="http://webfonts.ru/import/voronov.css"></link>
<canvas id="canvas" width=600 height=600>
<script src="spiral.js"></script>
<script>
var canvas = document.getElementById('canvas');
var clumsy = new Clumsy(canvas);

var phase = 0;
setInterval(function(){
// Фиксированный seed предотвращает "дрожание" графика
clumsy.seed(123);

Spiral(clumsy, phase);
phase += Math.PI / 10;
}, 50);
</script>


Откладка в браузере удобна тем, что результат появляется сразу же. Т.к. не требуется время на генерацию кадров и сжатие в формат GIF. Что может занять несколько минут. Сохранив страницу в .html формате и открыв в браузере мы должны увидеть на Canvas вращающаяся спираль:




Когда график отлажен, можно используя тот же файл spiral.js создать скрипт для генерации GIF-файла:

var Canvas = require('canvas');
var GIFEncoder = require('gifencoder');
var Clumsy = require('clumsy');
var helpers = require('clumsy/helpers');
var Spiral = require('./spiral.js');

var canvas = new Canvas(600, 600);
var clumsy = new Clumsy(canvas);

var encoder = helpers.prepareEncoder(GIFEncoder, canvas);
var phase = 0;
var n = 10;

encoder.start();
for(var i = 0; i < n; i++){
// Фиксированный seed предотвращает "дрожание" графика
clumsy.seed(123);

Spiral(clumsy, phase);

phase += 2 * Math.PI / n;
encoder.addFrame(clumsy.ctx);
};

encoder.finish();


Абсолютно аналогичным образом я создавал графики для иллюстрации явления стоячей волны:



Исходный код scituner-standing-group.js




Исходный код scituner-standing-phase.js

Заключение

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

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

Полную документацию и примеры можно найти по этим ссылкам:

github.com/kreshikhin/clumsy

npmjs.com/package/clumsy

Исходный код сопровождён MIT-лицензией. Поэтому можете смело использовать интересующие вас участки кода или весь код проекта в своих целях.
Комментарии (10)
Спойлер

+4 Barttos 2 ноября 2015 в 02:05#
Тут еще один вариант для искривление линий: bl.ocks.org/dfm/3914862 (function xinterp)
+7 kekekeks 2 ноября 2015 в 02:21#
Эцсамое, при анимации графика оси не должны вибрировать, как мне кажется. Возможно, имеет смысл разбить изображение на статичный фон и анимированный график.
+8 savostin 2 ноября 2015 в 04:13#↵↑
А мне наоборот симпатичны эти смешные стрелочки.
+1 Areso 2 ноября 2015 в 08:23#↵↑
Возможно сделать опцией, потому что, думаю, будут сторонники обоих вариантов.
0 deniskreshikhin 2 ноября 2015 в 10:06 (комментарий был изменён)#↵↑
Да, я тоже думал над этим. Как все-таки лучше.

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

PS Пожалуй подумаю, как это вынести в опцию.
0 Vendict 2 ноября 2015 в 06:46#
Вот похожий способ: Автоматизированное создание диаграмм в xkcd-стиле.
+2 Find_the_truth 2 ноября 2015 в 08:21#
Прям мощно. А главное, создает небольшую разрядку, даже если тема очень серьезная. Гораздо приятнее смотреть на такие графики, нежели на угрюмые, ровные до тошноты, оси
0 deniskreshikhin 2 ноября 2015 в 10:14#↵↑
Спасибо, придерживаюсь такого же мнения)
0 Jenyay 2 ноября 2015 в 08:36#
В Matplotlib (библиотека для построения графиков в Python) тоже есть такой фильтр.
+3 bromzh 2 ноября 2015 в 08:49#
Добавлю свои 5 копеек. Вариант для питона
Изображение


Название раздела: Web на стороне клиента, Java Script
Описание: Наиболее перспективное направление развития компьютерных наук. Надо быть в теме!

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения
:) ;) :hihi: :P :hah: :haha: :angel: :( :st: :_( :cool: 8-| :beee: :ham: :rrr: :grr: :* :secret: :stupid: :music: Ещё смайлики…
   

Вернуться в «Web на стороне клиента, Java Script»

Кто сейчас на форуме (по активности за 15 минут)

Сейчас этот раздел просматривают: 6 гостей