Processing
1. Software download
Dowload according to your PC's OS
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);
}