วันพฤหัสบดีที่ 20 พฤศจิกายน พ.ศ. 2557

Assignment2 COMPLETE

https://bitbucket.org/unthika_nongbua/assignment-2/src/92cabd2ad12330240e423dc64e6e62eb29b06235/my_story.java?at=default

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++;
  }
}

ไม่มีความคิดเห็น:

แสดงความคิดเห็น