鼠标跟随

下载代码

html

css

分享到微信朋友圈

html

<form id="settings" onsubmit="return false">
  Swimmers<br/>
  <input type="text" id="inNumMin" value="100"/>
   To 
  <input type="text" id="inNumMax" value="100"/><br/>
  
  Size<br/>
  <input type="text" id="inSizeMin" value="5"/>
   To 
  <input type="text" id="inSizeMax" value="8"/><br/>
  
  Speed<br/>
  <input type="text" id="inSpeedMin" value="1"/>
   To 
  <input type="text" id="inSpeedMax" value="6"/><br/>
  
  Stroke Frequency<br/>
  <input type="text" id="inStrokeMin" value="10"/>
   To 
  <input type="text" id="inStrokeMax" value="20"/><br/>
  
  Stroke Depth<br/>
  <input type="text" id="inCurveMin" value="-2"/>
   To 
  <input type="text" id="inCurveMax" value="2"/><br/>
  
  Mouse Pull Damp.<br/>
  <input type="text" id="inPullMin" value="100"/>
   To 
  <input type="text" id="inPullMax" value="300"/><br/>

<button id="btnClear">Clear</button>
  <button id="btnSet">Set!</button><br/>
  Presets:
  <button id="preset1">Flock</button>
  <button id="preset2">Sparkler</button>
  <button id="preset0">Default</button>
</form>

css

JavaScript

// Create Canvas.
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var colors = [
  'rgba(69,204,255,.35)',
  'rgba(73,232,62,.35)',
  'rgba(255,212,50,.35)',
  'rgba(232,75,48,.35)',
  'rgba(178,67,255,.35)'
];
var colors = [
  'rgba(235,233,177,.35)',
  'rgba(193,153,28,.35)',
  'rgba(135,118,33,.35)',
  'rgba(34,68,85,.35)',
  'rgba(143,54,61,.35)'
];

// Configure settings options
var config = {};
var particles = [];
var settings = document.getElementById('settings');
initSettings();
// Fire the set! button.
settings.btnSet.onclick();

var mousePos = [200,200];

// Init.
resize();
// Attach canvas.
document.body.appendChild(canvas);
// Begin drawing.
window.requestAnimationFrame(draw);
// Sync canvas to window.
window.onresize = resize;

}
  this.detectCollision = () => {
    for (var i=0; i<particles.length; i++) {
      var hit = particles[i];
      if (!this.collidesWith.includes(hit.type) || hit == this) {
        continue;
      }
      
      if (hit.pos[0] > this.pos[0]-this.size && hit.pos[0] < this.pos[0]+this.size &&
         hit.pos[1] > this.pos[1]-this.size && hit.pos[1] < this.pos[1]+this.size) {
        this.collisionCallback(this,hit);
      }
    }
  }
  this.draw = function (ctx) {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.fillRect(this.pos[0]-this.size/2,this.pos[1],this.size,this.size);
    ctx.stroke();
  }
}

// Drawing.
// TODO: This should be part of a Particle Engine system.
function draw () {
  fade();
  //clear();
  for (var i=0; i<particles.length; i++) {
    var p = particles[i];
    
    // Garbage Collection.
    /*
    if (p.pos[0] < 0 || p.pos[0] > canvas.width || p.pos[1] < 0 || p.pos[1] > canvas.height) {
      particles.splice(i,1);
      delete p;
      continue;
    }
    */
    
    
    var a = mousePos[0]-p.pos[0];
    var b = mousePos[1]-p.pos[1];

p.newAngle = angleFromVector(a,b);
    p.speedMultiplier = 1 + (Math.abs(a)+Math.abs(b));
    //console.log(a+b,canvas.width+canvas.height);
    p.move();
    p.draw(ctx);
    
  }
  
  window.requestAnimationFrame(draw);
}
function clear () {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(0, 0, 0, 1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fill();
  particles.length = 0;
}
function fade () {
  ctx.beginPath();
  ctx.fillStyle = 'rgba(0, 0, 0, .3)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fill();
}
function resize () {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

/* Common functions */
function angleFromVector(x, y) {
  // SOHCAHTOA!
  var a = Math.atan(y/x)*180/Math.PI;
  if (x < 0 && y < 0) {
    return a+180;
  }
  // If only one axis is negative, so will be the angle, thus an extra
  // 90deg is added. (90+90, 270+90);
  else if (x < 0) {
    return a+180;
  }
  else if (y < 0) {
    return a+360;
  }
  return a;
}
function rand(min, max) {
  return Math.random()*(max-min)+min;
}
function randColor(min, max) {
    var r = Math.floor(rand(min,max)),
        g = Math.floor(rand(min,max)),
        b = Math.floor(rand(min,max));
    return 'rgba('+r+','+g+','+b+',1)';
}

// Settings.

function initSettings () {
  settings.btnSet.onclick = function () {
    config.num = [
      parseFloat(settings.inNumMin.value),
      parseFloat(settings.inNumMax.value)
    ];
    config.size = [
      parseFloat(settings.inSizeMin.value),
      parseFloat(settings.inSizeMax.value)
    ];
    config.speed = [
      parseFloat(settings.inSpeedMin.value),
      parseFloat(settings.inSpeedMax.value)
    ];
    config.curve = [
      parseFloat(settings.inCurveMin.value),
      parseFloat(settings.inCurveMax.value)
    ];
    config.stroke = [
      parseFloat(settings.inStrokeMin.value),
      parseFloat(settings.inStrokeMax.value)
    ];
    config.pull = [
      parseFloat(settings.inPullMin.value),
      parseFloat(settings.inPullMax.value)
    ];

clear();
    start();
  }

// Configure clear button
  settings.btnClear.onclick = clear;
  
  // Presets.
  settings.preset0.onclick = function () {
    preset({
      inNumMin:100,
      inNumMax:100,
      inSizeMin:5,
      inSizeMax:8,
      inSpeedMin:1,
      inSpeedMax:6,
      inStrokeMin:10,
      inStrokeMax:20,
      inCurveMin:-2,
      inCurveMax:2,
      inPullMin:100,
      inPullMax:300
    });
  };
  settings.preset1.onclick = function () {
    preset({
      inNumMin:1000,
      inNumMax:1000,
      inSizeMin:6,
      inSizeMax:6,
      inSpeedMin:5,
      inSpeedMax:5,
      inStrokeMin:10,
      inStrokeMax:20,
      inCurveMin:-2,
      inCurveMax:2,
      inPullMin:50,
      inPullMax:50
    });
  };
  settings.preset2.onclick = function () {
    preset({
      inNumMin:200,
      inNumMax:200,
      inSizeMin:8,
      inSizeMax:8,
      inSpeedMin:1,
      inSpeedMax:6,
      inStrokeMin:10,
      inStrokeMax:20,
      inCurveMin:-5,
      inCurveMax:5,
      inPullMin:10,
      inPullMax:10
    });
  };
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg