Створення вашого першого скетчу Processing для мережі

У цьому прикладі ми познайомимося з новим режимом – JAVASCRIPT Ви дізнаєтеся про відмінності режиму STANDARD від режиму JAVASCRIPT

Приступимо

Перше, що нам для цього потрібно – перемкнутися на режим JAVASCRIPT Ви робили це кілька глав тому Якщо ви не памятаєте, як це зробити – загляньте в приклад Перемикання режимів в Главі 1, Починаємо програмувати в Processing 2

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

Як тільки ви опинитеся в режимі JAVASCRIPT, наберіть наступний код в текстовому редакторі Це простий скетч з лінією, що біжить по екрану Упевнений, що ви зможете розібратися в коді

float x, y

float prevX, prevY

void setup()

{

size( 640, 480 )

smooth() background( 0 )

x = random( width ) y = random( height )

prevX = x + random( -10, 10 ) prevY = y + random( -10, 10 )

}

void draw()

{

stroke( random( 192 ) ) strokeWeight( 1 )

line( x, y, prevX, prevY )

prevX = x prevY = y

x += random( -10, 10 )

y += random( -10, 10 )

if ( x &lt 0 ) { x = width

} else if ( x &gt width ) { x = 0

}

if ( y &lt 0 ) { y = height

} else if ( y &gt height ) { y = 0

}

}

Коли ви запустите скетч, відкриється браузер, встановлений у вас за замовчуванням, і в ньому ви побачите ваш скетч, що працює на веб-сторінці На цьому скріншоті показано, як може виглядати ваш скетч в браузері Google Chrome:

Як це працює

Коли ви запустите скетч в режимі JAVASCRIPT, ви помітите кілька особливостей Processing НЕ компілює код в іспольняемий файл і ви не побачите скетч працюючим в окремому вікні Замість цього Processing запускає веб-сервер на доступному порте, відкриває браузер і показує веб-сторінку з вашим скетчем Придивіться до URL у вашому браузері, він повинен бути таким: 127001:59792 Цифри 127001 це локальний IP (Internet Protocol) адреса вашого компютера, званий також localhost Частина: 59792 відноситься до номера порту для зєднання з веб-сервером Звичайні сервери використовують порт 80 Processing використовує більше число, щоб не виникали взаємні перешкоди зі звичайними веб-серверами, якщо такі є на вашій машині

Якщо ви відкриєте папку вашого скетчу, ви побачите там папку web-export Вона містить

HTML сторінку, JavaScript файл Processingjs і файл Pde з вихідним кодом

Для відобра яваш скетчу веб-сторінка використовує Processingjs, JavaScript порт мови Processing Цей проект був запущений Джоном Резігом, создаталем jQuery, для донстраціі можливостей елемента HTML5 canvas Processingjs інтерпретує код з скетчу і вбудовує його на елемент canvas за допомогою JavaScript Дізнатися більше про Processing js можна на сайті проекту за адресою http://processingjsorg/

Додатково

Так як Processingjs заснований на JavaScript, він може стати в нагоді практично в будь-якому веб-додатку Sketchpad – це онлайн текстовий редактор Processing для мови Processingjs Це веб-додаток може бути дуже зручним для написання кодів, осінь якщо у вас не встановлений Processing Дізнатися більше про Sketchpad можна за адресою http://sketchpadcc/

Джерело: Ян Вантомм, 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>

*

*