JSDM

HTML

 
1
<canvas id='2d'></canvas>
2
<div id='out'><a target=
3
"_parent" href='http://codepen.io/raurir/full/rpEDA/'>3d version?</a></div>

CSS

xxxxxxxxxx
2
 
1
body { margin:0;padding:20px; background: #666;}
2
a {text-decoration:none;padding:10px 0;color:#aaa;font-family:courier;}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

x
 
1
2
var con = console;
3
var maxIterations = 1000;
4
var iterations = 0;
5
var runs = 0;
6
var testSize = 12;
7
var padding = testSize / 2;
8
var gridSize = 60;
9
var maxPaths = 13000;//gridSize * 4;// 500;
10
// bails at maxPaths attempts... usually almost fills the space, leaving a few pleasant gaps
11
var px = gridSize / 2;
12
var py = 0;
13
var direction = 2;
14
15
var canvas = document.getElementById("2d");
16
canvas.width = canvas.height = gridSize * testSize;
17
var shape = canvas.getContext("2d");
18
// var out = document.getElementById("out");
19
20
21
22
var currentPath = -1;
23
// var paths = [];
24
var path;
25
26
27
var grid = [];
28
for (var i = 0; i < gridSize; i++) {
29
  grid[i] = [];
30
  for (var j = 0; j < gridSize; j++) {
31
    grid[i][j] = 0;
32
  }
33
}
34
35
36
function drawLayer() {
37
  for (var y = 0; y < gridSize; y++) {
38
    for (var x = 0; x < gridSize; x++) {
39
      shape.fillStyle = "rgba(0,0,0,0.1)";
40
      shape.fillRect(x * testSize + 1, y * testSize + 1, testSize - 2, testSize - 2);
41
    }
42
  }
43
}
44
45
drawLayer()
46
47
48
function drawPath(path) {
49
50
  // if (path.length == 1) return; // draw single dots??? 
51
52
  var colour = ~~((currentPath * 10) % maxPaths / maxPaths * 360);
53
54
  shape.beginPath();
55
  // shape.strokeStyle = "hsla(" + colour + ",100%,60%,1)";
56
  // shape.strokeStyle = "hsla(" + colour + ",100%,60%,1)";
57
  var brightness = 60 + ~~(Math.random() * 20);
58
  if(Math.random() > 0.95) brightness = 100; // draw an occasional bright mutant
59
  
60
  shape.strokeStyle = "hsla(0,0%," + brightness + "%,1)";
61
  shape.lineWidth = 2;
62
  for ( var i = 0, il = path.length; i < il; i++) {
63
    var node = path[i], x = node[0] * testSize + padding, y = node[1] * testSize + padding;
64
    if (i == 0) {
65
      shape.moveTo(x, y);  
66
    } else {
67
      shape.lineTo(x, y);
68
    }
69
  }
70
  shape.stroke();
71
72
  for ( var i = 0, il = path.length; i < il; i++) {
73
    var node = path[i], x = node[0] * testSize + padding, y = node[1] * testSize + padding;
74
    shape.beginPath();
75
    shape.arc(x, y, padding / 2, 0, 2 * Math.PI, false);
76
    // shape.fillStyle = "hsla(" + colour + ",50%,50%,1)";
77
    shape.fillStyle = "hsla(0,0%," + brightness + "%,1)";
78
    shape.fill();
79
    shape.closePath();
80
    shape.beginPath();
81
    shape.arc(x, y, padding / 2 - 2, 0, 2 * Math.PI, false);
82
    shape.fillStyle = "#666";
83
    shape.fill();
84
    shape.closePath();
85
86
  }
87
88
89
}
90
91
92
function pointValid(x, y) {
93
  return grid[y] != undefined && grid[y][x] != undefined;
94
}
95
96
function pointFree(x, y) {
97
  return pointValid(x, y) && grid[y][x] != 1;
98
}
99
100
function getNextPoint(x, y) {
101
  var newX = x, newY = y, newDir = Math.floor(Math.random() * 3) - 1;
102
  var dir = (4 + direction + newDir) % 4; // make sure dir is not backwards.
103
  direction = dir;
104
105
  switch (dir) {
106
    case 0: newY--; break; // up
107
    case 1: newX++; break; // right
108
    case 2: newY++; break; // down
109
    case 3: newX--; break; // left
110
  }
111
112
  var valid = pointValid(newX, newY);
113
  // con.log(taken, newX, newY)
114
115
  if (valid) {
116
    if (pointFree(newX, newY)) {
117
      return {
118
        x:newX,
119
        y:newY,
120
        direction: dir,
121
        complete: false
122
      }
123
    } else {
124
      return {
125
        x:newX,
126
        y:newY,
127
        direction: dir,
128
        complete: true
129
      }
130
    }
131
  } else {
132
    return getNextPoint(x, y); // try again, with original point.
133
  }
134
}
135
136
137
function calcSection() {
138
139
  var nextPoint = getNextPoint(px,py)
140
141
  if (nextPoint.complete === true) {
142
143
    drawPath(path);
144
    if (currentPath < maxPaths) {
145
      // newPath();
146
      setTimeout( function() { newPath() }, 10);
147
    }
148
149
  } else {
150
151
    px = nextPoint.x;
152
    py = nextPoint.y;
153
    // con.log('nextPoint', px, py)
154
155
    grid[py][px] = 1;
156
    path.push([px,py]);
157
    // paths[currentPath] = path;
158
159
    iterations++;
160
161
    // drawPath(path);
162
163
164
    if (iterations < maxIterations ) {
165
      // setTimeout( function() { calcSection() }, 30);  
166
      calcSection();
167
    } else {
168
      con.log("iterations reached", iterations,  maxIterations);
169
    }
170
    // if (iterations < 60 ) calcSection();
171
172
  }
173
174
}
175
176
177
var startPositions = gridSize * 4;
178
var start = [];
179
for ( var i = 0; i < startPositions; i++ ) {
180
  start[i] = i;
181
}
182
183
184
function newStart() {
185
186
  if ( currentPath < gridSize * 4 ) { // do a lap around around the edges first...
187
188
    var startIndex = start[ ~~(Math.random() * start.length) ];
189
    // con.log( start);
190
    // con.log(startIndex);
191
    start.splice(startIndex, 1);
192
    // con.log( start);
193
194
    startIndex = currentPath;
195
196
    px = 0;
197
    py = 0;
198
199
    var edge = Math.floor(startIndex / gridSize);
200
    var remain = startIndex % gridSize;
201
    switch (edge) {
202
      case 0:  // top
203
        px = startIndex;
204
        py = 0;
205
        direction = 2;
206
        break;
207
      case 1: // right
208
        px = gridSize - 1;
209
        py = remain;
210
        direction = 3;
211
        break;
212
      case 2: // bottom
213
        px = gridSize - remain;
214
        py = gridSize - 1;
215
        direction = 0;
216
        break;
217
      case 3: // left
218
        px = 0;
219
        py = gridSize - remain;
220
        direction = 1;
221
        break;
222
    }
223
224
    /*
225
     px = 0 + ~~(Math.random() * (gridSize - 1));
226
      py = 0 + ~~(Math.random() * (gridSize - 1));
227
228
      var edge = Math.round(Math.random() * 4);
229
      con.log("edge", edge);
230
      switch (edge) {
231
        case 0: py = 0; break; // top
232
        case 1: px = gridSize - 1; break; // right
233
        case 2: py = gridSize - 1; break; // bottom
234
        case 3: px = 0; break; // left
235
      }
236
    */
237
238
    
239
240
  } else {
241
242
  
243
    px = ~~(Math.random() * (gridSize - 1));
244
    py = ~~(Math.random() * (gridSize - 1));
245
    direction = ~~(Math.random() * 4);
246
247
  }
248
249
250
  if (!pointFree(px, py) && iterations < maxIterations) {
251
    currentPath++;
252
    iterations++;
253
    // con.log("finding new start!!!");
254
    newStart();
255
  }
256
257
258
}
259
260
function newPath() {
261
  currentPath++;
262
263
  newStart();
264
265
  iterations = 0;
266
  
267
268
  path = [];
269
  path.push([px,py]);
270
  grid[py][px] = 1;
271
272
  calcSection();
273
}
274
newPath();
275
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................