sketch.js

let maru = new Array();

function setup() {
  createCanvas(600, 600); //ウィンドウサイズの指定
  background(20, 50, 10); //背景色を指定して1回だけ塗る。
  for (let i = 0; i < 10; i = i + 1) {
    for (let j = 0; j < 10; j = j + 1) {
      let m = new Maru();

      m.x = 75 + i * 50;
      m.y = 75 + j * 50;
      maru.push(m);
    }
  }
}

function draw() {
  background(20, 50, 10); //背景色を指定して1回だけ塗る。
  stroke(0, 0, 0);
  noFill();
  rect(50, 50, 500);
  for (let i = 0; i < maru.length; i = i + 1) {
    if (maru[i].ikiteru == true) {
      stroke(0, 0, 0);
      fill(255, 255, 255);
      circle(maru[i].x, maru[i].y, 50);
    }
    if (maru[i].ikiteru == false) {
      noStroke();
      fill(0, 0, 0);
      circle(maru[i].x, maru[i].y, 50);
    }
  }
}

function mousePressed() {
  //マウスのボタンが押し下げられた時の処理
  for (let i = 0; i < maru.length; i = i + 1) {
    let kyori = dist(mouseX, mouseY, maru[i].x, maru[i].y);
    if (kyori < 25) {
      if (maru[i].ikiteru == false) {
        maru[i].ikiteru = true;
      } else {
        maru[i].ikiteru = false;
      }
    }
  }
}

function mouseReleased() {
  //マウスのボタンが離された時の処理
}

function keyPressed() {
  if (key == "s") {
    saveCanvas();
  }
}

class Maru {
  constructor() {
    this.x = 0; //クラスに変数を持たせる
    this.y = 0;
    this.ikiteru = true;
  }
}