p5.js Web Editor | LLM Agents 2

xxxxxxxxxx
// Machine Learning for Artists and Designers
// NYUSH F24 - gohai
​
// Note: this sketch consists of additional JavaScript
// files. Make sure to duplicate it, rather than copying
// and pasting code :)
​
let openai_api_proxy = "https://zest-quiet-phalange.glitch.me/";
​
let agents = [
  {
    x: 200,
    y: 400,
    messages: [], // every agent has their own messages array to send to the API
    col: "red",
  },
  {
    x: 400,
    y: 600,
    messages: [],
    col: "green",
  },
];
​
let curAgent = 0; // which agent gets simulated next
​
function setup() {
  createCanvas(800, 800);
​
  // prepare agents
  for (let i = 0; i < agents.length; i++) {
    let agent = agents[i];
    // add the initial prompt
    agent.messages.push({
      role: "system",
      content:
        "You are a virtual being in a simulated world. At every input, you can respond with one of the following replies: Rest / Go North / Go East / Go South / Go West. You can also reply with the word 'Say' when instructed to. Don't respond in any other way. The simulation begins. You wake up, it's bright outside.",
    });
    sendMessages(agent.messages);
  }
}
​
function draw() {
  background(255);
​
  // draw agents
  for (let i = 0; i < agents.length; i++) {
    let agent = agents[i];
    fill(color(agent.col));
    ellipse(agent.x, agent.y, 50, 50);
    textAlign(CENTER, CENTER);
    textSize(40);
    text("🧍‍♀️", agent.x, agent.y);
​
    // draw what they say also
    if (agent.messages.length > 0) {
      let lastMessage = agent.messages.slice(-1)[0];
      if (lastMessage.content.startsWith("Say")) {
        textSize(12);
        textAlign(LEFT, BOTTOM);
        text(
          lastMessage.content.substr(4),
          agent.x,
          agent.y - 50 - (i == curAgent ? 20 : 0)
        );
      }
    }
  }
}
​
function keyPressed() {
  if (key == "s") {
    doStep();
  }
}
​
function doStep() {
  // we always run one agent at a time
  let agent = agents[curAgent];
​
  // the goal of this function is to put together some new content
  // to add to the messages array of the current agent and to send
  // to the API
  let content = "";
​
  // find the closest agent that isn't us
  let closestIndex = -1;
  let closestDist = 999;
  for (let i = 0; i < agents.length; i++) {
    if (i != curAgent) {
      let d = dist(agent.x, agent.y, agents[i].x, agents[i].y);
      if (d < closestDist) {
        closestDist = d;
        closestIndex = i;
      }
    }
  }
​
  // did we find someone?
  if (closestIndex != -1) {
    let otherAgent = agents[closestIndex];
​
    // are they close?
    if (closestDist <= 50) {
      // did they say something to us previously?
      let otherAgentsLastMessage = otherAgent.messages.slice(-1)[0];
      if (otherAgentsLastMessage.content.startsWith("Say")) {
        content +=
          'The other virtual being is very close. You hear them say to you: "' +
          otherAgentsLastMessage.content.substr(4) +
          '". You can respond to the virtual being by prefixing your sentence with "Say".';
      } else {
        content +=
          ' The other virtual being is now very close. If you want, you can now also talk to the other virtual being. To talk, prefix your sentence with "Say". You can also continue walking in any cardinal direction.';
      }
    } else {
      content +=
        "You see another virtual being to the " +
        direction(agent.x, agent.y, otherAgent.x, otherAgent.y) +
        " of you.";
    }
  }
​
  // also include the mouse cursor
  /*
    content += ' You also see a giant floating triangle in the sky to the ' + direction(agent.x, agent.y, mouseX, mouseY) + ' of you.';
    if (dist(agent.x, agent.y, mouseX, mouseY) < 50) {
      content += 'You are now very close to the giant floating triangle.';
    }
    if (mouseIsPressed) {
      content += ' The giant floating triangle scares you and you want to run away.';
    }
    */
​
  agent.messages.push({
    content: content,
    role: "user",
  });
  sendMessages(agent.messages);
​
  // run the next agent next time
  curAgent++;
  if (curAgent == agents.length) {
    curAgent = 0;
  }
}
​
function direction(selfX, selfY, otherX, otherY) {
  if (abs(otherX - selfX) > abs(otherY - selfY)) {
    if (otherX > selfX) {
      return "East";
    } else {
      return "West";
    }
  } else {
    if (otherY > selfY) {
      return "South";
    } else if (otherY < selfY) {
      return "North";
    } else {
      return "";
    }
  }
}
​
function sendMessages(messages) {
  console.log("Sending: " + messages[messages.length - 1].content);
  let params = {
    model: "gpt-4o-mini",
    messages: messages,
  };
  requestOAI("POST", "/v1/chat/completions", params, gotResults);
}
​
// this callback function receives the parameter array
// passed to requestOAI() as its second parameter
// we use this to find out which agent this pertains to
// by checking if the messages arrays match
function gotResults(results, params) {
  let resultMessage = results.choices[0].message;
  console.log("Received: " + resultMessage.content);
​
  // find which agent this message belonged to
  for (let i = 0; i < agents.length; i++) {
    let agent = agents[i];
    if (agent.messages === params.messages) {
      agent.messages.push(resultMessage);
      if (resultMessage.content == "Go North") {
        agent.y -= 50;
      } else if (resultMessage.content == "Go South") {
        agent.y += 50;
      } else if (resultMessage.content == "Go East") {
        agent.x += 50;
      } else if (resultMessage.content == "Go West") {
        agent.x -= 50;
      } else if (resultMessage.content == "Rest") {
        // nothing to do
      } else if (resultMessage.content.startsWith("Say")) {
        // handled at the next step
      } else {
        console.warn("Unrecognized action: " + resultMessage.content);
      }
      return;
    }
  }
​
  console.warn("Did not find agent for message");
}
​
Cookies

Sketch Files

Console

Preview
