## Processing

Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. There are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning and prototyping.

## 2. Languge

#### 2.1. The structure of language

``````/**
* Setup and Draw.
* The code in setup() is run once when the program starts.
* The code inside the draw() function runs continuously from top to bottom until the program is stopped. The
* Reference from https://processing.org/examples/setupdraw.html

**/

int y = 180;
void setup() {
size(640, 360);  // Size must be the first statement
stroke(255);  // Set line drawing color to white
}

void draw() {
background(0);  // Clear the screen with a black background
line(0, y, width, y);
y = y - 1;
if (y < 0) {
y = height;
}
}
``````

#### 2.2. Shape

``````/**
Reference from https://processing.org/examples/shapeprimitives.html

**/
void setup(){
size(640, 360);
background(0);
noStroke();
}

void draw(){

fill(204);
triangle(18, 18, 18, 360, 81, 360);           //design triangle(3 points coordinate)

fill(102);
rect(81, 81, 63, 63);                          //design rectangle    left top coordinate,width,height,also we have aother method to express rectange

fill(204);
quad(189, 18, 216, 18, 216, 360, 144, 360);    //design quadrangle  4 points coordinate

fill(255);
ellipse(252, 144, 72, 72);                      //design ellipse  x-coordinate of the ellipse,y-coordinate of the ellipse,width of the ellipse by default,height of the ellipse by default

fill(204);
triangle(288, 18, 351, 360, 288, 360);

fill(255);
arc(479, 300, 280, 280, PI, TWO_PI);    //arc(center x,centery,x diameter,y diameter,start angle,end angle)HALF_PI is π/2,QUARTER_PI is π/4,TWO_PI  is 2π
}
``````

#### 2.3. The define of shape

``````void setup() {
size(200,200);

}

void draw()
{
background(255,255,255); //Setting the background to white
fill(237,28,36); //Setting the interior of a shape (fill)
stroke(0,0,0); // Setting the outline (stroke) to black
strokeWeight(5); //the define of bold
point(23,34); //just the color of fill
ellipse(40,50,20,40);  // center x,center y, widtd,heigh
rect(60,60,30,30);   //x and y is the coordinate of the rectangle. w and h is rectangle's width and height.
}
``````

#### 2.4.Input: Mouse

``````/**
* Mouse Press.
*
* Move the mouse to position the shape.
* Press the mouse button to invert the color.
*/

void setup() {
size(640, 360);
noSmooth();
fill(126);
background(255);
}

void draw() {
if (mousePressed) {
stroke(255);
} else {
stroke(0);
}
line(mouseX-66, mouseY, mouseX+66, mouseY);
line(mouseX, mouseY-66, mouseX, mouseY+66);
}
``````

#### 2.5. GUI:button

``````/**
* Button.
*
* Click on one of the colored shapes in the
* center of the image to change the color of
* the background.
*/

int rectX, rectY;      // Position of square button
int circleX, circleY;  // Position of circle button
int rectSize = 90;     // Diameter of rect
int circleSize = 93;   // Diameter of circle
color rectColor, circleColor, baseColor;
color rectHighlight, circleHighlight;
color currentColor;
boolean rectOver = false;
boolean circleOver = false;

void setup() {
size(640, 360);
rectColor = color(0);
rectHighlight = color(51);
circleColor = color(255);
circleHighlight = color(204);
baseColor = color(102);
currentColor = baseColor;
circleX = width/2+circleSize/2+10;
circleY = height/2;
rectX = width/2-rectSize-10;
rectY = height/2-rectSize/2;
ellipseMode(CENTER);
}

void draw() {
update(mouseX, mouseY);
background(currentColor);

if (rectOver) {
fill(rectHighlight);
} else {
fill(rectColor);
}
stroke(255);
rect(rectX, rectY, rectSize, rectSize);

if (circleOver) {
fill(circleHighlight);
} else {
fill(circleColor);
}
stroke(0);
ellipse(circleX, circleY, circleSize, circleSize);
}

void update(int x, int y) {
if ( overCircle(circleX, circleY, circleSize) ) {
circleOver = true;
rectOver = false;
} else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
rectOver = true;
circleOver = false;
} else {
circleOver = rectOver = false;
}
}

void mousePressed() {
if (circleOver) {
currentColor = circleColor;
}
if (rectOver) {
currentColor = rectColor;
}
}

boolean overRect(int x, int y, int width, int height)  {
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}

boolean overCircle(int x, int y, int diameter) {
float disX = x - mouseX;
float disY = y - mouseY;
if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
} else {
return false;
}
}
``````
``````/**
* Arm.
*
* The angle of each segment is controlled with the mouseX and
* mouseY position. The transformations applied to the first segment
* are also applied to the second segment because they are inside
* the same pushMatrix() and popMatrix() group.
*/

float x, y;
float angle1 = 0.0;
float angle2 = 0.0;
float segLength = 100;

void setup() {
size(640, 360);
strokeWeight(30);
stroke(255, 160);//grey data and transparent data;

x = width * 0.3;
y = height * 0.5;
}

void draw() {
background(0);

angle1 = (mouseX/float(width) - 0.5) * -PI;
angle2 = (mouseY/float(height) - 0.5) * PI;

pushMatrix();
segment(x, y, angle1);
segment(segLength, 0, angle2);
popMatrix();
}

void segment(float x, float y, float a) {
translate(x, y);
rotate(a);
line(0, 0, segLength, 0);
}
``````