let width = 494.117;

​

let team1X = [35, 150, 130, 145, width/2 - 40, width/2 - 20, width/2 + width/11, width/2 + 20, width/2 + width/4, width/2 + width/10, width/2 + width/6];

let team1Y = [height/2, 50, height/2, 270, height/2 -40, height/2 +30, 20, height-20, height/2, height/2 - 60, height/2 + 80];

​

let team2X = [width - 20, 346, 391, 393, 371, 314, 249, 265, 214, 163, 176];

let team2Y = [height/2, 57, 102, 191, 239, 113, 131, 174, 66, 132, 226];

​

function setup() {

  createCanvas(width, height);

}

​

function draw() {

  //background(150, 210, 150);

  drawGrassField();

  drawLines();

  players();

}

​

function drawGrassField() {

  fill(150, 210, 150);

  noStroke();

  rect(0, 0, width, height);

}

​

function drawLines() {

  stroke(255, 255, 255);  // white

  noFill();    // don't fill the shapes we are about to draw

  line(width/2, 0, width/2, height);

  circle(width/2, height/2, 100);

}

​

function players() {

  noStroke();

  //team1

  fill(65,105,225);

  for (let i = 0; i < 11; i++) {

    circle(team1X[i], team1Y[i], 20);

  }

  //team2

  fill(255,0,0)

  for (let i = 0; i < 11; i++) {

    circle(team2X[i], team2Y[i], 20);

  }

}