Знайомство з бібліотекою Toxiclibs.js в Processing

Toxiclibs, створена Карстеном Шмідтом, Можливо, найпопулярніша бібліотека Processing Вона має відмінні класи для роботи з двомірної і тривимірної геометрія, фізика, кольором, аудіо і багатьом іншим У цьому прикладі ми розглянемо JavaScript порт, зроблений Кайлом Филипсом Дізнатися більше про Toxiclibsjs можна за адресою http://haptic-datacom/toxiclibsjs/

Приступимо

Для написання коду потрібно завантажити бібліотеку toxiclibsjs Її можна знайти на GitHub за адресою https://githubcom/hapticdata/toxiclibsjs/

Знайдіть файл toxiclibsminjs і збережіть його в папку js нового проекту Сруктура папок цього прикладу виглядає так:

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

HTML код цього скетчу дуже простий Він просто підключає toxiclibsjs і бібліотеки

Processingjs, файли CSS з цієї глави та скетч Processing

&lt!doctype html&gt

&lthtml lang=&quoten&quot&gt

&lthead&gt

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

&lttitle&gtGetting Started with Toxiclibsjs&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/toxiclibsminjs&quot type=&quottext/javascript&quot&gt&lt/script&gt

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

&lt/head&gt

&ltbody&gt

&ltdiv id=&quotcontainer&quot&gt

&ltcanvas id=&quotmycanvas&quot data-processing- sources=&quottoxiclibs_jspde&quot&gt&lt/canvas&gt

&lt/div&gt

&lt/body&gt

&lt/html&gt

Далі слід код скетчу Processing Велика частина коду має бути вам зрозуміла Цей приклад створює чотири двомірних багатокутника Якщо посувати мишею по цих фигр, їх колір буде змінюватися

var Vec2D = toxigeomVec2D,

ToxiclibsSupport = toxiprocessingToxiclibsSupport, Polygon2D = toxigeomPolygon2D

import toxigeom* import toxiprocessing*

ToxiclibsSupport gfx Polygon2D[] polygons

void setup() {

size( 640, 480 )

smooth() noStroke()

polygons = new Polygon2D[4] for ( int j = 0 j &lt 4 j++ ) {

int randomNum = floor( random( 3, 8 ) ) float angle = TWO_PI / randomNum

Vec2D[] vertices = new Vec2D[randomNum] for ( int i = 0 i &lt randomNum i++ ) {

float x = 100 + (j*150) + cos( i * angle ) * 60 float y = height/2 + sin( i * angle ) * 60 vertices[i] = new Vec2D( x, y )

}

polygons[j] = new Polygon2D( vertices )

}

gfx = new ToxiclibsSupport( this )

}

void draw() {

background( 255, 225, 3 )

for ( int i = 0 i &lt 4 i++ ) {

Vec2D m = new Vec2D( mouseX, mouseY )

if ( polygons[i]containsPoint( m ) ) { fill( 255, 64, 0 )

} else { fill( 0 )

}

gfxpolygon2D( polygons[i] )

}

}

Коли ви відкриєте HTML сторінку у вашому браузері, ви побачите це:

Як це працює

Перші рядки коду скетчу використовуються для перетворення деяких прототипів JavaScript в імена класів, як якби вони використовувалися в звичайному скетчі Processing Ми робимо це, щоб код був сумісний з веріей Java бібліотеки Toxiclibs Якщо ви перетворите цей блок коду в коментар, ви можете використовувати скетч в середовищі Processing, якщо ви встановили Toxiclibs:

var Vec2D = toxigeomVec2D,

ToxiclibsSupport = toxiprocessingToxiclibsSupport, Polygon2D = toxigeomPolygon2D

Також ми додали кілька імпортують команд для пакетів toxigeom і toxiprocessing Ці команди будуть ігноруватися у версії JavaScript, але вони потрібні для написання коду в Processing

Безпосередньо перед функцією setup () ми оголосили обєкт ToxiclibsSupport і масив для зберігання наших обєктів Polygon2D ToxiclibsSupport це вспогательний клас для малювання довільних геометричних фігур з Toxiclibs на Processing

У функції setup () ми задіяли масив Vec2D для зберігання вершин нашого багатокутника Клас Vec2D аналогічний класу PVector з Processing, але він має кілька додаткових методів Багатокутники будуються за допомогою конструктора Polygon2D з масивом вершин як параметр Також у цьому рядку коду ми ініціалізували обєкт ToxiclibsSupport:

gfx = new ToxiclibsSupport( this )

У функції draw () ми застосували цикл for для малювання наших многугольніков У першому рядку коду в циклі for ми зберігає позицію миші в новому обєкті Vec2D Ми використовуємо цей обєкт і метод containsPoint () для перевірки, чи знаходиться курсор всередині багатокутника Якщо цей метод повертає істину, ми зафарбовуємо фігуру в червоний, а якщо неправда, то в чорний Метод gfxpolygon2D () виводить багатокутники на екран

for ( int i = 0 i &lt 4 i++ ) {

Vec2D m = new Vec2D( mouseX, mouseY )

if ( polygons[i]containsPoint( m ) ) { fill( 255, 64, 0 )

} else { fill( 0 )

}

gfxpolygon2D( polygons[i] )

}

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

*

*