Пишемо скетчі за допомогою JavaScript в Processing

Так як Processingjs це, по суті, JavaScript, ви можете використовувати його як бібліотеку для написання скетчів Processing на чистому JavaScript У цьому прикладі ми розглянемо, як це можна зробити Вам знадобиться зменшений файл Processingjs, який ви завантажили в попередньому прикладі

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

Почнемо зі створення HTML файлу, сполученого з файлами resetcss і stylecss з прикладу Використання Processingjs без текстового редактора Processing Також нам потрібно зєднати зменшений файл Processingjs і новий JavaScript файл mysketchjs Зверніть увагу, що тег не має атрибута data-processing-sources

&lt!doctype html&gt

&lthtml lang=&quoten&quot&gt

&lthead&gt

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

&lttitle&gtUsing Processingjs without the Processing editor&lt/title&gt

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

&ltlink rel=&quotstylesheet&quot href=&quotcss/stylecss&quot media=&quotscreen&quot /&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

&lt/div&gt

&lt/body&gt

&lt/html&gt

У цьому прикладі ми не будемо писати код на чистому Processing Створіть новий файл у вашому текстовому редакторі і збережіть його як mysketchjs в папці js Ось код JavaScript, який потрібно набрати в цьому документі:

windowonload = function() { function mySketch( processing )

{

processingsetup = function()

{

processingsize( 640, 480 )

processingbackground( 255, 225, 4 )

}

processingdraw = function()

{

processingstroke( 0 )

processingfill( 0, 64 )

processingellipse( processingrandom( processingwidth ), processingrandom( processingheight ), 20, 20 )

}

}

var canvas = documentgetElementById(&quotmycanvas&quot)

var processingInstance = new Processing( canvas, mySketch )

}

Коли ви відкриєте приклад в браузері, ви побачите щось на зразок цього:

Як це працює

HTML код з цього прикладу повинен бути для вас зрозумілий, тому що ми розібрали його в попередньому прикладі Ми заглибимося в код JavaScript, тому що саме там приховано справжнє чаклунство

windowonload = function() {}

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

function mySketch( processing )

{

processingsetup = function()

{

processingsize( 640, 480 )

processingbackground( 255, 225, 4 )

}

processingdraw = function()

{

processingstroke( 0 )

processingfill( 0, 64 )

processingellipse( processingrandom( processingwidth ), processingrandom( processingheight ), 20, 20 )

}

}

Функція mySketch () це і є наш скетч Processing Ми передаємо посилання в головну змінну processing, створену Processingjs Рядок processingsetup () = function () {} скасовує функцію setup () з Processingjs, так що ви можете визначити розмір скетчу і оголосити змінні тут Як ви вже здогадалися, рядок processingdraw = function () {} скасовує функцію draw (), і тому намалювати щось можна тут Ви можете вставити будь-яку функцію Processing у функцію mySketch (), якщо ви помістили перед нею змінну processing Так, якщо ви хочете застосувати функцію stroke (), вам потрібно написати processingstroke ()

Функція documentgetElementById () повертає елемент canvas з дерева DOM ветраніци, так, як показано в наступному коді:

var canvas = documentgetElementById(&quotmycanvas&quot)

Останній рядок коду створює новий обєкт Processing Вам потрібно передати обєкт

canvas і функцію вашого скетчу в конструктор, так, як показано в наступному коді:

var processingInstance = new Processing( canvas, mySketch )

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

*

*