Agents in space but not time

[JeffLEDGE]

Hi,
I'm trying to build a crowd simulation model with Mesa that works in continuous space, not grid space. For reasons I can get into if needed, I want to use a very fine grid to represent spatial information (floors, walls, costs, etc..) This grid won't change over time, and the pedestrian agents will need to query it. So I want to add the grid to the model's space, but not to the time, as it would unnecessarily slow things down. However, it seems I can't visualize it in the browser.

So yeah, does anyone have ideas or suggestions on the subject?

[tpike3]

@JeffLEDGE Sorry for the delay I was not getting alerts for the discussion.

That is a very interesting question. Is the real challenge ensuring the visualization appears? My assumption is you have already replaced Mesa.space with your own custom version for continuous space, correct?

[JeffLEDGE]

Hi @tpike3, thanks for getting back to me.

The challenge is I'm only a little familiar with Python, and less so with web stuff... I've been using the base ContinuousSpace in conjunction with SimpleContinuousModule from the boid flockers example, plus a modified version of the geospace module from the mesa_geo example for faster spatial querying.

I've solved some of the issues so far: I use Shapely polygons to define the environment, then rasterize it and generate a flow field grid for pathfinding. This 2D array exists as a model object but isn't part of model.space or model.schedule, and the agents have a method to query it (though that part needs work). However, without visualization, to see what and how things aren't working right, it's been hard to progress much further.

I think I'm close to a solution now, though: since the render method of the model visualization element loops through objects in the schedule, I will add to the render method a way to render things that aren't in the schedule. Perhaps a sort of a static schedule? Then I'll add a corresponding portrayal function to the corresponding .js code.

Do you think that'll work? Are there any potential hiccups I should look out for?

[tpike3]

@JeffLEDGE That is impressive! From your description it makes sense. But, you have a full and detailed model and each one has its own challenges.

Bluntly, I am developing my proficiency at javascript as I focused mostly on the backend but want to get to the full stack. So I would be happy to be another set of eyes as you work through this.

[JeffLEDGE]

Your eyes are welcome!

I've given the model a list of just the polygons that represent the world space. They are randomly generated Shapely polygons.
I've added a portrayal method, and I think that's where my problem currently is. My idea is to pass the vertices of the polygons to the .js file to draw on the canvas.

I take it you can't pass a python list through a dictionary to a javascript file? (I think this is my error) Do I have to resort to somehow making a dictionary of every x and y for every vertex of the polygons for each portrayal?

One hard limit, though, is that the visualization has to loop through every element you want to portray at each step, because of the way the server-based visualization works. Is that correct?

[tpike3]

@JeffLEDGE This may just spin on what you have already looked at, but if I am understanding correctly..... you can pass a python list to javscript as an array without converting to a dictionary. See the python module: https://docs.python.org/3/library/json.html

Regarding the the loop, that is my understanding as well based on

mesa/mesa/visualization/ModularVisualization.py

Line 269 in 72efeca

for element in self.visualization_elements:

[JeffLEDGE]

@tpike3 Yes, that's where I was looking, more or less. I was talking about dictionaries because that's how Mesa's portrayal methods work, or talk about it. After that my problems were with how to put the geometry data into that portrayal, and ultimately with how to read it in the .js script. Plus sniffing out errors was much harder because I didn't know I had to inspect the element on the webpage and then go to the debugger. But, I finally did it!

The relevant code is:

from shapely.geometry import mapping

for obj in model.polygons: # polygons is a list of obstacle class objects
            shape = obj.shape # shape is the obstacle class attr that stores a shapely geometry
            portrayal = self.portrayal_method(obj)
            portrayal["mx"] = model.space.x_max
            portrayal["my"] = model.space.y_max
            portrayal["geometry"] = mapping(shape)
            space_state.append(portrayal)

for the python part, and the js part:

this.drawPolygon = function(geom, mx, my, color, fill) {
		var cfx = width / mx // Conversion factor from model coords to canvas coords
		var cfy = height / my
		coords = geom["coordinates"][0]
		context.beginPath();
		for (var i in coords) {
			var px = coords[i][0] * cfx;
			var py = coords[i][1] * cfy;
			context.lineTo(px,py);
		}
		context.closePath();
    context.strokeStyle = color;
    context.stroke();
		if (fill) {
			context.fillStyle = color;
			context.fill();
		}

with other pieces here and there, but I think it shows the necessary stuff. It took me way longer than I'd like to admit to figure out the proper indexing. For posterity I'll also note that before I used shapely's mapping function, I tried getting to the vertices this way: vertexDict = [{"x":x, "y":y} for x, y in coordlist]

[JeffLEDGE]

#1050 (reply in thread)