light_wave

by magneto903

HTML

<body>
<canvas id="canvas" width=250 height=250 ></canvas>
</body>

CSS

#canvas {
  border: 2px solid grey;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var wave_x = 125;
var wave_y = 125;
var wave_r = 0;

var direction = {
	"up": false,
  "down": false,
};

$('body').keydown(function (event) {
	if (event.keyCode == 38) {
 		direction.up = true;
  } else if (event.keyCode == 40) {
		direction.down = true;
  }
})

$('body').keyup(function (event) {
	if (event.keyCode == 38) {
 		direction.up = false;
  } else if (event.keyCode == 40) {
		direction.down = false;
  }
})

var update_wave = function() {
	if (direction.up) {
  	if (wave_r <= 120) {
    	wave_r += 5;
    }
  }
  if (direction.down) {
  	if (wave_r >= 5) {
    	wave_r -= 5;
    }
  }
}


var step = function() {
	window.requestAnimationFrame(step);
  update_wave();
  
	ctx.fillStyle = 'black';
	ctx.fillRect(0, 0, 250, 250);
  
  var gradient = ctx.createRadialGradient(wave_x,wave_y, 0.2*wave_r,wave_x, wave_y, wave_r);
	gradient.addColorStop(0, "black");
  gradient.addColorStop(1, "white");
  
  ctx.fillStyle = gradient;
  ctx.beginPath();
  ctx.arc(wave_x, wave_y, wave_r, 0, Math.PI*2, false);
  ctx.fill();
  
  ctx.save();
  
  ctx.beginPath();
  ctx.arc(wave_x, wave_y, wave_r, 0, Math.PI*2, false);
  ctx.clip()
  
  
   var gradient = ctx.createRadialGradient(wave_x,wave_y, 0.2*wave_r,wave_x, wave_y, wave_r);
	gradient.addColorStop(0, "black");
  gradient.addColorStop(1, "red");
  
  ctx.fillStyle = gradient;
  ctx.fillRect(50, 70, 50, 80)
  ctx.restore()
}

step();