class Agent {

  // constructor to set initial agent values

  constructor() {

    this.x = random(17, width - 17);

    this.y = random(17, height - 17);

    this.vx = random([-2, -1, 1, 2]);

    this.vy = random([-2, -1, 1, 2]);

    this.radius = random(8, 16);

    this.diam = 2 * this.radius;

  }

​

  // update agent position

  update() {

    // update position

    // check boundary

  }

​

  // draw agent

  drawAgent() {

    ellipse(this.x, this.y, this.diam);

  }

​

  // create drawing

  draw() {}

}

​

// max number of agents

let maxAgents = 16;

​

// array for keeping track of agents

let agents = [];

​

// keep track of current mode

let AGENT_MODE = 0;

let DRAWING_MODE = 1;

​

let currentMode;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  // set initial state

  currentMode = AGENT_MODE;

​

  // create agents and store them in array

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

    agents.push(new Agent());

  }

​

  // set any other modes (rectMode, angleMode, etc)

  textAlign(CENTER, TOP);

  textSize(18);

}

​

function draw() {

  // update agents

  for (let i = 0; i < agents.length; i++) {

    agents[i].update();

  }

​

  // depending on the mode:

  if (currentMode == AGENT_MODE) {

    background(220, 20, 120);

    fill(0);

    text("AGENTS", width / 2, 0);

​

    // draw agents

    noStroke();

    fill(255);

    for (let i = 0; i < agents.length; i++) {

      agents[i].drawAgent();

    }

  } else if (currentMode == DRAWING_MODE) {

    background(255);

    fill(0);

    text("DRAWING", width / 2, 0);

​

    // create drawing

    for (let i = 0; i < agents.length; i++) {

      agents[i].draw();

    }

  }

}

​

function mouseClicked() {

  // cycle through modes

  if (currentMode == AGENT_MODE) {

    currentMode = DRAWING_MODE;

  } else if (currentMode == DRAWING_MODE) {

    currentMode = AGENT_MODE;

  }

}

​

function keyReleased() {

  // if drawing:

  if (currentMode == DRAWING_MODE) {

    // s: save drawing

    if (key == "s" || key == "S") {

      saveCanvas("my-drawing", "jpg");

    }

​

    // r: reset

    if (key == "r" || key == "R") {

      background(255);

    }

  }

}

​