Playing with networkx graphs

[villares]

"""
Sketch adapting code from https://networkx.org/documentation/stable/auto_examples/graphviz_layout/plot_circular_tree.html
Note: "This example needs Graphviz and PyGraphviz"

I had trouble at first pip installing graphviz and pygraphviz but managed
to install, via pacman, on Manjaro, python-graphviz and python-pygraphviz
and then installed in my local env with pip
"""
from functools import cache

import py5

import networkx as nx

# tred acyclic osage ccomps gvcolor gc nop
# gvpr unflatten sccmap - probably need arguments I don't understand
MODES = ('patchwork neato circo dot twopi sfdp fdp').split()
a_mode = 0
margin = 50
G = nx.balanced_tree(3, 5)

def setup():
    global pos
    py5.size(800, 800)
    pos = calc_layout(MODES[a_mode])

def draw():
    py5.background(200, 200, 150)
    py5.fill(255)
    py5.text_size(margin / 3)
    py5.text(MODES[a_mode], margin, margin / 2)
    py5.stroke(0)
    py5.stroke_weight(1)
    py5.lines(pos[a] + pos[b] for a, b in G.edges)  # draw edges
    py5.stroke(0, 0, 200)
    py5.stroke_weight(5)
    py5.points(pos[n] for n in G.nodes) # draw nodes
        
@cache
def calc_layout(mode):
    import networkx as nx
    layout = nx.nx_agraph.graphviz_layout(G, prog=mode, args="")
    xs, ys = [], []
    for x, y in layout.values():
        xs.append(x)
        ys.append(y)
    for n, (x, y) in layout.items():
        nx = py5.remap(x, min(xs), max(xs), margin, py5.width - margin)
        ny = py5.remap(y, min(ys), max(ys), margin, py5.height - margin)
        layout[n] = nx, ny
    return layout

def key_pressed():
    global pos, a_mode
    if py5.key == ' ':
        a_mode = (a_mode + 1) % len(MODES)
        print(MODES[a_mode])
        pos = calc_layout(MODES[a_mode])
    elif py5.key == 'p':
        py5.save_frame(MODES[a_mode] + '.png')

py5.run_sketch(block=False)

And also in 3D

"""
Sketch inspired by code from https://networkx.org/documentation/stable/auto_examples/
"""
import py5
from py5_tools import animated_gif

import networkx as nx

margin = 50
s = 100 # seed
G = nx.balanced_tree(4, 5)

def setup():
    global pos
    py5.size(800, 800, py5.P3D)
    pos = nx.spring_layout(G, dim=3, seed=s)
    #pos = nx.spiral_layout(G, dim=2)
    pos = resize_layout(pos)
    animated_gif('out.gif', frame_numbers=range(1, 361, 10), duration=0.2, optimize=False)
    
def draw():
    py5.push_matrix()
    py5.translate(py5.width / 2, py5.height / 2, -py5.height / 2)
    py5.rotate_y(py5.radians(py5.frame_count))
    py5.background(200, 200, 150)
    py5.stroke(0)
    py5.stroke_weight(1)
    py5.lines(pos[a] + pos[b] for a, b in G.edges)  # draw edges
    py5.stroke(0, 0, 200)
    py5.stroke_weight(5)
    py5.points(pos[n] for n in G.nodes)  # draw nodes
    py5.pop_matrix()
    py5.fill(255)
    py5.text_size(margin / 2)
    py5.text(f'G = nx.balanced_tree(4, 5)\npos = nx.spring_layout(G, dim=3, seed={s})', margin, margin)

def resize_layout(pos):
    """ Resize the positions dict layout to screen a and center on origin. """
    # I should do this with numpy...
    layout = pos.copy()
    xs, ys, zs = [], [], []
    for x, y, z in layout.values():
        xs.append(x)
        ys.append(y)
        zs.append(z)
    min_x = min(xs)
    min_y = min(ys)
    min_z = min(zs)
    max_x = max(xs) 
    max_y = max(ys)
    max_z = max(zs)
    w, h = py5.width, py5.height
    for n, (x, y, z) in layout.items():
        nx = py5.remap(x, min_x, max_x, margin, w - margin)
        ny = py5.remap(y, min_y, max_y, margin, h - margin)
        nz = py5.remap(z, min_z, max_z, margin, h - margin)
        layout[n] = nx - w / 2, ny - h / 2 , nz - h / 2  
    return layout

py5.run_sketch(block=False)

[hx2A]

These are great! Thanks for sharing this. The networkx library is fun to use with py5, when paired with the graph visualization tools.

I need to remember to use the @cache decorator more often...it simplifies code.

[villares]

Not super elegant, but an attempt to do more with numpy :)

"""
Sketch inspired by code from https://networkx.org/documentation/stable/auto_examples/
"""
from functools import cache

import py5
from py5_tools import animated_gif
import numpy as np
import networkx as nx

G = nx.balanced_tree(3, 5)

def setup():
    global pos0, pos1
    py5.size(800, 800)
    # patchwork neato circo dot twopi sfdp fdp
    pos0 = nx.nx_agraph.graphviz_layout(G, prog='twopi', args="")
    pos1 = nx.nx_agraph.graphviz_layout(G, prog='fdp', args="")
    pos0 = resize_layout(pos0, py5.height)
    pos1 = resize_layout(pos1, py5.height) * np.array([-1, 1])
    animated_gif('out.gif', frame_numbers=range(1, 361, 18), duration=0.2, optimize=False)
    
def draw():
    py5.translate(py5.width / 2, py5.height / 2)
    t = 0.5 + 0.5 * np.sin(py5.radians(py5.frame_count))
    #pos = pos0 + (pos1 - pos0) * t  # lerp
    pos = py5.lerp(pos0, pos1, t)      # updated from discussion thread replies
    py5.background(200, 200, 150)
    py5.stroke(0)
    py5.stroke_weight(1)
    py5.lines(np.concatenate((pos[a], pos[b])) for a, b in G.edges)  # draw edges
    py5.stroke(0, 0, 200)
    py5.stroke_weight(5)
    py5.points(pos[n] for n in G.nodes)  # draw nodes

def resize_layout(pos, ext, margin=50):
    """ Resize the layout positions dict to screen, and center it on origin, using numpy"""
    coords = np.array(list(pos.values()))
    #coords_normalized = (coords - np.min(coords)) / (np.max(coords) - np.min(coords))
    coords_normalized = py5.remap(coords, np.min(coords), np.max(coords), 0, 1)  # updated from discussion thread replies
    return coords_normalized * (ext - margin * 2) + np.array([margin - ext / 2 , margin - ext / 2])
        
py5.run_sketch(block=False)

[hx2A]

Nice! Thanks for sharing this.

This might not be an improvement, but if you wanted, this line of code:

coords_normalized = (coords - np.min(coords)) / (np.max(coords) - np.min(coords))

could use py5's remap method instead:

coords_normalized = py5.remap(coords, np.min(coords), np.max(coords), 0, 1)

Also, I've noticed you use py5.run_sketch(block=False) in your code a lot. Why? How are you running these?

[villares]

Cheers @hx2A!

Cool, today it also dawned on me I could use py5's lerp with NumPy arrays! Yay!

I'm mostly running stuff on Thonny IDE, and with block=False I get to play with the globals on the console, for debugging and exploring.

[hx2A]

Cool, today it also dawned on me I could use py5's lerp with NumPy arrays! Yay!

Yes, indeed! Just about all of py5's math methods will work with numpy arrays.

I'm mostly running stuff on Thonny IDE, and with block=False I get to play with the globals on the console, for debugging and exploring.

Oh, that makes sense. That's a great way of developing code.