|
| 1 | +// Make an instance of two and place it on the page. |
| 2 | +var elem = document.getElementById('draw-shapes'); |
| 3 | +var params = { width: 500, height: 200, fullscreen: true }; |
| 4 | +var two = new Two(params).appendTo(elem); |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | +var frame_objects=[] |
| 9 | +var all_connecters=[] |
| 10 | +var all_tops=[] |
| 11 | +var all_bottoms=[] |
| 12 | +var len = 300 |
| 13 | +for (let i = 0; i < len; i++){ |
| 14 | + var pos_x = -len+i*30 |
| 15 | + var x = Math.PI/2*i/3 |
| 16 | + var dist = 80 |
| 17 | + var up = Math.round(Math.sin(x)*dist) |
| 18 | + var down = -Math.round(Math.sin(x)*dist) |
| 19 | + var connecter = two.makeRectangle(pos_x,300,10,up*2) |
| 20 | + connecter.fill="lightgray" |
| 21 | + connecter.stroke="gray" |
| 22 | + connecter.linewidth=3 |
| 23 | + var size1 = 10//(up/40 + 10)/1 |
| 24 | + var size2 = 10//(down/40 + 10)/1 |
| 25 | + var circle_top = two.makeCircle(pos_x, 300 + up, size1) |
| 26 | + circle_top.fill = "red" |
| 27 | + circle_top.stroke = "darkred" |
| 28 | + circle_top.linewidth = 3 |
| 29 | + var circle_bottom = two.makeCircle(pos_x, 300 + down, size2) |
| 30 | + circle_bottom.fill = "orange" |
| 31 | + circle_bottom.stroke = "#cc5500" |
| 32 | + circle_bottom.linewidth = 3 |
| 33 | + // frame_objects.push(connecter, circle_top, circle_bottom) |
| 34 | + all_connecters.push(connecter) |
| 35 | + all_tops.push(circle_top) |
| 36 | + all_bottoms.push(circle_bottom) |
| 37 | +} |
| 38 | +// var group = two.makeGroup(frame_objects) |
| 39 | + |
| 40 | +tops = two.makeGroup(all_tops) |
| 41 | +connecters = two.makeGroup(all_connecters) |
| 42 | +bottoms = two.makeGroup(all_bottoms) |
| 43 | +console.log(connecters.getBoundingClientRect()); |
| 44 | +var n = 0 |
| 45 | +var target=12 |
| 46 | +two.bind('update', function(frameCount) { |
| 47 | + if (frameCount%20==0){ |
| 48 | + // tops.translation.x+=n&target?30:-target*30 |
| 49 | + // bottoms.translation.x+=n<target?30:-30*target |
| 50 | + // connecters.translation.x+=n<target?30:-30*target |
| 51 | + console.log(target); |
| 52 | + n++ |
| 53 | + if (n==target){ |
| 54 | + n=0 |
| 55 | + } |
| 56 | + } |
| 57 | +}).play(); // Finally, start the animation loop |
| 58 | + |
| 59 | +two.update(); |
0 commit comments