Contents

1. Basic Grammar
   1. Variables and Types
   2. Declaration
   3. Substitution
   4. Conditional Branch
   5. Array
   6. Iteration
   7. Animation
2. Practice – bouncing balls
   1. variables
   2. Initial Setup
   3. Loop

---

Basic Grammar

Variables and Types

Programs are series of procedure to deal with bunch of variables. Variables are the main elements in computer programs and is sometimes compared to boxes to store data. Every variable have its data type. There are several several data types in python and other programming languages. Followings are popular variables in Processing:

• boolean – True/False variables
• int – Integer variables
• float – floating-point arithmetic
• String – Text variables

Declaration

To use variables, we need to declare variables first. You can declare variables like following:

<type name> <variable name> ( = <value> ) ;

int num;

Now you can make “num” as integer variable. Still, “num” is empty variable so you need to input a value in it to use. And “;” is something like “.” in natural languages. It indicates the end of the line.

Substitution

“=” is a relational operator that indicates right-hand side and left-hand side are equal in mathematics, but is a operator to substitute left-hand side for right-hand side in programming.

Therefore we can write a code following:

int a = 10;
a = a + 1;

As you can see above, you can declare variable and input data at once.

Conditional Branch

To branch processes in programming, use “if(…){…}else if(…){…}else{…}” syntax. There are several relational operators:

• >  – larger than
• <  – smaller than
• ==  – equal to
• !=  – not equal to
• >=  – larger than or equal to
• <=  – smaller than or equal to

if (x>5){
  println( "x is higher than 5" );
} else if (x<5) {
  println( "x is lower than 5" );
} else {
  println( "x is 5" );
}

Also you can combine multiple conditions using logic operator:

• ||  – or
• &&  – and
• !  – not

Array

Arrays are variables that can store multiple values. We can declare arrays and pick certain value from them like following:

int[] nums = {0, 1, 2};
println (x[0]);

You can declare empty array like following:

<data type>[] <array name> = new <data type>[<array length>] ;

String[] texts = new String[3];

And you can get the length of array by following:

String[] texts = {"apple", "orange", "banana"};
println(texts.length);

Iteration

To iterate processes, we can use following syntax:

for(int i=0; i < <number of iteration>; i++){ ... }

The syntax seems be strange, but at this time, please remember as it is. In this case, “i” is a counter for the iteration.

for(int i=0; i<10; i++){
  println(i);
}

Iteration is useful using with array:

String[] texts = {"apple", "orange", "banana"};

for(int i=0; i<texts.length; i++){
  println(texts[i]);
}

Animation

To draw object, you can use these functions for example:

• point(x, y)  – draw point at (x,y) on the window
• line(x1, y1, x2, y2)  – draw line between (x1,y1) and (x2,y2)
• rect(x, y, w, h)  – draw rectangle with <w>width and <h>height
• ellipse(x, y, w, h)  – draw ellipse with <w>width and <h>height
• background(r, g, b)  – paint over the window with RGB color

And also you can change drawing setting:

• size(width, height)  – change window size with <width> and <height>
• stroke(r, g, b)  – change line color with RGB color
• strokeWeight(t)  – change line thickness
• fill(r, g, b)  – change fill color with RGB color
• noStroke()  – disable line drawing
• noFill()  – disable filling

For example, you can draw circle like following:

background(255, 127, 0);

fill(255, 0, 127);
stroke(255, 255, 255);
strokeWeight(5);

ellipse(40,60, 30,30);

To draw animation, you need to redraw objects frame by frame. Draw function and setup function enable animation in Processing.

• void setup(){…}  – program in setup runs once at the beginning of running
• void draw(){…}  – program in draw runs every frame

Following is sample code for setup/draw functions:

int x;
int y;
int r;
int vx;

void setup(){
 size(500,100);
 x = 0;
 y = height/2;
 r = 25;
 vx = 5;
}

void draw(){
 background(255);
 ellipse(x,y, r,r);
 x = x+vx;

 if(x>500 || x<0){
  vx = -vx;
 }
}

Practice

variable

Dealing with bouncing balls, we need these variables:

• int num  – the amount of balls
• int r  – radius of balls
• int[] x  – current x position of balls
• int[] y  – current y position of balls
• int[] vx  – x component of speed vector of balls
• int[] vy  – y component of speed vector of balls

Setup

Initialization of variables is needed before launching program:

num = 10;
r = 5;
x = new int[num];
y = new int[num];
vx = new int[num];
vy = new int[num];
for(int i=0; i<num; i++){
 x[i] = random(width);
 y[i] = random(height);
 vx[i] = random(1,10);
 vy[i] = random(1,10);
}

Loop

Updating of balls is following:

for(int i=0; i<num; i++){
 ellipse(x[i],y[i], r,r);

 x[i] = px[i]+vx[i];
 y[i] = py[i]+vy[i];

 if(x[i]>width || x[i]<0){
  vx[i] = -vx[i];
 }
 if(y[i]<0 || y[i]>height){
  vy[i] = -vy[i]
 }
}