Learning Processing #1 – Basics

Having recently been introduced to Processing, the platform we will use to create our interactive data visualization, one of the first workshops has covered basics such as color modes, “if” conditions, and use of mouse input.

void setup() {
 colorMode(HSB);
 background(255,0,111);
 size (1280,720);
 frameRate(120);
 smooth();
}

int c =20;
int d =1;

void draw() {
 noStroke();

  if(mousePressed){
   if(mouseButton==LEFT){
     fill(d,155,255);
     ellipse(mouseX,mouseY,c,c);
   } else {save("myooutput.tiff");}
  }
  c = (c+1)%40;
  d = (d+1)%255;
}

The code above creates a blank grey canvas in the setup (lines 1-7), and then sets mouse input – pressing the  left mouse button will create a trail of color like a paintbrush, which grows in size then shrinks. The colors change gradually as the button is held down, achieved through the java in lines 21&22, which increases the value of c (size) and d (fill color) by 1 in each frame.

The output of the above code, after moving the mouse in that pattern.
The output of the above code, after moving the mouse in that pattern.

This is an extremely simple sketch yet still creates a nice looking paintbrush effect as the color blends over time.

The second sketch done today to demonstrate Processing covered “for” loops, an important tool for generating visual effects in Processing.

void setup() {
  size(800,400);
  frameRate(2);
  colorMode(HSB,100);
}
int s = 20;
int h = 0;

void draw(){
  for(int y = 0; y<height; y=y+s){
    for(int x = 0; x<width; x=x+s){
      fill(h,100,100);
      rect(x,y,s,s);
    }
    h=(h+s)%100;
  }
}

The code shown above generates a grid of squares in multiple colors. This is achieved by creating another square every frame, until the integers “y” or “x” reach the width or height of the screen, so the squares are only generated on the screen. “y” and “x” are increased by “s”, the size of the squares, each time so that there is no overlap – the next generated square is moved far enough along. Using for loops will likely prove useful in repetitive effects rather than writing multiple lines of code to draw the same thing.

A grid generated by the for loop.
A grid generated by the for loop.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s