Introduction to Processing = Part II

With this, we can do some value inside draw () vary each frame. This may be the position of the ellipse. It can take the cursor position :
 
void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
}
  
void draw() {
  ellipse(mouseX, mouseY, 100, 100);
}
Interesting … How about doing this only when the mouse button is pressed ? We can use conditional if ( ) { } and variable mousePressed system , to say when these ellipses will be drawn :
 
void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
}
  
void draw() {
  if (mousePressed){
    ellipse(mouseX, mouseY, 100, 100);
  }
}
This translates as : every frame if the mouse button is pressed , draw an ellipse at the cursor position , with 100 pixels wide and 100 pixels high.
 
We can also make the size and color of the contour of ellipses drawn randomly vary , and according to the cursor position . For that , we have to play the stroke () function inside the draw, for it changes every frame . We also introduced the function random () , to randomly select random values pro size ellipses . Like this:
 
void setup() {
  size(510, 510);
  background(#333333);
  noFill();
}
  
void draw() {
  if (mousePressed) {
    stroke(mouseX/2);
    ellipse(mouseX, mouseY, random(20,80), random(20,80));
  }
}
 
Here, the stroke value is a calculation, to respect the accepted values for color ( 0-255 ) . If the cursor is at the far right of the screen , this amount will be divided by 2 , and return 255 as the color of the ellipse contour.
 
Since the size of the ellipse is defined by random numbers ( random () ) , between 20 and 80 , both as to width to height. So every frame these variable values are recalculated , and a new ellipse is drawn on the screen.
 
12 lines of code and gleanings after …
 
animating
 
All of these functions and variables such as stroke ( ) , ellipse ( ) mousePressed , mouseX , etc. are themselves the Processing, and are what make the prompt language to be used by those who work with visual structures . Note that when they are written , the editor marks these rose in words to say are words reserved for the system. But often , we want to define our own variables. Let me illustrate with a backdrop of a lively circle :
 
void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
}
  
void draw() {
  ellipse(width/2, height/2, 30, 30);
}
 
I want this ellipse walk 1 pixel to the right every frame . For that , the x position of the ellipse will be incremented by 1 pixel every frame . We need a variable for that.
 
Think of a variable as a drawer that stores a given any . What is inside the drawer can be queried and changed. If we want a drawer to store a numeric value, that each frame a unit will be incremented , and consulted by field position x of the ellipse.
 
float posX;
  
void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
  posX = width/2;
}
  
void draw() {
  ellipse(posX, height/2, 30, 30);
  posX = posX + 1;
}
 
Here, we create posX variable, which will store the variable value of the position x of the ellipse.
 
For starters, we have to declare the variable, that is, to say the type of data it will contain, and its name. float is a type of system data itself, and means floating numerical values (whole numbers and decimals). Processing other types of data can be int (integers), boolean (true / false), String (alphanumeric characters represented in quotation marks, such as names and phrases) etc. If, as the x position of the circle may be an integer or decimal number, we will use the same float.
 
Second, it is good to set an initial value of this variable. This is done in the setup (), which is rotated once at program startup.
 
Then we say that the value of the position x of the ellipse will be the same value in the posX variable. This is done in the draw (), which runs in a loop, once every frame.
 
Finally, we increased the posX value in one unit.
Beauty, but I do not want to leave this trail circles every frame processed. Just reset the background color ( ) , in the draw () . Thus, each frame , the program paints the background over everything and draws the circle in his new position :
 
float posX;
  
void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
  posX = width/2;
}
  
void draw() {
  background(#333333);
  ellipse(posX, height/2, 30, 30);
  posX = posX + 1;
}
 
Now understood to operate the variables , we can improve a little this program . Let’s make the x position of the cursor set the circle speed. At the same time, we will make the circle back to the start screen , if it turns out of view :
 
float posX;
float velX;
  
void setup() {
  size(510, 510);
  background(#333333);
  noFill();
  stroke(#FFFFFF);
  posX = width/2;
}
  
void draw() {
  background(#333333);
  velX = mouseX/10;
  ellipse(posX, height/2, 30, 30);
  if (posX > width) {
    posX = 0;
  }
  else {
    posX = posX + velX;
  }
}
 
Here , we introduce another variable , velX , and define that it will be the x position of the cursor divided by 10 ( to limit the increase of the x position of the ellipse within 51px per frame ) .
 
Introduced a conditional that will take care of posX value as follows: If the ellipse are in a position x greater than the width of the screen , place it back on the left of the screen . If not ( else { } ) , increment the x position the value that is in velX variable (defined by the position of the cursor x divided by 10 ) .
 
This is just to scratch the surface, and does not generate useful results alone. But understanding languages operating logic as Processing, we go discovering new possibilities through experimentation that pushes the study. It is important to challenge every step, and with it go learning new techniques. Even if you are writing has no practical application, understand and practice the concepts of variables, functions, properties, methods, classes, etc is crucial to delve into any programming language, and the Processing is a great gateway for those who interested in producing their own visual tools, and take advantage of the computer’s processing power.
 
The computer has become the standard tool today, but we often forget its ability to process huge amounts of information and perform extremely complicated calculations in fractions of a second. This can be used to create unique, complex and sophisticated graphical tools parts, if we know how to speak the language of the machine.
 
To extend the subject, the very site of the Processing is a great reference, with the syntax of the dictionary, libraries and tools to create anything, be it for web, interactive installations, animations, etc. Start there.

LEAVE A REPLY

Please enter your comment!
Please enter your name here