Processing.js

This language was already on Habré, but the post was dedicated to Processing itself, I think many would be interested in reading about Processing.js.
Processing.js is an open programming language for rendering on the web which is a ported Processing for JavaScript. Processing.js uses Js for animation and a canvas tag for working with an image. Immediately, you can notice some drawback of this approach, it is not particularly friendly with IE, and according to Microsoft statements they are not going to support the canvas tag anymore. In any case, 8 refused to work. The implementation syntax is very similar to Java syntax.
In short, the main visualization begins with a description of the setup function in which such things are defined, such as:
image size (size (x, y,)
frames per second (frameRate (x));
Other parmameters, for example, the thickness and color of lines used in 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 on mouseover onclick, etc. can also be described.
Based on the fact that all this was done just for graphic effects, it works pretty quickly, although of course it’s far from the productivity of its Java parent.
Example of syntax (if the task was set to simplify the development of applications of this type as much as possible, then in my opinion they did it by 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 .

Some examples of work

Example1
Example2
Example3
Example4
My favorite fractals 1
My favorite fractals 2
My favorite fractals 3
')
UPD About more comprehensive

Language reference in an extremely clear form can be found here.