Solara•13mo ago

what did you use for that

what did you use for that?

5 Replies

rht•13mo ago

HTML5 canvas from scratch. Sample input data: https://github.com/projectmesa/mesa/blob/65c5e6c28249c6e7e39595adce59761811dd81da/mesa/visualization/templates/js/GridDraw.js#L26-L37

GitHub

mesa/mesa/visualization/templates/js/GridDraw.js at 65c5e6c28249c6e...

Mesa is an open-source Python library for agent-based modeling, ideal for simulating complex systems and exploring emergent behaviors. - mesa/mesa/visualization/templates/js/GridDraw.js at 65c5e6c2...

MaartenBreddels•13mo ago

ah, should be possible to use ipycanvas for this but, it's not that simple to use from solara actually

import ipycanvas
import numpy as np
import solara
from reacton import ipycanvas as c
from reacton import ipywidgets as w


def polygon(canvas, x, y, radius1, radius2, n_points):
    index = np.arange(n_points)
    angles = (2 * np.pi / n_points) * index

    radius = np.where(index % 2, radius1, radius2)
    v_x = x + np.cos(angles) * radius
    v_y = y + np.sin(angles) * radius

    points = np.stack((v_x, v_y), axis=1)

    canvas.fill_polygon(points)
    canvas.stroke_polygon(points)


@solara.component
def Page():
    width, height = 800, 800
    view_count, set_view_count = solara.use_state(0)
    with w.ViewcountVBox(set_view_count) as main:
        fill = w.color("#63934e", "fill color")
        stroke = w.color("#4e6393", "stroke color")
        line_width = w.slider_int(4, description="line width", min=0, max=30)
        n_points = w.slider_int(5, "Points", min=1, max=8) * 2
        radius_inner = w.slider_float(30, "Inner radius", min=0, max=100)
        radius_outer = w.slider_float(80, "Outer radius", min=0, max=100)

        def real_drawing():
            canvas: ipycanvas.Canvas = solara.core.get_widget(canvas_element)

            with ipycanvas.hold_canvas(canvas):
                canvas.clear()
                canvas.fill_style = fill
                canvas.stroke_style = stroke
                canvas.line_width = line_width
                radius = width // 3
                polygon(canvas, width // 2, height // 2, radius * radius_inner / 100, radius * radius_outer / 100, n_points)

        solara.use_side_effect(real_drawing, [fill, stroke, line_width, n_points, view_count, radius_inner, radius_outer])
        canvas_element = c.Canvas(width=width, height=height)

    return main

import ipycanvas
import numpy as np
import solara
from reacton import ipycanvas as c
from reacton import ipywidgets as w


def polygon(canvas, x, y, radius1, radius2, n_points):
    index = np.arange(n_points)
    angles = (2 * np.pi / n_points) * index

    radius = np.where(index % 2, radius1, radius2)
    v_x = x + np.cos(angles) * radius
    v_y = y + np.sin(angles) * radius

    points = np.stack((v_x, v_y), axis=1)

    canvas.fill_polygon(points)
    canvas.stroke_polygon(points)


@solara.component
def Page():
    width, height = 800, 800
    view_count, set_view_count = solara.use_state(0)
    with w.ViewcountVBox(set_view_count) as main:
        fill = w.color("#63934e", "fill color")
        stroke = w.color("#4e6393", "stroke color")
        line_width = w.slider_int(4, description="line width", min=0, max=30)
        n_points = w.slider_int(5, "Points", min=1, max=8) * 2
        radius_inner = w.slider_float(30, "Inner radius", min=0, max=100)
        radius_outer = w.slider_float(80, "Outer radius", min=0, max=100)

        def real_drawing():
            canvas: ipycanvas.Canvas = solara.core.get_widget(canvas_element)

            with ipycanvas.hold_canvas(canvas):
                canvas.clear()
                canvas.fill_style = fill
                canvas.stroke_style = stroke
                canvas.line_width = line_width
                radius = width // 3
                polygon(canvas, width // 2, height // 2, radius * radius_inner / 100, radius * radius_outer / 100, n_points)

        solara.use_side_effect(real_drawing, [fill, stroke, line_width, n_points, view_count, radius_inner, radius_outer])
        canvas_element = c.Canvas(width=width, height=height)

    return main

some old code that might be useful (this is using a deprecated api btw) e.g. w.slider_float

rht•13mo ago

I'd prefer the Matplotlib version if possible. It is so much easier for Mesa users to write their own custom visualization from scratch. But I can see that it is nearly impossible to adapt Matplotlib's update API to be reactive?

MaartenBreddels•13mo ago

I think matplotlib needs to start from scratch always. So I guess the sub optimal performance is ok in your situation?

rht•13mo ago

The visualization is mainly for small scale exploration on a laptop. People who run on the cloud with high-spec machine wouldn't need to visualize. So it is a trade-off I'm willing to accept.

Gaming

Programming

what did you use for that