PImage img;


void setup() {
  img= loadImage("imageback.jpg");
  img.resize(501,501);
  background(img);
  size(501, 501);
  smooth();
}
void draw() {
scene7();

}

void arrow(int x1, int y1, int x2, int y2) {
  line(x1, y1, x2, y2);
  pushMatrix();
  translate(x2, y2);
  float a = atan2(x1-x2, y2-y1);
  rotate(a);
  line(0, 0, -10, -10);
  line(0, 0, 10, -10);
  popMatrix();
}

void dottedline(float x1, float y1, float x2, float y2, float steps){
 for(int i=0; i<=steps; i++) {
   float x = lerp(x1, x2, i/steps);
   float y = lerp(y1, y2, i/steps);
   noStroke();
   ellipse(x, y,2,2);
 }
}

void scene7(){


  line(250, 0, 250, 500);
  line(0, 250, 500, 250);


  for (int j = 250; j<= 500; j+=25) {
    for (int i =250; i>=0; i-=25) {
      line(240, i, 260, i);
      line(i, 240, i, 260);
      line(240, j, 260, j);
      line(j, 240, j, 260);
    }
  }


  fill(0);
  textSize(9);
  int b = 0;
  int b1=1;
  for (int k=250; k<=500; k+=25) {

    text("-"+b, 230, k);
    text(""+b1, k+25, 240);

    b=b+1;
    b1=b1+1;
  }
  int b2=0;
  int b3=1;
  for (int l=250; l>=0; l-=25) {
    text(""+b2, 230, l);
    text("-"+b3, l-25, 240);
    b2=b2+1;
    b3=b3+1;
  }


  fill(255);
  rect(290, 70, 190, 80);
  fill(0);
  textSize(10);
  text("Here we have a 2-dimensional grid.\n The dimensions are labelled X and Y.\n This is caled Cartesian coordinates\n or orthonganol coordinates!",295,90);
  textSize(12);
  fill(1);
  text("Y", 260,10);



  arrow(290, 60, 260, 10);

  dottedline(250, 50,60,50,20);
  dottedline(50, 250,50,50,20);
}