Pull to refresh

Processing.js

JavaScript
Данный язык уже был на хабре, однако пост был посвещен самому Processing, думаю многим будет интерессно почитать и про Processing.js.
Processing.js — это открытый язык программирования для визуализации в вебе который представляет собой портированный Processing на JavaScript. Processing.js использует Js для анимации и тег canvas для работы с изображением. Сразу же можно заметить некоторый минус данного подхода, он не особо дружен с IE, причем по заявлениям Microsoft поддерживать тег canvas они и в дальнейшем не собираются. Во всяком случае 8 работать отказался. Синтаксис реализации очень похож на синтаксис Java.
Коротко о главном визуализация начинается с описания функции setup в которой определяются такие вещи например как:
размер изображения (size(x,y,)
количество кадров в секунду (frameRate(x));
Другие пармаметры, например толщина и цвет линий используемая при прорисовке примитивов и т.д.
Далее определяется функция draw() которая вызывается всегда в цикле, пока не завершена работа скрипта.
Так же могут быть описаны методы, которые будут вызваны по собитиям mouseover onclick и т.д.
Исходя из того, что делалось это все как раз для графических эффектов работает довольно таки шустро, хотя конечно до производительности своего Java родителя ему далеко.
Пример синтаксиса (если ставилась задача максимально облегчить разработку приложений данного типа, то на мой взгляд справились на 99%):
int currentFrame = 0;
PImage[] frames = new PImage[12];
int lastTime = 0;

void setup()
{
size(200, 200);
strokeWeight(4);
smooth();
background(204);
for (int i = 0; i < frames.length; i++) {
frames[i] = get(); // Create a blank frame
}
}

void draw()
{
int currentTime = millis();
if (currentTime > lastTime+100) {
nextFrame();
lastTime = currentTime;
}
if (mousePressed == true) {
line(pmouseX, pmouseY, mouseX, mouseY);
}
}

void nextFrame()
{
frames[currentFrame] = get(); // Get the display window
currentFrame++; // Increment to next frame
if (currentFrame >= frames.length) {
currentFrame = 0;
}
image(frames[currentFrame], 0, 0);
}


* This source code was highlighted with Source Code Highlighter.


Несколько примеров работы

Пример1
Пример2
Пример3
Пример4
Мои любимые фракталы 1
Мои любимые фракталы 2
Мои любимые фракталы 3

UPD По поводу поуниверсальней

Справочник по языку в предельно понятном виде можно найти тут
Tags:processingjsвизуализация
Hubs: JavaScript
Total votes 30: ↑27 and ↓3+24
Views11K