Welcome to the g9py gallery! Drag all the graphics.

This is a shameless copy of g9.js, written in Python. This prototype shows off some of the cool things you can do with Pyodide for running Python demos in the browser with minitorch.

What is this?

You now can run Python in the browser pretty easily.
This lets us run MiniTorch (a pure Python torchlike).
Autodifferentiation is really fun to play with.

In g9.py you write a little renderer as a standard Torch NN. It then is optimized to match the movement of the users movment. In order to update the graphics we use backpropagation. In theory any parameterized NN function could be used this way.

The examples and text here is adapted directly from the g9.js examples page.

Basic

A minimal example with only two points. Our render function always draws one point at (x, y), and the other point at (y, x), so when you drag one of the points, the other kind of mirrors it. You do this by making a class where the parameters can change. The model returns of dictionary of svg objects to render. Dragging points only changes the parameters of the module.

Run

Rings

Lets add a few more points and use a bit or trigonometry to arrange them into two circles. Just for fun, we make the inner points red. The target argument tells us which of the points we need to calculate on the forward pass, which helps with efficiency. Try dragging the points!

Run

from_m = tensor([[1, 0, 0, 0], [0, 1, 0, 0]]).permute(1, 0)
to_m = tensor([[0, 0, 1, 0], [0, 0, 0, 1]]).permute(1, 0)
x = tensor([1, 0])
y = tensor([0, 1])

class RenderTongs(nn.Module):
    def __init__(self):
        super().__init__()
        self.a = tensor([2])
        self.b = nn.Parameter(tensor([1]))

def forward(self, target=None):
        c = self.a.cos()[0]
        s = self.a.sin()[0]
        rotate = tensor([[c, -s], [s, c]])

b_sin = 100 * self.b.sin()
        b_cos = 100 * self.b.cos() 
        curx = 0
        y1 = 0
        y2 = - b_sin
        p1 = x * curx + y * y1
        p2 = x * curx + y * y2
        
        points = {}
        if target is not None:
            t = int(target[-1])
        opt = {"stroke-width":10, "stroke-linecap":"round"}
        for i in range(4):
            dir = ((i % 2) * 2 -1)
            nextx = curx + b_cos
            nexty1 = y1 + dir * b_sin
            nexty2 = y2 - dir * b_sin
            next1 = x * nextx + y * nexty1
            next2 = x * nextx + y * nexty2

if target is None or t == i: 
                r1 = rotate @ p1
                r2 = rotate @ next1 
                r3 = rotate @ p2
                r4 = rotate @ next2

points[f"l1{i}"] = line(from_m @ r1 + to_m @ r2, **opt)
                points[f"l2{i}"] = line(from_m @ r3 + to_m @ r4, **opt)
            
            curx = nextx
            y1 = nexty1
            y2 = nexty2
            p1 = next1
            p2 = next2

return points
(G9(RenderTongs())
    .align('center', 'center') 
    .insertInto('#demo-tongs'))

Run

from_m = tensor([[1, 0, 0, 0], [0, 1, 0, 0]]).permute(1, 0)
to_m = tensor([[0, 0, 1, 0], [0, 0, 0, 1]]).permute(1, 0)
reverse_m = tensor([[0, 1], [-1, 0]])
    
class Render6(nn.Module):
    def __init__(self):
        super().__init__()
        self.from_point = nn.Parameter(tensor([175, 96]))
        self.to_point = nn.Parameter(tensor([-220, 39]))
        self.squareness = nn.Parameter(tensor([0.8]))
        
    def forward(self, target=None):
        lineoptions = {
            'stroke-width': 4,
            'stroke-linecap':'round',
            'affects': {"squareness": True}
        }

points = {}
        def dragon(from_pt, to_pt, dir, level, name=""):
            if target is not None and not target.startswith("ln" + name):
                return
            if level == 0:
                points["ln" + name] = line(from_m @ from_pt +  to_m @ to_pt, ** lineoptions)
            
                
            else:
                mid = (from_pt + to_pt + self.squareness * dir * (reverse_m @ (to_pt - from_pt))) / 2.0
                dragon(from_pt, mid, -1, level - 1, name=name + "l")
                dragon(mid, to_pt, 1, level - 1, name=name + "r")
 
        dragon(self.from_point, self.to_point, -1, 6, name="")
            
        points["from"] = point(self.from_point)
        points["to"] = point(self.to_point)
        return points

(G9(Render6())
    .align('center', 'center') 
    .insertInto('#demo-dragon'))

Run

from_m = tensor([[1, 0, 0, 0], [0, 1, 0, 0]]).permute(1, 0)
to_m = tensor([[0, 0, 1, 0], [0, 0, 0, 1]]).permute(1, 0)
x = tensor([1, 0])
y = tensor([0, 1])

class Render7(nn.Module):
    def __init__(self):
        super(Render7, self).__init__()
        self.deltaAngle = nn.Parameter(tensor([33]))
        self.startLength = nn.Parameter(tensor([75]))
        self.attenuation = nn.Parameter(tensor([0.7]))
        
    def forward(self, id=None):
        target = id
        points = {}
        def tree(pt, length, angle, n, name=""):
            if (target is not None 
                and not (target.startswith("pt"+ name)
                         or target.startswith("line"+ name))):
                return
            z = (angle * math.pi) / 180
            next = x * z.cos() + y * z.sin()
            new_pt = pt + length * next
            points["pt" + name] = point(new_pt, fill = "green")
            
            points["line" + name] = (
                line(from_m @ pt +  to_m @ new_pt,
                     stroke= 'brown' if n > 3 else 'green',
                     affects= {"deltaAngle" : True, "attenuation" : True},
                     **{'stroke-width': 5}) )

if n > 0:
                tree(new_pt, length * self.attenuation,
                     angle + self.deltaAngle, n-1, name+"l")
                tree(new_pt, length * self.attenuation,
                     angle - self.deltaAngle, n-1, name+"r")
            
        tree(y * 200, self.startLength, tensor([-90]), 5, "")
        points["root"] = point(y * 200, affects= {"startLength":True})
        return points

(G9(Render7())
    .align('center', 'center') 
    .insertInto('#demo-tree'))

What is this?

Basic

Rings

The affects option

tongs

Using Max and Min as limits

dragon

tree