Главная » Processing » Создание вашего первого скетча Processing для сети

0

В этом примере мы познакомимся с новым режимом – 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 < 0 ) { x = width;

} else if ( x > width ) { x = 0;

}

if ( y < 0 ) { y = height;

} else if ( y > height ) { y = 0;

}

}

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

Как это работает

Когда вы запустите скетч в режиме JAVASCRIPT, вы заметите несколько особенностей. Processing не компилирует код в испольняемый файл и вы не увидите скетч работающим в отдельном окне. Вместо этого Processing запускает веб-сервер на доступном порте, открывает браузер и показывает веб-страницу с вашим скетчем. Присмотритесь к URL в вашем браузере, он должен быть таким: 127.0.0.1:59792. Цифры 127.0.0.1 это локальный IP (Internet Protocol) адрес вашего компьютера, называемый также localhost. Часть :59792 относится к номеру порта для соединения с веб-сервером. Обычные серверы используют порт 80. Processing использует большее число, чтобы не возникали взаимные помехи с обычными веб-серверами, если таковые имеются на вашей машине.

Если вы откроете папку вашего скетча, вы увидите там папку web-export. Она содержит

HTML страницу, JavaScript файл Processing.js и файл .pde с исходным кодом.

Для отображени явашего скетча веб-страница использует Processing.js, JavaScript порт языка Processing. Этот проект был запущен Джоном Резигом, создаталем jQuery, для донстрации возможностей элемента HTML5 canvas. Processing.js интерпретирует код из скетча и встраивает его в элемент canvas с помощью JavaScript. Узнать больше о Processing. js можно на сайте проекта по адресу http://processingjs.org/.

Дополнительно

Так как Processing.js основан на JavaScript, он может пригодиться практически в любом веб-приложении. Sketchpad – это онлайн текстовый редактор Processing для языка Processing.js. Это веб-приложение может быть очень удобным для написания кодов, осенно если у вас не установлен Processing. Узнать больше о Sketchpad можно по адресу http://sketchpad.cc/.

Источник: Ян Вантомм, Processing 2: креативное программирование, перевод с английского Александры Мишутиной, Published by Packt Publishing Ltd., 2012, BIRMINGHAM – MUMBAI.

По теме:

  • Комментарии