Processing.js

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

    Справочник по языку в предельно понятном виде можно найти тут
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 17

      +3
      по заявлениям Microsoft поддерживать тег canvas они и в дальнейшем не собираются

      Вобще, насколько помню, в заявлении было сказано что реализация отсутствует т.к. спецификация находится в драфте, что вполне логично.
        0
        Возможно, но тем не менее пока имеем что имеем. Юзание всяких ExplorerCanvas и прочее…
          +2
          Не возможно, а действительно так. Можно подумать, что один из непринятых стандартов (http://www.w3.org/TR/NOTE-VML) чем-то лучше другого (http://www.w3.org/TR/html5/the-canvas-element.html).
            +1
            >Можно подумать, что один из непринятых стандартов чем-то лучше другого
            Если задача — кинуть семь камней в сторону Редмонда, сгодится все. Хотя обычно для этого используют CSS3
        +2
        Впечатляет. Интересно
          +1
          Использовал processing на JAVA, очень мощная штука, но применение узкое конечно — может от этого еще ценнее становится :)
            0
            В хроме не сработали первый пример и мандельброт.
              0
              мне понравилась змейка (пример 1). но вроде как на flash это проще реализовать или на silverlight, что кому ближе.
                0
                Мне кажется, что Protovis еще интереснее. Processing.js больше похож на эксперимент, proof of concept.
                  0
                  а где это можно применить?
                    0
                    Для какой то просто визуализации, там где использование флеш не опавдано. На мой взгляд так:
                    Для сложного и тяжелого — Флеш
                    Для легкого и маленько — JS с рюшечками вроде этого.
                    0
                    Я вот только не пойму, что мешает в эксплорере использовать, например, VML, а в остальных браузерах SVG?
                      0
                      Так svg в IE работает, там с canvas тяжко.
                        0
                        SVG в IE не работает. Только с плагином, который к тому же уже не поддерживается разработчиком.
                      0
                      Processing.js использует Js для анимации и тег canvas для работы с изображением. Сразу же можно заметить некоторый минус данного подхода, он не особо дружен с IE

                      Разве тут не сказано, что не работает в IE? Я на это утверждение и спрашиваю, что стоило написать более универсальную реализацию? Не работает и в хроме.
                      0
                      а для чего конкретно это можно применить касательно задач сайтостроительства? зачем это? что-то не могу понять.

                      Only users with full accounts can post comments. Log in, please.