-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
190 lines (154 loc) · 32.6 KB
/
index.html
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<!-- saved from url=(0021)http://weavesilk.com/ -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<!-- affiliate-data=myAffiliateData, app-argument=myURL -->
<!-- <meta name="apple-itunes-app" content="app-id=436590129"> -->
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta property="og:image" content="images/silk_thumb.png">
<link rel="image_src" type="image/png" href="images/silk_thumb.png">
<meta property="og:description" content="Create beautiful flowing art with Silk.">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/ss-social.css">
<link rel="stylesheet" href="css/site.css">
<script src="javascript/jquery-1.8.1.min.js"></script>
<script src="javascript/jquery.fullscreen.js"></script>
<script src="javascript/underscore.min.js"></script>
<script src="javascript/knockout-2.2.0.min.js"></script>
<script src="javascript/d3.v3.min.js"></script>
<script src="javascript/keymaster.js"></script>
<script src="javascript/noise.js"></script>
<script src="javascript/detect.js"></script>
<script src="javascript/site.js"></script>
<title>Silk – Interactive Generative Art</title>
<script type="text/javascript" async="" src="javascript/html.js"></script>
<script type="text/javascript" async="" src="javascript/in.php"></script>
</head>
<body data-bind="css: { 'iphone': isIPhone, 'right-side-up': isRightSideUp, 'silk-active': silkActive, 'mouse-over-previewable-controls': mouseOverControls, 'mouse-down-on-slider': mouseDownOnSlider }" class="">
<div id="canvii-container">
<div id="main-controls" class="controls-container">
<div class="row btn-row share-btn-row">
<div class="btn" id="btn-new" data-bind="click: clear, css: { visible: notPristine }">
<span class="text">新建</span>
</div>
<div class="btn" id="btn-new" onclick="window.location.href='/'" data-bind="css: { visible: notPristine }">
<span class="text">返回</span>
</div>
</div>
<div class="row">
<div class="btn silk-icon visible" data-bind="click: toggleFullscreen, css: { visible: notPristine }">
<div class="contents"><i class="icon-fullscreen"></i></div>
<div class="tt" data-bind="visible: isFullscreen" style="display: none;">取消全屏</div>
<div class="tt" data-bind="visible: isNotFullscreen">全屏</div>
</div>
<div class="btn silk-icon visible" data-bind="click: download, css: { visible: notPristine }">
<div class="contents"><i class="icon-camera"></i></div>
<div class="tt">保存</div>
</div>
<div class="btn silk-icon visible" id="selected-color-icon" data-bind="click: toggleAllControls, css: { visible: notPristine }" style="color: rgb(130, 206, 252);">
<div class="contents"><i class="icon-circle"></i></div>
<div class="tt">操作</div>
</div>
<div class="btn silk-icon visible" data-bind="click: undo, css: { visible: notPristine, 'flip-icon': nextUndoIsRedo }">
<div class="contents"><i class="icon-undo"></i></div>
<div class="tt" data-bind="visible: nextUndoIsNotRedo">取消</div>
<div class="tt" data-bind="visible: nextUndoIsRedo" style="display: none;">重做</div>
</div>
</div>
<div class="row controls-row download-row" data-bind="css: { visible: showDownload }">
<p class="instructions">如果你要保存，请右击下面的图片，然后点击“<em>图片另存为...</em>”。</p>
<img id="download-image">
</div>
<div class="row controls-row color-and-symmetry-row" data-bind="css: { visible: showColorPicker }">
<svg id="colorpicker">
<g><path clip-path="url(#1)" style="fill: url(#2);" class="selected" d="M189.5,87.5L189.16758519606873,91.72373055608624L188.17852593996915,95.84345884812357L186.55717615308595,99.75774349296776L184.3434588481236,103.37020181189678L181.5918830920368,106.59188309203678L178.37020181189678,109.34345884812359L174.75774349296776,111.55717615308593L170.8434588481236,113.17852593996915L166.72373055608622,114.16758519606873L162.5,114.5L158.27626944391375,114.16758519606871L154.1565411518764,113.17852593996915L150.24225650703224,111.55717615308593L146.62979818810322,109.34345884812359L143.40811690796323,106.59188309203678L140.6565411518764,103.37020181189678L138.44282384691408,99.75774349296776L136.82147406003085,95.84345884812359L135.83241480393127,91.72373055608624L135.5,87.5L135.83241480393127,83.27626944391378L136.82147406003085,79.15654115187641L138.44282384691405,75.24225650703225L140.6565411518764,71.62979818810322L143.4081169079632,68.40811690796322L146.62979818810322,65.65654115187643L150.24225650703224,63.44282384691407L154.1565411518764,61.82147406003085L158.27626944391375,60.832414803931286L162.5,60.5L166.72373055608622,60.83241480393128L170.8434588481236,61.82147406003085L174.75774349296776,63.44282384691407L178.37020181189678,65.65654115187641L181.59188309203677,68.4081169079632L184.3434588481236,71.62979818810322L186.55717615308592,75.24225650703224L188.17852593996915,79.15654115187641L189.16758519606873,83.27626944391376Z"></path><path clip-path="url(#3)" style="fill: url(#4);" d="M157,143.7916512459885L156.66758519606873,148.01538180207473L155.67852593996915,152.1351100941121L154.05717615308595,156.04939473895627L151.8434588481236,159.66185305788528L149.0918830920368,162.8835343380253L145.87020181189678,165.6351100941121L142.25774349296776,167.84882739907442L138.3434588481236,169.47017718595765L134.22373055608622,170.45923644205723L130,170.7916512459885L125.77626944391376,170.45923644205723L121.65654115187643,169.47017718595765L117.74225650703224,167.84882739907442L114.12979818810322,165.6351100941121L110.90811690796322,162.8835343380253L108.15654115187641,159.66185305788528L105.94282384691407,156.04939473895627L104.32147406003085,152.1351100941121L103.33241480393129,148.01538180207473L103,143.7916512459885L103.33241480393127,139.56792068990228L104.32147406003085,135.44819239786491L105.94282384691405,131.53390775302074L108.15654115187641,127.92144943409173L110.9081169079632,124.69976815395172L114.12979818810322,121.94819239786493L117.74225650703224,119.73447509290257L121.65654115187641,118.11312530601936L125.77626944391376,117.12406604991979L130,116.7916512459885L134.22373055608622,117.12406604991978L138.3434588481236,118.11312530601936L142.25774349296776,119.73447509290257L145.87020181189678,121.94819239786491L149.09188309203677,124.69976815395171L151.8434588481236,127.92144943409173L154.05717615308592,131.53390775302074L155.67852593996915,135.44819239786491L156.66758519606873,139.56792068990225Z"></path><path clip-path="url(#5)" style="fill: url(#6);" d="M92.00000000000001,143.79165124598853L91.66758519606873,148.01538180207476L90.67852593996916,152.13511009411212L89.05717615308595,156.0493947389563L86.84345884812359,159.6618530578853L84.0918830920368,162.8835343380253L80.87020181189679,165.63511009411212L77.25774349296778,167.84882739907445L73.34345884812359,169.47017718595768L69.22373055608625,170.45923644205726L65.00000000000001,170.79165124598853L60.776269443913776,170.45923644205726L56.65654115187644,169.47017718595768L52.74225650703225,167.84882739907448L49.129798188103244,165.63511009411212L45.90811690796323,162.88353433802533L43.15654115187643,159.6618530578853L40.94282384691408,156.0493947389563L39.321474060030866,152.13511009411212L38.3324148039313,148.01538180207476L38.000000000000014,143.79165124598853L38.33241480393129,139.5679206899023L39.321474060030866,135.44819239786494L40.942823846914074,131.5339077530208L43.15654115187643,127.92144943409176L45.908116907963226,124.69976815395175L49.12979818810324,121.94819239786496L52.742256507032245,119.7344750929026L56.65654115187643,118.11312530601938L60.776269443913776,117.12406604991982L65.00000000000001,116.79165124598853L69.22373055608624,117.1240660499198L73.34345884812359,118.11312530601938L77.25774349296778,119.7344750929026L80.87020181189678,121.94819239786494L84.0918830920368,124.69976815395174L86.84345884812359,127.92144943409176L89.05717615308595,131.53390775302077L90.67852593996916,135.44819239786494L91.66758519606873,139.56792068990228Z"></path><path clip-path="url(#7)" style="fill: url(#8);" d="M59.5,87.50000000000001L59.16758519606872,91.72373055608625L58.17852593996915,95.84345884812359L56.55717615308593,99.75774349296778L54.34345884812358,103.37020181189679L51.59188309203678,106.5918830920368L48.37020181189678,109.34345884812359L44.75774349296776,111.55717615308595L40.84345884812358,113.17852593996916L36.72373055608624,114.16758519606873L32.5,114.50000000000001L28.276269443913762,114.16758519606873L24.15654115187642,113.17852593996916L20.242256507032238,111.55717615308595L16.62979818810323,109.34345884812359L13.408116907963219,106.5918830920368L10.656541151876418,103.37020181189679L8.44282384691407,99.75774349296778L6.821474060030855,95.84345884812359L5.832414803931282,91.72373055608625L5.5,87.50000000000001L5.832414803931279,83.27626944391379L6.821474060030855,79.15654115187643L8.44282384691406,75.24225650703227L10.656541151876418,71.62979818810324L13.408116907963212,68.40811690796323L16.629798188103223,65.65654115187644L20.24225650703223,63.44282384691408L24.156541151876418,61.821474060030866L28.276269443913762,60.8324148039313L32.49999999999999,60.500000000000014L36.72373055608623,60.83241480393129L40.843458848123575,61.821474060030866L44.75774349296776,63.44282384691408L48.37020181189677,65.65654115187643L51.59188309203678,68.40811690796323L54.343458848123575,71.62979818810324L56.55717615308593,75.24225650703225L58.17852593996915,79.15654115187643L59.167585196068714,83.27626944391378Z"></path><path clip-path="url(#9)" style="fill: url(#10);" d="M91.99999999999997,31.208348754011503L91.6675851960687,35.432079310097734L90.67852593996912,39.551807602135085L89.0571761530859,43.466092246979265L86.84345884812356,47.07855056590828L84.09188309203675,50.300231846048284L80.87020181189675,53.051807602135085L77.25774349296773,55.26552490709743L73.34345884812356,56.886874693980644L69.22373055608621,57.875933950080224L64.99999999999997,58.2083487540115L60.77626944391373,57.875933950080224L56.6565411518764,56.88687469398065L52.74225650703221,55.265524907097436L49.1297981881032,53.051807602135085L45.90811690796319,50.30023184604829L43.15654115187639,47.07855056590828L40.94282384691404,43.46609224697927L39.32147406003082,39.551807602135085L38.33241480393126,35.43207931009774L37.99999999999997,31.208348754011507L38.33241480393125,26.984618197925272L39.32147406003082,22.864889905887914L40.94282384691403,18.950605261043755L43.15654115187639,15.338146942114731L45.90811690796318,12.116465661974722L49.129798188103194,9.364889905887924L52.7422565070322,7.151172600925573L56.65654115187639,5.529822814042358L60.77626944391373,4.540763557942785L64.99999999999997,4.208348754011503L69.2237305560862,4.540763557942782L73.34345884812355,5.529822814042355L77.25774349296773,7.151172600925566L80.87020181189673,9.364889905887917L84.09188309203675,12.116465661974715L86.84345884812355,15.338146942114722L89.0571761530859,18.950605261043734L90.67852593996912,22.864889905887917L91.66758519606869,26.984618197925265Z"></path><path clip-path="url(#11)" style="fill: url(#12);" d="M156.99999999999994,31.20834875401146L156.66758519606867,35.43207931009769L155.6785259399691,39.55180760213504L154.0571761530859,43.46609224697922L151.84345884812353,47.07855056590824L149.09188309203674,50.30023184604824L145.87020181189672,53.05180760213504L142.2577434929677,55.26552490709739L138.34345884812353,56.8868746939806L134.22373055608617,57.87593395008018L129.99999999999994,58.20834875401146L125.7762694439137,57.87593395008018L121.65654115187637,56.88687469398061L117.74225650703218,55.265524907097394L114.12979818810317,53.05180760213504L110.90811690796316,50.30023184604825L108.15654115187635,47.07855056590824L105.94282384691401,43.46609224697923L104.3214740600308,39.55180760213504L103.33241480393123,35.4320793100977L102.99999999999994,31.208348754011464L103.33241480393121,26.98461819792523L104.3214740600308,22.86488990588787L105.942823846914,18.950605261043712L108.15654115187635,15.338146942114689L110.90811690796315,12.11646566197468L114.12979818810317,9.364889905887882L117.74225650703218,7.1511726009255305L121.65654115187635,5.529822814042316L125.7762694439137,4.540763557942743L129.99999999999994,4.20834875401146L134.22373055608617,4.540763557942739L138.34345884812353,5.529822814042312L142.2577434929677,7.151172600925523L145.87020181189672,9.364889905887875L149.0918830920367,12.116465661974672L151.84345884812353,15.33814694211468L154.05717615308586,18.95060526104369L155.6785259399691,22.864889905887875L156.66758519606867,26.984618197925222Z"></path><path clip-path="url(#13)" style="fill: url(#14);" d="M124.5,87.5L124.16758519606873,91.72373055608624L123.17852593996915,95.84345884812357L121.55717615308593,99.75774349296776L119.34345884812359,103.37020181189678L116.59188309203678,106.59188309203678L113.37020181189678,109.34345884812359L109.75774349296776,111.55717615308593L105.84345884812359,113.17852593996915L101.72373055608624,114.16758519606873L97.5,114.5L93.27626944391376,114.16758519606871L89.15654115187643,113.17852593996915L85.24225650703224,111.55717615308593L81.62979818810322,109.34345884812359L78.40811690796322,106.59188309203678L75.65654115187641,103.37020181189678L73.44282384691407,99.75774349296776L71.82147406003085,95.84345884812359L70.83241480393129,91.72373055608624L70.5,87.5L70.83241480393127,83.27626944391378L71.82147406003085,79.15654115187641L73.44282384691405,75.24225650703225L75.65654115187641,71.62979818810322L78.4081169079632,68.40811690796322L81.62979818810322,65.65654115187643L85.24225650703224,63.44282384691407L89.15654115187641,61.82147406003085L93.27626944391376,60.832414803931286L97.5,60.5L101.72373055608622,60.83241480393128L105.84345884812357,61.82147406003085L109.75774349296776,63.44282384691407L113.37020181189676,65.65654115187641L116.59188309203678,68.4081169079632L119.34345884812357,71.62979818810322L121.55717615308593,75.24225650703224L123.17852593996915,79.15654115187641L124.16758519606871,83.27626944391376Z"></path></g><defs><clippath id="1"><path x="162.5" y="87.5" d="M189.5,87.5L189.16758519606873,91.72373055608624L188.17852593996915,95.84345884812357L186.55717615308595,99.75774349296776L184.3434588481236,103.37020181189678L181.5918830920368,106.59188309203678L178.37020181189678,109.34345884812359L174.75774349296776,111.55717615308593L170.8434588481236,113.17852593996915L166.72373055608622,114.16758519606873L162.5,114.5L158.27626944391375,114.16758519606871L154.1565411518764,113.17852593996915L150.24225650703224,111.55717615308593L146.62979818810322,109.34345884812359L143.40811690796323,106.59188309203678L140.6565411518764,103.37020181189678L138.44282384691408,99.75774349296776L136.82147406003085,95.84345884812359L135.83241480393127,91.72373055608624L135.5,87.5L135.83241480393127,83.27626944391378L136.82147406003085,79.15654115187641L138.44282384691405,75.24225650703225L140.6565411518764,71.62979818810322L143.4081169079632,68.40811690796322L146.62979818810322,65.65654115187643L150.24225650703224,63.44282384691407L154.1565411518764,61.82147406003085L158.27626944391375,60.832414803931286L162.5,60.5L166.72373055608622,60.83241480393128L170.8434588481236,61.82147406003085L174.75774349296776,63.44282384691407L178.37020181189678,65.65654115187641L181.59188309203677,68.4081169079632L184.3434588481236,71.62979818810322L186.55717615308592,75.24225650703224L188.17852593996915,79.15654115187641L189.16758519606873,83.27626944391376Z"></path></clippath></defs><defs><lineargradient id="2" x1="50%" y1="100%" x2="50%" y2="0%" spreadMethod="pad"><stop stop-opacity="1" offset="0%" stop-color="#3e95cc"></stop><stop stop-opacity="1" offset="25%" stop-color="#00b1df"></stop><stop stop-opacity="1" offset="50%" stop-color="#00cbcc"></stop><stop stop-opacity="1" offset="75%" stop-color="#00de96"></stop><stop stop-opacity="1" offset="100%" stop-color="#65eb43"></stop></lineargradient></defs><defs><clippath id="3"><path x="130" y="143.7916512459885" d="M157,143.7916512459885L156.66758519606873,148.01538180207473L155.67852593996915,152.1351100941121L154.05717615308595,156.04939473895627L151.8434588481236,159.66185305788528L149.0918830920368,162.8835343380253L145.87020181189678,165.6351100941121L142.25774349296776,167.84882739907442L138.3434588481236,169.47017718595765L134.22373055608622,170.45923644205723L130,170.7916512459885L125.77626944391376,170.45923644205723L121.65654115187643,169.47017718595765L117.74225650703224,167.84882739907442L114.12979818810322,165.6351100941121L110.90811690796322,162.8835343380253L108.15654115187641,159.66185305788528L105.94282384691407,156.04939473895627L104.32147406003085,152.1351100941121L103.33241480393129,148.01538180207473L103,143.7916512459885L103.33241480393127,139.56792068990228L104.32147406003085,135.44819239786491L105.94282384691405,131.53390775302074L108.15654115187641,127.92144943409173L110.9081169079632,124.69976815395172L114.12979818810322,121.94819239786493L117.74225650703224,119.73447509290257L121.65654115187641,118.11312530601936L125.77626944391376,117.12406604991979L130,116.7916512459885L134.22373055608622,117.12406604991978L138.3434588481236,118.11312530601936L142.25774349296776,119.73447509290257L145.87020181189678,121.94819239786491L149.09188309203677,124.69976815395171L151.8434588481236,127.92144943409173L154.05717615308592,131.53390775302074L155.67852593996915,135.44819239786491L156.66758519606873,139.56792068990225Z"></path></clippath></defs><defs><lineargradient id="4" x1="50%" y1="100%" x2="50%" y2="0%" spreadMethod="pad"><stop stop-opacity="1" offset="0%" stop-color="#53bf39"></stop><stop stop-opacity="1" offset="25%" stop-color="#57ca3c"></stop><stop stop-opacity="1" offset="50%" stop-color="#5cd53e"></stop><stop stop-opacity="1" offset="75%" stop-color="#60e041"></stop><stop stop-opacity="1" offset="100%" stop-color="#65eb43"></stop></lineargradient></defs><defs><clippath id="5"><path x="65.00000000000001" y="143.79165124598853" d="M92.00000000000001,143.79165124598853L91.66758519606873,148.01538180207476L90.67852593996916,152.13511009411212L89.05717615308595,156.0493947389563L86.84345884812359,159.6618530578853L84.0918830920368,162.8835343380253L80.87020181189679,165.63511009411212L77.25774349296778,167.84882739907445L73.34345884812359,169.47017718595768L69.22373055608625,170.45923644205726L65.00000000000001,170.79165124598853L60.776269443913776,170.45923644205726L56.65654115187644,169.47017718595768L52.74225650703225,167.84882739907448L49.129798188103244,165.63511009411212L45.90811690796323,162.88353433802533L43.15654115187643,159.6618530578853L40.94282384691408,156.0493947389563L39.321474060030866,152.13511009411212L38.3324148039313,148.01538180207476L38.000000000000014,143.79165124598853L38.33241480393129,139.5679206899023L39.321474060030866,135.44819239786494L40.942823846914074,131.5339077530208L43.15654115187643,127.92144943409176L45.908116907963226,124.69976815395175L49.12979818810324,121.94819239786496L52.742256507032245,119.7344750929026L56.65654115187643,118.11312530601938L60.776269443913776,117.12406604991982L65.00000000000001,116.79165124598853L69.22373055608624,117.1240660499198L73.34345884812359,118.11312530601938L77.25774349296778,119.7344750929026L80.87020181189678,121.94819239786494L84.0918830920368,124.69976815395174L86.84345884812359,127.92144943409176L89.05717615308595,131.53390775302077L90.67852593996916,135.44819239786494L91.66758519606873,139.56792068990228Z"></path></clippath></defs><defs><lineargradient id="6" x1="50%" y1="100%" x2="50%" y2="0%" spreadMethod="pad"><stop stop-opacity="1" offset="0%" stop-color="#e1d730"></stop><stop stop-opacity="1" offset="25%" stop-color="#e8de34"></stop><stop stop-opacity="1" offset="50%" stop-color="#efe438"></stop><stop stop-opacity="1" offset="75%" stop-color="#f6eb3b"></stop><stop stop-opacity="1" offset="100%" stop-color="#fdf23f"></stop></lineargradient></defs><defs><clippath id="7"><path x="32.5" y="87.50000000000001" d="M59.5,87.50000000000001L59.16758519606872,91.72373055608625L58.17852593996915,95.84345884812359L56.55717615308593,99.75774349296778L54.34345884812358,103.37020181189679L51.59188309203678,106.5918830920368L48.37020181189678,109.34345884812359L44.75774349296776,111.55717615308595L40.84345884812358,113.17852593996916L36.72373055608624,114.16758519606873L32.5,114.50000000000001L28.276269443913762,114.16758519606873L24.15654115187642,113.17852593996916L20.242256507032238,111.55717615308595L16.62979818810323,109.34345884812359L13.408116907963219,106.5918830920368L10.656541151876418,103.37020181189679L8.44282384691407,99.75774349296778L6.821474060030855,95.84345884812359L5.832414803931282,91.72373055608625L5.5,87.50000000000001L5.832414803931279,83.27626944391379L6.821474060030855,79.15654115187643L8.44282384691406,75.24225650703227L10.656541151876418,71.62979818810324L13.408116907963212,68.40811690796323L16.629798188103223,65.65654115187644L20.24225650703223,63.44282384691408L24.156541151876418,61.821474060030866L28.276269443913762,60.8324148039313L32.49999999999999,60.500000000000014L36.72373055608623,60.83241480393129L40.843458848123575,61.821474060030866L44.75774349296776,63.44282384691408L48.37020181189677,65.65654115187643L51.59188309203678,68.40811690796323L54.343458848123575,71.62979818810324L56.55717615308593,75.24225650703225L58.17852593996915,79.15654115187643L59.167585196068714,83.27626944391378Z"></path></clippath></defs><defs><lineargradient id="8" x1="50%" y1="100%" x2="50%" y2="0%" spreadMethod="pad"><stop stop-opacity="1" offset="0%" stop-color="#ea5126"></stop><stop stop-opacity="1" offset="25%" stop-color="#ef5a28"></stop><stop stop-opacity="1" offset="50%" stop-color="#f4622a"></stop><stop stop-opacity="1" offset="75%" stop-color="#f86a2c"></stop><stop stop-opacity="1" offset="100%" stop-color="#fd722e"></stop></lineargradient></defs><defs><clippath id="9"><path x="64.99999999999997" y="31.208348754011503" d="M91.99999999999997,31.208348754011503L91.6675851960687,35.432079310097734L90.67852593996912,39.551807602135085L89.0571761530859,43.466092246979265L86.84345884812356,47.07855056590828L84.09188309203675,50.300231846048284L80.87020181189675,53.051807602135085L77.25774349296773,55.26552490709743L73.34345884812356,56.886874693980644L69.22373055608621,57.875933950080224L64.99999999999997,58.2083487540115L60.77626944391373,57.875933950080224L56.6565411518764,56.88687469398065L52.74225650703221,55.265524907097436L49.1297981881032,53.051807602135085L45.90811690796319,50.30023184604829L43.15654115187639,47.07855056590828L40.94282384691404,43.46609224697927L39.32147406003082,39.551807602135085L38.33241480393126,35.43207931009774L37.99999999999997,31.208348754011507L38.33241480393125,26.984618197925272L39.32147406003082,22.864889905887914L40.94282384691403,18.950605261043755L43.15654115187639,15.338146942114731L45.90811690796318,12.116465661974722L49.129798188103194,9.364889905887924L52.7422565070322,7.151172600925573L56.65654115187639,5.529822814042358L60.77626944391373,4.540763557942785L64.99999999999997,4.208348754011503L69.2237305560862,4.540763557942782L73.34345884812355,5.529822814042355L77.25774349296773,7.151172600925566L80.87020181189673,9.364889905887917L84.09188309203675,12.116465661974715L86.84345884812355,15.338146942114722L89.0571761530859,18.950605261043734L90.67852593996912,22.864889905887917L91.66758519606869,26.984618197925265Z"></path></clippath></defs><defs><lineargradient id="10" x1="50%" y1="100%" x2="50%" y2="0%" spreadMethod="pad"><stop stop-opacity="1" offset="0%" stop-color="#db4775"></stop><stop stop-opacity="1" offset="25%" stop-color="#e34d7b"></stop><stop stop-opacity="1" offset="50%" stop-color="#ec5282"></stop><stop stop-opacity="1" offset="75%" stop-color="#f45888"></stop><stop stop-opacity="1" offset="100%" stop-color="#fd5e8f"></stop></lineargradient></defs><defs><clippath id="11"><path x="129.99999999999994" y="31.20834875401146" d="M156.99999999999994,31.20834875401146L156.66758519606867,35.43207931009769L155.6785259399691,39.55180760213504L154.0571761530859,43.46609224697922L151.84345884812353,47.07855056590824L149.09188309203674,50.30023184604824L145.87020181189672,53.05180760213504L142.2577434929677,55.26552490709739L138.34345884812353,56.8868746939806L134.22373055608617,57.87593395008018L129.99999999999994,58.20834875401146L125.7762694439137,57.87593395008018L121.65654115187637,56.88687469398061L117.74225650703218,55.265524907097394L114.12979818810317,53.05180760213504L110.90811690796316,50.30023184604825L108.15654115187635,47.07855056590824L105.94282384691401,43.46609224697923L104.3214740600308,39.55180760213504L103.33241480393123,35.4320793100977L102.99999999999994,31.208348754011464L103.33241480393121,26.98461819792523L104.3214740600308,22.86488990588787L105.942823846914,18.950605261043712L108.15654115187635,15.338146942114689L110.90811690796315,12.11646566197468L114.12979818810317,9.364889905887882L117.74225650703218,7.1511726009255305L121.65654115187635,5.529822814042316L125.7762694439137,4.540763557942743L129.99999999999994,4.20834875401146L134.22373055608617,4.540763557942739L138.34345884812353,5.529822814042312L142.2577434929677,7.151172600925523L145.87020181189672,9.364889905887875L149.0918830920367,12.116465661974672L151.84345884812353,15.33814694211468L154.05717615308586,18.95060526104369L155.6785259399691,22.864889905887875L156.66758519606867,26.984618197925222Z"></path></clippath></defs><defs><lineargradient id="12" x1="50%" y1="100%" x2="50%" y2="0%" spreadMethod="pad"><stop stop-opacity="1" offset="0%" stop-color="#825ba1"></stop><stop stop-opacity="1" offset="25%" stop-color="#8e65af"></stop><stop stop-opacity="1" offset="50%" stop-color="#9b70bd"></stop><stop stop-opacity="1" offset="75%" stop-color="#a87acb"></stop><stop stop-opacity="1" offset="100%" stop-color="#b585da"></stop></lineargradient></defs><defs><clippath id="13"><path x="97.5" y="87.5" d="M124.5,87.5L124.16758519606873,91.72373055608624L123.17852593996915,95.84345884812357L121.55717615308593,99.75774349296776L119.34345884812359,103.37020181189678L116.59188309203678,106.59188309203678L113.37020181189678,109.34345884812359L109.75774349296776,111.55717615308593L105.84345884812359,113.17852593996915L101.72373055608624,114.16758519606873L97.5,114.5L93.27626944391376,114.16758519606871L89.15654115187643,113.17852593996915L85.24225650703224,111.55717615308593L81.62979818810322,109.34345884812359L78.40811690796322,106.59188309203678L75.65654115187641,103.37020181189678L73.44282384691407,99.75774349296776L71.82147406003085,95.84345884812359L70.83241480393129,91.72373055608624L70.5,87.5L70.83241480393127,83.27626944391378L71.82147406003085,79.15654115187641L73.44282384691405,75.24225650703225L75.65654115187641,71.62979818810322L78.4081169079632,68.40811690796322L81.62979818810322,65.65654115187643L85.24225650703224,63.44282384691407L89.15654115187641,61.82147406003085L93.27626944391376,60.832414803931286L97.5,60.5L101.72373055608622,60.83241480393128L105.84345884812357,61.82147406003085L109.75774349296776,63.44282384691407L113.37020181189676,65.65654115187641L116.59188309203678,68.4081169079632L119.34345884812357,71.62979818810322L121.55717615308593,75.24225650703224L123.17852593996915,79.15654115187641L124.16758519606871,83.27626944391376Z"></path></clippath></defs><defs><lineargradient id="14" x1="50%" y1="100%" x2="50%" y2="0%" spreadMethod="pad"><stop stop-opacity="1" offset="0%" stop-color="#555555"></stop><stop stop-opacity="1" offset="25%" stop-color="#5c5c5c"></stop><stop stop-opacity="1" offset="50%" stop-color="#636363"></stop><stop stop-opacity="1" offset="75%" stop-color="#6a6a6a"></stop><stop stop-opacity="1" offset="100%" stop-color="#717171"></stop></lineargradient></defs></svg>
<div class="label" style="text-align: center;">在两个不同的颜色之间拖动可以融合它们</div>
<div id="symmetry-controls">
<div class="one-d slider control" id="sym-num-rotations">
<div class="slider-bg">
<div class="ticks">
<div class="tick one"></div>
<div class="tick two"></div>
<div class="tick three"></div>
<div class="tick four"></div>
<div class="tick five"></div>
<div class="tick six"></div>
</div>
<div class="slider-bg-pc" style="width: 0px;"></div>
</div>
<div class="handle" style="left: 1px;"></div>
<div class="ghost-handle" style="left: 1px;"></div>
</div>
<div id="sym-num-rotations-label" class="label">没有旋转对称</div>
<div class="toggle control" id="toggle-mirror" data-bind="click: toggleMirror, css: { on: mirror }">
<div class="description">镜像对称</div>
<div class="state"><span class="state-on">开</span><span class="state-off">关</span></div>
</div>
<div class="toggle control" id="toggle-spiral" data-bind="click: toggleSpiral, css: { on: spiral }">
<div class="description">中心循环</div>
<div class="state"><span class="state-on">开</span><span class="state-off">关</span></div>
</div>
</div>
</div>
</div>
<div id="sound-and-about" class="controls-container">
<div class="row social-row">
<div class="btn silk-icon visible" id="about-button" data-bind="click: toggleAbout, css: { visible: notPristine }">
<div class="contents">?</div>
<div class="tt">帮助</div>
</div>
<div class="btn silk-icon visible" data-bind="click: toggleMute, css: { visible: notPristine }">
<div class="contents"><i class="icon-volume-off" data-bind="visible: false" style="display: none;"></i><i class="icon-volume-up" data-bind="visible: false" style="display: none;"></i></div>
<div class="tt" data-bind="visible: muted">Muted</div>
<div class="tt" data-bind="visible: notMuted" style="display: none;">Mute</div>
</div>
</div>
<div class="app-link-container row visible" data-bind="css: { visible: notPristine }">
</div>
<div class="row about-row" data-bind="css: { visible: showAbout }">
<p><a href="http://weavesilk.com/">这里</a>进入官方网站(英文版)</p>
<p>点击左上角的“新建”可以重新开始画图；点击“<em>全屏</em>”可以进入全屏模式，再次点击“<em>取消全屏</em>”可以退出全屏模式；点击“<em>保存图片</em>”可以把你画好的图片保存到你的计算机里；点击“<em>操作</em>”可以修改画笔的颜色和画笔属性；点击“<em>取消</em>”或“<em>重做</em>”可以取消上一步笔画或者取消这一操作。</p>
<p>制作者：Vishnevsky</p>
<p>他的邮箱：<a href="mailto:yurivish@gmail.com">yurivish@gmail.com</a></p>
<p>音乐制作者：<a href="http://microscopics.co.uk/">Mat Jarvis</a>(点击他的名字前往他的网站)</p>
<p>点击<a href="https://itunes.apple.com/us/album/the-world-forgotten-single/id579359664?ign-mpt=uo=4">这里</a>前往查看网页中的的音乐</p>
</div>
</div>
<canvas id="silk-2" class="silk-canvas active" width="1598" height="775"></canvas><canvas id="silk-1" class="silk-canvas buffer onepacity" width="1598" height="775"></canvas>
<canvas id="sparks" width="1598" height="775"></canvas>
</div>
<div id="replay-thumbnail" data-bind="css: { visible: showingReplayThumbnail }, click: hideReplayThumbnail " class="">
<img data-bind="attr: { src: shareUrlThumbnail }" width="150" src="">
<div class="tt">Hide thumbnail</div>
</div>
<!-- https://itunes.apple.com/us/app/id436590129?mt=8&ls=1 -->
<div id="intro-center" data-bind="css: { visible: showIntro }" class="">
<img class="logo" src="images/silk_text.png" width="250" height="250">
</div>
<div id="intro-draw-something" data-bind="css: { visible: showIntro }" class="">
<!-- <div id="instructions">Draw something.</div> -->
<img class="draw-something" src="images/draw_something.png" width="250" height="29">
</div>
<div id="intro-mute-option" data-bind="css: { visible: false }" class="">
<em>Note</em> — Silk has sound.
<a href="#" data-bind="visible: muted, click: toggleMute">Muted</a><span data-bind="visible: muted">.</span>
<a href="#" data-bind="visible: notMuted, click: toggleMute" style="display: none;">Mute?</a>
</div>
<div id="tips">
<div class="tip">按下<b>Space</b>来快捷新建</div>
<div class="tip">按下<b>Z</b>来快捷取消</div>
<!-- <div class="tip"><i class="icon-undo"></i> lets you travel back in time.</div> -->
<!-- <div class="tip"><i class="icon-circle"></i> unlocks colors and symmetries.</div> -->
<div class="magic tip">试试不同的颜色与属性吧！</div>
<div class="tip">开始吧，奇迹的缔造者，柔波的播撒者。</div>
</div>
<script src="javascript/js" type="text/javascript"></script>
<script type="text/javascript">try{ clicky.init(66625145); }catch(e){}</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66625145ns.gif" /></p></noscript>
</body></html>