Upload 23 files

app.py

@@ -0,0 +1,108 @@
+# app.py
+
+import sys
+import time
+from io import StringIO
+import streamlit as st
+from PIL import Image, ImageDraw, ImageColor
+from canvas import *
+from streamlit_ace import st_ace
+import extra_streamlit_components as stx
+from streamlit_image_select import image_select
+from sewar.full_ref import uqi
+import numpy as np
+# from sqlite3 import Connection
+import datetime
+from lines import *
+from triangle import *
+
+
+def get_manager():
+    return stx.CookieManager()
+
+#### Manage Cookies and ajs_state ####
+
+#time.sleep(3)
+#cookie_manager = get_manager()
+#ajs_id = cookie_manager.get_all()["ajs_anonymous_id"]
+date_reg = datetime.date.today().strftime("%d/%m/%Y")
+st.session_state['timestamp'] = datetime.datetime.now().strftime("%d/%m/%Y %H:%M:%S")
+
+#st.session_state['conn'] = get_connection("data_drawer.db")
+#user_checked = check_value_id_user(st.session_state.conn, ajs_id).values[0][0] > 0
+#if not user_checked:
+#    user_id = str(st.text_input("Welcome! please enter your username here:)"))
+#    values = (ajs_id, user_id, date_reg)
+#    insert_value_ajs_states (st.session_state.conn, values)
+
+## Sidebar for color picker
+with st.sidebar:
+    color = st.color_picker('color picker', '#00f900', key='l_c')
+    st.write(ImageColor.getrgb(color))
+
+st.header("Shape Puzzles")
+st.write("##")
+st.divider()
+
+st.markdown("###### Write your code here")
+## Code input
+code = st_ace(
+    language="python",
+    theme="tomorrow_night_bright",
+    keybinding="vscode",
+    font_size=14,
+    tab_size=4,
+    show_gutter=True,
+    min_lines=10,
+    key="ace",
+)
+st.divider()
+
+target = image_select(
+    label="Select a target image",
+    images=[
+        'image/TrianglePolygon.png',
+        'image/TriangleHole.png',
+        "image/TriangleCrash.png",
+        'image/archillect.png',
+        'image/TriangleFox.png'
+    ],
+    captions=["Iterative Polygon", "Infinite traps", "One Cut", "Archillect", "Red Fox"],
+    use_container_width = False
+)
+
+o1, o2 = st.columns(2)
+if code:
+    ImageDraw.Draw(img).rectangle([(0, 0), (c_length,c_height)], fill = c_color, outline = c_outline, width=2)
+    redirected_output = sys.stdout = StringIO()
+    try:
+        exec(code)
+        result = str(redirected_output.getvalue())
+        st.code(result)
+    except Exception as e:
+        st.code(str(e))
+
+st.write("##")
+st.divider()
+with o1:
+    st.markdown("##### Target Shape:")
+    target = Image.open(target)
+    t2 = target.resize((c_length,c_height))
+    ImageDraw.Draw(img_t).rectangle([(0, 0), 
+                                    (c_length,c_height)],
+                                    fill = c_color, 
+                                    outline = c_outline, 
+                                    width=2)
+    img_t.paste(t2)
+    st.image(img_t)
+    st.session_state['imt'] = np.array(img_t)
+with o2:
+    st.markdown("##### Output Shape")    
+    st.image(img, caption='')
+    st.session_state['imo'] = np.array(img)
+
+#### Measuring Similarity
+sim = round(uqi(st.session_state['imt'],st.session_state['imo']),4)
+
+st.write(f"Similarity Score: {sim}")
+

canvas.py

@@ -0,0 +1,13 @@
+from PIL import Image, ImageDraw
+
+## Canvas Config
+c_length = 700
+c_height = 600
+c_mode = 'RGB'
+c_color = (250,250,250)
+c_outline = (0,0,0)
+
+img = Image.new(c_mode, (c_length, c_height), color = c_color)
+img_t = Image.new(c_mode, (c_length, c_height), color = c_color)
+
+draw = ImageDraw.Draw(img)

circle.py

@@ -0,0 +1,34 @@
+from PIL import Image, ImageDraw
+import math
+import numpy as np
+from canvas import *
+
+
+def _re_coord(point,x=c_length/2,y=c_height/2):
+    return (point[0]+x, y-point[1])
+
+def _back_coord(point):
+    return (point[0]-c_length/2, c_height/2-point[1])
+
+def circle_c_r(center, radiu, fill = None, color = (0,0,0), width = 1):
+    ce = _re_coord(center) 
+    p1 = (ce[0]- radiu/math.sqrt(2), ce[1] - radiu/math.sqrt(2))
+    p2 = (ce[0]+ radiu/math.sqrt(2), ce[1] + radiu/math.sqrt(2))
+    draw.pieslice([p1,p2], start=0, end=360, fill=fill, outline=color, width=width)
+    data = {'center':center,
+          'radiu':radiu,
+          'arc':math.pi*2*radiu}
+    return data
+
+def circle_draw(point, diameter, angle=0, fill = None, color = (0,0,0), width = 1):
+    po = _re_coord(point); radiu = diameter/2 
+    x_e = radiu * math.cos(-angle); y_e = radiu*math.sin(-angle)
+    ce = (po[0]-x_e, po[1]-y_e)
+    p1 = (ce[0]- radiu/math.sqrt(2), ce[1] - radiu/math.sqrt(2))
+    p2 = (ce[0]+ radiu/math.sqrt(2), ce[1] + radiu/math.sqrt(2))
+    draw.pieslice([p1,p2], start=0, end=360, fill=fill, outline=color, width=width)
+    data = {'center':_back_coord(ce),
+          'radiu':radiu,
+          'arc':math.pi*2*radiu}
+    return data
+

image/archillect.pngZone.Identifier

@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://i.ibb.co/1nB6XkF/archillect.png
+HostUrl=https://i.ibb.co/1nB6XkF/archillect.png

lines.py

@@ -0,0 +1,61 @@
+from PIL import Image, ImageDraw
+import numpy as np
+import math
+import shapely
+from shapely.geometry import LineString
+from canvas import *
+
+
+def _re_coord(point):
+    return (point[0]+c_length/2, c_height/2-point[1])
+
+def _back_coord(point):
+    return (point[0]-c_length/2, c_height/2-point[1])
+
+def line_end(start, angle, length):
+    x, y = start
+    endy = y + length * math.sin(math.radians(-angle)) 
+    endx = x + length * math.cos(math.radians(-angle))
+    return (endx, endy)
+
+def lines_intersection(l1, l2):
+    line1 = LineString([l1['start'], l1['end']])
+    line2 = LineString([l2['start'], l2['end']])
+    int_pt = line1.intersection(line2)
+    return (int_pt.x, int_pt.y)
+
+def p2d (start, end):
+    angle = np.rad2deg(np.arctan2(end[1] - start[1], end[0] - start[0]))
+    dist = np.linalg.norm(np.array(start) - np.array(end))
+    x_range = (start[0], end[0])
+    mid_point = ((start[0]+end[0])/2, (start[1]+end[1])/2)
+    data = {
+        'angle':angle,
+        'dist':dist,
+        'x_range':x_range,
+        'mid_point':mid_point
+    }
+    return data
+
+def line2P(start,end,color=(0,0,0),width=1):
+    draw.line([_re_coord(start), _re_coord(end)], fill=color, width=width, joint=None)
+    data = {'start':start,
+          'end':end}
+    return data
+
+def lineDraw(start, angle, length, color=(0,0,0), width=1):
+    end = line_end(_re_coord(start), angle, length)
+    draw.line([_re_coord(start), end], fill=color, width=width, joint=None)
+    data = {'start':start,
+          'end':_back_coord(end)}
+    return data
+
+def lineFunc(x_range, alpha=1, const = 0, color=(0,0,0), width=1): 
+    start_x = x_range[0]-c_length/2
+    end_x =x_range[-1]-c_length/2 #the last one of range
+    start_y = c_height - (alpha*start_x + const)
+    end_y = c_height - (alpha*end_x + const)
+    draw.line([(start_x,start_y), (end_x, end_y)], fill=color, width=width, joint=None)
+    data = {'start':(start_x,start_y),
+          'end':(end_x,end_y)}
+    return data

pages/1_Chapter_1 Lines and Triangles.py

@@ -0,0 +1,411 @@
+import sys
+from io import StringIO
+import streamlit as st
+import numpy as np
+from PIL import Image, ImageDraw, ImageColor
+from canvas import *
+from streamlit_ace import st_ace
+import extra_streamlit_components as stx
+from sewar.full_ref import uqi
+from lines import *
+from triangle import *
+
+st.set_page_config(page_title="How to play Shape Puzzle", page_icon=":notebook:")
+
+
+with st.sidebar:
+    color = st.color_picker('color picker', '#00f900', key='l_c')
+    st.write(ImageColor.getrgb(color))
+
+st.header("Chapter 1: Lines and Triangles")
+st.write("##")
+st.divider()
+
+with st.expander("Tutorial No.1: Line segments"):
+
+    st.markdown("#### Let's start with playing with line-segments")
+    st.markdown(
+    """
+        1. We will firstly draw a simple line-segment. The easiest way to do so is using our line function:
+            ```python
+            line2P(start, point)
+            ```
+            - In the code window below, define two points on the canvas by:
+
+            ```python
+            a = (-100, 0) ## the x-axis is -100 and y-axis is 0
+            b = (100, 0)  ## the x-axis is 100 and y-axis is 0
+            line2P(a, b)  ## then call our line2P function to draw the line
+            ```
+
+            You should see a horizontal line-segment in the canvas. 
+            Feel free to change the color or the width of drawing by refering the "Functions" page from side bar.
+
+        2. Our 2nd Line function, LineDraw():
+            Sometimes, it might be easier to just start from a single point, but thinking about the direction and the length of drawing a 
+            line segment. This is more intuitive for the real drawing scenario.
+
+            - In the code window below, define a point and the length and angle you want to draw :
+
+            ```python
+            a = (-100, 0) ## the x-axis is -100 and y-axis is 0
+            angle = 45  ## 45 degree anti-clock wise
+            length = 200 ## length of the drawing
+            lineDraw(a, angle, length, width=50)  ## then call our lineDraw function to draw the line
+            ## We can also specify the width of drawing by passing parameter explicitly.
+            ```
+
+            You should see a slant line-segment in the canvas.
+        
+        3. Release the power of for-loop:
+            The most powerful part of drawing through code is the capability of producing iterative graphs. 
+            The more detailed instruction about Python for-loops, please check [here](https://www.w3schools.com/python/python_for_loops.asp)
+
+            - In the code window below, define a startinig point and using for-loop and lineDraw:
+
+            ```python
+            c = (-50,-100) ## The starting point to draw
+            lst = [c]  ## Create a list for later reference
+            for i in range (100): ## Iterate 100 rounds
+                l = lineDraw(lst[-1], i*125, 300, (212, 16, 16), width=2) ## Try to figure out what are we doing here?
+                lst.append(l['end']) ## add the end-point of the line drawn to the list for the next iteration
+            ```
+        4. Now, see if you can produce a shape stated in "target shape":
+
+            ```python
+            s = (0,0) ## The starting point
+            n = 8 ## 
+            lst = [s]
+
+            #### Start your for-loop here ####
+
+            #### End of your for-loop ####
+            ```
+            Having fun!!
+    """
+    )
+
+    st.divider()
+    st.markdown("###### Write your code here")
+    ## Code input
+    code1 = st_ace(language="python", theme="tomorrow_night_bright", keybinding="vscode", font_size=14, tab_size=4, show_gutter=True, min_lines=10, key="ace",)
+    o1, o2 = st.columns(2)
+    if code1:
+        ImageDraw.Draw(img).rectangle([(0, 0), (c_length,c_height)], fill = c_color, outline = c_outline, width=2)
+        redirected_output = sys.stdout = StringIO()
+        try:
+            exec(code1)
+            result = str(redirected_output.getvalue())
+            st.code(result)
+        except Exception as e:
+            st.code(str(e))
+    with o1:
+        st.markdown("##### Target Shape:"); target = Image.open('image/T1_t.jpg')
+        t2 = target.resize((c_length,c_height))
+        ImageDraw.Draw(img_t).rectangle([(0, 0), (c_length,c_height)], fill = c_color, outline = c_outline, width=2)
+        img_t.paste(t2); st.image(img_t); st.session_state['imt'] = np.array(img_t)
+    with o2:
+        st.markdown("##### Output Shape"); st.image(img, caption=''); st.session_state['imo'] = np.array(img)
+    
+    sim = round(uqi(st.session_state['imt'],st.session_state['imo']),4)
+    st.write(f"The similarity score between target and output: {sim}")
+
+
+with st.expander("Tutorial No.2: Triangles and Transformations 1"):
+
+    st.markdown("Now, we will start to draw more cool shapes")
+    st.markdown(
+    """
+        1. The simplest way to draw a triangle is to define three points on the canvas:
+
+            - In the code window below, define two points on the canvas by:
+
+            ```python
+            a = (-100, 0) ## the x-axis is -100 and y-axis is 0
+            b = (100, 0)  ## the x-axis is 100 and y-axis is 0
+            c = (0, 200) ## the x-axis is 0 and y-axis is 200
+            triangle_base(a,b,c, fill = (0, 249, 0), color=(0,0,0))  ## then call our basic triangle function to draw the shape
+
+            ```
+
+            You should see a isosceles triangle in the canvas. 
+            In the triangle_base() function, we have two parameters for coloring:
+            -- the "fill" is for the color filled in the triangle
+            -- the "color" is color of the edge of the triangle
+            
+
+        2. Our 2nd Triangle function, triangle_LP():
+
+            Again, it might be easier to just start from a line, but thinking about another point to draw a 
+            triangle. This is convient for some scenario when iteration applies.
+
+            - In the code window below, try the follow drawing:
+
+            ```python
+            for i in range (10): # We create an iteration of 10
+            
+                # Each iteration, draw a line with one different end point per iter
+                l = line2P((100,0+i*10),(-300,100), (0, 249, 0))
+                # then for each different line drawn, touch it to a fixed point (150,150) to form a triangle
+                triangle_LP(l, (150,150), (0, 249, 0))
+            ```
+
+            You should see a repeated triangle shape in the canvas.
+        
+        3. Transform of shapes 1: Rescale:
+
+            Shape transformations are very helpful functions in drawing shapes. 
+
+            The first transformation we are trying is Rescale, 
+
+            - In the code window below, define a startinig triangle from triangle_base() and then scale it:
+
+            ```python
+            a = (-100, 0) ## the x-axis is -100 and y-axis is 0
+            b = (100, 0)  ## the x-axis is 100 and y-axis is 0
+            c = (0, 200) ## the x-axis is 0 and y-axis is 200
+            ### Our initial triangle, give it a name, t
+            t = triangle_base(a,b,c, fill = (0, 249, 0), color=(0, 249, 0))
+
+            ### we rescale it with half size
+            ### 1. We use the default color here, which was filled with canvas color and edge with black
+            ### 2. We choose redraw=False, this means keep the original triangle t
+            ##### 2.5 If we are passing redraw=True, the t will disappear. 
+            t2 = rescale_c(t, alpha=0.5, redraw=False)
+            ```
+
+            You might already see a chance of creating a for-loop for some great design? 
+
+            The rescale function we used above is rescaling based on centre of triangle, we can also use another 
+            rescale function rescale_p() to specify the point we want to base on for rescaling.
+
+            - In the code window below, following the code from above, paste the next snippet
+
+            ```python
+            a = (-100, 0) ## the x-axis is -100 and y-axis is 0
+            b = (100, 0)  ## the x-axis is 100 and y-axis is 0
+            c = (0, -200) ## the x-axis is 0 and y-axis is 200
+            ### Our initial triangle, give it a name, t
+            t3 = triangle_base(a,b,c, fill = (201, 64, 26), color=(201, 64, 26))
+
+            ### we rescale it with half size, but at different point 
+            t4 = rescale_p(t3, 'p2', alpha=0.5, redraw=False)
+            ```
+
+        4. Transform of shapes 2: Translation:
+
+            The second transformation we are introducing is translation,
+
+            - In the code window below, define a startinig triangle from triangle_base() and then Translate it
+            to different location:
+
+            ```python
+            a = (-200, 0) ## the x-axis is -100 and y-axis is 0
+            b = (10, 0)  ## the x-axis is 100 and y-axis is 0
+            c = (0, -100) ## the x-axis is 0 and y-axis is 200
+            ### Our initial triangle, give it a name, t
+            t5 = triangle_base(a,b,c, fill = (201, 64, 26), color=(201, 64, 26))
+
+            ## We use vector here to specify the direction and magnitute of translation. 
+            ## The translate_o() function is traslating triangles by a vector defined from the 
+            ## origin. i.e. the center of the canvas.
+            t6 = translate_o(t3, vector = (100,150), redraw=False)
+            ```
+
+            Now we should try the effect of translate by a vector defined from a point of the triangle
+
+            - In the code window below, define a startinig triangle from triangle_base() and then Translate it
+            to different location, using translate_p() function:
+
+            ```python
+            a = (-20, 0) ## the x-axis is -100 and y-axis is 0
+            b = (10, 0)  ## the x-axis is 100 and y-axis is 0
+            c = (0, -100) ## the x-axis is 0 and y-axis is 200
+            ### Our initial triangle, give it a name, t
+            t7 = triangle_base(a,b,c, fill = (201, 64, 26), color=(201, 64, 26))
+
+            translate_p(t7, vector = (-10,10), point = 'p2', redraw=False)
+            ```
+            The code above specify "P2" as origin of translation rather than center of canvas
+
+        5. Using data for more complicated design:
+
+            Read the code below and check out the output from a more specific design
+
+            ```python
+            b_line = line2P((-200,-160),(200,-160),color='black') # set the baseline
+            tpoint = (0,200) # set the top point of the triangle
+
+            # Create the first triangle
+            t1 = triangle_LP(b_line,tpoint,color='black',fill='black')
+            # Translate the triangle_LP
+            down_vector = (0,-50)
+            t2 = translate_o(t1, down_vector,fill=None, redraw=False) 
+
+            # Redraw the edge of the second triangle
+
+            l1 = line2P(t2['p1'], t2['p2'], color='white', width=10)
+            l2 = line2P(t2['p1'], t2['p3'], color='white', width=10)
+            l3 = line2P(t2['p2'], t2['p3'], color='white', width=10)
+
+            ## Find two intersections on the baseline
+
+            p1 = lines_intersection(l2, b_line)
+            p2 = lines_intersection(l3, b_line)
+
+            ## Redraw the line-segment with information
+
+            l4 = line2P(p1, t2['p1'], color = 'black', width=10)
+            l5 = line2P(p2, t2['p2'], color = 'black', width=10)
+            l3 = line2P(t2['p1'], t2['p2'], color = 'black', width=10)
+            ```
+
+            Feel free to play around the code above to try different design.
+
+        6. Try to design/create a shape like the target shape :)
+            
+    """
+    )
+
+    st.divider()
+    st.markdown("###### Write your code here")
+    ## Code input
+    code2 = st_ace(language="python", theme="tomorrow_night_bright", keybinding="vscode", font_size=14, tab_size=4, show_gutter=True, min_lines=10, key="ace2",)
+    o1, o2 = st.columns(2)
+    if code2:
+        ImageDraw.Draw(img).rectangle([(0, 0), (c_length,c_height)], fill = c_color, outline = c_outline, width=2)
+        redirected_output = sys.stdout = StringIO()
+        try:
+            exec(code2)
+            result = str(redirected_output.getvalue())
+            st.code(result)
+        except Exception as e:
+            st.code(str(e))
+    with o1:
+        st.markdown("##### Target Shape:"); target = Image.open('image/T2_t.jpg')
+        t2 = target.resize((c_length,c_height))
+        ImageDraw.Draw(img_t).rectangle([(0, 0), (c_length,c_height)], fill = c_color, outline = c_outline, width=2)
+        img_t.paste(t2); st.image(img_t); st.session_state['imt'] = np.array(img_t)
+    with o2:
+        st.markdown("##### Output Shape"); st.image(img, caption=''); st.session_state['imo'] = np.array(img)
+    
+    sim = round(uqi(st.session_state['imt'],st.session_state['imo']),4)
+    st.write(f"The similarity score between target and output: {sim}")
+
+
+
+with st.expander("Tutorial No.3: Transformation 2, Rotation and Reflection"):
+
+    st.markdown("We will continues on more transformations that helps us to create shape designs")
+    st.markdown(
+    """
+        1. Rotation by a point on the canvas:
+
+            - Copy and past the code below to the code window:
+
+            ```python
+            P1=(100,100); P2=(200,50); P3=(-10,-50)
+
+            t = triangle_base(P1, P2, P3, 'red')
+            t1 = rotation(t,redraw=False, fill='blue') ## Rotation by the origin (0,0), default
+            # rotate 90 degree based on a point from the triangle
+            t2 = rotation(t, t['p1'], redraw = False, fill = 'yellow')
+            # rotate 120 degree based on a point on the canvas
+            t3 = rotation(t, (-50, 100), angle=120, redraw=False, fill='orange')
+
+            ```
+
+            You should see differernt rotations with different color 
+            Carefully read the code and comments, figuring out:
+            -- What is the parameter that control the point of rotation
+            -- what is the parameter that control the degree of rotation
+            
+
+        2. Reflection by a line on the canvas:
+
+            - Copy and past the code below to the code window:
+
+            ```python
+            P1=(100,100); P2=(200,50); P3=(-10,-50)
+
+            t = triangle_base(P1, P2, P3, 'red')
+
+            ## Define different lines
+            l1 = line2P(t['p2'],t['p3'], 'green') 
+            l2 = line2P((0,0),(0,200), 'yellow')
+            l3 = line2P((100,0),(200,0), 'orange')
+
+            ## Reflect by different lines:
+            t3 = reflection(t, l1, redraw=False, fill='green')
+            t4 = reflection(t, l2, redraw=False, fill='yellow')
+            t5 = reflection(t, l3, redraw=False, fill='orange')
+            ```
+
+            You should see differernt reflection with different color 
+            Carefully read the code and comments, figuring out:
+            
+            -- What is the parameter that control the line of reflection
+
+        
+        3. Translations with for loops
+
+            Let's review the power of our favourate for-loops!
+
+            - Copy and past the code below to the code window:
+
+            ```python
+            ## You can define the colors you are using at the beginning
+            ## To choose the color, using color picker to get the hex code or RGB values
+            B_color = 'white'
+            P_color = (11, 129, 11)
+
+            ## Define an initial triangle
+            start = triangle_base((20,50),(20,80),(35,22.3),color=B_color)
+            start = rescale_c(start,3,color=B_color)
+            # try to reflect 1st time
+            a = reflection(start,line2P(start['p1'],start['p2'],P_color),
+                redraw=False,color=P_color)
+
+            ## Looping around
+
+            for i in range(12):
+                a = reflection(a,line2P(a['p2'],a['p3']),redraw=False,color=P_color)
+                a = reflection(a,line2P(a['p1'],a['p3']),redraw=False,color=P_color)
+            ## After reflection you might want to fine-tune to add on another rotation
+            reflection(a,line2P(a['p2'],a['p3'],P_color),redraw=False,color=P_color)
+
+            ```
+
+            You might also try some different colors for the flower --- 
+            
+        4.  Now, see if you can produce a shape stated in "target shape":
+
+
+
+
+    """
+    )
+    st.divider()
+    st.markdown("###### Write your code here")
+    ## Code input
+    code3 = st_ace(language="python", theme="tomorrow_night_bright", keybinding="vscode", font_size=14, tab_size=4, show_gutter=True, min_lines=10, key="ace3",)
+    o1, o2 = st.columns(2)
+    if code3:
+        ImageDraw.Draw(img).rectangle([(0, 0), (c_length,c_height)], fill = c_color, outline = c_outline, width=2)
+        redirected_output = sys.stdout = StringIO()
+        try:
+            exec(code3)
+            result = str(redirected_output.getvalue())
+            st.code(result)
+        except Exception as e:
+            st.code(str(e))
+    with o1:
+        st.markdown("##### Target Shape:"); target = Image.open('image/T3_t.jpg')
+        t3 = target.resize((c_length,c_height))
+        ImageDraw.Draw(img_t).rectangle([(0, 0), (c_length,c_height)], fill = c_color, outline = c_outline, width=2)
+        img_t.paste(t3); st.image(img_t); st.session_state['imt'] = np.array(img_t)
+    with o2:
+        st.markdown("##### Output Shape"); st.image(img, caption=''); st.session_state['imo'] = np.array(img)
+    
+    sim = round(uqi(st.session_state['imt'],st.session_state['imo']),4)
+    st.write(f"The similarity score between target and output: {sim}")

pages/2_Chapter_2 Arcs and Circles.py

@@ -0,0 +1,122 @@
+import sys
+from io import StringIO
+import streamlit as st
+import numpy as np
+from PIL import Image, ImageDraw, ImageColor
+from canvas import *
+from streamlit_ace import st_ace
+import extra_streamlit_components as stx
+from sewar.full_ref import uqi
+from lines import *
+from triangle import *
+from circle import * 
+
+st.set_page_config(page_title="How to play Shape Puzzle", page_icon=":notebook:")
+
+
+with st.sidebar:
+    color = st.color_picker('color picker', '#00f900', key='l_c')
+    st.write(ImageColor.getrgb(color))
+
+st.header("Chapter 2: Arcs and Circles")
+st.write("##")
+st.divider()
+
+with st.expander("Tutorial No.1: Circles in different way of drawing"):
+
+    st.markdown("#### Let's start with circle functions.")
+    st.markdown(
+    """
+        1. Easy like previously, define or claim the key variables, then call the function to draw a circle.
+        Be aware that once the size or circle are larger than our size of canvas, that part would not be shown on the canvas.
+
+            ```python
+            ## Claim the center and radiu
+            center = (100, -100)
+            radiu = 400
+            ## Call the function
+            circle_c_r(center, radiu, fill = (201, 30, 30), color = (201, 30, 30))
+            ```
+            Now, by simply design the center of circles and the radius, you can generate some cool design, for example
+
+            ```python
+            ## Claim the center and radiu
+            center = (100, -100)
+            radiu = 400
+            ## Call the function
+            circle_c_r(center, radiu, fill = (201, 30, 30), color = (201, 30, 30))
+
+            c1 = (150, -80)
+            r1 = 150
+            circle_c_r(c1, r1, fill = 'white', color = 'white')
+            ```
+
+        2. Our 2nd circle function, circle_draw():
+            Sometimes, we might not be able to "see" the center but rather starting at a point on the canvas, 
+            with some idea of the 'size' in mind, and draw a circle to meet the starting point. 
+
+            This way of drawing a circle might be more natural for some design
+
+            - In the code window below, define a point to start and the 'size', i.e. diameter of circle:
+
+            ```python
+            a = (-100, 0) ## the x-axis is -100 and y-axis is 0
+            angle = 45  ## 45 degree anti-clock wise
+            length = 200 ## length of the drawing
+            lineDraw(a, angle, length, width=50)  ## then call our lineDraw function to draw the line
+            ## We can also specify the width of drawing by passing parameter explicitly.
+            ```
+
+            You should see a slant line-segment in the canvas.
+        
+        3. Release the power of for-loop:
+            The most powerful part of drawing through code is the capability of producing iterative graphs. 
+            The more detailed instruction about Python for-loops, please check [here](https://www.w3schools.com/python/python_for_loops.asp)
+
+            - In the code window below, define a startinig point and using for-loop and lineDraw:
+
+            ```python
+            c = (-50,-100) ## The starting point to draw
+            lst = [c]  ## Create a list for later reference
+            for i in range (100): ## Iterate 100 rounds
+                l = lineDraw(lst[-1], i*125, 300, (212, 16, 16), width=2) ## Try to figure out what are we doing here?
+                lst.append(l['end']) ## add the end-point of the line drawn to the list for the next iteration
+            ```
+        4. Now, see if you can produce a shape stated in "target shape":
+
+            ```python
+            s = (0,0) ## The starting point
+            n = 8 ## 
+            lst = [s]
+
+            #### Start your for-loop here ####
+
+            #### End of your for-loop ####
+            ```
+            Having fun!!
+    """
+    )
+    st.divider()
+    st.markdown("###### Write your code here")
+    ## Code input
+    code1 = st_ace(language="python", theme="tomorrow_night_bright", keybinding="vscode", font_size=14, tab_size=4, show_gutter=True, min_lines=10, key="ace",)
+    o1, o2 = st.columns(2)
+    if code1:
+        ImageDraw.Draw(img).rectangle([(0, 0), (c_length,c_height)], fill = c_color, outline = c_outline, width=2)
+        redirected_output = sys.stdout = StringIO()
+        try:
+            exec(code1)
+            result = str(redirected_output.getvalue())
+            st.code(result)
+        except Exception as e:
+            st.code(str(e))
+    with o1:
+        st.markdown("##### Target Shape:"); target = Image.open('image/T1_t.jpg')
+        t2 = target.resize((c_length,c_height))
+        ImageDraw.Draw(img_t).rectangle([(0, 0), (c_length,c_height)], fill = c_color, outline = c_outline, width=2)
+        img_t.paste(t2); st.image(img_t); st.session_state['imt'] = np.array(img_t)
+    with o2:
+        st.markdown("##### Output Shape"); st.image(img, caption=''); st.session_state['imo'] = np.array(img)
+    
+    sim = round(uqi(st.session_state['imt'],st.session_state['imo']),4)
+    st.write(f"The similarity score between target and output: {sim}")

pages/3_Functions.py

@@ -0,0 +1,264 @@
+import streamlit as st
+
+with st.expander("Line Functions"):
+
+    st.markdown("##### Line Functions")
+    st.divider()
+    st.markdown(
+    """
+        **:red[line2P(start, end, color=(0,0,0), width=1)]**
+        - *Draws an line segment between the start and end points.*
+
+        **PEREMETERS**
+
+        - **start**: The start point of the line segment. [Data format, tuple], e.g. (100, 200)
+        - **end**: The end point of the line segment. [Data format, tuple], e.g. (200, 100)
+        - **color**: The color of the line segment. [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, black, (0,0,0)
+        - **width**: The width of the drawing of the line segment. [Data format, int]
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[lineDraw(start, angle, length, color=(0,0,0), width=1)]**
+        - *Draws an line segment from a starting point with predetermined angle and length.*
+
+        **PEREMETERS**
+
+        - **start**: The start point of the line segment. [Data format, tuple], e.g. (100, 200)
+        - **angle**: The angle of direction of the line drawing towards. [Data format, int or float]. For example, starting from 
+        (0,0) the origin of the canvas and draw a horizental line to the right, the angle would be 0 degree, so angle = 0;
+        to draw a vertical line goes up, the angle would be 90 degree, thus angle = 90.
+        - **length**: The length of the line drawing. [Data format, int or float]. Warning: the canvas is set up with dimention (700,600), 
+        so if the lenght of line starting from (0,0) to the right horizentally with length 400, the canvas can only show 350 of the drawing.
+        - **color**: The color of the line segment. [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, black, (0,0,0)
+        - **width**: The width of the drawing of the line segment. [Data format, int]
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[lineFunc(x_range, alpha=1, const = 0, color=(0,0,0), width=1)]**
+        - *Draws an line segment on a canvas based on its linear equation.*
+
+        **PEREMETERS**
+
+        - **x_range**: The range of domain (x-axis) of the linear function. [Data format, tuple], e.g. (100, 200)
+        - **alpha**: The gradient (slope) of the linear function. [Data format, int or float]. 
+        - **const**: The y-intecept of the linear funciton. [Data format, int or float]. 
+        - **color**: The color of the line segment. [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, black, (0,0,0)
+        - **width**: The width of the drawing of the line segment. [Data format, int]
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[p2d(start, end)]**
+        - *Given two points, return linear data of them.*
+
+        **PEREMETERS**
+
+        - **start**: The start point of the line segment. [Data format, tuple], e.g. (100, 200)
+        - **end**: The end point of the line segment. [Data format, tuple], e.g. (200, 100)
+
+        **RETURNS**
+
+        - **angle**: The angle of the line w.r.t. the positive x-axis;
+        - **dist**: The distance between two points, i.e. the length of the line segment;
+        - **x_range**: The range of the x-axis of two points;
+        - **mid_point**: The midpoint of the line segment between two end points.
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[lines_intersection(l1, l2)]**
+        - *Given two non-parallel lines, return the point of intesection.*
+
+        **PEREMETERS**
+
+        - **l1**: The first line segment. [Data format, line objects], For example, if we created a line by other line function, such as 
+        l1 = line2P(), the function line2P() will create a python dictionary with data {'start': the start point, 'end': the end point};
+        This object can be passed to the lines_intersection() function.
+        - **l2**: same as above
+
+        **RETURNS**
+
+        - the point of intersection, (x_axis, y_axis).
+    """)
+
+
+with st.expander("Triangle Functions"):
+
+    st.markdown("##### Triangle Functions")
+    st.markdown(
+    """
+        **:red[triangle_base(p1, p2, p3, fill = None, color=(0,0,0), width=1)]**
+        - *Draws a triangle based on three points given.*
+
+        **PEREMETERS**
+
+        - **p1 / p2 / p3**: Three points as compolsory parameters of drawing. [Data format, tuple], e.g. (100, 200)
+        - **fill**: The color of the shape of triangle (interior area). [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, None, not filling any color.
+        - **color**: The color of the edge of the triangle. [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, black, (0,0,0)
+        - **width**: The width of the drawing of the line segment. [Data format, int]
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[triangle_LP(line, p, fill=None, color = (0,0,0))]**
+        - *Draws a triangle based on a line-segment and a point out of the line.*
+
+        **PEREMETERS**
+
+        - **line**: The line segment. [Data format, line objects], For example, if we created a line by other line function, such as 
+        l1 = line2P(), the function line2P() will create a python dictionary with data {'start': the start point, 'end': the end point};
+        - **p**: The point out of the line-segment for the triangle. [Data format, tuple], e.g. (100, 200)
+        - **fill**: The color of the shape of triangle (interior area). [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, None, not filling any color.
+        - **color**: The color of the edge of the triangle. [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, black, (0,0,0)
+        - **width**: The width of the drawing of the line segment. [Data format, int]
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[t_center(triangle)]**
+        - *Given a triangle object, returns the centers of the triangle object.*
+
+        **PEREMETERS**
+
+        - **triangle**: The triangle object drawing from the above two functions. [Data format, dictionary];
+
+        **RETURNS**
+
+        - A dictionary of centers of the target triangle.
+
+         -- 'centroid': the [centroid](https://byjus.com/maths/centroid/) of the triangle. 
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[rescale_c(shape, alpha = 1, redraw=True, color='black', fill='white', width=1)]**
+        - *Given a triangle, rescale the triangle based on the center of the triangle.*
+
+        **PEREMETERS**
+
+        - **shape**: The triangle object drawing from the above two functions. [Data format, dictionary];
+        - **alpha**: The scaling factor. Default = 1, i.e. same size as the original shape. When alpha > 1, it means enlarge the triangle; 
+        when 0 < alpha < 1, it means shrink the triangle.
+        - **redraw**: The boolean parameter to determine whether to eliminate the original triangle. Default = True, i.e. only keep the newly drawn triangle;
+        - **fill**: The color of the shape of triangle (interior area). [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, None, not filling any color.
+        - **color**: The color of the edge of the triangle. [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, black, (0,0,0)
+        - **width**: The width of the drawing of the line segment. [Data format, int]
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[rescale_p(shape, point='p1',alpha = 1, redraw=True, color='black', fill='white', width=1)]**
+        - *Given a triangle, rescale the triangle based on a vertex on the triangle.*
+
+        **PEREMETERS**
+
+        - **shape**: The triangle object drawing from the above two functions. [Data format, dictionary];
+        - **point**: The name of the vertex of the triangle object. ('p1', 'p2', or 'p3'). [Data format, string];
+        - **alpha**: The scaling factor. Default = 1, i.e. same size as the original shape. When alpha > 1, it means enlarge the triangle; 
+        when 0 < alpha < 1, it means shrink the triangle.
+        - **redraw**: The boolean parameter to determine whether to eliminate the original triangle. Default = True, i.e. only keep the newly drawn triangle;
+        - **fill**: The color of the shape of triangle (interior area). [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, None, not filling any color.
+        - **color**: The color of the edge of the triangle. [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, black, (0,0,0)
+        - **width**: The width of the drawing of the line segment. [Data format, int]
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[translate_o(shape, vector=(0,0), redraw=True, color='black', fill=None, width=1)]**
+        - *Given a triangle, translate the triangle based on a vector from the oringin.*
+
+        **PEREMETERS**
+
+        - **shape**: The triangle object drawing from the above two functions. [Data format, dictionary];
+        - **vector**: The vector of translation. Default value = (0,0), i.e. no translation;
+        - **redraw**: The boolean parameter to determine whether to eliminate the original triangle. 
+        Default = True, i.e. only keep the newly drawn triangle;
+        - **fill**: The color of the shape of triangle (interior area). [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, None, not filling any color.
+        - **color**: The color of the edge of the triangle. [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, black, (0,0,0)
+        - **width**: The width of the drawing of the line segment. [Data format, int]
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[translate_p(shape, vector=(100,0), point='p1', redraw=True, color='black', fill=None, width=1)]**
+        - *Given a triangle, translate the triangle based on a vector from a vertex of a triangle.*
+
+        **PEREMETERS**
+
+        - **shape**: The triangle object drawing from the above two functions. [Data format, dictionary];
+        - **vector**: The vector of translation. Default value = (100,0);
+        - **point**: The name of the vertex of the triangle object. ('p1', 'p2', or 'p3'). [Data format, string]; 
+        - **redraw**: The boolean parameter to determine whether to eliminate the original triangle. 
+        Default = True, i.e. only keep the newly drawn triangle;
+        - **fill**: The color of the shape of triangle (interior area). [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, None, not filling any color.
+        - **color**: The color of the edge of the triangle. [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, black, (0,0,0)
+        - **width**: The width of the drawing of the line segment. [Data format, int]
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[rotation(shape, point=(0,0), angle=90, redraw=True, color='black', fill='white', width=1)]**
+        - *Given a triangle, rotate the triangle based on a point on Canvas.*
+
+        **PEREMETERS**
+
+        - **shape**: The triangle object drawing from the above two functions. [Data format, dictionary];
+        - **point**: The name of the vertex of the triangle object. ('p1', 'p2', or 'p3'). [Data format, string];
+        - **angle**: The angle of rotation, clockwise, default value = 90, i.e. 90 degrees; 
+        - **redraw**: The boolean parameter to determine whether to eliminate the original triangle. 
+        Default = True, i.e. only keep the newly drawn triangle;
+        - **fill**: The color of the shape of triangle (interior area). [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, None, not filling any color.
+        - **color**: The color of the edge of the triangle. [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, black, (0,0,0)
+        - **width**: The width of the drawing of the line segment. [Data format, int]
+    """)
+
+    st.divider()
+    st.markdown(
+    """
+        **:red[reflection(shape, line, redraw=True, color='black', fill='white', width=1)]**
+        - *Given a triangle, reflect the triangle based on a line already existed on Canvas.*
+
+        **PEREMETERS**
+
+        - **shape**: The triangle object drawing from the above two functions. [Data format, dictionary];
+        - **line**: The variable name of the line defined. [Data format, dictionary];
+        - **redraw**: The boolean parameter to determine whether to eliminate the original triangle. 
+        Default = True, i.e. only keep the newly drawn triangle;
+        - **fill**: The color of the shape of triangle (interior area). [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, None, not filling any color.
+        - **color**: The color of the edge of the triangle. [Data format, tuple], e.g.(255,255,255). The RGB form of color can be extracted from 
+        the color picker in the slide bar of section of the app. Default value, black, (0,0,0)
+        - **width**: The width of the drawing of the line segment. [Data format, int]
+    """)
+
+    

pages/4_Gallary.py

@@ -0,0 +1 @@
+import streamlit as st

requirements.txt

@@ -0,0 +1,14 @@
+openai==0.27.5
+dotenv==1.0.0
+pandas
+wordcloud==1.9.2
+matplotlib
+plotly==5.15.0
+nltk==3.8.1
+Pillow==9.5.0
+streamlit-ace==0.1.1
+extra-streamlit-components==0.1.56
+streamlit-image-select==0.6.0
+sewar==0.4.6
+shapely==2.0.1
+

triangle.py

@@ -0,0 +1,179 @@
+from PIL import Image, ImageDraw
+import math
+import numpy as np
+from canvas import *
+
+
+def _re_coord(point,x=c_length/2,y=c_height/2):
+    return (point[0]+x, y-point[1])
+
+def _back_coord(point):
+    return (point[0]-c_length/2, c_height/2-point[1])
+
+def triangle_base(p1, p2, p3, fill = None, color=(0,0,0),width=1):
+    draw.polygon([_re_coord(p1),_re_coord(p2),_re_coord(p3)], fill=fill, outline=color)
+    #draw.line([p1, p2], fill=color, width=width, joint=None)
+    #draw.line([p2, p3], fill=color, width=width, joint=None)
+    #draw.line([p3, p1], fill=color, width=width, joint=None)
+    #draw.point([p1,p2,p3], fill=color)
+    data = {'p1':p1,
+          'p2':p2,
+          'p3':p3}
+    return data
+
+def triangle_LP(line, p, fill=None, color = (0,0,0)):
+    p1 = _re_coord(line['start'])
+    p2 = _re_coord(line['end'])
+    p3 = _re_coord(p)
+    draw.polygon([p1,p2,p3], fill=fill, outline=color)
+    data = {'p1':_back_coord(p1),
+          'p2':_back_coord(p2),
+          'p3':_back_coord(p3)}
+    return data
+
+def t_center(triangle):
+    reshapes = dict(map(lambda x: (x[0], _re_coord(x[1])), triangle.items()))
+    p1,p2,p3=reshapes.values()
+    p1 = np.asarray(p1);p2 = np.asarray(p2);p3 = np.asarray(p3)
+
+    centroid_x = (p1[0] + p2[0] + p3[0]) / 3
+    centroid_y = (p1[1] + p2[1] + p3[1]) / 3
+
+    data = {'centroid':_back_coord((centroid_x,centroid_y))}
+    return data
+
+def rescale_c(shape, alpha = 1, redraw=True, color='black', fill='white',width=1):
+    reshapes = dict(map(lambda x: (x[0], _re_coord(x[1])), shape.items()))
+
+    p1,p2,p3=reshapes.values()
+    p1 = np.asarray(p1);p2 = np.asarray(p2);p3 = np.asarray(p3)
+    d1 = np.linalg.norm(p2-p3); d2 = np.linalg.norm(p1-p3); d3 = np.linalg.norm(p1-p2)
+    dv = np.array([d1,d2,d3])
+    pxv = np.array([p1[0],p2[0],p3[0]]); pyv = np.array([p1[1],p2[1],p3[1]])
+    c_x = np.dot(dv,pxv)/np.sum(dv); c_y = np.dot(dv,pyv)/np.sum(dv)
+    p1n = (p1-np.array([c_x,c_y]))*alpha + np.array([c_x,c_y])
+    p2n = (p2-np.array([c_x,c_y]))*alpha + np.array([c_x,c_y])
+    p3n = (p3-np.array([c_x,c_y]))*alpha + np.array([c_x,c_y])
+    if redraw:
+        triangle_base(_back_coord(p1),_back_coord(p2),_back_coord(p3), fill = c_color, color=c_color)
+        triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    else:
+        triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    data = {'p1':_back_coord(tuple(p1n)),
+          'p2':_back_coord(tuple(p2n)),
+          'p3':_back_coord(tuple(p3n))}
+    return data
+
+
+def rescale_p(shape, point='p1',alpha = 1, redraw=True, color='black', fill='white',width=1):
+    reshapes = dict(map(lambda x: (x[0], _re_coord(x[1])), shape.items()))
+    p1,p2,p3=reshapes.values()
+    p1 = np.asarray(p1);p2 = np.asarray(p2); p3 = np.asarray(p3)
+    p = _re_coord(shape[point])
+    p1n = (p1-p)*alpha + p
+    p2n = (p2-p)*alpha + p
+    p3n = (p3-p)*alpha + p
+    if redraw:
+      triangle_base(_back_coord(p1),_back_coord(p2),_back_coord(p3), fill = c_color, color=c_color)
+      triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    else:
+      triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    data = {'p1':_back_coord(tuple(p1n)),
+            'p2':_back_coord(tuple(p2n)),
+            'p3':_back_coord(tuple(p3n))}
+    return data
+
+def translate_o(shape, vector=(0,0), redraw=True, color='black', fill='white',width=1):
+    reshapes = dict(map(lambda x: (x[0], _re_coord(x[1])), shape.items()))
+    p1,p2,p3=reshapes.values()
+    p1 = np.asarray(p1);p2 = np.asarray(p2);p3 = np.asarray(p3)
+    p1n = (p1[0] + vector[0], p1[1]-vector[1])
+    p2n = (p2[0] + vector[0], p2[1]-vector[1])
+    p3n = (p3[0] + vector[0], p3[1]-vector[1])
+    if redraw:
+       triangle_base(_back_coord(p1),_back_coord(p2),_back_coord(p3), fill = c_color, color=c_color)
+       triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    else:
+       triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    data = {'p1':_back_coord(tuple(p1n)),
+          'p2':_back_coord(tuple(p2n)),
+          'p3':_back_coord(tuple(p3n))}
+    return data
+
+def translate_p(shape, vector=(100,0), point='p1', redraw=True, color='black', fill='white',width=1):
+    reshapes = dict(map(lambda x: (x[0], _re_coord(x[1])), shape.items()))
+    p1,p2,p3=reshapes.values()
+    p1 = np.asarray(p1);p2 = np.asarray(p2);p3 = np.asarray(p3)
+    vec = np.asarray(vector)-np.asarray(shape[point])
+    p1n = (p1[0] + vec[0], p1[1]-vec[1])
+    p2n = (p2[0] + vec[0], p2[1]-vec[1])
+    p3n = (p3[0] + vec[0], p3[1]-vec[1])
+    if redraw:
+       triangle_base(_back_coord(p1),_back_coord(p2),_back_coord(p3), fill = c_color, color=c_color)
+       triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    else:
+       triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    data = {'p1':_back_coord(tuple(p1n)),
+          'p2':_back_coord(tuple(p2n)),
+          'p3':_back_coord(tuple(p3n))}
+    return data
+
+def rotation(shape, point=(0,0),angle=90,redraw=True, color='black', fill='white',width=1):
+    c, s = np.cos(np.radians(angle)), np.sin(np.radians(angle))
+    R = np.array(((c, -s), (s, c)))
+
+    reshapes = dict(map(lambda x: (x[0], _re_coord(x[1])), shape.items()))
+    p1,p2,p3=reshapes.values()
+    p1 = np.asarray(p1);p2 = np.asarray(p2);p3 = np.asarray(p3)
+    p = np.asarray(_re_coord(point))
+
+    p1n = np.matmul(R,p1 - p) + p
+    p2n = np.matmul(R,p2 - p) + p
+    p3n = np.matmul(R,p3 - p) + p
+
+    if redraw:
+       triangle_base(_back_coord(p1),_back_coord(p2),_back_coord(p3), fill = c_color, color=c_color)
+       triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    else:
+       triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    data = {'p1':_back_coord(tuple(p1n)),
+          'p2':_back_coord(tuple(p2n)),
+          'p3':_back_coord(tuple(p3n))}
+    return data
+
+def reflection(shape, line, redraw=True, color='black', fill='white',width=1):
+    
+    reshapes_l = dict(map(lambda x: (x[0], _re_coord(x[1])), line.items()))
+    l1,l2 = reshapes_l.values()
+    l1 = np.asarray(l1); l2=np.asarray(l2)
+    dx=l2[0]-l1[0]; dy = l2[1]-l1[1]
+
+    if dx != 0:
+      slope = dy/dx
+      angle = np.arctan(slope)
+      c, s = np.cos(angle), np.sin(angle)
+      R = np.array(((c, s), (-s, c)))
+      nR = np.array(((c, -s), (s, c)))
+    else:
+      R = np.array(((1, 0), (0, -1)))
+      nR = np.array(((-1, 0), (0, 1)))
+  
+    ref = np.array(((1, 0), (0, -1)))
+
+    reshapes = dict(map(lambda x: (x[0], _re_coord(x[1])), shape.items()))
+    p1,p2,p3=reshapes.values()
+    p1 = np.asarray(p1);p2 = np.asarray(p2);p3 = np.asarray(p3)
+
+    p1n = np.matmul(nR,np.matmul(ref, np.matmul(R,p1 - l1))) + l1
+    p2n = np.matmul(nR,np.matmul(ref, np.matmul(R,p2 - l1))) + l1
+    p3n = np.matmul(nR,np.matmul(ref, np.matmul(R,p3 - l1))) + l1
+
+    if redraw:
+       triangle_base(_back_coord(p1),_back_coord(p2),_back_coord(p3), fill = c_color, color=c_color)
+       triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    else:
+       triangle_base(_back_coord(p1n),_back_coord(p2n),_back_coord(p3n), fill = fill, color=color)
+    data = {'p1':_back_coord(tuple(p1n)),
+          'p2':_back_coord(tuple(p2n)),
+          'p3':_back_coord(tuple(p3n))}
+    return data