"
User:SockeyeSalmon
From 2014.igem.org
(Difference between revisions)
(Created page with "<html> <style type='text/css'> body { margin: 0; } #canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } </style> <canvas id='canvas'><...") |
|||
| (One intermediate revision not shown) | |||
| Line 10: | Line 10: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
| + | background-color: #000; | ||
| + | } | ||
| + | .left_menu li:last_child { | ||
| + | display: none; | ||
} | } | ||
</style> | </style> | ||
| Line 23: | Line 27: | ||
alpha : 1.0, | alpha : 1.0, | ||
draw : function(ctx) { | draw : function(ctx) { | ||
| + | ctx.strokeStyle = 'rgb(127,255,212)'; | ||
ctx.globalAlpha = this.alpha; | ctx.globalAlpha = this.alpha; | ||
ctx.beginPath(); | ctx.beginPath(); | ||
| Line 29: | Line 34: | ||
r += dr; | r += dr; | ||
this.alpha *= 0.99; | this.alpha *= 0.99; | ||
| + | } | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | function add_line(x0, y0, x1, y1) { | ||
| + | shape_array.push({ | ||
| + | alpha : 1.0, | ||
| + | draw : function(ctx) { | ||
| + | ctx.strokeStyle = 'rgb(255,0,0)'; | ||
| + | ctx.globalAlpha = this.alpha; | ||
| + | ctx.beginPath(); | ||
| + | ctx.moveTo(x0, y0); | ||
| + | ctx.lineTo(x1, y1); | ||
| + | ctx.stroke(); | ||
| + | this.alpha *= 0.9; | ||
} | } | ||
}); | }); | ||
| Line 39: | Line 59: | ||
shape_array.splice(index, 1); | shape_array.splice(index, 1); | ||
}); | }); | ||
| + | } | ||
| + | |||
| + | function add_random(x, y, width, height) { | ||
| + | var max = Math.max(width, height); | ||
| + | var mode = Math.floor(2 * Math.random()); | ||
| + | switch(mode) { | ||
| + | case 1: | ||
| + | var theta = Math.PI * 2 * Math.random(); | ||
| + | var w = max * Math.cos(theta); | ||
| + | var h = max * Math.sin(theta); | ||
| + | add_line(x-w, y-h, x+w, y+h); | ||
| + | break; | ||
| + | default: | ||
| + | add_circle(x, y); | ||
| + | break; | ||
| + | } | ||
| + | count = Math.floor(2 * fps * Math.random()); | ||
} | } | ||
| Line 48: | Line 85: | ||
$canvas.attr('height', height); | $canvas.attr('height', height); | ||
var ctx = $canvas[0].getContext('2d'); | var ctx = $canvas[0].getContext('2d'); | ||
| - | |||
ctx.fillStyle = 'rgb(0,0,0)'; | ctx.fillStyle = 'rgb(0,0,0)'; | ||
ctx.lineWidth = 3; | ctx.lineWidth = 3; | ||
$canvas.click(function(e) { | $canvas.click(function(e) { | ||
| - | + | add_random(e.pageX, e.pageY, width, height); | |
}); | }); | ||
| - | var count = | + | var count = fps; |
var timer = setInterval(function() { | var timer = setInterval(function() { | ||
ctx.globalAlpha = 0.1; | ctx.globalAlpha = 0.1; | ||
ctx.fillRect(0, 0, width, height); | ctx.fillRect(0, 0, width, height); | ||
draw(ctx); | draw(ctx); | ||
| - | count | + | count--; |
| - | + | if (count <= 0) { | |
| - | if (count | + | |
var x = width * Math.random(); | var x = width * Math.random(); | ||
var y = height * Math.random(); | var y = height * Math.random(); | ||
| - | + | add_random(x, y, width, height); | |
| + | count = Math.floor(1 * fps * Math.random()); | ||
} | } | ||
}, 1000/fps); | }, 1000/fps); | ||
| Line 72: | Line 108: | ||
</script> | </script> | ||
</html> | </html> | ||
| + | {{Kyoto/css/disable_official}} | ||
| + | {{Kyoto/css/original_top}} | ||
Latest revision as of 04:12, 16 September 2014
