https://bitbucket.org/unthika_nongbua/assignment-2/raw/92cabd2ad12330240e423dc64e6e62eb29b06235/my_story.java
int numSwitch = 0;
int menu=0;
int turtleX = 230;
int size = 200;
int r1 = 300;
int posX1 = 430;
int r2 = 200;
float y_var2=-20;
float x_var2=950;
float yFlow=0;
int y_pos_ball=170;
int x_pos_ball=150;
int x_roll=350;
int g_roll=0;
int y_fall=180;
int y = 700;
int y2 = 700;
int y3 = 700;
int y4 = 700;
int y5 = 700;
int y6 = 700;
int y7 = 700;
void setup () {
size (900, 700);
}
void draw () {
click_to_next_page ();
}
void click_to_next_page () {
switch (numSwitch) {
case 0 :
Introduction();
break;
case 1:
menu = 1;
Menu();
break;
case 2:
menu = 0;
Background1();
varPage1();
break;
case 3 :
menu = 0;
Background1();
varPage2();
break;
case 4 :
menu = 0;
Background1();
VarExplanation();
break;
case 5 :
menu = 0;
Background1();
teachIfelse();
break;
case 6 :
menu = 0;
Background1();
teachLoop();
break;
case 7 :
menu = 0;
Background1();
teachFlowChart();
break;
case 8 :
menu = 0;
Background1();
Condition2();
break;
case 9:
menu = 0;
Function_1();
break;
case 10:
menu = 0;
Function_2();
break;
case 11:
menu = 0;
Function_3();
break;
case 12:
menu = 0;
Array_1 ();
break;
case 13:
menu = 0;
Array_2 ();
break;
case 14:
menu = 0;
Array_3 ();
break;
case 15:
menu = 0;
Practice_move ();
break;
}
}
void mousePressed() {
int posY1 = 650;
int turtleY = 600;
int x1 = 120;
int y1 = 200;
int x2 = 800;
int y2 = 100;
int posX2 = 600;
int posY2 = 560;
if (menu == 1) {
////////////////Variable////////////////////////////////////
if (mousePressed&&(mouseX>=x2-50 && mouseX<= width) && (mouseY >= y2-50 && mouseY <= y2+150)) {
numSwitch = 1;
}
////////////////conditions////////////////////////////////////
if (mousePressed&&(mouseX>=50 && mouseX<= x1+60) && (mouseY >= 100 && mouseY <= y1+60)) {
numSwitch = 4;
}
////////////////function////////////////////////////////////
if (mousePressed&&(mouseX>=posX2+50 && mouseX<= width) && (mouseY >= posY2-230 && mouseY <= posY2-100)) {
numSwitch=8;
}
////////////////array////////////////////////////////////
if (mousePressed&&(mouseX>=150 && mouseX<= turtleX+100) && (mouseY >= turtleY-90 && mouseY <= height)) {
numSwitch=11;
}
////////////////practice////////////////////////////////////
if (mousePressed&&(mouseX>=posX1-50 && mouseX<= width-200) && (mouseY >= posY1-20 && mouseY <= height)) {
numSwitch=14;
}
}
if (numSwitch == 15) {
numSwitch=0;
}
numSwitch++;
}
void Introduction() {
int x=-50;
color c[]= {
#F296F7, #0DB4FF, #FFA850, #3DE858
};
noStroke();
background(#FFC4E3);
fill(random(0, 255), random(0, 255), random(0, 255));
ellipse(random(0, width), random(0, height), 10, 10);
textSize(30);
fill(#F55D05);
text("Programming Fundamentals", 245, 110);
fill(#368131);
text("By", 420, 190);
fill(#025CE8);
text("Chalita Ganjanmuang", 290, 260);
fill(#FA082C);
text("Unthika Nongbua", 320, 340);
textSize(15);
ButtonChangePage(800, 600, "Click!");
for (int i=0; i<c.length; i++) {
fill(c[i]);
fill(0);
x=x+200;
drawPooH(x, 480, c[i]);
}
}
void ButtonChangePage(int x, int y, String s) {
noStroke();
fill(#122BFC);
rect(x-100, y-10, 100, 30);
triangle(x, y-20, x, y+30, x+30, y);
fill(255);
text(s, x-90, y+8);
noFill();
}
void drawPooH(int x, int y, color c) {
fill(c);
stroke(c);
ellipse(x-50, y-50, 50, 50); //ears
ellipse(x+50, y-50, 50, 50);
ellipse(x, y, 150, 120); //body
fill(0);
ellipse(x-30, y-5, 20, 20); //eye
ellipse(x+30, y-5, 20, 20);
stroke(0);
ellipse(x, y+25, 20, 20); //nose
}
void Menu () {
background (153, 255, 255);
noStroke ();
fill (153, 255, 51);
ellipse (width/2, height, width, height/2);
fill (51, 0, 102);
textSize (60);
text ("Menu", (width/2)-70, 75);
fill (0, 0, 255);
textSize (40);
text ("Click on the title", (width/2)-200, 300);
text (" to access the lessons", (width/2)-250, 350);
Menu_Chicken(width-300, height-140, 30);
Menu_Move ();
}
void Menu_Move () {
int posY1 = 650;
int turtleY = 600;
int x1 = 120;
int y1 = 200;
int x2 = 800;
int y2 = 100;
int posX2 = 600;
int posY2 = 560;
Menu_Balloon(x1, y1, size);
if ((mouseX>=50 && mouseX<= x1+60) && (mouseY >= 100 && mouseY <= y1+60)) {
size = 210;
} else {
size = 200;
}
Menu_Sun (x2, y2, r1);
if ((mouseX>=x2-50 && mouseX<= width) && (mouseY >= y2-50 && mouseY <= y2+150)) {
r1 = 310;
} else {
r1 = 300;
}
Menu_Turtle (turtleX, turtleY);
if ((mouseX>=150 && mouseX<= turtleX+100) && (mouseY >= turtleY-90 && mouseY <= height)) {
turtleX = 240;
} else {
Menu_Tree (50, height-200, 150);
turtleX = 230;
}
Menu_Pencil (posX1, posY1);
if ((mouseX>=posX1-50 && mouseX<= width-200) && (mouseY >= posY1-20 && mouseY <= height)) {
posX1 = 420;
} else {
Menu_Tree (50, height-200, 150);
posX1 = 430;
}
fill(51, 0, 0);
ellipse (posX2+150, posY2-180, r2, r2-50);
fill (255);
textSize(30);
text ("Functions", posX2+80, posY2-170);
if ((mouseX>=posX2+50 && mouseX<= width) && (mouseY >= posY2-230 && mouseY <= posY2-100)) {
r2 = 210;
} else {
r2 = 200;
}
}
void Menu_Tree (int xPos, int yPos, int cloud) {
fill (153, 255, 0);
noStroke ();
//cloud right
ellipse (xPos+800, yPos+30, cloud-50, cloud-50);
ellipse (xPos+790, yPos+80, cloud+20, cloud);
ellipse (xPos+780, yPos+150, cloud+100, cloud+50);
//cloud left
ellipse (xPos, yPos+30, cloud-50, cloud-50);
ellipse (xPos-10, yPos+80, cloud+20, cloud);
ellipse (xPos-20, yPos+150, cloud+100, cloud+50);
}
void Menu_Sun (int x2, int y2, int r1) {
fill (250, 80, 18);
ellipse(x2, y2, r1, r1);
fill(255);
textSize(38);
text ("Variable", x2-100, y2+20);
}
void Menu_Balloon (int x1, int y1, int size) {
strokeWeight(3);
stroke (0);
line(x1, y1, x1, y1+size);
noStroke();
fill(255, 51, 153);
ellipse(x1, y1, size-10, size);
triangle (x1-10, (y1+(size/2))+10, x1, (y1+(size/2))-10, x1+10, (y1+(size/2))+10);
fill(255);
textSize(30);
text ("Condition", x1-70, y1);
}
void Menu_Turtle (int turtleX, int turtleY) {
noStroke ();
fill (255, 102, 0);
ellipse (turtleX-60, turtleY-50, 30, 40);
ellipse (turtleX+60, turtleY-50, 30, 40);
ellipse (turtleX-60, turtleY+50, 30, 40);
ellipse (turtleX+60, turtleY+50, 30, 40);
ellipse (turtleX+90, turtleY, 80, 40);
fill (102, 51, 0);
ellipse (turtleX, turtleY, 200, 150);
fill (51, 102, 0);
ellipse (turtleX, turtleY, 180, 130);
fill (255);
textSize(30);
text ("Array 1D", turtleX-60, turtleY);
}
void Menu_Pencil (int posX1, int posY1) {
noStroke ();
fill (153, 51, 0);
triangle (posX1, posY1, posX1+50, posY1-20, posX1+50, posY1+20);
rect (posX1+50, posY1-20, 200, 40);
fill (255);
rect (posX1+250, posY1-20, 30, 40);
fill (0);
triangle (posX1, posY1, posX1+20, posY1-7, posX1+20, posY1+7);
fill (255);
textSize(30);
text ("Practice", posX1+100, posY1+10);
}
void Menu_Chicken(int posX2, int posY2, int r2) {
noStroke();
fill(255, 0, 0);
//cockscomb
ellipse(posX2+30, posY2-10, r2, r2);
ellipse(posX2+45, posY2-10, r2, r2);
ellipse(posX2+55, posY2-6, r2, r2);
//Chicken's mouth
triangle(posX2+10, posY2+10, posX2+25, posY2-10, posX2+50, posY2+10);
fill(255, 255, 0);
rect(posX2+25, posY2-10, r2+15, r2+10);
rect(posX2+25, posY2+15, r2+50, r2+25);
//Chicken's eye
fill(255);
ellipse(posX2+33, posY2, r2-3, r2-3);
fill(0);
ellipse(posX2+30, posY2+2, r2-10, r2-10);
fill(255, 0, 0);
ellipse(posX2+90, posY2+17, r2+6, r2+6);
ellipse(posX2+94, posY2+32, r2+2, r2+2);
ellipse(posX2+96, posY2+44, r2-1, r2-1);
//clound of text
fill(51, 0, 0);
ellipse (posX2+150, posY2-180, 200, 150);
ellipse (posX2+80, posY2-80, 20, 20);
ellipse (posX2+50, posY2-50, 15, 15);
fill (255);
textSize(30);
text ("Functions", posX2+80, posY2-170);
}
void Background1() {
strokeWeight(1);
stroke(0);
background(#673F03); //border
fill(#285212);
rect(20, 20, 860, 660); //blackboard
fill(#B9951C);
line(0, 0, 20, 20); //tl
line(860, 660, 900, 700); //dr
line(900, 0, 880, 20); //tr
line(20, 680, 0, 700); //dl
rect(800, 650, 90, 30); //brush
fill(255);
rect(740, 670, 50, 10); //chalk
rect(680, 670, 50, 10);
noFill();
}
void varPage1() {
int xVar1=100;
int xVar2=150;
int xVar3=100;
textSize(25);
fill(#3490D8);
rect(350, 65, 190, 60);
fill(255);
text("VARIABLE", 390, 100);
// if (xVar1<=100) {
// xVar1+=1.7;
// }
// else {
// xVar1=101;
// }
textSize(17);
text("'Variable' is a storage location paired with an associated symbolic name ,", xVar1, 180);
text("which contains some known or unknown quantity or information referred to as a value.", xVar1-50, 220);
///////////////////////////////////////////////////////////////////////////////////////////////////
// if (xVar2>=150) {
// xVar2-=1.7;
// }
// else {
// xVar2=149;
// }
textSize(20);
fill(#F06A7A);
text("kind of variable", xVar2-50, 260);
stroke(#F06A7A);
line(xVar2-50, 265, xVar2+100, 265);
textSize(17);
text("- Byte : Contain the integer from -128 until to 127 and storage 1 byte. ", xVar2, 300);
text("- Int : Contain the integer data type and storage 4 bytes. ", xVar2, 340);
text("- float : Contain the decimal data type and storage 4 bytes. ", xVar2, 380);
text("- Char : Contain the character data type and storage 2 bytes. ", xVar2, 420);
///////////////////////////////////////////////////////////////////////////////
// if (xVar3<=100) {
// xVar3+=1.7;
// }
// else {
// xVar3=101;
// }
textSize(20);
fill(#12C43C);
text("Assignment Operator", xVar3, 460);
stroke(#12C43C);
line(xVar3, 465, xVar3+205, 465);
textSize(17);
text("An assignment operator is the operator used to assign a new value to a variable, ", xVar3+50, 500);
text("example the regularly usage.", xVar3, 540);
text("+ (plus)", xVar3-50, 580);
text("- (minus)", xVar3-50, 620);
text("* (multiply)", xVar3+80, 580);
text("/ (divide)", xVar3+80, 620);
text("> (over)", xVar3+210, 580);
text("< (less than)", xVar3+210, 620);
text("= (eqaual)", xVar3+350, 580);
text("!= (not equal)", xVar3+350, 620);
text("&& (and)", xVar3+490, 620);
text("|| (or)", xVar3+490, 580);
text("% (modulation)", xVar3+610, 580);
///////////////////////////////
noFill();
}
void varPage2() {
int xVar4=100;
int xVar5=150;
int xVar6=100;
textSize(20);
fill(#E0E802);
text("A variable step", 50, 80);
stroke(#E0E802);
line(50, 85, 195, 85);
fill(#F9BBFA);
// if (xVar4<=100) {
// xVar4+=1.7;
// }
// else {
// xVar4=101;
// }
textSize(17);
text("1. Variable declaration : write the type of the variable and then write the variable name.", xVar4, 130);
text("example ---> int a; [declare the variable 'a' in an integer data type]", xVar4+75, 170);
text("The Scope of variable.", xVar4+25, 210);
text("- Local Varible : declaring in function.", xVar4+50, 250);
text("- Glocal Varible : declaring out of function.", xVar4+50, 290);
/////////////////////////////////////////////////////////////
// if (xVar5>=150) {
// xVar5-=1.7;
// }
// else {
// xVar5=149;
// }
fill(#AEDEF2);
text("2. Assign the variable : Specify a value to a variable,", xVar5-50, 330);
text("The value on the right hand side assign the variable", xVar5-30, 370);
text("example ---> int a=10; [assign the variable 'a' has an integer value is 10]", xVar5+25, 410);
///////////////////////////////////////////////////////////////////////////////////////////
// if (xVar6<=100) {
// xVar6+=1.7;
// }
// else {
// xVar6=101;
// }
fill(#FA8238);
text("3. To call the variable : call the variable with 2 type", xVar6, 450);
text("- User defined variable : call the variable that user make the variable by step 1 and 2.", xVar6+20, 490);
text("example ---> line(a,30,a+50,30);", xVar6+75, 530);
text("- System variable : call the variable that already to use in processing program.", xVar6+20, 570);
text("example ---> mouseX , mouseY , etc.", xVar6+75, 610);
noFill();
}
void VarExplanation() {
textSize(20);
text("Explanation of Variable steps ", 310, 80);
if (y_var2<=190) {
y_var2+=1.5;
fill(255);
ellipse(420, y_var2, 50, 50);
fill(0);
text("int", 410, y_var2);
textSize(20);
text("A", 460, 200);
} else {
fill(0);
ellipse(380, 300, 100, 100);
fill(255);
text("int A", 360, 300);
if (x_var2>=540) {
x_var2-=2;
} else {
text("=", 470, 305);
text("The value on the right hand side assign the variable.", 210, 450);
}
ellipse(x_var2, 300, 50, 50);
fill(0);
text("50", x_var2-10, 305);
fill(255);
}
}
void teachIfelse() {
int xCon1=100;
int xCon2=150;
int xCon3=100;
fill(255);
textSize(20);
text("If-else", 430, 80);
stroke(255);
// if (xCon1<=100) {
// xCon1+=1.7;
// }
// else {
// xCon1=101;
// }
line(430, 85, 495, 85);
fill(#DED636);
textSize(17);
text("If : Allows the program to make a decision about which code to execute.", xCon1+50, 120);
text("If the test evaluates to true, the statements enclosed within the block are executed", xCon1, 160);
text("and if the test evaluates to false the statements are not executed.", xCon1, 200);
///////////////////////////////////////////////////////////////////////////////////////////////////
// if (xCon2>=150) {
// xCon2-=1.7;
// }
// else {
// xCon2=149;
// }
fill(#8AC1F0);
text("else : Extends the if structure allowing the program to choose between", xCon2, 240);
text(" two or more block of code. It specifies a block of code to execute", xCon2-50, 280);
text("when the expression in if is false.", xCon2-50, 320);
////////////////////////////////////////////////////////////////////////////////////////////////////
// if (xCon3<=100) {
// xCon3+=1.7;
// }
// else {
// xCon3=101;
// // ButtonChangePage(820, 550, "Press Key 1");
// }
fill(255);
text("* example *", xCon3+100, 360);
text("int x=30;", xCon3+300, 400);
text("if( x < 20 ){", xCon3+300, 440);
text("println(100);", xCon3+330, 480);
text("}else{", xCon3+300, 520);
text("println(200);", xCon3+330, 560);
text("}", xCon3+330, 600);
text("}", xCon3+300, 640);
}
void teachLoop() {
int yCon1=120;
int yCon2=360;
// if (yCon1<=120) {
// yCon1+=1.7;
// }
// else {
// yCon1=121;
// }
fill(255);
textSize(20);
text("Loop", 430, 80);
stroke(255);
line(430, 85, 480, 85);
textSize(15);
fill(#B2CCFF);
text("For Loop : A basic for structure has three parts: init, test, and update.", 150, yCon1);
text("Each part must be separated by a semicolon (;). The loop continues until the test evaluates to false,", 100, yCon1+40);
text("When a for structure is executed.", 100, yCon1+80);
fill(255);
text("* example *", 200, yCon1+120);
text("for (int i = 0; i < 80; i = i+5) {", 340, yCon1+120);
text("line(30, i, 80, i);", 380, yCon1+160);
text("}", 340, yCon1+200);
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// if (yCon2>=360) {
// yCon2-=1.7;
// }
// else {
// yCon2=359;
// // ButtonChangePage(820, 550, "Press Key 2");
// }
fill(#F793E2);
text("While Loop : executes a series of statements continuously while the expression is true.", 150, yCon2);
text("The expression must be updated during the repetitions or the program will never break out of while.", 100, yCon2+40);
fill(255);
text("* example *", 200, yCon2+80);
text("int i = 0;", 340, yCon2+80);
text("while (i < 80) {", 340, yCon2+120);
text("line(30, i, 80, i);", 380, yCon2+160);
text("i = i + 5;", 380, yCon2+200);
text("}", 340, yCon2+240);
}
void teachFlowChart() {
PImage Img1 = loadImage("http://www.zentut.com/wp-content/uploads/2007/12/c-if-else-statement.png", "png");
PImage Img2 = loadImage("http://www.functionx.com/cpp/images/flowchart11.gif", "gif");
image(Img1, 100, 200);
image(Img2, 490, 200);
fill(255);
textSize(20);
text("Flowchart", 400, 80);
stroke(255);
line(400, 85, 490, 85);
text("If-else", 210, 160);
text("Loop", 610, 160);
// ButtonChangePage(820, 600, "Press Key 3");
}
void Condition2() {
strokeWeight(1);
methodIf();
}
void methodLoop() {
strokeWeight(1);
textSize(20);
text("Explanation of ' Loop ' working methods", 260, 80);
fill(255);
rect(310, 150, 280, 60);
fill(#FFAAAA);
ellipse(x_roll+g_roll, y_fall, 50, 50);
if (x_roll<550) {
x_roll+=2;
} else {
if (g_roll<-200) {
x_roll=350;
g_roll=0;
} else {
g_roll-=2;
}
}
if (keyCode==DOWN&&(x_roll>350)&&(x_roll<550)) {
x_roll=450;
y_fall+=3;
textSize(50);
fill(#F59607);
text("Out of Loop!", 300, 450);
textSize(20);
fill(#F096D5);
text("False", 230, 180);
} else {
textSize(20);
fill(#80E3AF);
text("True", 230, 180);
fill(#EEFC2E);
text("Suppose the White box is a loop condition", 250, 280);
text("and pink ball is work in a true statements", 255, 320);
fill(#7590F7);
text("Press 'Down key' to make 'false' statements", 250, 400);
stroke(#7590F7);
line(450, 430, 450, 510);
line(440, 500, 450, 520);
line(450, 520, 460, 500);
}
}
void methodIf() {
textSize(20);
text("Explanation of ' if-else ' working methods", 250, 80);
strokeWeight(5);
// stroke(#86E0FF);
// line(250, 130, 250, height-20); //if
// line(350, 130, 350, height-20);
// stroke(#F07777);
// line(550, 130, 550, height-20); //else
// line(650, 130, 650, height-20);
stroke(#E8E3C0);
fill(#E8E3C0);
quad(350, 170, 450, 120, 550, 170, 450, 240); //condition
line(170, 170, 400, 170); //left
line(170, 170, 170, 250);
line(160, 240, 170, 250);
line(180, 240, 170, 250);
line(170, 300, 170, 530);
rect(50, 260, 210, 100);
line (500, 170, 730, 170); //right
line(730, 170, 730, 360);
line(720, 350, 730, 360);
line(740, 350, 730, 360);
line(740, 380, 740, 530);
rect(630, 370, 210, 100);
line(170, 530, 740, 530);
line(450, 530, 450, 600);
ellipse(450, 620, 100, 50);
stroke(#FFAAAA);//ball
fill(#FFAAAA);
ellipse(x_pos_ball, y_pos_ball, 50, 50);
fill(#050EF7);
text("if", 150, 290);
text("The true statements", 60, 330);
fill(#F02CA1);
text("else", 710, 410);
text("The false statements", 640, 450);
fill(0);
text("CONDITION", 395, 175);
text("END", 430, 625);
if (y_pos_ball<=350) {
y_pos_ball++;
if (y_pos_ball>=280) {
fill(255);
text("When it false", 390, 380);
stroke(255);
line(390, 420, 480, 420);
line(480, 410, 500, 420);
line(500, 420, 480, 430);
}
} else if (y_pos_ball>350&&y_pos_ball<850) {
x_pos_ball=730;
y_pos_ball++;
if (y_pos_ball>=550) {
x_pos_ball=450;
y_pos_ball++;
}
} else {
Background1();
methodLoop();
}
}
void Function_1 () {
background (255, 153, 153);
for (int x = 0; x<width; x=x+260) {
noStroke();
fill (255, 255, 153);
rect (x, 0, 130, height);
}
fill (51, 0, 102);
textSize(45);
text ("FUNCTION", (width/2)-110, 70);
Function_1_move ();
}
void Function_2() {
background (255, 255, 0);
noStroke();
fill (102, 51, 0);
ellipse (width/2, height/2, 950, 750);
fill (255);
textSize(45);
text ("FUNCTION", (width/2)-110, 70);
Function_2_move ();
}
void Function_3() {
background (255, 51, 102);
noStroke();
fill (255, 255, 0);
ellipse (width/2, height/2, 950, 750);
fill (0);
textSize(45);
text ("FUNCTION", (width/2)-110, 70);
Function_3_move ();
}
void Function_System (int y2) {
fill (204, 255, 102);
textSize(30);
text ("System Function", (width/2)-110, 120);
textSize (25);
text ("The system functions are already available to run it.", 150, 150);
fill (255, 153, 153);
rect (100, y2, 200, 100, 10);
rect (100, y2+200, 200, 100, 10);
fill (153, 255, 0);
rect (630, y2, 200, 50, 20);
rect (630, y2+200, 200, 50, 20);
fill (102, 255, 255);
rect (650, y2+70, 150, 50, 20);
rect (650, y2+270, 150, 50, 20);
fill (102, 0, 51);
textSize (25);
text ("WITH", 170, y2+40);
text ("PARAMETER", 130, y2+70);
text ("WITHOUT", 150, y2+240);
text ("PARAMETER", 130, y2+270);
fill (0);
textSize(20);
text ("View Source Code", 640, y2+30);
text ("View Source Code", 640, y2+230);
text ("Code Sample", 660, y2+100);
text ("Code Sample", 660, y2+300);
fill (255);
textSize (20);
text ("Mouse over to read the description", (width/2)-150, y2+445);
text ("Click mouse left to go to next page", (width/2)-150, y2+470);
}
void Function_UserDefinde (int y3) {
fill (102, 0, 153);
textSize(30);
text ("User Definde Function", (width/2)-160, 120);
textSize (25);
text ("The functions that user declare, defined, run by yourselft.", 100, 150);
fill (255, 153, 153);
rect (100, y3, 200, 100, 10);
rect (100, y3+200, 200, 100, 10);
fill (153, 255, 0);
rect (630, y3, 200, 50, 20);
rect (630, y3+200, 200, 50, 20);
fill (102, 255, 255);
rect (650, y3+70, 150, 50, 20);
rect (650, y3+270, 150, 50, 20);
fill (102, 0, 51);
textSize (25);
text ("WITH", 170, y3+40);
text ("PARAMETER", 130, y3+70);
text ("WITHOUT", 150, y3+240);
text ("PARAMETER", 130, y3+270);
fill (0);
textSize(20);
text ("View Source Code", 640, y3+30);
text ("View Source Code", 640, y3+230);
text ("Code Sample", 660, y3+100);
text ("Code Sample", 660, y3+300);
fill (0);
textSize (20);
text ("Mouse over to read the description", (width/2)-150, y3+445);
text ("Click mouse left to go to next page", (width/2)-150, y3+470);
}
void Function_2_sample_withOutParameter () {
fill (255, 0, 0);
rect (430, 400, 100, 100);
noStroke();
if (mouseX>=405&&mouseX<=550
&&mouseY>=385&&mouseY<=480) {
strokeWeight (5);
stroke (0);
line (480, 400, 480, 500);
}
}
void Function_2_sample_withParameter () {
fill (255, 0, 0);
ellipse (480, 260, 100, 100);
if (mouseX>=405&&mouseX<=550&&mouseY>=185&&mouseY<=280) {
fill (0, 0, 255);
ellipse (480, 260, 150, 150);
}
}
void Function_3_sample_withOutParameter () {
for (int x = 0; x<75; x=x+15) {
stroke(0);
line (450+x, 400, 450+x, 500);
}
}
void Function_3_sample_withParameter (int a, int b) {
line (b-50, a, b+50, a);
line (b-50, a+20, b+50, a+20);
line (b-50, a+40, b+50, a+40);
}
void Function_2_codeSample_withOutParameter (int y2) {
if (mouseX >=670 && mouseX<=785 && mouseY >=y2+285 && mouseY <=y2+315) {
fill (102, 255, 255);
rect (630, y2+270, 200, 100, 20);
fill (0);
textSize(15);
text ("noFill ();", 650, y2+295);
text ("//No fill color to shape", 650, y2+315);
text ("noStroke ();", 650, y2+335);
text ("//No fill color to line", 650, y2+355);
}
}
void Function_2_codeSample_withParameter (int y2) {
if (mouseX >=670 && mouseX<=785 && mouseY >=y2+85 && mouseY <=y2+115) {
fill (102, 255, 255);
rect (630, y2+70, 200, 100, 20);
fill (0);
textSize(15);
text ("fill (Red, Green, Blue);", 640, y2+95);
text ("//Fill color to shape", 640, y2+115);
text ("ellipse (x, y, width, hight);", 640, y2+135);
text ("//create ellipse", 640, y2+155);
}
}
void Function_3_codeSample_withParameter (int y3) {
if (mouseX >=670 && mouseX<=785 && mouseY >=y3+85 && mouseY <=y3+115) {
fill (102, 255, 255);
rect (630, y3+70, 200, 100, 20);
fill (0);
textSize(15);
text ("Calculate (a, b);", 640, y3+95);
text ("//function that create", 640, y3+115);
text ("by yourselft for", 640, y3+135);
text ("Calculate value a, b", 640, y3+155);
}
}
void Function_3_codeSample_withOutParameter (int y3) {
if (mouseX >=670 && mouseX<=785 && mouseY >=y3+285 && mouseY <=y3+315) {
fill (102, 255, 255);
rect (630, y3+270, 200, 100, 20);
fill (0);
textSize(15);
text ("draw_grid ();", 650, y3+295);
text ("//function that create", 650, y3+315);
text ("by yourselft for", 650, y3+335);
text ("Draw grid", 650, y3+355);
}
}
void Function_2_viewSource_withOutParameter (int y2) {
if (mouseX >=645 && mouseX<=800 && mouseY >=y2+210 && mouseY <=y2+240) {
fill (153, 255, 0);
rect (610, y2+200, 250, 200, 20);
fill (0);
textSize(15);
text ("fill (255, 0, 0);", 625, y2+220);
text ("rect (430, 400, 100, 100);", 625, y2+240);
text (" noStroke();", 625, y2+260);
text ("if(mouseX>=405&&mouseX", 625, y2+280);
text ("<=550&&mouseY>=385", 625, y2+300);
text ("&&mouseY<=480){", 625, y2+320);
text ("strokeWeight (5);", 625, y2+340);
text (" stroke (0);", 625, y2+360);
text ("line (480, 400, 480, 500);}", 625, y2+380);
}
}
void Function_2_viewSource_withParameter (int y2) {
if (mouseX >=645 && mouseX<=800 && mouseY >=y2+10 && mouseY <=y2+40) {
fill (153, 255, 0);
rect (610, y2, 250, 180, 20);
fill (0);
textSize(15);
text ("fill (255, 0, 0);", 625, y2+30);
text ("ellipse (480, 260, 100, 100);", 625, y2+50);
text ("if (mouseX>=405&&mouseX", 625, y2+70);
text ("<=550&&mouseY>=185", 625, y2+90);
text ("&&mouseY<=280){", 625, y2+110);
text ("fill (0, 0, 255);", 625, y2+130);
text (" ellipse (480, 260, 150, 150);}", 625, y2+150);
}
}
void Function_3_viewSource_withOutParameter (int y3) {
if (mouseX >=645 && mouseX<=800 && mouseY >=y3+210 && mouseY <=y3+240) {
fill (153, 255, 0);
rect (610, y3+200, 250, 150, 20);
fill (0);
textSize(15);
text ("void draw_frence (){", 625, y3+220);
text ("for(int x=0;x<75;x=x+15){", 625, y3+240);
text ("stroke(0);", 625, y3+260);
text ("line(450+x,200,450+x,300);", 625, y3+280);
text ("}", 625, y3+300);
}
}
void Function_3_viewSource_withParameter (int y3) {
if (mouseX >=645 && mouseX<=800 && mouseY >=y3+10 && mouseY <=y3+40) {
fill (153, 255, 0);
rect (610, y3, 250, 180, 20);
fill (0);
textSize(15);
text ("void draw_horizontal", 625, y3+30);
text ("(int a,int b){;", 625, y3+50);
text ("line (b-50, a, b+50, a);", 625, y3+70);
text ("line (b-50,a+20,b+50,a+20);", 625, y3+90);
text ("line (b-50,a+40,b+50,a+40);", 625, y3+110);
text ("}", 625, y3+130);
}
}
void Function_2_withOutParameter (int y2) {
if (mouseX >=130 && mouseX<=280 && mouseY >=y2+200 && mouseY <=y2+270) {
fill (255, 255, 0);
rect (80, y2+200, 300, 150, 10);
fill (0);
textSize(15);
text ("The system function", 120, y2+230);
text ("that do not want a parameter,", 100, y2+250);
text ("It's not supported,", 100, y2+270);
text ("and the outcome was the same run.", 100, y2+290);
}
}
void Function_2_withParameter (int y2) {
if (mouseX >=130 && mouseX<=280 && mouseY >=y2+30 && mouseY <=y2+70) {
fill (255, 255, 0);
rect (80, y2, 300, 150, 10);
fill (0);
textSize(15);
text ("The system functions", 120, y2+30);
text ("that require a parameter", 100, y2+50);
text ("To keep up to run", 100, y2+70);
text ("And each run when", 100, y2+90);
text ("the Output parameter changes", 100, y2+110);
text ("that have been changed accordingly.", 100, y2+130);
}
}
void Function_3_withOutParameter (int y3) {
if (mouseX >=130 && mouseX<=280 && mouseY >=y3+200 && mouseY <=y3+270) {
fill (255, 255, 0);
rect (80, y3+200, 300, 150, 10);
fill (0);
textSize(15);
text ("The function", 120, y3+230);
text ("that you doesn't declare", 100, y3+250);
text ("the parameter you maybe want", 100, y3+270);
text ("the outcome have the same run.", 100, y3+290);
}
}
void Function_3_withParameter (int y3) {
if (mouseX >=130 && mouseX<=280 && mouseY >=y3+30 && mouseY <=y3+70) {
fill (255, 255, 0);
rect (80, y3, 300, 150, 10);
fill (0);
textSize(15);
text ("The functions", 120, y3+30);
text ("that you declare the parameter", 100, y3+50);
text ("because you want different", 100, y3+70);
text ("outcome in each parameter value", 100, y3+90);
}
}
void Function_MindMap (int y) {
stroke (0);
strokeWeight(10);
line ((width/2)-5, y+45, (width/2)-5, y+100);
line ((width/2)-75, y+100, (width/2)+80, y+100);
line ((width/2)-255, y+140, (width/2)-255, y+210);
line ((width/2)-255, y+175, (width/2)-100, y+175);
line ((width/2)-100, y+175, (width/2)-100, y+350);
line ((width/2)+275, y+140, (width/2)+275, y+310);
line ((width/2)+275, y+175, (width/2)+95, y+175);
line ((width/2)+95, y+175, (width/2)+95, y+205);
strokeWeight (3);
fill (51, 0, 0);
ellipse ((width/2), y, 300, 100);
fill (255);
textSize (40);
text ("function", (width/2)-70, y+10);
//First Topic
fill (102, 0, 153);
ellipse ((width/2)-250, y+100, 350, 90);
ellipse ((width/2)+250, y+100, 350, 90);
fill (255);
textSize (30);
text ("User Defined Function", (width/2)-410, y+110);
text ("System Function", (width/2)+140, y+110);
//Second Topic
fill (0, 51, 51);
ellipse ((width/2)-300, y+250, 250, 90);
ellipse ((width/2)-100, y+350, 250, 90);
ellipse ((width/2)+300, y+350, 250, 90);
ellipse ((width/2)+100, y+250, 250, 90);
fill (255);
textSize (25);
text ("With Parameter", (width/2)-390, y+260);
text ("Without Parameter", (width/2)-210, y+360);
text ("With Parameter", (width/2)+10, y+260);
text ("Without Parameter", (width/2)+190, y+360);
//Thrid Topic
noStroke();
}
void Function_PaintBrush (int PaintX, int PaintY, int PaintR1) {
//draw Body Paintbrush
stroke (255, 255, 000);
strokeWeight (2);
fill (102, 051, 000);
ellipse (PaintX, PaintY, PaintR1, PaintR1-270);
//draw Head Paintbrush
noStroke ();
fill (204, 153, 102);
ellipse (PaintX-150, PaintY, PaintR1-200, PaintR1-250);
stroke (255, 255, 153);
//draw Junction
stroke (051, 051, 051);
strokeWeight (10);
line (PaintX-100, PaintY+10, PaintX-100, PaintY-10);
}
void Function_1_move () {
Function_MindMap(y);
y--;
if (y==150) {
y++;
Function_PaintBrush (width-200, height-50, 300);
fill (0);
textSize(20);
text ("Click mouse left to go to next page", 150, height-45);
}
}
void Function_2_move () {
Function_System(y2);
y2--;
if (y2==200) {
y2++;
Function_2_withParameter(y2);
Function_2_withOutParameter(y2);
Function_2_viewSource_withParameter (y2);
Function_2_viewSource_withOutParameter (y2);
Function_2_codeSample_withParameter (y2);
Function_2_codeSample_withOutParameter (y2);
Function_2_sample_withParameter ();
Function_2_sample_withOutParameter ();
}
}
void Function_3_move () {
Function_UserDefinde (y3);
y3--;
if (y3==200) {
y3++;
Function_3_withParameter(y3);
Function_3_withOutParameter(y3);
Function_3_codeSample_withOutParameter (y3);
Function_3_codeSample_withParameter (y3);
Function_3_viewSource_withOutParameter (y3);
Function_3_viewSource_withParameter (y3);
Function_3_sample_withOutParameter ();
Function_3_sample_withParameter (250, 470);
}
}
void Array_1 () {
background (102, 0, 51);
for (int y = 0; y<width; y=y+220) {
noStroke();
fill (51, 0, 102);
rect (0, y, width, 110);
}
fill (255);
textSize(45);
text ("Array 1 D", (width/2)-110, 70);
Array_move1 ();
}
void Array_2 () {
background (255, 0, 0);
noStroke();
fill (102, 51, 0);
ellipse (width/2, height/2, 950, 750);
fill (255);
textSize(45);
text ("Array 1 D", (width/2)-80, 70);
Array_move2 ();
}
void Array_3 () {
background (255, 102, 102);
noStroke();
fill (255, 255, 153);
ellipse (width/2, height/2, 950, 750);
fill (0);
textSize(45);
text ("Array 1 D", (width/2)-80, 70);
Array_move3 ();
}
void Array_2_Article (int y4) {
fill (204, 255, 102);
textSize(30);
text ("How to use", (width/2)-75, y4);
text ("Parallel Array", (width/2)-75, y4+380);
textSize (25);
text ("Principle is similar to that of the variable. The steps as follows.", 80, y4+30);
textSize (20);
fill (255, 255, 0);
text ("Step 1 : Declare", 120, y4+60);
text ("Type follow by a symbol indicating the array and follow Array named.", 100, y4+80);
text ("For Exemple", 100, y4+100);
text ("int [] Value = new int [3];", 100, y4+120);
text ("//Array declaration New at length 3", 100, y4+140);
text ("Step 2 : Defined", 120, y4+160);
text ("Add a value to the array within the braces.", 100, y4+180);
text ("For Example", 100, y4+200);
text ("int Value [] = {12, 13, 15, 17};", 100, y4+220);
text ("//Defined value of Array, value are 12, 13, 15, 17", 100, y4+240);
text ("Step 3 : Run", 120, y4+260);
text ("Write a Array name only", 100, y4+280);
text ("For Example", 100, y4+300);
text ("Calculate (Value);", 100, y4+320);
text ("//Pull out the value in array to use in function", 100, y4+340);
text ("Similar to Array 1 D very different in that each Array index is equal.", 100, y4+410);
text ("For Example", 100, y4+430);
text ("String [] name = {''Lucy'', ''John'', ''David''};", 100, y4+450);
text ("int [] salary = {20000, 15000, 35000};", 100, y4+470);
}
void Array_3_Article (int y6) {
fill (102, 0, 51);
textSize(30);
text ("For-Loop that index of Array", (width/2)-200, y6);
textSize (25);
text ("We use a for-loop to load data in each of index of Array", 120, y6+30);
textSize (20);
fill (102, 51, 0);
text ("EXAMPLE:", 120, y6+60);
text ("int sum = 0;", 100, y6+80);
text ("int [] a = {2, 4, 9, 10, 15};", 100, y6+100);
text ("for (int i = 0; i<a.length; i++) {", 100, y6+120);
text ("sum = sum + a[i]; }", 100, y6+140);
fill (204, 51, 102);
text ("ARRAY LIKE A BOX THAT WE LOAD DATA ON IT", 100, y6+190);
fill (255, 0, 0);
rect (205, y6+230, 150, 150);
fill (0, 255, 0);
rect (385, y6+230, 150, 150);
fill (0, 0, 255);
rect (565, y6+230, 150, 150);
fill(255);
textSize (20);
text ("INDEX = 0", 233, y6+305);
text ("INDEX = 1", 413, y6+305);
text ("INDEX = 2", 593, y6+305);
fill (0);
text ("Click to each box for look data in box", (width/2)-150, y6+500);
if (mouseX >= 205 && mouseX <= 355 && mouseY >= y6+230 && mouseY <= y6+380) {
fill (125, 5, 245);
text ("data in box of index 0", 180, y6+450);
stroke (53, 53, 53);
strokeWeight (7);
line (270, y6+430, 270, y6+400);
line (260, y6+420, 270, y6+400);
line (280, y6+420, 270, y6+400);
noStroke();
}
if (mouseX >= 385 && mouseX <= 535 && mouseY >= y6+230 && mouseY <= y6+380) {
fill (125, 5, 245);
text ("data in box of index 1", 360, y6+450);
stroke (53, 53, 53);
strokeWeight (7);
line (450, y6+430, 450, y6+400);
line (440, y6+420, 450, y6+400);
line (460, y6+420, 450, y6+400);
noStroke();
}
if (mouseX >= 565 && mouseX <= 715 && mouseY >= y6+230 && mouseY <= y6+380) {
fill (125, 5, 245);
text ("data in box of index 2", 540, y6+450);
stroke (53, 53, 53);
strokeWeight (7);
line (630, y6+430, 630, y6+400);
line (620, y6+420, 630, y6+400);
line (640, y6+420, 630, y6+400);
noStroke();
}
}
void Array_MindMap (int y5) {
stroke (255, 0, 102);
strokeWeight(10);
line ((width/2)-5, y5+45, (width/2)-5, y5+100);
line ((width/2)-210, y5+100, (width/2)+110, y5+100);
line ((width/2)+255, y5+130, (width/2)+255, y5+185);
line ((width/2)-275, y5+130, (width/2)-275, y5+195);
line ((width/2)-275, y5+160, (width/2)-25, y5+160);
line ((width/2)-25, y5+160, (width/2)-25, y5+304);
line ((width/2)-275, y5+365, (width/2)-275, y5+305);
line ((width/2)-275, y5+305, (width/2)-140, y5+305);
line ((width/2)-140, y5+305, (width/2)-140, y5+160);
strokeWeight (3);
stroke(255, 255, 0);
fill (255, 0, 102);
ellipse ((width/2), y5, 300, 100);
fill (0);
textSize (40);
text ("array 1 D", (width/2)-90, y5+10);
//First Topic
fill (102, 255, 0);
ellipse ((width/2)-250, y5+100, 300, 70);
ellipse ((width/2)+250, y5+100, 300, 70);
fill (0);
textSize (30);
text ("How to use?", (width/2)-340, y5+110);
text ("Parallel Array", (width/2)+160, y5+110);
//Second Topic
fill (255, 255, 0);
ellipse ((width/2)-280, y5+230, 230, 80);
ellipse ((width/2)-30, y5+340, 230, 80);
ellipse ((width/2)-280, y5+400, 180, 80);
ellipse ((width/2)+260, y5+230, 350, 100);
fill (0);
textSize (20);
text ("Array Declaration", (width/2)-365, y5+235);
text ("Array Assignment", (width/2)-115, y5+345);
text ("Array Run", (width/2)-330, y5+405);
text ("Array 1 D that length of index", (width/2)+120, y5+230);
text ("in each of array to equal", (width/2)+150, y5+250);
//Thrid Topic
noStroke();
}
void Array_bicycle (float driveBicycle) {
strokeWeight (5);
stroke (0);
ellipse (driveBicycle-50, (height)-40, 70, 70);
ellipse (driveBicycle+70, (height)-60, 100, 100);
fill (102);
ellipse (driveBicycle-50, (height)-40, 20, 20);
ellipse (driveBicycle+70, (height)-60, 50, 50);
strokeWeight (10);
stroke (102, 51, 0);
line (driveBicycle, (height)-120, driveBicycle+30, (height)-120);
strokeWeight (15);
stroke (255, 51, 0);
line (driveBicycle-50, (height)-60, driveBicycle+50, (height)-60);
line (driveBicycle-50, (height)-190, driveBicycle-50, (height)-50);
line (driveBicycle-50, (height)-140, driveBicycle+50, (height)-90);
line (driveBicycle-70, (height)-190, driveBicycle-10, (height)-190);
}
void Array_move1 () {
Array_MindMap (y5);
y5--;
if (y5==150) {
y5++;
fill (255);
textSize(20);
text ("Click mouse left to go to next page", 150, height-45);
Array_bicycle(700);
}
}
void Array_move2 () {
Array_2_Article (y4);
y4--;
if (y4==120) {
y4++;
}
}
void Array_move3 () {
Array_3_Article (y6);
y6--;
if (y6==120) {
y6++;
}
}
void practice (int y7) {
background (153, 0, 153);
noStroke();
fill (255, 255, 102);
quad ((width/2), -250, width+250, (height/2), (width/2), height+250, -250, (height/2));
fill (0);
textSize(45);
text ("Practice", (width/2)-90, 70);
fill (51, 0, 0);
textSize(30);
text ("Write a program to show Addditions results", (width/2)-300, y7);
text ("of a number between 1-100.", (width/2)-300, y7+30);
textSize (25);
fill (0, 0, 102);
text ("SLOVE:", 80, y7+80);
textSize (20);
fill (255, 51, 102);
text ("Step 1 : Declare a variable according to the directive", 120, y7+130);
text ("by x1 = 1;", 100, y7+160);
text ("x2 = 100;", 100, y7+190);
text ("result is a result of Additions", 100, y7+220);
text ("In general, we can calculate the sums ranging from 1-100 of this theroem.", 100, y7+250);
text ("(the first number + the last number) * (the last number / 2).", 100, y7+280);
text ("void setup (){", 100, y7+310);
text ("int x1 = 1;", 100, y7+340);
text ("int x2 = 100;", 100, y7+370);
text ("int result;", 100, y7+400);
text ("result = (x1+x2)+(x2/2);", 100, y7+430);
text ("print (''result=''+result);", 100, y7+460);
text ("}", 100, y7+490);
}
void Practice_move () {
practice (y7);
y7--;
if (y7==120) {
y7++;
}
}
