Processing.js

    This language was already on the hub, but the post was devoted to Processing itself, I think many will be interested in reading about Processing.js.
    Processing.js is an open programming language for visualization on the web which is a ported Processing in JavaScript. Processing.js uses Js for animation and the canvas tag to work with the image. You can immediately notice some minus of this approach, it is not particularly friendly with IE, and according to Microsoft's statements, they are not going to support the canvas tag in the future. In any case, 8 refused to work. The implementation syntax is very similar to the Java syntax.
    Briefly about the main thing, visualization starts with a description of the setup function, which defines things such as:
    image size (size (x, y,)
    number of frames per second (frameRate (x));
    Other parameters, for example, the thickness and color of lines used when drawing primitives, etc.
    Next, the draw () function is defined, which is always called in a loop until the script is completed.
    Methods that will be called by mouseover onclick events, etc. can also be described.
    Based on the fact that this was done, everything works just fine for graphic effects quite smartly, although of course he is far from the performance of his Java parent.
    Syntax example (if the task was to facilitate the development of applications of this type as much as possible, then in my opinion they managed 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.


    A few examples of work

    Example1
    Example2
    Example3
    Example4
    My favorite fractals 1
    My favorite fractals 2
    My favorite fractals 3

    UPD Concerning the more universal Language

    Reference can be found in an extremely understandable form here

    Also popular now: