Skip to content

Commit bfd6ea2

Browse files
committed
SymCode Article
1 parent 87f6bd5 commit bfd6ea2

File tree

7 files changed

+503
-27
lines changed

7 files changed

+503
-27
lines changed

doczrc.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export default {
88
],
99
menu: [
1010
'Vision Cortex',
11-
'Vision Magic',
11+
'SymCode',
12+
'Impression',
1213
'VTracer',
1314
]
1415
}

src/components/Figure/index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,18 @@ import { jsx } from 'theme-ui'
44
export const Figure = (props) => {
55
let imgSrc = props.src;
66
let descText = props.text || '';
7+
let width = props.width || null;
78
let height = props.height || null;
9+
let maxWidth = props.maxWidth || 100 + '%';
10+
let maxHeight = props.maxHeight || null;
811
return (
912
<div>
1013
<img
1114
alt={descText}
1215
style={{
1316
display: 'block',
1417
marginLeft: 'auto', marginRight: 'auto',
15-
maxWidth: 100 + '%', height
18+
width, height, maxWidth, maxHeight,
1619
}}
1720
src={'/public/' + imgSrc}
1821
/>
Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
2-
name: Vision Magic
3-
route: /visionmagic-docs
2+
name: Impression
3+
route: /impression-docs
44
---
55

66
import { Figure } from './components/Figure'
77

8-
# Vision Magic
8+
# Impression
99

1010
Author: [Chris Tsang](//github.com/tyt2y3) | Published: 2020-12-24
1111

1212
-----
1313

14-
[VisionMagic Impression](//www.visioncortex.org/visionmagic/) is a family of algorithms for image simplification, segmentation and vectorization.
14+
[Impression](//www.visioncortex.org/visionmagic/) is a family of algorithms for image simplification, segmentation and vectorization.
1515

1616
<iframe src="https://player.vimeo.com/video/491698600" style="width: 100%; height: 95vh; max-height: 75vw;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
1717

@@ -33,11 +33,11 @@ The [clustering algorithm](//docs.rs/visioncortex/latest/visioncortex/color_clus
3333
3434
### Stage 1: clustering
3535

36-
Clustering is a process to connect pixels of similar colors into clusters. Each cluster have a unique position and shape. There is well known algorithm to perform clustering and Vision Magic’s implementation is essentially same as Kopelman Algorithm.
36+
Clustering is a process to connect pixels of similar colors into clusters. Each cluster have a unique position and shape. There is well known algorithm to perform clustering and Impression’s implementation is essentially same as Kopelman Algorithm.
3737

3838
### Stage 2: hierarchical clustering
3939

40-
Hierarchical clustering is a process to build an image tree from the clusters of stage 1. Vision Magic builds a binary tree bottom up. In preparation, clusters are sorted by their size. Starting from the smallest, in each iteration, a cluster is merged into the closest cluster. There are different formulas for ‘close’, but it generally involves comparing the average colors between neighboring clusters.
40+
Hierarchical clustering is a process to build an image tree from the clusters of stage 1. Impression builds a binary tree bottom up. In preparation, clusters are sorted by their size. Starting from the smallest, in each iteration, a cluster is merged into the closest cluster. There are different formulas for ‘close’, but it generally involves comparing the average colors between neighboring clusters.
4141

4242
### Stage 3: tree walking
4343

@@ -53,7 +53,7 @@ In image simplification, there are multiple dimensions of information which can
5353

5454
### Shape Simplification
5555

56-
Vision Magic currently chose the Ramer-Douglas-Peucker algorithm for shape simplification. While the original algorithm is designed for open curves, Vision Magic adapted it for closed shapes. We cut a closed path into 4 sections, simplify each, and stitch them back together after path simplification. We choose the north most, east most, south most and west most points to cut a given path. Effectively the simplest possible shape is a diamond with four points. However in practice, it is not desirable to have shapes with sharp corners, and so we would smooth them with a 4-point scheme as described in [VTracer](/vtracer-docs).
56+
Impression currently chose the Ramer-Douglas-Peucker algorithm for shape simplification. While the original algorithm is designed for open curves, Impression adapted it for closed shapes. We cut a closed path into 4 sections, simplify each, and stitch them back together after path simplification. We choose the north most, east most, south most and west most points to cut a given path. Effectively the simplest possible shape is a diamond with four points. However in practice, it is not desirable to have shapes with sharp corners, and so we would smooth them with a 4-point scheme as described in [VTracer](/vtracer-docs).
5757

5858
<Figure src='visionmagic/simplification-shape-details.png' text="Left to right: gradual reduction of shape details"/>
5959

@@ -96,6 +96,18 @@ Simplification Parameters: Shape Details = 27983, Fidelity = 51256, Color Level
9696
Photoshop ‘Oil Paint’ filter: Stylization = 0.1, Cleanliness = 10.0, Scale = 0.1, Bristle Detail = 6.5, Light = -60, Shine = 1.0
9797
```
9898

99-
<Figure src='visionmagic/visionmagic-impressionism.png' text="Left: Artwork generated by VisionMagic; Right: Water Lilies Painting by Claude Monet"/>
99+
<Figure src='visionmagic/visionmagic-impressionism.png' text="Left: Artwork generated by Impression; Right: Water Lilies Painting by Claude Monet"/>
100100

101-
Based on photo by <a href="https://unsplash.com/@ravinepz?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Ravi Sharma</a> on <a href="https://unsplash.com/photos/gfP_Cz0MaFs">Unsplash</a>
101+
### Photo Credits
102+
103+
<span>Building photo by <a href="https://unsplash.com/@hernanlucio?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Hernan Lucio</a> on <a href="https://unsplash.com/photos/gJFvHkUHdSI">Unsplash</a></span>
104+
105+
<span>Dog photo by <a href="https://unsplash.com/@elijah_ekdahl?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Elijah Ekdahl</a> on <a href="https://unsplash.com/photos/nt69AC1bSdg">Unsplash</a></span>
106+
107+
<span>Cityscape photo by <a href="https://unsplash.com/@mkd_ie?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Mark Denton</a> on <a href="https://unsplash.com/photos/XH3_OXU3lMk">Unsplash</a></span>
108+
109+
<span>Landscape photo by <a href="https://unsplash.com/@lucabravo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Luca Bravo</a> on <a href="https://unsplash.com/photos/zAjdgNXsMeg">Unsplash</a></span>
110+
111+
<span>Parrot photo by <a href="https://unsplash.com/@sanvedbangale23?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Sanved Bangale</a> on <a href="https://unsplash.com/photos/oSj50kWaU6E">Unsplash</a></span>
112+
113+
<span>Water lily photo by <a href="https://unsplash.com/@ravinepz?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Ravi Sharma</a> on <a href="https://unsplash.com/photos/gfP_Cz0MaFs">Unsplash</a></span>

src/index.mdx

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,17 @@ The goal of Semantic Computer Vision is to allow computers to understand the con
1313

1414
This technology can be embodied in different applications:
1515

16-
## Image simplification and segmentation
16+
## Symbolic Barcode
17+
18+
<img style={{width: 100 + '%'}} src={'public/images/symcode-banner.jpg'}/>
19+
20+
We developed [SymCode](/symcode-docs), a 2D barcode designed to be both human-readable and machine-readable.
21+
22+
## Image Simplification
1723

1824
<img style={{width: 100 + '%'}} src={'public/images/visionmagic-preview.png'}/>
1925

20-
We developed [Impression](/visionmagic-docs), a family of algorithms for image simplification and segmentation. It allows us to control the amount of visual information in an image in a quantitative manner.
26+
We developed [Impression](/impression-docs), a family of algorithms for image simplification and segmentation. It allows us to control the amount of visual information in an image in a quantitative manner.
2127

2228
## Image Vectorization
2329

@@ -29,21 +35,13 @@ We developed [VTracer](//www.visioncortex.org/vtracer/), a utility to convert ra
2935

3036
<img style={{width: 100 + '%'}} src={'public/images/forest-layering.svg'}/>
3137

32-
We are developing a new Optical Character Recognition (OCR) engine from the ground up specifically for pictorial languages like Chinese, Korean and Japanese (CKJ). There are several aspects we would like to push the state of the art forward:
33-
34-
1. Improve recognition accuracy on Chinese, Korean and Japanese
35-
36-
2. Extract text from complex graphics
37-
38-
3. Recognize text in wide range of font sizes, families and styles
39-
40-
4. Deliver contextual information like paragraphing and font style
38+
We are developing a new Optical Character Recognition (OCR) engine from the ground up specifically for pictorial languages like Chinese, Korean and Japanese (CKJ).
4139

4240
## About Us
4341

44-
The research group is led by alumnus [Chris Tsang](//github.com/tyt2y3) conjoining with several students and alumni from [Hong Kong University of Science and Technology](//www.ust.hk): [Billy Chan](//github.com/billy1624), [Hill Tse
45-
](//github.com/hilltse) and [Sanford Pun](//github.com/shpun817).
42+
The research group is led by alumnus [Chris Tsang](//github.com/tyt2y3) conjoining with several students and alumni from [Hong Kong University of Science and Technology](//www.ust.hk): [Sanford Pun](//github.com/shpun817), [Hill Tse
43+
](//github.com/hilltse) and [Billy Chan](//github.com/billy1624).
4644

47-
We are actively looking for researchers and developers to engage in this R & D project. If you are interested in doing a FYP or thesis related to this topic, let's get [in touch](mailto:info@thf.technology) immediately.
45+
We are actively looking for researchers and developers to engage in this R & D project. If you are interested in doing a FYP or thesis related to this topic, let's get [in touch](mailto:info@thf.technology).
4846

49-
We promise to release the eventual outcome of this project as open source software under a permissive license and continue to develop and maintain it over the years to come.
47+
We promise to release the eventual outcome of this project as open source software and continue to develop it over the years to come.

src/reversi.mdx

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
---
2+
name: Reversi Code
3+
route: /reversi-docs
4+
hidden: true
5+
---
6+
7+
import { Figure } from './components/Figure'
8+
9+
# The Reversi Code
10+
11+
Author: [Chris Tsang](//github.com/tyt2y3) | Published: 2021-04-01
12+
13+
-----
14+
15+
All we know about the barcode that somehow resembles a Reversi game.
16+
17+
<Figure text='The first Amazon Go store, Downtown Seattle' src='symcode/The_first_Amazon_Go_store,_Downtown_Seattle_(49005185111).jpg'/>
18+
19+
> Photo by GoToVan via [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:The_first_Amazon_Go_store,_Downtown_Seattle_(49005185111).jpg)
20+
21+
Disclaimer: I have never been to an Amazon Go store myself. All samples are collected from the internet, and I merely compiled my observations as below. I never received any hints from anyone related to Amazon, so my design and analysis of the Reversi Code is 'clean room'.
22+
23+
```
24+
057
25+
⚫🔷⚪⚫⚫⚫
26+
⚪⚪⚫⚫⚫⚫
27+
⚫⚪⚫⚫🔷⚫
28+
⚪🔷⚫⚪⚪⚫
29+
```
30+
31+
```
32+
206
33+
⚫⚪⚫⚪⚫⚪
34+
⚫⚫⚪🔷⚪⚫
35+
⚫⚫⚪⚫⚪⚫
36+
🔷⚫⚪⚪⚫🔷
37+
```
38+
39+
```
40+
268
41+
⚫⚫⚫⚫⚫⚫
42+
🔷🔷⚪⚫🔷⚫
43+
⚫⚪⚫⚪⚪⚫
44+
⚪⚫⚪⚪⚫⚫
45+
```
46+
47+
```
48+
322
49+
⚫🔷⚪⚪⚫⚫
50+
⚪⚪⚫⚪⚫⚫
51+
⚫⚪🔷⚪⚫🔷
52+
⚪⚫⚫⚪⚫⚫
53+
```
54+
55+
```
56+
508
57+
⚫⚪⚫⚪⚫⚪
58+
⚫⚫⚫⚫⚫⚫
59+
⚫⚫🔷🔷⚪⚪
60+
⚫🔷⚪⚪⚫⚫
61+
```
62+
63+
```
64+
520
65+
⚫⚫⚫⚪⚫⚫
66+
⚪⚫⚫⚪⚪⚫
67+
⚫⚫⚫🔷⚫⚫
68+
⚪🔷⚪⚫⚪🔷
69+
```
70+
71+
```
72+
628
73+
⚫⚫⚪⚫⚫⚫
74+
⚪⚪⚫⚫⚪⚫
75+
🔷⚪⚫⚪⚫🔷
76+
⚪⚫🔷⚫⚫⚫
77+
```
78+
79+
```
80+
974
81+
🔷⚫⚫⚫🔷⚫
82+
⚪⚪⚪⚫⚫⚫
83+
⚫⚪⚫⚫⚪⚫
84+
⚪⚫⚪⚪⚪🔷
85+
```
86+
87+
```
88+
906
89+
🔷⚫⚫⚪⚫⚫
90+
⚪⚫⚪⚪⚫⚫
91+
⚫⚫⚪⚪⚪⚫
92+
⚪🔷⚫⚫⚪🔷
93+
```
94+
95+
```
96+
445
97+
🔷⚫⚪⚪⚫⚫
98+
⚫⚪⚪⚪⚫⚫
99+
⚫⚫⚪⚪⚫⚫
100+
⚪⚫🔷⚫⚪🔷
101+
```
102+
103+
104+
105+
Observations:
106+
107+
1. The matrix is 6x4.
108+
109+
2. There are exactly three diamonds, which can be placed anywhere on the matrix.
110+
111+
3. 15 to 17 of them are occupied by circles or diamonds, meaning there are 12 to 14 circles.
112+
113+
4. If we number the modules from top left to bottom right, as in
114+
115+
```
116+
0 1 2 3 4 5
117+
6 7 8 9 10 11
118+
12 13 14 15 16 17
119+
18 19 20 21 22 23
120+
```
121+
122+
The 0th, 4th, 11th, 12th, 19th and 23rd module are always occupied. My guess is they act as a timing pattern.
123+
124+
5. Either 5th or 18th module is occupied, but never both, my guess is they act as an orientation marker (otherwise the code will be rotational symmetric with itself).
125+
126+
6. The remaining 16 positions can freely toggle. Due to #3, 8 to 10 of them must be occupied.
127+
128+
7. There are (16 choose 8) + (16 choose 9) + (16 choose 10) = 32318 combinations.
129+
130+
8. The diamonds can be put on any occupied position, so it multiplies an extra (17 choose 3) + (16 choose 3) + (15 choose 3) = 1695 combinations.
131+
132+
9. It results in 54779010 combinations, just above 2^25 = 33554432
133+
Which is reasonable enough, as it is a 6x4 matrix with a little extra freedom.
134+
135+
10. If we set aside 5 bits as redundancy, then the Reversi Code can encode 20 bits payload. This is a reasonable guess in the sense that 20% redundancy provides good error detection capability.
136+
137+
11. This is merely a combinatorial analysis representing the theoretic capacity of the barcode. Even given answers of the payload, it is extremely hard to reverse engineer the complete encoding scheme.
138+
139+
12. There is a decimal number above every barcode on each label. From the layout of the label, we believe that it ranges from 000 to 999. It may or may not directly corresponds to the numeric value of the barcode.
140+
141+
Now, we can engineer a barcode that looks exactly the same, but encode data in a different way.

0 commit comments

Comments
 (0)