init

LInK/CAD.py

@@ -0,0 +1,92 @@
+import numpy as np
+
+def get_3d_config(A,x0,nt,z_index):
+    
+    A, x0, nt, z_index = np.array(A), np.array(x0), np.array(nt), np.array(z_index)
+    
+    n_joints = (A.sum(-1)>0).sum()
+    A = A[:n_joints,:][:,:n_joints]
+    x0 = x0[:n_joints]
+    nt = nt[:n_joints]
+    n_links = int(A.sum()/2)
+
+    l1,l2 = np.where(np.triu(A))
+    
+    linkages = []
+    
+    max_len = 0
+    min_len = float(np.inf)
+
+    for j in range(n_links):
+        length= np.linalg.norm(x0[l1[j]]-x0[l2[j]])
+        if length>max_len:
+            max_len = float(length)
+        if length<min_len:
+            min_len = float(length)
+    
+    scale_min = 0.25/min_len
+    scale_target = 1.0/max_len
+    scale = max(scale_min,scale_target)
+    
+    x0 = x0*scale
+
+    for j in range(n_links):
+        length= np.linalg.norm(x0[l1[j]]-x0[l2[j]])
+        angle = np.arctan2(x0[l2[j]][1]-x0[l1[j]][1],x0[l2[j]][0]-x0[l1[j]][0])
+        linkages.append([length,0.1,0.05,0.03, angle, x0[l1[j]].tolist()+[float(z_index[j])*0.05]])
+    
+    joints_max_z = np.zeros(x0.shape[0])
+    joints_min_z = np.zeros(x0.shape[0]) + np.inf
+    
+    for i in range(n_links):
+        joints_max_z[l1[i]] = max(joints_max_z[l1[i]],z_index[i])
+        joints_max_z[l2[i]] = max(joints_max_z[l2[i]],z_index[i])
+        joints_min_z[l1[i]] = min(joints_min_z[l1[i]],z_index[i])
+        joints_min_z[l2[i]] = min(joints_min_z[l2[i]],z_index[i])
+
+    joints_max_z = joints_max_z*0.05
+    joints_min_z = joints_min_z*0.05
+
+    joints = []
+    for i in range(x0.shape[0]):
+        if nt[i] == 1:
+            for j in np.where(l1==i)[0]:
+                joints.append(x0[i].tolist()+[0.05,z_index[j]*0.05,1])
+            for j in np.where(l2==i)[0]:
+                joints.append(x0[i].tolist()+[0.05,z_index[j]*0.05,1])
+        else:
+            joints.append(x0[i].tolist()+[float(joints_max_z[i]-joints_min_z[i])+0.05,float(joints_min_z[i]+joints_max_z[i])/2,0])
+
+    return [linkages, joints], joints_max_z, scale
+
+def get_animated_3d_config(A,x0,nt,z_index,sol, highlights = [-1]):
+    A, x0, nt, z_index, sol = np.array(A), np.array(x0), np.array(nt), np.array(z_index), np.array(sol)
+    configs = []
+    for i in range(sol.shape[1]):
+        c,z,s = get_3d_config(A,sol[:,i,:],nt,z_index)
+        configs.append(c)
+    
+    if len(highlights) > 1:
+        highligh_curve = []
+        for i in highlights:
+            highligh_curve.append(np.pad(sol[i,:,:]*s,[[0,0],[0,1]],constant_values=z[i]+0.025))
+        highligh_curve = np.array(highligh_curve)
+    else:
+        highligh_curve = np.pad(sol[highlights[0],:,:]*s,[[0,0],[0,1]],constant_values=z[-1]+0.025)
+
+    return configs, highligh_curve.tolist()
+
+def create_3d_html(A,x0,nt,z_index,sol, template_path='./static/animation.htm', save_path='./static/animated.html', highlights = [-1]):
+    
+    res,hc = get_animated_3d_config(A,x0,nt,z_index,sol,highlights=highlights)
+    js_var = 'window.res = ' + str(res) + ';\n'
+    js_var += 'window.hc = ' + str(hc) + ';'
+    js_var += 'window.multi_high = ' + str(int(len(highlights)>1)) + ';'
+    
+    with open(template_path, 'r') as file:
+        filedata = file.read()
+        
+    filedata = filedata.replace('{res}',js_var)
+    
+    with open(save_path, 'w') as file:
+        file.write(filedata)

LInK/CurveUtils.py

@@ -0,0 +1,21 @@
+import torch
+
+def uniformize(curves: torch.tensor, n: int = 200) -> torch.tensor:
+    with torch.no_grad():
+        l = torch.cumsum(torch.nn.functional.pad(torch.norm(curves[:,1:,:] - curves[:,:-1,:],dim=-1),[1,0,0,0]),-1)
+        l = l/l[:,-1].unsqueeze(-1)
+        
+        sampling = torch.linspace(0,1,n).to(l.device).unsqueeze(0).tile([l.shape[0],1])
+        end_is = torch.searchsorted(l,sampling)[:,1:]
+        end_ids = end_is.unsqueeze(-1).tile([1,1,2])
+        
+        l_end = torch.gather(l,1,end_is)
+        l_start = torch.gather(l,1,end_is-1)
+        ws = (l_end - sampling[:,1:])/(l_end-l_start)
+    
+    end_gather = torch.gather(curves,1,end_ids)
+    start_gather = torch.gather(curves,1,end_ids-1)
+    
+    uniform_curves = torch.cat([curves[:,0:1,:],(end_gather - (end_gather-start_gather)*ws.unsqueeze(-1))],1)
+
+    return uniform_curves

LInK/Solver.py

@@ -0,0 +1,174 @@
+import numpy as np
+
+# Dyadic Solution Path Finder
+def find_path(A, motor = [0,1], fixed_nodes=[0, 1]):
+    '''
+    This function finds the solution path of a dyadic mechanism.
+
+    Parameters:
+        A (np.array): Adjacency matrix of the mechanism.
+        motor (list): motor nodes.
+        fixed_nodes (list): List of fixed nodes.
+
+    Returns:
+        path (np.array): Solution path of the mechanism.
+        status (bool): True if the mechanism is dyadic and has a solution path, False otherwise.
+    '''
+    
+    path = []
+    
+    A,fixed_nodes,motor = np.array(A),np.array(fixed_nodes),np.array(motor)
+    
+    unkowns = np.array(list(range(A.shape[0])))
+    knowns = np.concatenate([fixed_nodes,[motor[-1]]])
+    
+    unkowns = unkowns[np.logical_not(np.isin(unkowns,knowns))]
+    
+    counter = 0
+    while unkowns.shape[0] != 0:
+
+        if counter == unkowns.shape[0]:
+            # Non dyadic or DOF larger than 1
+            return [], False
+        n = unkowns[counter]
+        ne = np.where(A[n])[0]
+        
+        kne = knowns[np.isin(knowns,ne)]
+#         print(kne.shape[0])
+        
+        if kne.shape[0] == 2:
+            
+            path.append([n,kne[0],kne[1]])
+            counter = 0
+            knowns = np.concatenate([knowns,[n]])
+            unkowns = unkowns[unkowns!=n]
+        elif kne.shape[0] > 2:
+            #redundant or overconstraint
+            return [], False
+        else:
+            counter += 1
+    
+    return np.array(path), True
+
+# Dyadic Mechanism Sorting
+def get_order(A, motor = [0,1], fixed_nodes=[0, 1]):
+    '''
+    This function sorts the mechanism based on the solution path.
+
+    Parameters:
+        A (np.array): Adjacency matrix of the mechanism.
+        motor (list): motor nodes.
+        fixed_nodes (list): List of fixed nodes.
+    
+    Returns:
+        joint order (np.array): Sorted order of the joints in a mechanism.
+    '''
+    path, status = find_path(A, motor, fixed_nodes)
+    fixed_nodes = np.array(fixed_nodes)
+    if status:
+        return np.concatenate([motor,fixed_nodes[fixed_nodes!=motor[0]],path[:,0]])
+    else:
+        raise Exception("Non Dyadic or Dof larger than 1")
+
+def sort_mechanism(A, x0, motor = [0,1], fixed_nodes=[0, 1]):
+    '''
+    This function sorts the mechanism based on the solution path.
+
+    Parameters:
+        A (np.array): Adjacency matrix of the mechanism.
+        x0 (np.array): Initial positions of the joints.
+        motor (list): motor nodes.
+        fixed_nodes (list): List of fixed nodes.
+    
+    Returns:
+        A_s (np.array): Sorted adjacency matrix of the mechanism.
+        x0 (np.array): Sorted initial positions of the joints.
+        motor (np.array): Motor nodes.
+        fixed_nodes (np.array): Fixed nodes.
+        ord (np.array): Sorted order of the joints in a mechanism.
+    '''
+    ord = get_order(A, motor, fixed_nodes)
+
+    n_t = np.zeros(A.shape[0])
+    n_t[fixed_nodes] = 1
+
+    A_s = A[ord,:][:,ord]
+    n_t_s = n_t[ord]
+
+    return A_s, x0[ord], np.array([0,1]), np.where(n_t_s)[0], ord
+
+# Vectorized Dyadic Solver
+def solve_rev_vectorized_batch_CPU(As,x0s,node_types,thetas):
+    
+    Gs = np.square((np.expand_dims(x0s,1) - np.expand_dims(x0s,2))).sum(-1)
+    
+    x = np.zeros([x0s.shape[0],x0s.shape[1],thetas.shape[0],2])
+    
+    x = x + np.expand_dims(node_types * x0s,2)
+    
+    m = x[:,0] + np.tile(np.expand_dims(np.swapaxes(np.concatenate([np.expand_dims(np.cos(thetas),0),np.expand_dims(np.sin(thetas),0)],0),0,1),0),[x0s.shape[0],1,1]) * np.expand_dims(np.expand_dims(np.sqrt(Gs[:,0,1]),-1),-1)
+
+    m = np.expand_dims(m,1)
+    m = np.pad(m,[[0,0],[1,x0s.shape[1]-2],[0,0],[0,0]],mode='constant')
+    x += m
+    
+    for k in range(3,x0s.shape[1]):
+        
+        inds = np.argsort(As[:,k,0:k])[:,-2:]
+        
+        l_ijs = np.linalg.norm(x[np.arange(x0s.shape[0]),inds[:,0]] - x[np.arange(x0s.shape[0]),inds[:,1]], axis=-1)
+        
+        gik = np.sqrt(np.expand_dims(Gs[np.arange(x0s.shape[0]),inds[:,0],np.ones(shape=[x0s.shape[0]],dtype=int)*k],-1))
+        gjk = np.sqrt(np.expand_dims(Gs[np.arange(x0s.shape[0]),inds[:,1],np.ones(shape=[x0s.shape[0]],dtype=int)*k],-1))
+        
+        cosphis = (np.square(l_ijs) + np.square(gik) - np.square(gjk))/(2 * l_ijs * gik)
+        
+        cosphis = np.where(np.tile(node_types[:,k],[1,thetas.shape[0]])==0.0,cosphis,np.zeros_like(cosphis))
+                             
+        x0i1 = x0s[np.arange(x0s.shape[0]),inds[:,0],np.ones(shape=[x0s.shape[0]]).astype(np.int32)]
+        x0i0 = x0s[np.arange(x0s.shape[0]),inds[:,0],np.zeros(shape=[x0s.shape[0]]).astype(np.int32)]
+        
+        x0j1 = x0s[np.arange(x0s.shape[0]),inds[:,1],np.ones(shape=[x0s.shape[0]]).astype(np.int32)]
+        x0j0 = x0s[np.arange(x0s.shape[0]),inds[:,1],np.zeros(shape=[x0s.shape[0]]).astype(np.int32)]
+        
+        x0k1 = x0s[:,k,1]
+        x0k0 = x0s[:,k,0]
+        
+        s = np.expand_dims(np.sign((x0i1-x0k1)*(x0i0-x0j0) - (x0i1-x0j1)*(x0i0-x0k0)),-1)
+        
+
+        phi = s * np.arccos(cosphis)
+        
+        a = np.transpose(np.concatenate([np.expand_dims(np.cos(phi),0),np.expand_dims(-np.sin(phi),0)],0),axes=[1,2,0])
+        b = np.transpose(np.concatenate([np.expand_dims(np.sin(phi),0),np.expand_dims(np.cos(phi),0)],0),axes=[1,2,0])
+
+        R = np.einsum("ijk...->jki...", np.concatenate([np.expand_dims(a,0),np.expand_dims(b,0)],0))
+        
+        xi = x[np.arange(x0s.shape[0]),inds[:,0]]
+        xj = x[np.arange(x0s.shape[0]),inds[:,1]]
+        
+        scaled_ij = (xj-xi)/np.expand_dims(l_ijs,-1) * np.expand_dims(gik,-1)
+        
+        x_k = np.squeeze(np.matmul(R, np.expand_dims(scaled_ij,-1))) + xi
+        x_k = np.where(np.tile(np.expand_dims(node_types[:,k],-1),[1,thetas.shape[0],2])==0.0,x_k,np.zeros_like(x_k))
+
+        x_k = np.expand_dims(x_k,1)
+        x_k = np.pad(x_k,[[0,0],[k,x0s.shape[1]-k-1],[0,0],[0,0]],mode='constant')
+        
+        x += x_k
+    return x
+
+# Solve a single mechanism
+def solve_mechanism(A, x0 , motor = [0,1], fixed_nodes=[0, 1], thetas = np.linspace(0,2*np.pi,200)):
+
+    A,x0,motor,fixed_nodes,ord = sort_mechanism(A, x0, motor, fixed_nodes)
+    n_t = np.zeros([A.shape[0],1])
+    n_t[fixed_nodes] = 1
+
+    A = np.expand_dims(A,0)
+    x0 = np.expand_dims(x0,0)
+    n_t = np.expand_dims(n_t,0)
+
+    sol = solve_rev_vectorized_batch_CPU(A,x0,n_t,thetas)
+
+    return sol[0], ord

LInK/Visulization.py

@@ -0,0 +1,73 @@
+from .Solver import solve_mechanism
+import numpy as np
+import matplotlib.pyplot as plt
+from io import StringIO
+import xml.etree.ElementTree as etree
+from svgpath2mpl import parse_path
+
+def draw_mechanism(A,x0,fixed_nodes=None,motor=[0,1],node_types=None, ax=None, highlight=None, solve=True, thetas = np.linspace(0,np.pi*2,200), def_alpha = 1.0, h_alfa =1.0, h_c = "#f15a24"):
+    
+    if fixed_nodes is None and node_types is None:
+        raise ValueError("Either fixed_nodes or node_types should be provided")
+
+    if fixed_nodes is None:
+        fixed_nodes = np.where(node_types)[0]
+    
+    def fetch_path():
+    #     r = requests.get(svg_url)
+        root = etree.parse(StringIO('<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 620 338"><defs><style>.cls-1{fill:#1a1a1a;stroke:#1a1a1a;stroke-linecap:round;stroke-miterlimit:10;stroke-width:20px;}</style></defs><path class="cls-1" d="M45.5,358.5l70.71-70.71M46,287.5H644m-507.61,71,70.72-70.71M223,358.5l70.71-70.71m20.18,70.72,70.71-70.71m13.67,70.7,70.71-70.71m20.19,70.72,70.71-70.71m15.84,70.71,70.71-70.71M345,39.62A121.38,121.38,0,1,1,223.62,161,121.38,121.38,0,0,1,345,39.62Z" transform="translate(-35.5 -29.62)"/></svg>')).getroot()
+        view_box = root.attrib.get('viewBox')
+        if view_box is not None:
+            view_box = [int(x) for x in view_box.split()]
+            xlim = (view_box[0], view_box[0] + view_box[2])
+            ylim = (view_box[1] + view_box[3], view_box[1])
+        else:
+            xlim = (0, 500)
+            ylim = (500, 0)
+        path_elem = root.findall('.//{http://www.w3.org/2000/svg}path')[0]
+        return xlim, ylim, parse_path(path_elem.attrib['d'])
+    _,_,p = fetch_path()
+    p.vertices -= p.vertices.mean(axis=0)
+    p.vertices = (np.array([[np.cos(np.pi), -np.sin(np.pi)],[np.sin(np.pi), np.cos(np.pi)]])@p.vertices.T).T
+    
+    if ax is None:
+        fig, ax = plt.subplots(figsize=(10,10))
+    
+    A,x0,fixed_nodes,motor = np.array(A),np.array(x0),np.array(fixed_nodes),np.array(motor)
+    
+    x = x0
+    
+    N = A.shape[0]
+    for i in range(N):
+        if i in fixed_nodes:
+            if i == highlight:
+                ax.scatter(x[i,0],x[i,1],color=h_c,s=700,zorder=10,marker=p)
+            else:
+                ax.scatter(x[i,0],x[i,1],color="#1a1a1a",s=700,zorder=10,marker=p)
+        else:
+            if i == highlight:
+                ax.scatter(x[i,0],x[i,1],color=h_c,s=100,zorder=10,facecolors=h_c,alpha=0.7)
+            else:
+                ax.scatter(x[i,0],x[i,1],color="#1a1a1a",s=100,zorder=10,facecolors='#ffffff',alpha=0.7)
+        
+        for j in range(i+1,N):
+            if A[i,j]:
+                if (motor[0] == i and motor[1] == j) or(motor[0] == j and motor[1] == i):
+                    ax.plot([x[i,0],x[j,0]],[x[i,1],x[j,1]],color="#ffc800",linewidth=4.5)
+                else:
+                    ax.plot([x[i,0],x[j,0]],[x[i,1],x[j,1]],color="#1a1a1a",linewidth=4.5,alpha=0.6)
+                
+    if solve:
+        sol,ord = solve_mechanism(A,x0,motor,fixed_nodes,thetas)
+        x = sol
+        
+        for i in range(A.shape[0]):
+            if not ord[i] in fixed_nodes:
+                if ord[i] == highlight:
+                    ax.plot(x[i,:,0],x[i,:,1],'-',color=h_c,linewidth=4.5,alpha=h_alfa)
+                else:
+                    ax.plot(x[i,:,0],x[i,:,1],'--',color="#0078a7",linewidth=1.5, alpha=def_alpha)
+    ax.axis('equal')
+    ax.axis('off')
+    
+    return ax

LInK/__init__.py

@@ -0,0 +1 @@
+'''Code Base For LInK Project'''

app.py

@@ -0,0 +1,172 @@
+import os
+import uuid
+import argparse
+
+argparser = argparse.ArgumentParser()
+argparser.add_argument("--port", type=int, default=1239, help="Port number for the local server")
+argparser.add_argument("--cuda_device", type=str, default='0', help="Cuda devices to use. Default is 0")
+argparser.add_argument("--static_folder", type=str, default='static', help="Folder to store static files")
+args = argparser.parse_args()
+
+os.environ["CUDA_VISIBLE_DEVICES"] = ''
+
+import gradio as gr
+from pathlib import Path
+
+import numpy as np
+import torch
+
+from LInK.CAD import create_3d_html
+import numpy as np
+from LInK.CurveUtils import uniformize
+import torch
+import matplotlib.pyplot as plt
+
+from LInK.Solver import solve_rev_vectorized_batch_CPU
+
+# turn off gradient computation
+torch.set_grad_enabled(False)
+
+results = np.load('alpha_res.npy',allow_pickle=True)
+alphabet_test = np.load('alphabet.npy')
+zs_ = np.load('alpha_z.npy',allow_pickle=True)
+
+for i in range(zs_.shape[0]):
+  zs_[i] = zs_[i] - zs_[i].min()
+
+curves__ = torch.tensor(alphabet_test).float()
+curves__ = curves__ - curves__.mean(1).unsqueeze(1)
+max_idx = torch.square(curves__).sum(-1).argmax(dim=1)
+theta = torch.atan2(curves__[torch.arange(curves__.shape[0]),max_idx,1],curves__[torch.arange(curves__.shape[0]),max_idx,0]).numpy()
+
+curves_ = []
+for i in range(len(results)):
+    curves_.append(results[i][-1])
+
+curves_ = torch.tensor(curves_).float()
+curves_ = uniformize(curves_,200)
+curves_ = curves_ - curves_.mean(1).unsqueeze(1)
+max_idx = torch.square(curves_).sum(-1).argmax(dim=1)
+theta2 = torch.atan2(curves_[torch.arange(curves_.shape[0]),max_idx,1],curves_[torch.arange(curves_.shape[0]),max_idx,0]).numpy()
+
+alphas = []
+letter_heights = []
+letter_centers = []
+letter_widths = []
+
+for i in range(len(results)):
+    A, x0, node_type, start_theta, end_theta, tr = results[i][0]
+    alpha = theta[i] - theta2[i]
+    if i == 21:
+        alpha -= np.pi/2.5
+    if i == 7:
+        alpha -= np.pi/3
+    if i == 4:
+        alpha += np.pi/36
+    alphas.append(alpha)
+    R = np.array([[np.cos(alpha), -np.sin(alpha)],[np.sin(alpha), np.cos(alpha)]]).squeeze()
+    transformed_curve = (R@results[i][-1].T).T
+    CD,OD,_ = results[i][1]
+    sol = solve_rev_vectorized_batch_CPU(A[None],x0[None],node_type[None],np.linspace(start_theta,end_theta,2000))[0]
+    sol_curve = (R@sol[-1].T).T
+
+    n_left = len(results) - i
+    n_left_row = 10 - i%10
+
+    letter_heights.append(transformed_curve[:,1].max()-transformed_curve[:,1].min())
+    letter_widths.append(transformed_curve[:,0].max()-transformed_curve[:,0].min())
+    letter_centers.append([(transformed_curve[:,0].max() + transformed_curve[:,0].min())/2,(transformed_curve[:,1].max() + transformed_curve[:,1].min())/2])
+
+alphas = np.array(alphas)
+letter_heights = np.array(letter_heights)
+letter_centers = np.array(letter_centers)
+letter_widths = np.array(letter_widths)
+
+alphabet_dict = {'A':0,'B':1,'C':2,'D':3,'E':4,'F':5,'G':6,'H':7,'I':8,'J':9,'K':10,'L':11,'M':12,'N':13,'O':14,'P':16,'Q':15,'R':17,'S':18,'T':19,'U':20,'V':21,'W':22,'X':23,'Y':24,'Z':25}
+
+def create_mech(target_text):
+    target_text = target_text.replace(' ','').upper()
+    target_height = 1.
+    spacing = 0.2
+    letters = [alphabet_dict[l] for l in target_text]
+
+    translations = []
+    scaling = []
+
+    transformed_curves = []
+
+    mechs = []
+
+    total_size = 0
+
+    for i,l in enumerate(letters):
+        A, x0, node_type, start_theta, end_theta, tr = results[l][0]
+        alpha = alphas[l]
+        R = np.array([[np.cos(alpha), -np.sin(alpha)],[np.sin(alpha), np.cos(alpha)]]).squeeze()
+        transformed_curve = (R@results[l][-1].T).T
+
+        s = target_height/letter_heights[l]
+        scaling.append(s)
+
+        if i>0:
+            trans = [translations[-1][0] + letter_widths[letters[i-1]]/2 * scaling[i-1] + letter_widths[l]/2 * s + spacing , 0]
+        else:
+            trans = [letter_widths[l]/2 * s ,0]
+
+        translations.append(trans)
+
+        transformed_curves.append(s*(transformed_curve - letter_centers[l]) + trans)
+
+        mechs.append([A,s*((R@x0.T).T - letter_centers[l]) + trans,node_type,start_theta+alpha,end_theta+alpha])
+        total_size += A.shape[0]
+
+    A_all = np.zeros((total_size,total_size))
+    x0_all = np.zeros((total_size,2))
+    node_type_all = np.zeros((total_size,1))
+
+    current_count = 0
+    sols = []
+    highlights = []
+    zs = []
+    for i,m in enumerate(mechs):
+        A, x0, node_type, start_theta, end_theta = m
+        A_all[current_count:current_count+A.shape[0],current_count:current_count+A.shape[0]] = A
+        # x0_all[current_count:current_count+A.shape[0]] = x0
+        node_type_all[current_count:current_count+A.shape[0]] = node_type
+
+        if i ==0:
+            highlights.append(A.shape[0]-1)
+        else:
+            highlights.append(A.shape[0]+highlights[-1])
+
+        sol = solve_rev_vectorized_batch_CPU(A[None],x0[None],node_type[None],np.linspace(start_theta,end_theta,100))[0]
+        sols.append(sol.transpose(1,0,2))
+
+        x0_all[current_count:current_count+A.shape[0]] = sol[:,0,:]
+        current_count += A.shape[0]
+        z = zs_[letters[i]]
+        zs.append(z + zs[-1].max() + 1 if i>0 else z)
+
+    sols = np.concatenate(sols,axis=1)
+    zs = np.concatenate(zs)
+
+    uuid_ = str(uuid.uuid4())
+    
+    create_3d_html(A_all, x0_all, node_type_all, zs, np.concatenate([sols.transpose(1,0,2),sols.transpose(1,0,2)[:,::-1,:]],1), template_path = f'./static/animation.html', save_path=f'./static/{uuid_}.html', highlights=highlights)
+
+    return gr.HTML(f'<iframe width="100%" height="800px" src="file=static/{uuid_}.html"></iframe>',label="3D Plot",elem_classes="plot3d")
+
+gr.set_static_paths(paths=[Path(f'./{args.static_folder}')])
+
+with gr.Blocks() as block:
+    with gr.Row():
+        with gr.Column():
+            text = gr.Textbox(label="Enter a word (spaces will be ignored)", value='DECODE')
+            btn = gr.Button(value="Create Mechanism", variant="primary")
+            
+            plot_3d = gr.HTML('<iframe width="100%" height="800px" src="file=static/filler.html"></iframe>',label="3D Plot",elem_classes="plot3d")
+    
+    event1 = btn.click(create_mech, inputs=[text], outputs=[plot_3d])
+
+block.launch(server_port=args.port)
+    

static/animation.html

@@ -0,0 +1,23 @@
+<html>
+<head>
+    <title>Mechanism Animation</title>
+    <script type="importmap">
+        {
+          "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/"
+          }
+        }
+    </script>
+    <!--Import style.css-->
+    <link rel="stylesheet" type="text/css" href="style.css">
+
+</head>
+<body>
+    <div id="container"></div>
+    <script>
+        {res}
+    </script>
+    <script src="script.js" type="module"></script>
+</body>
+</html>

static/csglib.js

@@ -0,0 +1,481 @@
+
+// ## License
+// 
+// Copyright (c) 2011 Evan Wallace (http://madebyevan.com/), under the MIT license.
+// THREE.js rework by thrax
+
+// # class CSG
+// Holds a binary space partition tree representing a 3D solid. Two solids can
+// be combined using the `union()`, `subtract()`, and `intersect()` methods.
+
+
+class CSG {
+    constructor() {
+        this.polygons = [];
+    }
+    clone() {
+        let csg = new CSG();
+        csg.polygons = this.polygons.map(p=>p.clone())
+        return csg;
+    }
+
+    toPolygons() {
+        return this.polygons;
+    }
+
+    union(csg) {
+        let a = new Node(this.clone().polygons);
+        let b = new Node(csg.clone().polygons);
+        a.clipTo(b);
+        b.clipTo(a);
+        b.invert();
+        b.clipTo(a);
+        b.invert();
+        a.build(b.allPolygons());
+        return CSG.fromPolygons(a.allPolygons());
+    }
+
+    subtract(csg) {
+        let a = new Node(this.clone().polygons);
+        let b = new Node(csg.clone().polygons);
+        a.invert();
+        a.clipTo(b);
+        b.clipTo(a);
+        b.invert();
+        b.clipTo(a);
+        b.invert();
+        a.build(b.allPolygons());
+        a.invert();
+        return CSG.fromPolygons(a.allPolygons());
+    }
+
+    intersect(csg) {
+        let a = new Node(this.clone().polygons);
+        let b = new Node(csg.clone().polygons);
+        a.invert();
+        b.clipTo(a);
+        b.invert();
+        a.clipTo(b);
+        b.clipTo(a);
+        a.build(b.allPolygons());
+        a.invert();
+        return CSG.fromPolygons(a.allPolygons());
+    }
+
+    // Return a new CSG solid with solid and empty space switched. This solid is
+    // not modified.
+    inverse() {
+        let csg = this.clone();
+        csg.polygons.forEach(p=>p.flip());
+        return csg;
+    }
+}
+
+// Construct a CSG solid from a list of `Polygon` instances.
+CSG.fromPolygons=function(polygons) {
+    let csg = new CSG();
+    csg.polygons = polygons;
+    return csg;
+}
+
+// # class Vector
+
+// Represents a 3D vector.
+// 
+// Example usage:
+// 
+//     new CSG.Vector(1, 2, 3);
+
+
+
+class Vector {
+    constructor(x=0, y=0, z=0) {
+        this.x=x;
+        this.y=y;
+        this.z=z;
+    }
+    copy(v){
+        this.x=v.x;
+        this.y=v.y;
+        this.z=v.z;
+        return this
+    }
+    clone() {
+        return new Vector(this.x,this.y,this.z)
+    }
+    negate() {
+        this.x*=-1;
+        this.y*=-1;
+        this.z*=-1;
+        return this
+    }
+    add(a) {
+        this.x+=a.x
+        this.y+=a.y
+        this.z+=a.z
+        return this;
+    }
+    sub(a) {
+        this.x-=a.x
+        this.y-=a.y
+        this.z-=a.z
+        return this
+    }
+    times(a) {
+        this.x*=a
+        this.y*=a
+        this.z*=a
+        return this
+    }
+    dividedBy(a) {
+        this.x/=a
+        this.y/=a
+        this.z/=a
+        return this
+    }
+    lerp(a, t) {
+        return this.add(tv0.copy(a).sub(this).times(t))
+    }
+    unit() {
+        return this.dividedBy(this.length())
+    }
+    length(){
+        return Math.sqrt((this.x**2)+(this.y**2)+(this.z**2))
+    }
+    normalize(){
+        return this.unit()
+    }
+    cross(b) {
+        let a = this;
+		const ax = a.x, ay = a.y, az = a.z;
+		const bx = b.x, by = b.y, bz = b.z;
+
+		this.x = ay * bz - az * by;
+		this.y = az * bx - ax * bz;
+		this.z = ax * by - ay * bx;
+
+		return this;
+    }
+    dot(b){
+        return (this.x*b.x)+(this.y*b.y)+(this.z*b.z)
+    }
+}
+
+//Temporaries used to avoid internal allocation..
+let tv0=new Vector()
+let tv1=new Vector()
+
+
+// # class Vertex
+
+// Represents a vertex of a polygon. Use your own vertex class instead of this
+// one to provide additional features like texture coordinates and vertex
+// colors. Custom vertex classes need to provide a `pos` property and `clone()`,
+// `flip()`, and `interpolate()` methods that behave analogous to the ones
+// defined by `CSG.Vertex`. This class provides `normal` so convenience
+// functions like `CSG.sphere()` can return a smooth vertex normal, but `normal`
+// is not used anywhere else.
+
+class Vertex {
+
+    constructor(pos, normal, uv, color) {
+        this.pos = new Vector().copy(pos);
+        this.normal = new Vector().copy(normal);
+        uv && (this.uv = new Vector().copy(uv)) && (this.uv.z=0);
+        color && (this.color = new Vector().copy(color));
+    }
+
+    clone() {
+        return new Vertex(this.pos,this.normal,this.uv,this.color);
+    }
+
+    // Invert all orientation-specific data (e.g. vertex normal). Called when the
+    // orientation of a polygon is flipped.
+    flip() {
+        this.normal.negate();
+    }
+
+    // Create a new vertex between this vertex and `other` by linearly
+    // interpolating all properties using a parameter of `t`. Subclasses should
+    // override this to interpolate additional properties.
+    interpolate(other, t) {
+        return new Vertex(this.pos.clone().lerp(other.pos, t),this.normal.clone().lerp(other.normal, t),this.uv&&other.uv&&this.uv.clone().lerp(other.uv, t), this.color&&other.color&&this.color.clone().lerp(other.color,t))
+    }
+}
+;
+// # class Plane
+
+// Represents a plane in 3D space.
+
+class Plane {
+    constructor(normal, w) {
+        this.normal = normal;
+        this.w = w;
+    }
+
+    clone() {
+        return new Plane(this.normal.clone(),this.w);
+    }
+
+    flip() {
+        this.normal.negate();
+        this.w = -this.w;
+    }
+
+    // Split `polygon` by this plane if needed, then put the polygon or polygon
+    // fragments in the appropriate lists. Coplanar polygons go into either
+    // `coplanarFront` or `coplanarBack` depending on their orientation with
+    // respect to this plane. Polygons in front or in back of this plane go into
+    // either `front` or `back`.
+    splitPolygon(polygon, coplanarFront, coplanarBack, front, back) {
+        const COPLANAR = 0;
+        const FRONT = 1;
+        const BACK = 2;
+        const SPANNING = 3;
+
+        // Classify each point as well as the entire polygon into one of the above
+        // four classes.
+        let polygonType = 0;
+        let types = [];
+        for (let i = 0; i < polygon.vertices.length; i++) {
+            let t = this.normal.dot(polygon.vertices[i].pos) - this.w;
+            let type = (t < -Plane.EPSILON) ? BACK : (t > Plane.EPSILON) ? FRONT : COPLANAR;
+            polygonType |= type;
+            types.push(type);
+        }
+
+        // Put the polygon in the correct list, splitting it when necessary.
+        switch (polygonType) {
+        case COPLANAR:
+            (this.normal.dot(polygon.plane.normal) > 0 ? coplanarFront : coplanarBack).push(polygon);
+            break;
+        case FRONT:
+            front.push(polygon);
+            break;
+        case BACK:
+            back.push(polygon);
+            break;
+        case SPANNING:
+            let f = []
+              , b = [];
+            for (let i = 0; i < polygon.vertices.length; i++) {
+                let j = (i + 1) % polygon.vertices.length;
+                let ti = types[i]
+                  , tj = types[j];
+                let vi = polygon.vertices[i]
+                  , vj = polygon.vertices[j];
+                if (ti != BACK)
+                    f.push(vi);
+                if (ti != FRONT)
+                    b.push(ti != BACK ? vi.clone() : vi);
+                if ((ti | tj) == SPANNING) {
+                    let t = (this.w - this.normal.dot(vi.pos)) / this.normal.dot(tv0.copy(vj.pos).sub(vi.pos));
+                    let v = vi.interpolate(vj, t);
+                    f.push(v);
+                    b.push(v.clone());
+                }
+            }
+            if (f.length >= 3)
+                front.push(new Polygon(f,polygon.shared));
+            if (b.length >= 3)
+                back.push(new Polygon(b,polygon.shared));
+            break;
+        }
+    }
+
+}
+
+// `Plane.EPSILON` is the tolerance used by `splitPolygon()` to decide if a
+// point is on the plane.
+Plane.EPSILON = 1e-5;
+
+Plane.fromPoints = function(a, b, c) {
+    let n = tv0.copy(b).sub(a).cross(tv1.copy(c).sub(a)).normalize()
+    return new Plane(n.clone(),n.dot(a));
+}
+
+
+// # class Polygon
+
+// Represents a convex polygon. The vertices used to initialize a polygon must
+// be coplanar and form a convex loop. They do not have to be `Vertex`
+// instances but they must behave similarly (duck typing can be used for
+// customization).
+// 
+// Each convex polygon has a `shared` property, which is shared between all
+// polygons that are clones of each other or were split from the same polygon.
+// This can be used to define per-polygon properties (such as surface color).
+
+class Polygon {
+    constructor(vertices, shared) {
+        this.vertices = vertices;
+        this.shared = shared;
+        this.plane = Plane.fromPoints(vertices[0].pos, vertices[1].pos, vertices[2].pos);
+    }
+    clone() {
+        return new Polygon(this.vertices.map(v=>v.clone()),this.shared);
+    }
+    flip() {
+        this.vertices.reverse().forEach(v=>v.flip())
+        this.plane.flip();
+    }
+}
+
+// # class Node
+
+// Holds a node in a BSP tree. A BSP tree is built from a collection of polygons
+// by picking a polygon to split along. That polygon (and all other coplanar
+// polygons) are added directly to that node and the other polygons are added to
+// the front and/or back subtrees. This is not a leafy BSP tree since there is
+// no distinction between internal and leaf nodes.
+
+class Node {
+    constructor(polygons) {
+        this.plane = null;
+        this.front = null;
+        this.back = null;
+        this.polygons = [];
+        if (polygons)
+            this.build(polygons);
+    }
+    clone() {
+        let node = new Node();
+        node.plane = this.plane && this.plane.clone();
+        node.front = this.front && this.front.clone();
+        node.back = this.back && this.back.clone();
+        node.polygons = this.polygons.map(p=>p.clone());
+        return node;
+    }
+
+    // Convert solid space to empty space and empty space to solid space.
+    invert() {
+        for (let i = 0; i < this.polygons.length; i++)
+            this.polygons[i].flip();
+        
+        this.plane && this.plane.flip();
+        this.front && this.front.invert();
+        this.back && this.back.invert();
+        let temp = this.front;
+        this.front = this.back;
+        this.back = temp;
+    }
+
+    // Recursively remove all polygons in `polygons` that are inside this BSP
+    // tree.
+    clipPolygons(polygons) {
+        if (!this.plane)
+            return polygons.slice();
+        let front = []
+          , back = [];
+        for (let i = 0; i < polygons.length; i++) {
+            this.plane.splitPolygon(polygons[i], front, back, front, back);
+        }
+        if (this.front)
+            front = this.front.clipPolygons(front);
+        if (this.back)
+            back = this.back.clipPolygons(back);
+        else 
+            back = [];
+            //return front;
+        return front.concat(back);
+    }
+
+    // Remove all polygons in this BSP tree that are inside the other BSP tree
+    // `bsp`.
+    clipTo(bsp) {
+        this.polygons = bsp.clipPolygons(this.polygons);
+        if (this.front)
+            this.front.clipTo(bsp);
+        if (this.back)
+            this.back.clipTo(bsp);
+    }
+
+    // Return a list of all polygons in this BSP tree.
+    allPolygons() {
+        let polygons = this.polygons.slice();
+        if (this.front)
+            polygons = polygons.concat(this.front.allPolygons());
+        if (this.back)
+            polygons = polygons.concat(this.back.allPolygons());
+        return polygons;
+    }
+
+    // Build a BSP tree out of `polygons`. When called on an existing tree, the
+    // new polygons are filtered down to the bottom of the tree and become new
+    // nodes there. Each set of polygons is partitioned using the first polygon
+    // (no heuristic is used to pick a good split).
+    build(polygons) {
+        if (!polygons.length)
+            return;
+        if (!this.plane)
+            this.plane = polygons[0].plane.clone();
+        let front = []
+          , back = [];
+        for (let i = 0; i < polygons.length; i++) {
+            this.plane.splitPolygon(polygons[i], this.polygons, this.polygons, front, back);
+        }
+        if (front.length) {
+            if (!this.front)
+                this.front = new Node();
+            this.front.build(front);
+        }
+        if (back.length) {
+            if (!this.back)
+                this.back = new Node();
+            this.back.build(back);
+        }
+    }
+}
+
+// Inflate/deserialize a vanilla struct into a CSG structure webworker.
+CSG.fromJSON=function(json){
+    return CSG.fromPolygons(json.polygons.map(p=>new Polygon(p.vertices.map(v=> new Vertex(v.pos,v.normal,v.uv)),p.shared)))
+}
+
+export {CSG,Vertex,Vector,Polygon,Plane}
+
+
+
+// Return a new CSG solid representing space in either this solid or in the
+// solid `csg`. Neither this solid nor the solid `csg` are modified.
+// 
+//     A.union(B)
+// 
+//     +-------+            +-------+
+//     |       |            |       |
+//     |   A   |            |       |
+//     |    +--+----+   =   |       +----+
+//     +----+--+    |       +----+       |
+//          |   B   |            |       |
+//          |       |            |       |
+//          +-------+            +-------+
+// 
+// Return a new CSG solid representing space in this solid but not in the
+// solid `csg`. Neither this solid nor the solid `csg` are modified.
+// 
+//     A.subtract(B)
+// 
+//     +-------+            +-------+
+//     |       |            |       |
+//     |   A   |            |       |
+//     |    +--+----+   =   |    +--+
+//     +----+--+    |       +----+
+//          |   B   |
+//          |       |
+//          +-------+
+// 
+// Return a new CSG solid representing space both this solid and in the
+// solid `csg`. Neither this solid nor the solid `csg` are modified.
+// 
+//     A.intersect(B)
+// 
+//     +-------+
+//     |       |
+//     |   A   |
+//     |    +--+----+   =   +--+
+//     +----+--+    |       +--+
+//          |   B   |
+//          |       |
+//          +-------+
+// 
+

static/csgworker.js

@@ -0,0 +1,76 @@
+import {CSG} from "./csglib.js"
+
+
+let gWorkersStarted = false;
+let gWorker;
+let gWorkerUrl;
+
+let taskId = 0;
+let tasks={}
+let spawnWorker=()=>{
+    const worker = new Worker(gWorkerUrl)
+
+    worker.onmessage = function(e) {
+       let rslt = JSON.parse(e.data)
+       let task = tasks[rslt.taskId]
+       delete tasks[rslt.taskId]
+       task.resolve(CSG.fromJSON(rslt.result))
+       //console.log('Message received from worker');
+       gWorker.busy = false;
+    }
+    return gWorker = {worker,busy:false};
+}
+
+let getWorker=()=>{
+    if(!gWorkersStarted){
+        gWorkersStarted = true;
+        return fetch('../csg-lib.js').then(function(response) {
+            return response.text().then(function(text) {
+                text = text.slice(0, text.lastIndexOf('export'));
+                const code = text + `
+                    self.onmessage=(message)=>{
+                    let task = JSON.parse(message.data)
+                    //console.log("Got task:"+task.op+' '+task.taskId)
+                    postMessage(JSON.stringify({
+                        taskId:task.taskId,
+                        result : CSG.fromJSON(task.a)[task.op](CSG.fromJSON(task.b))
+                    }))
+                }
+                console.log('CSG worker started!')`
+                const blob = new Blob([code],{
+                    type: 'application/javascript'
+                })
+                gWorkerUrl = URL.createObjectURL(blob);
+
+
+            }).then(()=>{
+                return spawnWorker()
+            })
+        });
+    }
+    if(gWorker && (!gWorker.busy)){
+        gWorker.busy = true;
+
+        return {then:(fn)=>{return fn(gWorker);}}
+    }
+    return{
+        then:function(){return this}
+    }
+}
+
+CSG.doAsync=(a,op,b)=>{
+    return getWorker().then((worker)=>{
+        let task={a,op,b,taskId}
+        tasks[taskId]=task;
+        taskId++;
+        task.result = new Promise((resolve,reject)=>{
+            task.resolve = resolve;
+            //console.log("posting to worker:")
+            worker.busy = true;
+            worker.worker.postMessage(JSON.stringify(task))
+        })
+        return task.result        
+    })
+}
+
+export default {}

static/imports.js

@@ -0,0 +1,11 @@
+import * as THREE from 'three';
+
+import Stats from 'three/addons/libs/stats.module.js';
+import { GPUStatsPanel } from 'three/addons/utils/GPUStatsPanel.js';
+
+import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+import 'three/addons/controls/OrbitControls.js';
+import { Line2 } from 'three/addons/lines/Line2.js';
+import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
+import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
+import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js';

static/script.js

@@ -0,0 +1,272 @@
+import * as THREE from 'three';
+
+import Stats from 'three/addons/libs/stats.module.js';
+import { GPUStatsPanel } from 'three/addons/utils/GPUStatsPanel.js';
+
+import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { Line2 } from 'three/addons/lines/Line2.js';
+import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
+import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
+import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js';
+
+import {CSG} from "./threecsg.js"
+
+var res = window.res;
+var hc = window.hc;
+var multi_high = window.multi_high;
+var current_frame = 0;
+var meshes = [];
+var joint_meshes = [];
+
+function make_linkage(x_length, y_length, z_length, hole_r) {
+    var link = new THREE.BoxGeometry( x_length, y_length, z_length );
+    var end_1 = new THREE.CylinderGeometry(y_length/2, y_length/2, z_length, 32);
+    var end_2 = new THREE.CylinderGeometry(y_length/2, y_length/2, z_length, 32);
+    var hole_1 = new THREE.CylinderGeometry(hole_r, hole_r, z_length, 32);
+    var hole_2 = new THREE.CylinderGeometry(hole_r, hole_r, z_length, 32);
+    end_1.rotateX(Math.PI/2).translate(-x_length/2, 0, 0);
+    end_2.rotateX(Math.PI/2).translate(x_length/2, 0, 0);
+    hole_1.rotateX(Math.PI/2).translate(-x_length/2, 0, 0);
+    hole_2.rotateX(Math.PI/2).translate(x_length/2, 0, 0);
+
+    var bsp_link = CSG.fromMesh(new THREE.Mesh(link));
+    var hole_1 = CSG.fromMesh(new THREE.Mesh(hole_1));
+    var hole_2 = CSG.fromMesh(new THREE.Mesh(hole_2));
+    var bsp_end_1 = CSG.fromMesh(new THREE.Mesh(end_1)).subtract(bsp_link).subtract(hole_1);
+    var bsp_end_2 = CSG.fromMesh(new THREE.Mesh(end_2)).subtract(bsp_link).subtract(hole_2);
+    bsp_link = bsp_link.subtract(hole_1).subtract(hole_2);
+
+    var full_link = CSG.toMesh(bsp_link.union(bsp_end_1).union(bsp_end_2));
+
+    return full_link;
+}
+
+function make_link(x_length, y_length, z_length, hole_r, Theta_z, translation) {
+    var full_link = make_linkage(x_length, y_length, z_length * 0.9, hole_r);
+    full_link.rotation.z = Theta_z;
+    full_link.position.set(translation[0] + x_length/2 * Math.cos(Theta_z), translation[1] + x_length/2 * Math.sin(Theta_z), translation[2]);
+    return full_link;
+}
+
+function make_joint(x, y, z, height, radius=0.03) {
+    var joint = new THREE.CylinderGeometry(radius, radius, height * 0.9, 32);
+    joint.rotateX(Math.PI/2);
+    joint = new THREE.Mesh(joint);
+    joint.position.set(x, y, z);
+    return joint;
+}
+
+(async function onLoad() {
+    var res = window.res;
+    var hc = window.hc;
+    var multi_high = window.multi_high;
+    // find the mean value of the res array
+    var max_x = 0;
+    var max_y = 0;
+    var min_x = Infinity;
+    var min_y = Infinity;
+    for(let i = 0; i < res.length; i++) {
+        for(let j = 0; j < res[i][1].length; j++) {
+            if (res[i][1][j][0] > max_x) {
+                max_x = res[i][1][j][0];
+            }
+            if (res[i][1][j][0] < min_x) {
+                min_x = res[i][1][j][0];
+            }
+            if (res[i][1][j][1] > max_y) {
+                max_y = res[i][1][j][1];
+            }
+            if (res[i][1][j][1] < min_y) {
+                min_y = res[i][1][j][1];
+            }
+        }
+    }
+    var mean_x = (max_x + min_x) / 2;
+    var mean_y = (max_y + min_y) / 2;
+
+    var container, camera, scene, renderer, controls, last_frame_time;
+    
+    init();
+    animate();
+    controls.update();
+    function init() {
+        container = document.getElementById('container');
+        
+        renderer = new THREE.WebGLRenderer({
+        antialias: true
+        });
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMap.enabled = true;
+        container.appendChild(renderer.domElement);
+
+        scene = new THREE.Scene();
+        scene.background = new THREE.Color(0xfafafa);
+        
+        camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
+        camera.position.set(mean_x,mean_y, 20);
+        scene.add(camera);
+        window.onresize = function() {
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        }
+        
+        var ambientLight = new THREE.AmbientLight(0xffffff, 2.0);
+        scene.add(ambientLight);
+
+        // var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+        // directionalLight.position.x = 4;
+        // directionalLight.position.y = 1;
+        // directionalLight.position.z = -2;
+        // scene.add( directionalLight );
+
+      
+        controls = new OrbitControls(camera, renderer.domElement);
+        controls.target.set(mean_x,mean_y,0);
+        
+        //   addGridHelper();
+        createModel(0);
+        last_frame_time = Date.now();
+    }
+    
+
+    function createModel(j) {
+        var results = res[j];
+        //iterate through the results and create the links
+        meshes = []
+        for (let i = 0; i < results[0].length; i++) {
+            var link = results[0][i];
+            meshes.push(make_link(link[0], link[1], link[2], link[3], link[4], link[5]));
+            if (i == 0){
+                //yellow
+                meshes[i].material = new THREE.MeshStandardMaterial({ color: 0xff8c00, opacity: 0.5, transparent: true , side: THREE.DoubleSide, depthWrite: true});
+            }
+            else
+                meshes[i].material = new THREE.MeshStandardMaterial({ color: 0x3b3b3b, opacity: 0.5, transparent: true , side: THREE.DoubleSide, depthWrite: true});
+            scene.add(meshes[i]);
+        }
+        joint_meshes = []
+        for (let i = 0; i < results[1].length; i++) {
+            var joint = results[1][i];
+            joint_meshes.push(make_joint(joint[0], joint[1], joint[3], joint[2]));
+            if(joint[4] == 1)//brown
+                joint_meshes[i].material = new THREE.MeshStandardMaterial({ color: 0xff4c00, side: THREE.DoubleSide, depthWrite: false});
+            else    
+                joint_meshes[i].material = new THREE.MeshStandardMaterial({ color: 0x121212, side: THREE.DoubleSide, depthWrite: false});
+            scene.add(joint_meshes[i]);
+        }
+
+        if (multi_high) {
+            var n = hc.length;
+
+            for (let j = 0; j < n; j++) {
+                var points = [];
+                var colors = [];
+                for (let i = 0; i <hc[j].length; i++) {
+                    points.push(hc[j][i][0], hc[j][i][1], hc[j][i][2]);
+                }
+                
+                var geometry = new LineGeometry();
+                geometry.setPositions( points );
+                var material = new LineMaterial( {
+                    color: 0xff4c00,
+                    linewidth: 0.002, // in world units with size attenuation, pixels otherwise
+                    vertexColors: false,
+
+                    //resolution:  // to be set by renderer, eventually
+                    dashed: false,
+                    alphaToCoverage: false,
+                    depthWrite: false,
+                    depthTest: false,
+                    transparent: true,
+
+                });
+                material.worldUnits = false;
+                const line = new Line2(geometry, material);
+                line.computeLineDistances();
+                line.scale.set( 1, 1, 1 );
+                line.renderOrder= 9999;
+                scene.add(line);
+            }
+        }
+        else{
+            var points = [];
+            var colors = [];
+            for (let i = 0; i <hc.length; i++) {
+                points.push(hc[i][0], hc[i][1], hc[i][2]);
+            }
+            
+            var geometry = new LineGeometry();
+            geometry.setPositions( points );
+            var material = new LineMaterial( {
+                color: 0xff4c00,
+                linewidth: 0.002, // in world units with size attenuation, pixels otherwise
+                vertexColors: false,
+
+                //resolution:  // to be set by renderer, eventually
+                dashed: false,
+                alphaToCoverage: false,
+                depthWrite: false,
+                depthTest: false,
+                transparent: true,
+
+            });
+            material.worldUnits = false;
+            const line = new Line2(geometry, material);
+            line.computeLineDistances();
+            line.scale.set( 1, 1, 1 );
+            line.renderOrder= 9999;
+            scene.add(line);
+        }
+
+        
+    }
+  
+    function addGridHelper() {
+  
+      var helper = new THREE.GridHelper(10, 10);
+      helper.material.opacity = 0.25;
+      helper.material.transparent = true;
+      scene.add(helper);
+  
+      var axis = new THREE.AxesHelper(100);
+      scene.add(axis);
+    }
+
+    function set_idx(){
+        if(current_frame < res.length-1) {
+            // createModel(current_frame);
+            current_frame += 1;
+        }
+        else {
+            current_frame = 0;
+        }
+    }
+  
+    function animate() {
+        
+        if (Date.now() - last_frame_time > 1000/30) {
+            set_idx();
+            last_frame_time = Date.now();
+        }
+
+        for (let i = 0; i < meshes.length; i++) {
+            meshes[i].rotation.z = res[current_frame][0][i][4];
+            meshes[i].position.set(res[current_frame][0][i][5][0] + res[current_frame][0][i][0]/2 * Math.cos(res[current_frame][0][i][4]), res[current_frame][0][i][5][1] + res[current_frame][0][i][0]/2 * Math.sin(res[current_frame][0][i][4]), res[current_frame][0][i][5][2]);
+        }
+
+        for (let i = 0; i < joint_meshes.length; i++) {
+            joint_meshes[i].position.set(res[current_frame][1][i][0], res[current_frame][1][i][1], res[current_frame][1][i][3]);
+        }
+         
+        requestAnimationFrame(animate);
+        render();
+    }
+  
+    function render() {
+      renderer.clearDepth();
+      renderer.render(scene, camera);
+    }
+  })();

static/style.css

@@ -0,0 +1,3 @@
+body{
+    margin: 0;
+}

static/threecsg.js

@@ -0,0 +1,219 @@
+
+//import*as THREE from "./lib/three.module.js";
+
+import * as THREE from "three" //"https://threejs.org/build/three.module.js";
+
+let { BufferGeometry, Vector3, Vector2} = THREE;
+import {CSG, Vertex, Vector, Polygon} from "./csglib.js";
+//import {Geometry} from "../three.js-dev/examples/jsm/deprecated/Geometry.js";
+
+CSG.fromGeometry = function(geom,objectIndex) {
+    let polys = []
+    if (geom.isGeometry) {
+        let fs = geom.faces;
+        let vs = geom.vertices;
+        let fm = ['a', 'b', 'c']
+        for (let i = 0; i < fs.length; i++) {
+            let f = fs[i];
+            let vertices = []
+            for (let j = 0; j < 3; j++)
+                vertices.push(new Vertex(vs[f[fm[j]]],f.vertexNormals[j],geom.faceVertexUvs[0][i][j]))
+            polys.push(new Polygon(vertices, objectIndex))
+        }
+    } else if (geom.isBufferGeometry) {
+        let vertices, normals, uvs
+        let posattr = geom.attributes.position
+        let normalattr = geom.attributes.normal
+        let uvattr = geom.attributes.uv
+        let colorattr = geom.attributes.color
+        let index;
+        if (geom.index)
+            index = geom.index.array;
+        else {
+            index = new Array((posattr.array.length / posattr.itemSize) | 0);
+            for (let i = 0; i < index.length; i++)
+                index[i] = i
+        }
+        let triCount = (index.length / 3) | 0
+        polys = new Array(triCount)
+        for (let i = 0, pli = 0, l = index.length; i < l; i += 3,
+        pli++) {
+            let vertices = new Array(3)
+            for (let j = 0; j < 3; j++) {
+                let vi = index[i + j]
+                let vp = vi * 3;
+                let vt = vi * 2;
+                let x = posattr.array[vp]
+                let y = posattr.array[vp + 1]
+                let z = posattr.array[vp + 2]
+                let nx = normalattr.array[vp]
+                let ny = normalattr.array[vp + 1]
+                let nz = normalattr.array[vp + 2]
+                //let u = uvattr.array[vt]
+                //let v = uvattr.array[vt + 1]
+                vertices[j] = new Vertex({
+                    x,
+                    y,
+                    z
+                },{
+                    x: nx,
+                    y: ny,
+                    z: nz
+                },uvattr&&{
+                    x: uvattr.array[vt],
+                    y: uvattr.array[vt+1],
+                    z: 0
+                },colorattr&&{x:colorattr.array[vt],y:colorattr.array[vt+1],z:colorattr.array[vt+2]});
+            }
+            polys[pli] = new Polygon(vertices,objectIndex)
+        }
+    } else
+        console.error("Unsupported CSG input type:" + geom.type)
+    return CSG.fromPolygons(polys)
+}
+
+let ttvv0 = new THREE.Vector3()
+let tmpm3 = new THREE.Matrix3();
+CSG.fromMesh = function(mesh,objectIndex) {
+    let csg = CSG.fromGeometry(mesh.geometry,objectIndex)
+    tmpm3.getNormalMatrix(mesh.matrix);
+    for (let i = 0; i < csg.polygons.length; i++) {
+        let p = csg.polygons[i]
+        for (let j = 0; j < p.vertices.length; j++) {
+            let v = p.vertices[j]
+            v.pos.copy(ttvv0.copy(v.pos).applyMatrix4(mesh.matrix));
+            v.normal.copy(ttvv0.copy(v.normal).applyMatrix3(tmpm3))
+        }
+    }
+    return csg;
+}
+
+let nbuf3=(ct)=>{
+    return{
+        top:0,
+        array:new Float32Array(ct),
+        write:function(v){(this.array[this.top++]=v.x);(this.array[this.top++]=v.y);(this.array[this.top++]=v.z);}
+    }
+}
+let nbuf2=(ct)=>{
+    return{
+        top:0,
+        array:new Float32Array(ct),
+        write:function(v){(this.array[this.top++]=v.x);(this.array[this.top++]=v.y)}
+    }
+}
+
+CSG.toGeometry = function(csg, buffered=true) {
+    let ps = csg.polygons;
+    let geom;
+    let g2;
+    if(!buffered) //Old geometry path...
+    {
+        geom = new Geometry();
+        let vs = geom.vertices;
+        let fvuv = geom.faceVertexUvs[0]
+        for (let i = 0; i < ps.length; i++) {
+            let p = ps[i]
+            let pvs = p.vertices;
+            let v0 = vs.length;
+            let pvlen = pvs.length
+
+            for (let j = 0; j < pvlen; j++)
+                vs.push(new THREE.Vector3().copy(pvs[j].pos))
+
+            for (let j = 3; j <= pvlen; j++) {
+                let fc = new THREE.Face3();
+                let fuv = []
+                fvuv.push(fuv)
+                let fnml = fc.vertexNormals;
+                fc.a = v0;
+                fc.b = v0 + j - 2;
+                fc.c = v0 + j - 1;
+
+                fnml.push(new THREE.Vector3().copy(pvs[0].normal))
+                fnml.push(new THREE.Vector3().copy(pvs[j - 2].normal))
+                fnml.push(new THREE.Vector3().copy(pvs[j - 1].normal))
+                fuv.push(new THREE.Vector3().copy(pvs[0].uv))
+                fuv.push(new THREE.Vector3().copy(pvs[j - 2].uv))
+                fuv.push(new THREE.Vector3().copy(pvs[j - 1].uv))
+
+                fc.normal = new THREE.Vector3().copy(p.plane.normal)
+                geom.faces.push(fc)
+            }
+        }
+        geom = new THREE.BufferGeometry().fromGeometry(geom)
+        geom.verticesNeedUpdate = geom.elementsNeedUpdate = geom.normalsNeedUpdate = true;
+    }else { //BufferGeometry path
+        let triCount = 0;
+        ps.forEach(p=>triCount += (p.vertices.length - 2))
+         geom = new THREE.BufferGeometry()
+
+        let vertices = nbuf3(triCount * 3 * 3)
+        let normals = nbuf3(triCount * 3 * 3)
+        let uvs; // = nbuf2(triCount * 2 * 3)
+        let colors;
+        let grps=[]
+        ps.forEach(p=>{
+            let pvs = p.vertices
+            let pvlen = pvs.length
+            if(p.shared!==undefined){
+                if(!grps[p.shared])grps[p.shared]=[]
+            }
+            if(pvlen){
+                if(pvs[0].color!==undefined){
+                    if(!colors)colors = nbuf3(triCount*3*3);
+                }
+                if(pvs[0].uv!==undefined){
+                    if(!uvs)uvs = nbuf2(triCount * 2 * 3)
+                }
+            }
+            for (let j = 3; j <= pvlen; j++) {
+                (p.shared!==undefined) && (grps[p.shared].push(vertices.top/3,(vertices.top/3)+1,(vertices.top/3)+2));
+                vertices.write(pvs[0].pos)
+                vertices.write(pvs[j-2].pos)
+                vertices.write(pvs[j-1].pos)
+                normals.write(pvs[0].normal)
+                normals.write(pvs[j-2].normal)
+                normals.write(pvs[j-1].normal);
+                uvs&&(pvs[0].uv)&&(uvs.write(pvs[0].uv)||uvs.write(pvs[j-2].uv)||uvs.write(pvs[j-1].uv));
+                colors&&(colors.write(pvs[0].color)||colors.write(pvs[j-2].color)||colors.write(pvs[j-1].color))
+            }
+        }
+        )
+        geom.setAttribute('position', new THREE.BufferAttribute(vertices.array,3));
+        geom.setAttribute('normal', new THREE.BufferAttribute(normals.array,3));
+        uvs && geom.setAttribute('uv', new THREE.BufferAttribute(uvs.array,2));
+        colors && geom.setAttribute('color', new THREE.BufferAttribute(colors.array,3));
+        if(grps.length){
+            let index = []
+            let gbase=0;
+            for(let gi=0;gi<grps.length;gi++){
+                geom.addGroup(gbase,grps[gi].length,gi)
+                gbase+=grps[gi].length
+                index=index.concat(grps[gi]);
+            }
+            geom.setIndex(index)
+        }
+        g2 = geom;
+    }
+    return geom;
+}
+
+CSG.toMesh = function(csg, toMatrix=new THREE.Matrix4(), toMaterial) {
+    let geom = CSG.toGeometry(csg);
+    let inv = new THREE.Matrix4().copy(toMatrix).invert();
+    geom.applyMatrix4(inv);
+    geom.computeBoundingSphere();
+    geom.computeBoundingBox();
+    let m = new THREE.Mesh(geom,toMaterial);
+    m.matrix.copy(toMatrix);
+    m.matrix.decompose(m.position, m.quaternion, m.scale)
+    m.rotation.setFromQuaternion(m.quaternion)
+    m.updateMatrixWorld();
+    m.castShadow = m.receiveShadow = true;
+    return m
+}
+
+import "./csgworker.js";
+
+export {CSG}