// Ohjelman tehnyt e-Oppi Oy
// 28.3.2018
int a = 200; // Laskurin alkuarvo (ikkunan keskellä)
int b = 200; // Laskurin alkuarvo (ikkunan keskellä)

void setup () {
     size(850,650); // ikkunan koko
     stroke(0); // Musta viivan väri
     strokeWeight(3);
}

void draw() {
     background(255); // Tyhjennä tausta
     textSize(30);
     fill(255,255,0); // Keltainen täyttöväri
     rect(0,0,849,40); // Piirrä keltainen suorakulmio
     rect(0,40,849,40); // Piirrä keltainen suorakulmio
     fill(255,100,100); // Punainen täyttöväri
     rect(a,0,50,40); // Piirrä punainen neliö
     rect(b,40,50,40); // Piirrä punainen neliö
     stroke(0);
     int x1 = mouseX; // Selvitä hiiren vaakakoordinaatti
     int y1 = mouseY;
    if (mousePressed == true) {
     if ((y1 > 0) && (y1 < 40)) {
     if ((x1>a) && (a < 800)) { // Jos hiiri on oikealla puolen
         a++; // niin kasvata laskuria
     }

     if ((x1<a) && (a > 0)) { // Jos hiiri on vasemmalla puolen
         a--; // niin pienennä laskuria
     }
     }
    
     if ((y1 > 40) && (y1 < 80)) {
     if ((x1>b) && (b < 800)) { // Jos hiiri on oikealla puolen
         b++; // niin kasvata laskuria
     }

     if ((x1<b) && (b > 0)) { // Jos hiiri on vasemmalla puolen
         b--; // niin pienennä laskuria
     }
     }
    }

     fill(0); // Musta tekstin väri
     int a2 = round((map(a,0,800,1,500)));
     int b2 = round((map(b,0,800,1,a2*2)));
     int c2 = round((map(b2,0,a2*2,0,500)));
     if (b2 > 999) { textSize(14); } else { textSize(24); }
          text(""+a2,a+4,33);
        
          text(""+b2,b+4,73);
          textSize(24);
     fill(200,200,255);     
     rect(150,100,50,500);
     for (int s=0; s <= 20; s++) {
       line(150,100+s*25,200,100+s*25);
       
     }
     line(140,350,210,350);
     line(140,100,210,100);
     line(140,600,210,600);
     fill(0);
     text("2 = 200 %",10,110);
     text("1 = 100 %",10,360);
     text("0 = 0 %",40,610);
     text(2*a2,220,110);
     text(a2,220,360);
     text("0",220,610);
     text(round(100*(100*b2*10.0/(a2*10.0)))/100.0+" %",280,610-c2);
     stroke(255,0,0);
     line(200,600-c2,270,600-c2);
     stroke(0);
     noFill();
     rect(440,110,340,160);
     line(610,110,610,270);
     line(440,155,780,155);
     
     fill(255,0,0,150);
     rect(150,600,50,-c2);
     
     fill(255,200,200);
     noStroke();
     rect(450,210,120,50);
     rect(710,380,120,50);
     fill(200,255,200);
     rect(650,160,120,50);
     
      rect(710,590,120,50);
     fill(200,200,255);
     rect(650,210,120,50);
        rect(710,500,120,50);
        
     fill(0);
     stroke(0);
     textSize(24);
     text("Prosentti",450,150);
     text("100 %",450,200);
     text(round(100*(100*b2*10.0/(a2*10.0)))/100.0+" %",450,250);
     text("Luku",650,150);
     text(a2,650,200);
     text(b2,650,250);
     text(round(100*(100*b2*10.0/(a2*10.0)))/100.0+" % \u00B7 "+a2+" = "+b2+" \u00B7 100 %",450,310);
     text("a) Kuinka monta prosenttia",450,340);
     text(b2+" on "+a2+":sta?",450,370);
     text("p % = ",450,410);
     line(540,400,595,400);
     text(""+b2,550,395);
     text(""+a2,550,425);
     text("\u00B7 100 % = "+round(100*(100*b2*10.0/(a2*10.0)))/100.0+" % ",600,410);
     text("b) Kuinka paljon on "+round(100*(100*b2*10.0/(a2*10.0)))/100.0+" %",450,460);
     text("luvusta "+a2+"?",450,490);
      text("a = ",450,530);
     line(540,520,635,520);
     text(""+round(100*(100*b2*10.0/(a2*10.0)))/100.0+" % ",550,515);
     text("100 %",550,545);
     text("\u00B7"+a2+" = "+b2,650,530);
      text("c) Mistä luvusta "+round(100*(100*b2*10.0/(a2*10.0)))/100.0+" % on "+b2+"?",450,580);
      text("b = ",450,620);
     line(540,610,635,610);
      text("100 %",550,605);
      text(""+round(100*(100*b2*10.0/(a2*10.0)))/100.0+" % ",550,635);
      text("\u00B7"+b2+" = "+a2,650,620);  
}