Added Batman logo, transformation types and updated description (#2)

- Added Batman logo, transformation types and updated description (76079d11d9242949899984cbb7193a99bb72da7e)


Co-authored-by: Satyam Bhardwaj <bhardwajsatyam@users.noreply.huggingface.co>

app.py

@@ -2,7 +2,11 @@ from matplotlib import pyplot as plt
 import numpy as np
 import streamlit as st
 import pandas as pd
-from utils import getSquareYVectorised, getCircle, transform, plotGridLines
+from utils import getSquareYVectorised, getCircle, getBatman, transform, plotGridLines, discriminant
+
+minv = -5.0
+maxv = 5.0
+step = 0.1
 
 np.set_printoptions(precision=3)
 xlim = (-10,10)
@@ -13,50 +17,110 @@ st.write(
     "This app shows the effect of a 2x2 linear transformation on simple shapes to understand the role of eigenvectors and eigenvalues in quantifying the nature of a transformation.")
 
 with st.sidebar:
-    data = st.selectbox('Select type of dataset', ['Square', 'Circle'])
+    data = st.selectbox('Select type of dataset', ['Square', 'Circle', 'Batman'])
+    if data == 'Batman':
+        black = st.checkbox(label='Black')
+    transform_type = st.selectbox('Select type of transformation', ['Custom', 'Stretch', 'Shear', 'Rotate'])
     st.write("---")
-    st.text("Select elements of transformation\nmatrix (A)")
-    minv = -5.0
-    maxv = 5.0
-    step = 0.1
-    a_00 = st.slider(label = '$A_{0,0}$', min_value = minv, max_value=maxv, value=1.0, step=step)
-    a_01 = st.slider(label = '$A_{0,1}$', min_value = minv, max_value=maxv, value=0.0, step=step)
-    a_10 = st.slider(label = '$A_{1,0}$', min_value = minv, max_value=maxv, value=0.0, step=step)
-    a_11 = st.slider(label = '$A_{1,1}$', min_value = minv, max_value=maxv, value=1.0, step=step)
-    t = np.array([[a_00,a_01], [a_10, a_11]], dtype=np.float64)
+    if transform_type == 'Custom':
+        st.markdown("Select elements of transformation matrix $A$")
+        a_00 = st.slider(label = '$a_{00}$', min_value = minv, max_value=maxv, value=1.0, step=step)
+        a_01 = st.slider(label = '$a_{01}$', min_value = minv, max_value=maxv, value=0.0, step=step)
+        a_10 = st.slider(label = '$a_{10}$', min_value = minv, max_value=maxv, value=0.0, step=step)
+        a_11 = st.slider(label = '$a_{11}$', min_value = minv, max_value=maxv, value=1.0, step=step)
+        t = np.array([[a_00, a_01], [a_10, a_11]], dtype=np.float64)
+    elif transform_type == 'Stretch':
+        both = st.checkbox('Set equal')
+        if not both:
+            stretch_x = st.slider(label = 'Stretch in x-direction', min_value = minv, max_value=maxv, value=1.0, step=step)
+            stretch_y = st.slider(label = 'Stretch in y-direction', min_value = minv, max_value=maxv, value=1.0, step=step)
+            t = np.array([[stretch_x, 0], [0, stretch_y]], dtype=np.float64)
+        else:
+            stretch = st.slider(label = 'Scale', min_value = minv, max_value=maxv, value=1.0, step=step)
+            t = np.array([[stretch, 0], [0, stretch]], dtype=np.float64)
+    elif transform_type == 'Shear':
+        left, right = st.columns(2)
+        with left:
+            both = st.checkbox('Set equal')
+        if not both:
+            shear_x = st.slider(label = 'Shear in x-direction', min_value=minv, max_value=maxv, value=0.0, step=step)
+            shear_y = st.slider(label = 'Shear in y-direction', min_value=minv, max_value=maxv, value=0.0, step=step)
+            t = np.array([[1, shear_x], [shear_y, 1]], dtype=np.float64)
+        else:
+            with right:
+                sign = st.checkbox('Opposite sign')
+            shear = st.slider(label = 'Shear in both directions', min_value=minv, max_value=maxv, value=0.0, step=step)
+            t = np.array([[1, -shear], [shear, 1]], dtype=np.float64) if sign else np.array([[1, shear], [shear, 1]], dtype=np.float64)
+    else:
+        st.markdown("Rotate by $\\theta$ in anti-clockwise\ndirection")
+        min_theta = -180.0
+        max_theta = 180.0
+        theta = st.slider(label = '$\\theta$', min_value=min_theta, max_value=max_theta, value=0.0, step=step, format="%f°")
+        rtheta = np.pi * theta/180.0    
+        t = np.array([[np.cos(rtheta), -np.sin(rtheta)], [np.sin(rtheta), np.cos(rtheta)]], dtype=np.float64)
     st.write("---")
     st.write("The transformation matrix A is:")
     st.table(pd.DataFrame(t))
     st.write("---")
-    showNormalSpace = st.checkbox(label= 'Show normal space (without transform)', value=False)
+    showNormalSpace = st.checkbox(label= 'Show original space (without transform)', value=False)
 
-    
 
-x = np.linspace(-1,1,1000)
-y = getSquareYVectorised(x) if data == 'Square' else getCircle(x)
+if data == 'Square':
+    x = np.linspace(-1,1,1000)
+    y = getSquareYVectorised(x)
+elif data == 'Circle':
+    x = np.linspace(-1,1,1000)
+    y = getCircle(x)
+else:
+    X, Y = getBatman(s=2)
 
-x_dash_up, y_dash_up = transform(x,y,t)
-x_dash_down, y_dash_down = transform(x,-y,t)
+if data != 'Batman':
+    x_dash_up, y_dash_up = transform(x,y,t)
+    x_dash_down, y_dash_down = transform(x,-y,t)
+else:
+    tmp = [transform(x, y, t) for x, y in zip(X, Y)]
+    X_dash = [t[0] for t in tmp]
+    Y_dash = [t[1] for t in tmp]
 
 evl, evec = np.linalg.eig(t)
-det = np.linalg.det(t)
 fig, ax = plt.subplots()
 
 if showNormalSpace:
-    ax.plot(x, y, 'r', alpha=0.5)
-    ax.plot(x, -y, 'g', alpha=0.5)
+    if data != 'Batman':
+        ax.plot(x, y, 'r', alpha=0.5)
+        ax.plot(x, -y, 'g', alpha=0.5)
+    else:
+        for i, (x, y) in enumerate(zip(X, Y)):
+            if black:
+                ax.plot(x, y, 'k-', alpha=0.5, linewidth=1)
+            elif i < 3:
+                ax.plot(x, y, 'g-', alpha=0.5, linewidth=1)
+            else:
+                ax.plot(x, y, 'r-', alpha=0.5, linewidth=1)
     if not np.iscomplex(evec).any():
         ax.quiver(0,0,evec[0,0],evec[1,0],scale=1,scale_units ='xy',angles='xy', facecolor='black', alpha=0.5)
         ax.quiver(0,0,evec[0,1],evec[1,1],scale=1,scale_units ='xy',angles='xy', facecolor='black', alpha=0.5)
     plotGridLines(xlim,ylim,np.array([[1,0], [0,1]]),'#9D9D9D','Normal Space',0.4)
 
-ax.plot(x_dash_up,y_dash_up,'r')
-ax.plot(x_dash_down,y_dash_down, 'g')
+if data != 'Batman':
+    ax.plot(x_dash_up,y_dash_up,'r')
+    ax.plot(x_dash_down,y_dash_down, 'g')
+else:
+    for i, (x, y) in enumerate(zip(X_dash, Y_dash)):
+        if black:
+            ax.plot(x, y, 'k-', linewidth=1)
+        elif i < 3:
+            ax.plot(x, y, 'g', linewidth=1) 
+        else: 
+            ax.plot(x, y, 'r', linewidth=1)
 if not (np.iscomplex(evl).any() or np.iscomplex(evec).any()):
     ax.quiver(0,0,evec[0,0]*evl[0],evec[1,0]*evl[0],scale=1,scale_units ='xy',angles='xy', facecolor='cyan', label='$eigen\ vector_{\lambda_0}$')
     ax.quiver(0,0,evec[0,1]*evl[1],evec[1,1]*evl[1],scale=1,scale_units ='xy',angles='xy', facecolor='blue', label='$eigen\ vector_{\lambda_1}$')
 plotGridLines(xlim,ylim,t,'#403B3B','Transformed space',0.6)
-ax.text(11,5,'|A|={:.2f}'.format(det))
+ax.text(11,3,'|A|={:.2f}'.format(np.linalg.det(t)), fontdict={'fontsize':11})
+ax.text(11,2,'D = {:.2f}'.format(discriminant(t)), fontdict={'fontsize':11})
+if discriminant(t) < 0:
+    ax.text(13,1,'Negative!'.format(discriminant(t)), fontdict={'fontsize':8})
 
 ax.set_xlim(*xlim)
 ax.set_ylim(*ylim)
@@ -70,7 +134,7 @@ st.pyplot(fig)
 
 df = pd.DataFrame({'Eigenvalues': evl, 'Eigenvectors': [str(evec[:,0]), str(evec[:,1])],\
     'Transformed Eigenvectors': [str(evec[:,0]*evl[0]), str(evec[:,1]*evl[1])]})
-st.table(df)
+st.table(df.style.format({'Eigenvalues':'{:.2f}'}))
 
 if np.iscomplex(evl).any() or np.iscomplex(evec).any():
     st.write("Due to complex eigenvectors and eigenvalues, the transformed eigenvectors are not\

description.md

@@ -39,4 +39,12 @@ When the matrix $A$ is singular, then the transformed space collapses to a line.
 
 Solving for $\lambda$, we get $$ \frac{1}{2} \left(a_{00}+a_{11}\pm \sqrt{a_{00}^2-2 a_{11} a_{00}+a_{11}^2+4 a_{01} a_{10}}\right) $$
 
-The quantity under the square root sign is called the Discriminant, denoted by $D$. When $D < 0$, the eigenvalues and consequently the eigenvectors are complex. On the other hand, when $A$ is symmetric $a_{01} = a_{10}$, then the discriminant is always positive and the eigendecomposition is real.
+The quantity under the square root sign is called the Discriminant, denoted by $D$. When $D < 0$, the eigenvalues and consequently the eigenvectors are complex. On the other hand, when $A$ is symmetric $a_{01} = a_{10}$, then the discriminant is always positive and the eigendecomposition is real.
+
+Some common transformations include
+
+| Name | Matrix | Explanation |
+|:----:|:--------------------:|:-----:|
+|Stretch |$\begin{bmatrix} s_{x} & 0 \\ 0 & s_{y} \end{bmatrix}$| Streches by $s_x$ in $x$-direction and by $s_y$ in the $y$-direction. When $s_x = s_y = s$, this is equivalent to scaling by $s$ |
+|Shear| $\begin{bmatrix} 1 & s_{x} \\ s_{y} & 1 \end{bmatrix}$| Shears simultaneously by $s_x$ in $x$-direction and by $s_y$ in the $y$-direction. When $s_x = -s_y$, this is equivalent to rotate and scale. |
+|Rotate| $\begin{bmatrix} \cos\theta & -\sin\theta \\ \sin\theta & \cos\theta \end{bmatrix}$| Rotation by $\theta$ in the anti-clockwise direction. Since all vectors rotate under this transformation, the eigenvalues and eigenvectors are complex. |

utils.py

@@ -10,10 +10,10 @@ def getSquareY(x):
 getSquareYVectorised = np.vectorize(getSquareY)
 
 def getCircle(x):
-    return np.sqrt(1-np.square(x))
+    return np.sqrt(1 - np.square(x))
 
 def transform(x,y,t):
-    points = np.array([x,y])
+    points = np.array([x, y])
     result = t @ points
     return result[0,:], result[1,:]
 
@@ -30,4 +30,105 @@ def plotGridLines(xlim,ylim,t,color,label,linewidth):
         y = [i,i]
         x = [xlim[0]-20,xlim[1]+20]
         x,y = transform(x,y,t)
-        plt.plot(x,y, color=color,linestyle='dashed',linewidth=linewidth)
+        plt.plot(x,y, color=color,linestyle='dashed',linewidth=linewidth)
+
+def discriminant(t):
+    return t[0,0]**2 - 2*t[1,1]*t[0,0] + t[1,1]**2 + 4*t[0,1]*t[1,0]
+
+def getBatman(s=2):
+    X = []
+    Y = []
+    
+    # lower
+    x = np.linspace(-4, 4, 1600)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y,abs(px/2)- 0.09137*px**2 + np.sqrt(1-(abs(abs(px)-2)-1)**2) -3)
+    X.append(x/s)
+    Y.append(y/s)
+    
+    # lower left
+    x = np.linspace(-7., -4, 300)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y, -3*np.sqrt(-(px/7)**2+1))
+    X.append(x/s)
+    Y.append(y/s)
+    
+    # lower right
+    x = np.linspace(4, 7, 300)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y, -3*np.sqrt(-(px/7)**2+1))
+    X.append(x/s)
+    Y.append(y/s)
+    
+    # top left
+    x = np.linspace(-7, -2.95, 300)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y, 3*np.sqrt(-(px/7)**2+1))
+    X.append(x/s)
+    Y.append(y/s)
+    
+    # top right
+    x = np.linspace(2.95, 7, 300)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y, 3*np.sqrt(-(px/7)**2+1))
+    X.append(x/s)
+    Y.append(y/s)
+    
+    # left ear left
+    x = np.linspace(-1, -.77, 2)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y, 9-8*abs(px))
+    X.append(x/s)
+    Y.append(y/s)
+    
+    # right ear right
+    x = np.linspace(.77, 1, 2)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y, 9-8*abs(px))
+    X.append(x/s)
+    Y.append(y/s)
+    
+    # mid
+    x = np.linspace(-.43, .43, 100)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y,2)
+    X.append(x/s)
+    Y.append(y/s)
+        
+    x = np.linspace(-2.91, -1, 100)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y, 1.5 - .5*abs(px) - 1.89736*(np.sqrt(3-px**2+2*abs(px))-2) )
+    X.append(x/s)
+    Y.append(y/s)
+    
+    x = np.linspace(1, 2.91, 100)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y, 1.5 - .5*abs(px) - 1.89736*(np.sqrt(3-px**2+2*abs(px))-2) )
+    X.append(x/s)
+    Y.append(y/s)
+    
+    x = np.linspace(-.7,-.43, 10)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y, 3*abs(px)+.75)
+    X.append(x/s)
+    Y.append(y/s)
+    
+    x = np.linspace(.43, .7, 10)
+    y = np.zeros((0))
+    for px in x:
+        y = np.append(y, 3*abs(px)+.75)
+    X.append(x/s)
+    Y.append(y/s)
+    
+    return X, Y