Reflection: CCV type-3
After 5 days, I basically understood the using of p5.js 😃, so I continually refine the idea about visualisation of CC (Chinese Character). To definitely show the differences of characters, I chose Strokes counts to generate points and lines. In this article I will describe most progress and details.
Point & Line
As my early experiments, the words were analysed and render as SVG shape, and these shapes are similar with real symbol of tone. It can clearly show the tone of words, but my expectation is not only show Tone of word. Individual elements should connect each other, as same as the composition of sentence is words.
To express the composition of sentence, I decided to use Lines as the format of compose. Which means every words will be translated to individual elements, and they connect and group as lines.
Now, I would like to remember the process of create lines.
Thinking process/ methodology
Two points can be connected as a line. (两点一线)
It is really clear, a creation of line in computer, should have two points, and each point should be marked as X & Y. Therefore, I should provide X1,X2,Y1,Y2 to draw a line in programmer.
line(x1,y1,x2,y2)
So, I tried to make groups of points, which base on Stroke of count.
CCV type-2
Here is the first outcome of Points, the quantity of points equal the strokes count of word.
To be honest, it is really simple, even ugly. However, the only reason I did that is, I try to successfully create right counts of point.
CCV type-2+
Next step, I connected every points, by lines. There are many developments on logical stage, I will list that but it is so complex to clarify every things(太懒了，解释不清):
- Wrap 换行
- Javascript Object
- Loop render 实时渲染
Actually, it is more ugly than I did before. Firstly, black is too thick when it shows on dense lines. Secondly, the order of points is too regular, so these lines create many sharp negative room, which make too strong contrast. So bad. 辣眼睛啊.
CCV type-3. Curve! Bezier curve!
To save my ** thick work, I decided to use curve, beautiful curve. Different with hand-draw curve, computer actually not good at draw curve. Thank for great mathematicians,(对不起，王老师，杨老师，熊老师我没学好数学) we indeed have method to let computer render curve. One of that, is Bezier curve**. It means, we can set handles to control the curve of line.
Bezier Curve edit tool
bezierCurve(x1,y1,x2,y2,x3,y3,x4,y4)
//x2,y2;x3,y3; mean the points of handle.
Decoration
As MA IVM student, it is impossible to work without decoration. Actually, not only decoration, but also for better interaction and communication of user. In this step, I begin to consider the outlook of webpage, such as colour, layout, interaction and performance.
colour
I changed the colour of background to show more strong curves.
download original image on Dropbox
layout
Currently, there are some questions need to develop:
- Input might be available to move with viewpoint, so user can preview the image when they are typing.
- Button extremely need to improve! Difficult to understand, ugly style. 天啊.
- Poem bank should be easier to use, and I might be should add more one box to show the content, so user can save more time.