Как стать автором
Обновить

Processing.js

Время на прочтение2 мин
Количество просмотров13K
Данный язык уже был на хабре, однако пост был посвещен самому 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 По поводу поуниверсальней

Справочник по языку в предельно понятном виде можно найти тут
Теги:
Хабы:
+24
Комментарии17

Публикации

Истории

Работа

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн