Paper.js, Processing.js и Raphaël на данный момент являются лидирующими библиотеками для рисования в Web, давайте же рассмотрим одну из них, а именно:  Processing – подключим ее к wordpress, а также рассмотрим примеры и их реализацию на wordpress сайте.

Скачать исходники для статьи можно ниже

Processing — открытый язык программирования, основанный на Java. Представляет собой лёгкий и быстрый инструментарий для людей, которые хотят программировать изображения, анимацию и интерфейсы.

Processing.js — это открытый язык программирования для визуализации в вебе,  который представляет собой портированный Processing на JavaScript.

Для того чтобы подключить Processing.js к wordpress можно воспользоваться плагином – Processing.js, который есть в репозитории wordpress (“wordpress.org”), сведения о нем:

Последнее обновление: 2012-8-1

Загрузок: 3,763

Автор: Ramoonus

Установка плагина Processing.js стандартная – панель управления wordpress – в левом меню выбираем пункт “Плагины” и его подпункт “Добавить новый”, в строку поиска вводим “Processing.js”, устанавливаем и активируем.

Настроек у данного плагина нет – он просто подключает последнюю версию js библиотеки Processing.

После активации плагина вы сможете вставлять код языка программирования Processing на своем сайте wordpress и увидеть результат (анимацию, изображение).

Для того чтобы вставить код языка Processing – можно воспользоваться виджетом под названием “Текст” (панель управления – пункт “Внешний вид” – подпункт “Виджеты” – виджет “Текст”). Вставка кода языка Processing, аналогична вставке javascript в wordpress – поэтому можете прочитать мою предыдущую статью – Как подключить javascript в WordPress.

Примеры работы языка Processing:

1. Змейка, которая двигается за курсором мышки.

Демо пример можете посмотреть по следующей ссылке: “processingjs.org/learning/custom/snake/”

2. Рыбка, которая двигается за курсором за мышкой.

Другие примеры анимации и изображений на языке Processing.js найдете на следующих сайтах:

– “processing.org/examples/”;

– “processingjs.org/exhibition/”;

– “processingjs.org/learning/”;

– и др.

Реализация анимации Processing.js в wordpress

Давайте для примера – вставим в сайдбар анимацию мячика, который будет двигаться за курсором мышки.

1. Устанавливаем wordpress плагин Processing.js

2. Вставляем в виджет “Текст” следующий код:

<script type="application/processing">
 /*
 PROCESSINGJS.COM - BASIC EXAMPLE
 Delayed Mouse Tracking
 MIT License - Hyper-Metrix.com/F1LT3R
 Native Processing compatible
 */

 // Global variables
 float radius = 50.0;
 int X, Y;
 int nX, nY;
 int delay = 16;

 // Setup the Processing Canvas
 void setup(){
 size( 200, 200 );
 strokeWeight( 10 );
 frameRate( 15 );
 X = width / 2;
 Y = width / 2;
 nX = X;
 nY = Y;
 }

 // Main draw loop
 void draw(){

 radius = radius + sin( frameCount / 4 );

 // Track circle to new destination
 X+=(nX-X)/delay;
 Y+=(nY-Y)/delay;

 // Fill canvas grey
 background( 100 );

 // Set fill-color to blue
 fill( 0, 121, 184 );

 // Set stroke-color white
 stroke(255);

 // Draw circle
 ellipse( X, Y, radius, radius );
 }


 // Set circle's next destination
 void mouseMoved(){
 nX = mouseX;
 nY = mouseY;
 }
 </script>
<canvas width="200px" height="200px"></canvas>

Все готово!!!

В итоге у вас должно получиться следующее:

PS: Советую также прочитать отличную статью (на русском языке) со сравнением трёх JS библиотек для рисования в WEB: Paper.js, Processing.js и Raphaël по следующей ссылке: “pvsm.ru/javascript/5399/print/”