<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<script type="module">
const PI = 3.141592653589793238;
import init from './pkg/pi_orca.js';
import { RVOSimulator, Vector2, Vertices } from './pkg/pi_orca.js';
const temp = 200;
const num = 100;
const maxSpeed = 2.0;
const RAND_MAX = 0x7fff;
let lastpotion = [];
function setup_scenario(sim, goals, divs, obstacles_div, agents) {
sim.set_time_step(0.25);
sim.set_agent_defaults(5.0, 10, 5.0, 5.0, 2.5, 2.0, Vector2.default());
let row = 5;
let cout = 5;
let id = 0;
for (let i = 0; i < row; ++i) {
for (let j = 0; j < cout; ++j) {
let x = 55.0 + i * 10.0;
let y = 55.0 + j * 10.0;
agents.push(sim.add_agent(Vector2.new(x, y)));
goals.push(Vector2.new(-x, -y));
divs[id] = document.createElement("div");
divs[id].id = id;
divs[id].style.left = Math.floor(x * 2 + temp) + "px";
divs[id].style.top = Math.floor(y * 2 + temp) + "px";
divs[id].style.width = "4px";
divs[id].style.height = "4px";
divs[id].style.borderRadius = "50%";
divs[id].style.backgroundColor = "rgb(255, 0, 0)";
divs[id].style.position = "absolute";
document.body.appendChild(divs[id]);
id += 1;
x = -55.0 - i * 10.0;
y = 55.0 + j * 10.0;
agents.push(sim.add_agent(Vector2.new(x, y)));
goals.push(Vector2.new(-x, -y));
divs[id] = document.createElement("div");
divs[id].id = id;
divs[id].style.left = Math.floor(x + temp) + "px";
divs[id].style.top = Math.floor(y + temp) + "px";
divs[id].style.width = "4px";
divs[id].style.height = "4px";
divs[id].style.borderRadius = "50%";
divs[id].style.backgroundColor = "rgb(255, 0, 255)";
divs[id].style.position = "absolute";
document.body.appendChild(divs[id]);
id += 1;
x = 55.0 + i * 10.0;
y = -55.0 - j * 10.0;
agents.push(sim.add_agent(Vector2.new(x, y)));
goals.push(Vector2.new(-x, -y));
divs[id] = document.createElement("div");
divs[id].id = id;
divs[id].style.left = Math.floor(x + temp) + "px";
divs[id].style.top = Math.floor(y + temp) + "px";
divs[id].style.width = "4px";
divs[id].style.height = "4px";
divs[id].style.borderRadius = "50%";
divs[id].style.backgroundColor = "rgb(0, 255, 255)";
divs[id].style.position = "absolute";
document.body.appendChild(divs[id]);
id += 1;
x = -55.0 - i * 10.0;
y = -55.0 - j * 10.0;
agents.push(sim.add_agent(Vector2.new(x, y)));
goals.push(Vector2.new(-x, -y));
divs[id] = document.createElement("div");
divs[id].id = id;
divs[id].style.left = Math.floor(x + temp) + "px";
divs[id].style.top = Math.floor(y + temp) + "px";
divs[id].style.width = "4px";
divs[id].style.height = "4px";
divs[id].style.borderRadius = "50%";
divs[id].style.backgroundColor = "rgb(0, 255, 0)";
divs[id].style.position = "absolute";
document.body.appendChild(divs[id]);
id += 1;
}
}
let obstacle1 = Vertices.new();
let obstacle2 = Vertices.new();
let obstacle3 = Vertices.new();
let obstacle4 = Vertices.new();
obstacle1.add(Vector2.new(-10.0, 40.0));
obstacle1.add(Vector2.new(-40.0, 40.0));
obstacle1.add(Vector2.new(-40.0, 10.0));
obstacle1.add(Vector2.new(-10.0, 10.0));
obstacle2.add(Vector2.new(10.0, 40.0));
obstacle2.add(Vector2.new(10.0, 10.0));
obstacle2.add(Vector2.new(40.0, 10.0));
obstacle2.add(Vector2.new(40.0, 40.0));
obstacle3.add(Vector2.new(10.0, -40.0));
obstacle3.add(Vector2.new(40.0, -40.0));
obstacle3.add(Vector2.new(40.0, -10.0));
obstacle3.add(Vector2.new(10.0, -10.0));
obstacle4.add(Vector2.new(-10.0, -40.0));
obstacle4.add(Vector2.new(-10.0, -10.0));
obstacle4.add(Vector2.new(-40.0, -10.0));
obstacle4.add(Vector2.new(-40.0, -40.0));
sim.add_obstacle(obstacle1);
obstacles_div[0] = document.createElement("div");
obstacles_div[0].style.left = Math.floor(-40 + temp + 1) + "px";
obstacles_div[0].style.top = Math.floor(11 + temp) + "px";
obstacles_div[0].style.width = "30px";
obstacles_div[0].style.height = "30px";
obstacles_div[0].style.backgroundColor = "rgba(0, 0, 0, 0.5)";
obstacles_div[0].style.position = "absolute";
document.body.appendChild(obstacles_div[0]);
sim.add_obstacle(obstacle2);
obstacles_div[1] = document.createElement("div");
obstacles_div[1].style.left = Math.floor(10 + temp + 1) + "px";
obstacles_div[1].style.top = Math.floor(11 + temp) + "px";
obstacles_div[1].style.width = "30px";
obstacles_div[1].style.height = "30px";
obstacles_div[1].style.backgroundColor = "rgba(0, 0, 0, 0.5)";
obstacles_div[1].style.position = "absolute";
document.body.appendChild(obstacles_div[1]);
sim.add_obstacle(obstacle3);
obstacles_div[2] = document.createElement("div");
obstacles_div[2].style.left = Math.floor(11 + temp + 1) + "px";
obstacles_div[2].style.top = Math.floor(-41 + temp) + "px";
obstacles_div[2].style.width = "30px";
obstacles_div[2].style.height = "30px";
obstacles_div[2].style.backgroundColor = "rgba(0, 0, 0, 0.5)";
obstacles_div[2].style.position = "absolute";
document.body.appendChild(obstacles_div[2]);
sim.add_obstacle(obstacle4);
obstacles_div[3] = document.createElement("div");
obstacles_div[3].style.left = Math.floor(-40 + temp + 1) + "px";
obstacles_div[3].style.top = Math.floor(-41 + temp) + "px";
obstacles_div[3].style.width = "30px";
obstacles_div[3].style.height = "30px";
obstacles_div[3].style.backgroundColor = "rgba(0, 0, 0, 0.5)";
obstacles_div[3].style.position = "absolute";
document.body.appendChild(obstacles_div[3]);
}
function update_visualization(sim, divs, agents) {
for (let i = 0; i < agents.length; i++) {
let position = sim.get_agent_position(agents[i]);
let x = Math.round(position.x()) + temp;
let y = Math.round(position.y()) + temp;
divs[i].style.left = x + "px";
divs[i].style.top = y + "px";
}
}
function set_preferred_velocities(sim, goals, agents) {
for (let i = 0; i < agents.length; i++) {
let goal_vector = goals[i].sub(sim.get_agent_position(agents[i]));
if (Vector2.abs_sq(goal_vector) > 1) {
goal_vector = Vector2.normalize(goal_vector);
}
sim.set_agent_pref_velocity(agents[i], goal_vector);
}
}
function reached_goal(sim, goals, agents) {
for (let i = 0; i < agents.length; ++i) {
if (Vector2.abs_sq(sim.get_agent_position(agents[i]).sub(goals[i])) > 20.0 * 20.0) {
return false;
}
}
return true;
}
init().then(module => {
console.log(module)
let sim = RVOSimulator.default(2000); let goals = [];
let agents = [];
let divs = [];
let divs2 = [];
setup_scenario(sim, goals, divs, divs2, agents);
let r = 0;
let id = setInterval(() => {
update_visualization(sim, divs, agents);
set_preferred_velocities(sim, goals, agents);
sim.do_step();
if (reached_goal(sim, goals, agents)) {
clearInterval(id);
}
}, 16)
});
</script>
</body>
</html>