Team:Peking/Image.html
Home
Basic principles of visualization
According to an article published by Church in 2017, there are two basic logics for using bases to encode images. One is "one-one mapping". In simple terms, it is to use one base to correspond to one color. The advantage of this method is that it is simple and not easy to make mistakes. One more or one less oligo has less impact on the encoding. The shortcomings are obvious, the color and form are too monotonous, and the GC content cannot be controlled. The other method is relatively complicated. To formulate a "color codon table" similar to a "codon table", specifically, you must first formulate a coding rule, using a few bases to represent a color. The advantage of this method is that it is helpful for error correction, and it can design codon similar to the stop codon. It provides a strong guarantee for the stability, logic and diversity of coding rules.
| Brief description | Benefits | Drawbacks | |
|---|---|---|---|
| One-one mapping | use one base to correspond to one color | simple, less error | GC content beyond control |
| Color codon table | similar to a "codon table" | helpful for error correction, "stop codon" | pending optimization and experimental verification |
Exploratory attempt
Graticule
Design ideas
We had a one-to-one correspondence between bases and colors on the canvas, hoping to find some rules.
Theory
We used the most basic image coding principle, "one-one mapping" between bases and colors.
Methods
First, we determined the correspondence between bases and colors, then selected four colors to correspond to the four bases. Then divided the page into small grids on canvas of a certain size, and filled the page with colors according to the base sequence and the corresponding relationship.
Design sketch
Conclusion
This was a preliminary attempt. we hoped to find the difference between the base-generated grid and the random number-generated grid, but in fact, the effect presented is rather messy. This provided an idea for our future work and is also the guiding ideology for visualization. "Beauty follows certain rules." Random generation may produce some interesting results, but certain coding rules must be established first and this is the premise.
Mondrian style
Design ideas
The inspiration for this attempt came from Mondrian's creative style. Mondrian has come to mean Modernism. His name and his work sum up the High Modernist ideal. Mondrian's art was highly utopian and was concerned with a search for universal values and aesthetics. His art, however, always remained rooted in nature. We wanted to use bases from nature as raw materials to try to reproduce this master's work.
Pieter Cornelis Mondrian, after 1906 Piet Mondrian , was a Dutch painter and theoretician who is regarded as one of the greatest artists of the 20th century. He is known for being one of the pioneers of 20th-century abstract art, as he changed his artistic direction from figurative painting to an increasingly abstract style, until he reached a point where his artistic vocabulary was reduced to simple geometric elements.
Theory
Use color tables to introduce codons to the canvas
Methods
First, we formulated a color table to associate the base sequence with the color. Therefore, the DNA sequence was converted into 64 colors, and the information was contained in their RGB color numbers: ['#340F30', '#C25589', '#F35DC8', '#165D70', '#531F71', '#D41F62', '#015675', '#37CCFD', '#C3DC78', '#212F00', '#94A940', '#545749', '#27C024', '#A75A9F', '#A08975', '#2495C9', '#47DD60', '#75560C', '#4A8C62', '#1C0BE2', '#C95583', '#3781EA', '#C3D474', '#830309', '#155580', '#C72F42', '#48322D', '#E70D43', '#570F71', '#2A5D41', '#306CD4', '#03D171', '#540C31', '#F02165', '#F22017', '#C12091', '#098881', '#D12147', '#E32020', '#0C1F06', '#035096', '#005322', '#085C31', '#F0DD60', '#938CA1', '#460801', '#26817E', '#C7EA75', '#954A32', '#0A14A7', '#688819', '#E65640', '#C6A0B0', '#0CCCA1', '#1F7965', '#CD5D08', '#E79F45', '#222F47', '#C70912', '#022862', '#862862', '#4C0000', '#000000', '#000000']. Finally, according to the written code, these colors were converted into Mondrian images.
Design sketch
The Koch snowflake
Design ideas
This was a preliminary attempt to link DNA storage with fractal functions, using changes in the Koch snowflake orders to reflect base information.
Theory
The Koch snowflake (also known as the Koch curve, Koch star, or Koch island) is a fractal curve and one of the earliest fractals to have been described. It is based on the Koch curve, which appeared in a 1904 paper titled "On a Continuous Curve Without Tangents, Constructible from Elementary Geometry" by the Swedish mathematician Helge von Koch.
The Koch snowflake can be built up iteratively, in a sequence of stages. The first stage is an equilateral triangle, and each successive stage is formed by adding outward bends to each side of the previous stage, making smaller equilateral triangles. The areas enclosed by the successive stages in the construction of the snowflake converge to times the area of the original triangle, while the perimeters of the successive stages increase without bound. Consequently, the snowflake encloses a finite area, but has an infinite perimeter.
Methods
The idea of coding was very simple, which was to use the orders change of the Koch curve to display the information of different bases in the current base sequence. Starting from the Koch curve of order 15, A = unchanged; G = one step up; C = two steps up; T = one step down.
When the order reached 25, C= two orders down; when the order reached 5, C= two orders up. When encountering a sudden change, a Koch curve with an order equal to infinity appeared.
However, during operation, it can be found that the change from order 0 to order 5 is very obvious, but after all, this change will become more and more subtle, which is invisible to the naked eye. So, this plan is temporarily shelved.
Design sketch
The Julia set
Design ideas
The fractal function is used to represent the base sequence, and different bases correspond to the changes of the parameters in the fractal function. Unify the beauty of mathematics and the beauty of life.
Theory
The concept of fractal was first proposed by B.B. Mandelbrot. In 1967, he published a famous paper entitled "How Long is the British Coastline?" in Science. In this article, he called those shapes whose parts are similar to the whole in some way as fractals.
In the context of complex dynamics, a topic of mathematics, the Julia set and the Fatou set are two complementary sets (Julia "laces" and Fatou "dusts") defined from a function. The Julia set of a function f is commonly denoted J(f), and the Fatou set is denoted F(f). These sets are named after the French mathematicians Gaston Julia and Pierre Fatou whose work began the study of complex dynamics during the early 20th century.
A very popular complex dynamical system is given by the family of complex quadratic polynomials, a special case of rational maps. Such quadratic polynomials can be expressed as 
where c is a complex parameter. Fix some R>0 large enough that 
. (For example, if is in the Mandelbrot set, then 
, so we may simply let R=2.) Then the filled Julia set for this system is the subset of the complex plane given by
where 
is the nth iterate of 
. The Julia set of this function is the boundary of 
.
Pseudocode for multi-Julia sets: 
Specify the c value in the Julia set at fill_value=c. As long as you use different c values, you can generate different sets.
Methods
First, we needed to formulate rules to constrain the pattern. This is the specific rule: A represents the value of c +0.3; T represents -0.3; C represents +0.3i; G represents -0.3i. Then determine the initial value of c, bring in the parameters and see the generated effect. It can be seen that the pattern generated after the c value increases will be more beautiful. Then integrate the Julia fractal patterns corresponding to each base to make a video, and add transition frames in the middle to increase coherence. Finally, regarding the overall effect, where a mutation occurs, a range of tens of bases is set, and a certain c value is set to highlight the base change.
Simply put, the idea of visualization is to linearly change the key parameters of Julia's sequence to produce a typing animation that rhythmically follows the DNA sequence.
The combination of visualization and music
Design ideas
Our visualization coding methods and music coding methods are constantly improving, but the two aspects of work are parallel and have not been crossed. This is the first attempt to combine visualization with music.
Theory
To combine visualization and music, we chose a relatively simple way of encoding music as a reference to adjust the visualization encoding rules.
Methods
The demo we chose is coded by 720 bases. The previous 72 bases are used as an example to illustrate the specific coding rules. At the same time, according to music coding rules, every 12 bases are divided into a group.
-AGTAAAGGAGAA
-GAACTTTTCACT
-GGAGTTGTGACA
-ATTCTTGTTGAA
-TTAGATGGTGAT
-GTTAATGGTCAC-
According to the rules of music, the first eight bits of the encoding are only A and T bases, so replace CG with AT, and segment 12=3+2+3+4.
-ATT-AA-ATT-AGAA-
-TAA-AT-TTT-CACT-
-TTA-TT-TTT-GACA-
-ATT-AT-TTT-TGAA-
-TTA-TA-TTT-TGAT-
-TTT-AA-TTT-TCAC-
Every 12 digits are a note in music and a basic segment in animation. The last four digits represent the pitch of the notes in the music, and the changes in the basic segment in the animation. The 6-8 bits represent the length of the note in music (from full length to 1/64), and the length of the basic segment in animation (from 256 to 4 frames). The 4-5 digits represent four kinds of floating points in the music, including original length, floating-point (note duration +50%), complex floating-point (note duration +75%), rest. It also represents a floating-point in animation, which will Increase the frame number of the clip by 50% or 75% or make the clip static. The first three represent eight levels of notes in music, eight color combinations represent basic segments in animation.
[[7, 16], 64, '0100']
[[13, 20], 6, '1110']
[[16, 14], 0, '0011']
[[7, 16], 6, '0110']
[[16, 14], 7, '1111']
[[17, 6], 4, '2000']
[Volume, duration, pitch]----a note
[Color, frame, change]----a picture
Design sketch
Achievement exhibition
Elements combination
Design ideas
The previous work has accumulated some programming experience for us. At the same time, we read a lot of literature and aesthetics books, and came up with two new ideas. One is the combination of different elements, that is, regular geometric elements or non-geometric elements are placed on the canvas according to certain rules. The other is the art of "splicing", which replaces bases with geometric figures and closely splices them on the canvas.
Theory
Different bases correspond to different geometric elements, so each element in the image corresponds to the dual information of a single base and corresponding position.
Methods
The elements have random sizes; blanks inserted randomly in the image (freely defined, similar to "nonsense" bases) in the image when the base sequence is unchanged, to avoid the elements being piled together without aesthetic feeling, to achieve patchwork the effect of (there are 700 bases in the example image). As long as you change different material pictures, you can quickly generate brand new renderings (average speed 1 frame/sec). Besides, we have drawn a specific background and selected appropriate elements to give the image more meaning.
Design sketch
The art of "splicing"
Design ideas
We used geometric figures to represent different bases and stitched them together closely on the canvas.
Design sketch
Letters art
Design ideas
We use base letters to compose images of corresponding organs, animals, or people; this method can be used to draw "face maps" or "hand maps" of individual genes.
Design sketch
Ink bamboo
Design ideas
We combine traditional Chinese art with DNA. First, we simulate the handwriting of the brush, then specify the rules that will reflect the genetic code in the ink painting.
Methods
Generating the xuanzhi texture
Xuanzhi is a traditional Chinese type of paper on which Chinese paintings are usually created. To best mimicry effect of ink on paper, we designed a two-step procedure to generate the xuanzhi texture. For the first step, evenly-distributed noise is applied to vertically or horizontally arranged sine wave patterns, producing texture a (Fig1.A(a)). Subsequently, the weighted summation is performed on texture a, b and c, where b is a sine wave pattern with a top-left to bottom-right or top-right to bottom-left direction, and c is a completely white background. This gives textured, which is the xuanzhi texture we expected. In this stage, all the random generation work is done by random.random() provided by NumPy.
Defining the maobi brush
Maobi is a common tool for traditional Chinese painting. It is the tool that gives Chinese painting an abundant diversity. To approximate most of the common effects that maobi produces on xuanzhi, we defined a brush called maobi. Maobi consists of n*n hairs, each represented by a real number in [0, 1] in an n*n matrix L, with this number standing for the length of the hair. Especially,
where i, j are indices for elements in the matrix, r the radius of maobi, and h the expected length of the longest hair. To apply maobi to xuanzhi, we multiply each of its element with the element's counterpart on xuanzhi. To add diversity to this system, we defined the transformation of maobi with several other parameters as listed in table 1. Some items in the table are also demonstrated in Fig2-4-1.B.
| Name | Description |
|---|---|
| apex angle | The apex direction of the matrix L, with up as 0 degree and increases clockwise. |
| apex | The apex distance of the matrix L, together with apex angle defines a transformation that paints lines taking each element as the start point and ends at the length of apex, toward direction apex angle. |
| conc | The concentration of ink. |
| ink | The amount of ink used. More ink increases the possibility that transformed hair paint on xuanzhi. |
| offset_a | The displace direction of the matrix L, with up as 0 degree and increases clockwise. |
| offset_d | The displace distance of the matrix L, together with offset_a defines a transformation that increases the length of hair in direction of offset_a and shortens hair at the opposite. |
| strength | The strike strength of maobi. Larger strength and shorter hair get involved. |
Testing performance of maobi and xuanzhi
To assess whether our design is suitable for creating traditional Chinese painting-like works, we tried calligraphy creation with maobi and xuanzhi. We defined path and parameter changes for maobi, and it produces heng and double shu of different styles easily (Fig2-4-2.C).
A. Texture a, b and c were created, following weighted summation, which produces final texture, d.
B. Demonstration of strength, apex and offset_d. (a)(b) shows variation of the brush as strength increases from left to right, while offset_d. increases from top to bottom, (a) with apex = 0 and (b) with apex twice the size of the radius.
C. Assessment with calibration. (a)(b)(c) shows the track that the center of the brush follows (blue) and the result. (d) shows that the combination of tracks creates more complex structures, like caozitou.
The building blocks of bamboo
Trunk
We wrote a path to draw an adjustable parameter for a single bamboo trunk, with some code adjustments. A section of bamboo is controlled by 5 groups of parameters. The results are as follows:fig2-4-4
Slub
To completely solve this problem, we need to write the Bessel curve interpolation, although the Bessel curve itself is not difficult to write, the previous generation of many frames of code and the definition of the class frame has been greatly changed. However, after adjusting the path and finding a different style of bamboo more attractive, the Bessel curve was not written for the moment.
Leaf and Branch
Bamboo leaves are more difficult to draw. If you want to make the bamboo leaves appear natural, then higher interpolation is better. But here we have a linear interpolation that works as expected.
And finally the little twigs. This can be done by borrowing the path template that drew the trunk and making a few changes to the parameters.
Painting bamboo
Trunk
The first step is to locate the base of the bamboo in the picture. They should be at the bottom of the canvas, but the horizontal axis can be placed randomly. The effect is as follows, but the bamboo knot is relatively short, should be adjusted a little longer.
And then it goes in the direction that the base is pointing to, and it draws pieces of bamboo. Each section to control the color, length, but also to ensure a certain degree of randomness.
Slub
To draw a bamboo node is to record the position of the gap between two bamboo nodes, then draw a picture in this position and adjust it by using a series of random numbers as parameters. It's easy, but it's a hassle to adjust. The waiting time for the program to run was too long, so we decided to draw only one bamboo. When finished, we replaced it with three bamboos and got the following result.
Branch
Next, create bamboo sticks. we wrote a functioning branch() based on the Angle, number, and length of the branching part of the seed generation. So we can use it to draw bamboo sticks and leaves that look more natural. Use this method to make a few separate branches.
Then adjust the parameters according to the effect. Here is a satisfactory effect.
Leaf
According to the number of bamboo leaves, a cluster of bamboo leaves can be divided into three categories: "人", "个" and "介". Using the previous method, the effect of a cluster of bamboo leaves is as follows.
Adjust the relative size and shape of bamboo leaves, and finally draw with existing components.
Design sketch
The following are works in which we use ink bamboo to record biological genetic information.
