Simple Animation – Random Shapes – Learn Processing and ProcessingJS

In [here],  random coloured squares are drawn on console using C++ based on CodePage 437. It is a pure native application and the compiled binary size is just around 400 KB, easy to distribute. However, it just shows the animation idea but cannot do complex stuffs without third party libraries. The Processing is a scripting language that can be interpreted and exported as Java application (thus platform independent). The script language of Processing has the similar syntax as Javascript so easy to learn and understand. The ProcessJS is a sister project that will be able to understand the Processing scripts in web browser.

The Processing is powerful to make some animations and graphics.  The official website allows you to download the Integrated Development Environment (IDE) for many platforms.

The Processing names each script ‘sketch’.

The following is a simple Processing script that animates random colour shapes, including squares, ellipses and triangles.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

void setup() {
  size(500, 500);
}
 
void draw() {
  float x = random(500);
  float y = random(500);
  float w = random(100);
  float h = random(100);
  fill(random(255), random(255), random(255));
  rect(x, y, w, h);
  ellipse(x, y, w, h);
  triangle(random(500),random(500),random(500),random(500),random(500),random(500)); 
}

void setup() {
  size(500, 500);
}

void draw() {
  float x = random(500);
  float y = random(500);
  float w = random(100);
  float h = random(100);
  fill(random(255), random(255), random(255));
  rect(x, y, w, h);
  ellipse(x, y, w, h);
  triangle(random(500),random(500),random(500),random(500),random(500),random(500)); 
}

If you hit the ‘Run’ and it will produce this:

As you will see, the Processing script is simple and yet powerful. The setup() function is called once which is often used to write setup code, e.g. initialization etc. The draw() function is called repeatedly unless a noLoop() function is specified in the setup() function. If noLoop is used, then the draw() function is only invoked once.

The rest of the code is straightforward. The size(500, 500) defines the window size. random returns a random number. fill specifies the colour to fill for whatever next shape instructions.

ProcessJs allows you to easily embeded your Processing script in the browser using canvas tag and the processing javascript downloadable from the official website.

The PDE stands for Processing Development Environment. Many mobile platforms such as Android, and iOS also have relevant Processing software package to aid the computer graphics/animation design. The Processing allows you to export the script as applications to various platforms, which requires the Java Runtime.

To open the example in the modern browser, please click [helloacm.com/processing/random-shapes/] (enabled by ProcessingJS)

–EOF (The Ultimate Computing & Technology Blog) —