Learning Processing – Random Pixels

The Processing programming language is a scripting language that is often used to do the computer graphics and animations. It can be interpreted in the modern browser using sister project ProcessingJS. It can also be exported to Java applications that can be run everywhere as long as there is JVM (Java Virtual Machine).

Previous examples shown can be found by clicking [here], [here] or [here].

The following will review the basics of the Processing and introduces a few common functions.

The Processing source code is very easy to understand:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// helloacm.com
final int WINDOW_WIDTH = 400;
final int WINDOW_HEIGHT = 300;
 
void setup() {
  randomSeed(0);
  frameRate(30);
  size(WINDOW_WIDTH, WINDOW_HEIGHT);
}
 
void draw() {
  noSmooth();
  for (int i = 0; i < width; i ++) {
    for (int j = 0; j < height; j ++) {
      stroke(random(255), random(255), random(255));
      point(i, j); 
    }
  }
}

// helloacm.com
final int WINDOW_WIDTH = 400;
final int WINDOW_HEIGHT = 300;

void setup() {
  randomSeed(0);
  frameRate(30);
  size(WINDOW_WIDTH, WINDOW_HEIGHT);
}

void draw() {
  noSmooth();
  for (int i = 0; i < width; i ++) {
    for (int j = 0; j < height; j ++) {
      stroke(random(255), random(255), random(255));
      point(i, j); 
    }
  }
}

Like Java, we use final to declare the constants whose values cannot be changed/altered during runtime. The randSeed takes a parameter/seed number, if the seed is constant, then everytime the same pseudo-random number series is given. By default, the random produces different results every time.

frameRate (default value is 60) sets the number of frames per second. However, if the processor is not fast enough to maintain the specified rate, the frame rate will not be achieved. Setting the frame rate within the setup() is usually recommended.

The frameRate can also be used as a variable that returns the current value set by frameRate function.

The default is smooth which draws all geometry with smooth (anti-aliased) edges. It improves image quality of resized images. To improve the animation speed, you can use noSmooth() to disable smoothing of geometry, images, and fonts., so a faster frameRate can be achieved.

stroke function sets the colour to draw the point, or lines or borders around the shape.

The above animates the TV screen when there is no signal or not connected. To view the demo in live, please visit this URL: [helloacm.com/processing/random-pixels/] in the modern browser (enabled by ProcessingJS).

–EOF (The Ultimate Computing & Technology Blog) —