Learning Processing – Simple Random Colour Bars

ACMer

11 years ago

Programming in Processing is fun. Sometimes you have the idea and you just express easily in Processing within a few lines of code. You almost have the instant animations/graphics vividly to confirm your thinking/idea. In other words, you have the image in your brain, and you can use Processing to express it.

The following Processing script shows the random colourful bars (columns) along time. Enable noLoop in the setup() function to make it a static image.

random-color-bars Learning Processing - Simple Random Colour Bars animation beginner code code library images drawing implementation Processing and ProcessingJS

Let the source code illustrate itself. The noStroke specifies that no border is drawn when drawing rectangles/blocks.

// helloacm.com
final int WINDOW_WIDTH = 400;
final int WINDOW_HEIGHT = 300;
final int COLOR_BLOCK = 8;
 
void setup() {
  randomSeed(0);
  frameRate(20);
  //noLoop();
  size(WINDOW_WIDTH, WINDOW_HEIGHT);
}
 
void draw() {
  noSmooth();
  noStroke();
  float block_size = WINDOW_WIDTH / COLOR_BLOCK;
  for (int i = 0; i < COLOR_BLOCK; i ++) {
    fill(random(255), random(255), random(255));
    int x1 = (int)(i * block_size);
    int x2 = (int)(x1 + block_size);
    rect(x1, 0, x2, WINDOW_HEIGHT); 
  }
}

// helloacm.com
final int WINDOW_WIDTH = 400;
final int WINDOW_HEIGHT = 300;
final int COLOR_BLOCK = 8;
 
void setup() {
  randomSeed(0);
  frameRate(20);
  //noLoop();
  size(WINDOW_WIDTH, WINDOW_HEIGHT);
}
 
void draw() {
  noSmooth();
  noStroke();
  float block_size = WINDOW_WIDTH / COLOR_BLOCK;
  for (int i = 0; i < COLOR_BLOCK; i ++) {
    fill(random(255), random(255), random(255));
    int x1 = (int)(i * block_size);
    int x2 = (int)(x1 + block_size);
    rect(x1, 0, x2, WINDOW_HEIGHT); 
  }
}

To view this in the modern browser (enabled by Javascript, ProcessingJS), visit this URL: helloacm.com/processing/random-color-blocks/

–EOF (The Ultimate Computing & Technology Blog) —

281 words
Last Post: Learning Processing - Random Pixels
Next Post: Processing Example - Draw a ChessBoard

The Permanent URL is: Learning Processing – Simple Random Colour Bars (AMP Version)

Related posts: