Another one bite the snow :)

Весь день мечтал набросать какие-нить глупые снежинки, но видел только безумные программки, из тех, что студенты списывают друг у друга.

Но вот настал вечер, наверное, по-простому можно так (размер канвы произволен, легко поменять в исходнике):

<style>
 .snow {
  margin: 0; padding: 0; background: #000000;
 }
</style>
<div align="center">
 <canvas id="snow" class="snow" width="600" height="600"></canvas>
</div>
<script>
 var canvas = document.getElementById('snow');
 var ctx = canvas.getContext('2d');
 var w = canvas.width;
 var h = canvas.height;
 var n = 250; //количество снежинок
 var flakes = [];
 
 function Flake (x,y) {
  var maxSize = 4; //максимальный размер
  var maxSpeed = 2.718; //максимальная скорость
  this.x = x; this.y = y;
  this.r = rnd(0,1);
  this.a = rnd(51,Math.PI);
  this.step = 0.01;
  this.size = rnd (1,maxSize);
  this.alpha = this.size / maxSize;
  this.speed = (this.size / maxSize) * maxSpeed;
  this.rc = rnd(102,255,true);
  this.gc = rnd(102,255,true);
  this.bc = rnd(244,255,true);

  this.update = function () {
   this.x += Math.cos(this.a)*this.r;
   this.y += this.speed;
   this.a += this.step;
  }
 }
 
 function initFlakes() {
  var cnt = n, flake, x, y;
  while (cnt--) {
   x = rnd (0,w,true);
   y = rnd (0,h,true);
   flake = new Flake (x,y);
   flakes.push(flake);
  }
  loop();
 }
 
 function loop () {
  var cnt = flakes.length, fA;
  //очистка канвы:
  ctx.save();
  ctx.setTransform(1,0,0,1,0,0);
  ctx.clearRect (0,0,w,h);
  ctx.restore();
  while (cnt--) {
   fA = flakes[cnt]; fA.update();
   ctx.beginPath();
   ctx.arc(fA.x,fA.y,fA.size,0,2*Math.PI,false);
   ctx.fillStyle = 'rgba('+fA.rc+','+fA.gc+','+fA.bc+','+fA.alpha+')';
   ctx.fill();
   if (fA.y >= h) fA.y = - fA.size; //снова сверху :)
  }
  requestAnimationFrame(loop);
 }
 
 function rnd (min,max,round=false) {
  var n = min + Math.random() * (max - min + 1);
  if (round) n = Math.floor(n);
  return n;
 }
 
 function dist (v1,v2) {
  var dx = v1.x - v2.x, dy = v1.y - v2.y;
  return Math.sqrt(dx*dx-dy*dy);
 }
 
 initFlakes();
</script>
<noscript>You need Javascript to run it</noscript>

Для простоты однажды сгененированные снежинки не удаляются из массива flakes, а просто меняют координату с низа на верх канвы:

   if (fA.y >= h) fA.y = - fA.size; //снова сверху :)

Ну и ещё много что там можно поменять или усовершенствовать.

Так что, с Рождеством, кафолики :)

25.12.2018, 19:52 [1726 просмотров]