Використання Processing.js з jQuery в Processing

У цьому прикладі ми розглянемо роботу Processingjs з jQuery Ми попрацюємо з jQuery UI (User Interface), для користувача інтерфейсом, побудованим поверх jQuery Ця бібліотека дозволить нам зробити движки для управління скетчем Processing

Приступимо

Перш ніж ми почнемо писати код, вам потрібно завантажити jQuery і jQuery UI На цих веайтах ви знайдете все, що потрібно:

f  http://jquerycom/

f  http://jqueryuicom/

Збережіть зменшені файли jQuery і jQuery UI в папку js разом із зменшеним файлом Processingjs Додайте файли resetcss і stylecss в папку css Основна папка, яку ви бачите на скріншоті, містить файли CSS і кілька зображень, необхідних для коректної роботи jQuery UI Ви знайдете папку base в папці themes файлу jQuery UI, який ви скачаєте

Як це робиться

Тепер все на місці і ми можемо приступати Файл HTML дещо відрізняється від HTML файлу з прикладу Пишемо скетчі за допомогою JavaScript Я приєднав нові файли CSS і JavaScript і додав нові порожні елементи div на них ми зробимо бігунки

&lt!doctype html&gt

&lthtml lang=&quoten&quot&gt

&lthead&gt

&ltmeta charset=&quotutf-8&quot /&gt

&lttitle&gtUsing Processingjs with jQuery&lt/title&gt

&ltlink rel=&quotstylesheet&quot href=&quotcss/resetcss&quot media=&quotscreen&quot /&gt

&ltlink rel=&quotstylesheet&quot href=&quotcss/base/jqueryuiallcss&quot&gt

&ltlink rel=&quotstylesheet&quot href=&quotcss/stylecss&quot media=&quotscreen&quot /&gt

&ltscript src=&quotjs/jquery-172minjs&quot type=&quottext/javascript&quot&gt&lt/script&gt

&ltscript src=&quotjs/jquery-ui-1818customminjs&quot type=&quottext/javascript&quot&gt&lt/script&gt

&ltscript src=&quotjs/processing-136minjs&quot type=&quottext/javascript&quot&gt&lt/script&gt

&ltscript src=&quotjs/mysketchjs&quot type=&quottext/javascript&quot&gt&lt/script&gt

&lt/head&gt

&ltbody&gt

&ltdiv id=&quotcontainer&quot&gt

&ltcanvas id=&quotmycanvas&quot&gt&lt/canvas&gt

&ltp&gtUse these sliders to change the background color&lt/p&gt

&ltdiv id=&quotred&quot&gt&lt/div&gt

&ltdiv id=&quotgreen&quot&gt&lt/div&gt

&ltdiv id=&quotblue&quot&gt&lt/div&gt

&ltp&gtUse this slider to change the radius of the ball&lt/p&gt

&ltdiv id=&quotradius&quot&gt&lt/div&gt

&lt/div&gt

&lt/body&gt &lt/ html&gt

У файл CSS я додав кілька керуючих конструкцій для створення движків червоного, зеленого і синього компонентів Повний CSS код виглядає так:

body {

background: #fff color: #000

font-family: Helvetica, Arial, sans-serif font-size: 12px

line-height: 14em

}

#container { width: 640px

margin: 40px auto

}

h1 {

font-size: 2em line-height: 1em

margin-bottom: 05em

}

p {

margin-bottom: 14em

}

canvas {

margin-bottom: 30px

}

#red,

#green,

#blue {

margin-bottom: 20px

}

#red ui-slider-range { background: #f00

}

#green ui-slider-range { background: #0f0

}

#blue ui-slider-range { background: #00f

}

А тепер найважче – написати код JavaScript для підключення движків до нашого скетчу Processing:

$(document)ready( function() {

$( &quot#red, #green, #blue&quot )slider({ orientation: &quothorizontal&quot,

range: &quotmin&quot, max: 255,

value: 0,

slide: updateBackground, change: updateBackground

})

$( &quot#radius&quot )slider({

orientation: &quothorizontal&quot, range: &quotmin&quot,

min: 40,

max: 160,

value: 80,

slide: updateRadius, change: updateRadius

})

var red = 0, green = 0, blue = 0 var radius = 80

function updateBackground()

{

red = $(&quot#red&quot)slider( &quotvalue&quot ) green = $(&quot#green&quot)slider( &quotvalue&quot ) blue = $(&quot#blue&quot)slider( &quotvalue&quot )

}

function updateRadius()

{

radius = $(&quot#radius&quot)slider( &quotvalue&quot )

}

function mySketch( processing )

{

var x var y

var velX = 1 var velY = 1

processingsetup = function()

{

processingsize( 640, 480 ) processingbackground( red, green, blue ) processingnoStroke()

processingfill( 255 )

x = processingwidth/2

y = processingrandom( processingheight )

}

processingdraw = function()

{

x += velX

if ( x &lt radius || x &gt processingwidth – radius) { velX *= -1

}

y += velY

if ( y &lt radius || y &gt processingheight – radius ) { velY *= -1

}

processingbackground( red, green, blue ) processingellipse( x, y, radius * 2, radius * 2 )

}

}

var canvas = $(&quot#mycanvas&quot)[0]

var processingInstance = new Processing( canvas, mySketch )

})

Якщо все зроблено вірно, ви побачите те, що зображено на цьому скріншоті Червоний, зелений і синій движки регулюють колір фону скетчу нижній движок змінює радіус рухомого кола

Як це працює

Давайте розібємо код JavaScript на невеликі блоки і розглянемо їх окремо, щоб розібратися в скетчі

$(document)ready( function() {})

Перший рядок коду схожа на функцію windowonload їх прикладу Пишемо скетчі за допомогою JavaScript Це основна функція, що виконується один раз, при завантаженні сторінки Ваш код повинен працювати в фігурних дужках

$( &quot#red, #green, #blue&quot )slider({ orientation: &quothorizontal&quot,

range: &quotmin&quot, max: 255,

value: 0,

slide: updateBackground, change: updateBackground

})

Цей блок коду створює движок з порожніх елементів div, які ми додали в файл HTML Установки в фігурних дужках створюють горизонтальний движок і максимальною величиною 255 і початковою величиною рівний 0 Установки slide і change відносяться до функції updateBackground Блок коду, що починається з $ (# radius) Slider () створює движок, що міняє радіус рухомого кола

var red = 0, green = 0, blue = 0 var radius = 80

Ще нам потрібно оголосити змінні для кількості червоного, зеленого, синього кольорів і для радіуса Це повинно бути виконано поза функції mySketch (), щоб ми могли отримати до них доступ з будь-якої частини коду

function updateBackground()

{

red = $(&quot#red&quot)slider( &quotvalue&quot ) green = $(&quot#green&quot)slider( &quotvalue&quot ) blue = $(&quot#blue&quot)slider( &quotvalue&quot )

}

function updateRadius()

{

radius = $(&quot#radius&quot)slider( &quotvalue&quot )

}

Функції updateBackground () і updateRadius () викликаються, коли користувач переміщує движок У функції updateBackground () ми призначимо поточне значення движків змінним для червоного, зеленого і синього кольорів Функція updateRadius () змінює величину змінної radius Якщо придивитися до функції draw () у функції mySketch (), ми побачимо, що ці змінні встановлюють колір фону і малюють еліпс із зазначеним радіусом

Остання відмінність – це спосіб доступу до обєкта canvas в jQuery Наступний рядок робить те ж саме, що і documentgetElementById (), про який ви дізналися з попереднього прикладу:

var canvas = $(&quot#mycanvas&quot)[0]

Джерело: Ян Вантомм, Processing 2: креативне програмування, переклад з англійської Олександри Мішутіної, Published by Packt Publishing Ltd, 2012, BIRMINGHAM – MUMBAI

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*