Spaces:
Sleeping
Sleeping
File size: 5,047 Bytes
598008a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 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}") |