Tempo's Code Center

Paw Cursor

The code here creates an effect like you can see here.

HTML

<!DOCTYPE html>
<html>
  <head>
    <link href="YOUR_CSS.css" rel="stylesheet" type="text/css" media="all">
    <script src="YOUR_JS.js" type="text/javascript" defer></script>
  </head>
  <body>
    <!--Page HTML here-->
    <canvas id="CANVAS_ID"></canvas>
    <div>
      <img style="display:none;"
        id="IMAGE_ID"
        src="YOUR_CURSOR_IMAGE"
        width="32"
        height="32" />
    </div>
  </body>
</html>

Nothing of particular note here, just that YOUR_CSS, YOUR_JS, and YOUR_CURSOR_IMAGE are to be filled in appropriately, and CANVAS_ID and IMAGE_ID can be any name as long as you use the same name in other files.

In order for us to use js to draw an image, the image needs to exist on the page; however it doesn't need to be visible, hence the img tag with display:none.

CSS

#CANVAS_ID { /* match to CANVAS_ID in javascript */
  position:fixed; 
  top: 0px;
  left: 0px;
  margin: 0px !important;
  padding: 0px !important;
  pointer-events:none; /*make sure the canvas doesn't block the mouse from interacting with the page*/
  z-index: 100; /*Draws the canvas above everything with a z-index of 99 or lower.*/
}

Important details to note here include pointer-events:none, z-index:100, and position:fixed. There are comments in the css to explain them.

JS

const CANVAS_ID = "CANVAS_ID"; // id of canvas object
const IMAGE_ID = "IMAGE_ID"; // id of image holding object.
const OFFSET_X = 16; // x-position of the center of your image
const OFFSET_Y = 16; // y-position of the center of your image
const SIDESTEP = 12; // how far to the left/right you want your steps staggered.
const FRAME_TIME = 33; // how long between each animation frame
const LIFE_TIME = 60; // how many frames before a paw starts fading
const FADE_TIME = 60; // how many frames it takes for a paw to fade.
const STEP_THRESHOLD = 32; // minimum travel distance before a new step is placed.


class Particle {
  constructor(x, y, r, lifetime, image, fadeout, s) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.lifetime = lifetime;
    this.image = image;
    this.fadeout = fadeout;
    this.max_fadeout = fadeout;
    this.s = s
  }

  drawParticle(context, sidestep) {
    // hello welcome to drawing hell.
    // rotating is weird so here's what we have to do:
    context.translate(this.x, this.y); // shift the position of the canvas so the canvas origin is at our target position.
    context.rotate(this.r); // rotate the canvas (which always occurs around the canvas origin)
    context.globalAlpha = this.fadeout / this.max_fadeout; // get the current fadeout value
    context.drawImage(this.image, this.s - OFFSET_X, -OFFSET_Y); // draw the image at approximately the origin (performing sidestep and offsets)
    context.globalAlpha = 1; // reset alpha
    context.rotate(-this.r); // reset canvas rotation
    context.translate(-this.x, -this.y); // reset canvas position;
  }

  stepParticle() {
    if(this.lifetime > 0)
    {
      this.lifetime -= 1;
    }
    else if (this.fadeout > 0)
    {
      this.fadeout -= 1;
    }
    return this.fadeout > 0;
  }
}

var canvas = document.getElementById(CANVAS_ID);
var paw = document.getElementById(IMAGE_ID);
var particles = [];
var cx = 0;
var cy = 0;
var oldx = 0;
var oldy = 0;
var sidestep = SIDESTEP;

function cursorInit() {
  // set initial canvas size
  windowResize();

  // set event listeners to react to mouse and window actions.
  window.addEventListener("mousemove", cursorMove);
  window.addEventListener("resize", windowResize);

  // start the animation loop!
  animLoop();
}

function animLoop() {
  setTimeout(()=> {
    cursorRun();
    animLoop();
  }, 33);
}

function cursorRun() {
  genParticles();
  drawParticles();
}

function genParticles() {
  // calculate distance between current mouse position and last time we placed a paw
  let hyp = Math.sqrt((cx - oldx) * (cx - oldx) + (cy - oldy) * (cy-oldy));
  if (hyp > STEP_THRESHOLD) { // only create a new paw if we've exceeded our step distance
    let rotation = Math.atan((cx - oldx)/(oldy - cy)); // trigonometry time
    if (oldy - cy < 0) {
      rotation += Math.PI; // do some funny business to account for atan only giving a value between -90 and 90 degrees
    }
    particles.push(new Particle( // add our new paw
      oldx,
      oldy,
      rotation,
      LIFE_TIME,
      paw,
      FADE_TIME, 
      sidestep
    ));
    sidestep *= -1; // switch which direction we stagger the steps
    oldx = cx; // update the last placed paw position
    oldy = cy;
  }
}

function drawParticles() {
  var ctx = canvas.getContext("2d")
  ctx.reset();
  var newParticles = []
  for (const particle of particles) {
    particle.drawParticle(ctx);
    if (particle.stepParticle()) {
      newParticles.push(particle);
    }
  }
  particles = newParticles;
}

// match canvas dimensions to window size
function windowResize() {
  canvas.width = document.body.clientWidth;
  canvas.height = document.body.clientHeight;
}

function cursorMove(event) {
  cx = event.x;
  cy = event.y;
}

cursorInit(); // start the animation!

All the const values at the top are values you can adjust to change the behavior of your cursor. The code is commented to explain what each part does, but I'll go over some important details.

We're using a particle system here, which is to say: we set up an object that accepts some inputs and has very simple defined behavior (in this case, how to draw the particle, and how to track the lifetime of the particle) and simply draw and update every particle every frame, and remove particles once they're gone.

The other "fun" part is actually drawing the paw. Canvas objects are weird and you can't just draw a rotated object. Instead you have to move and rotate the canvas itself, draw your image, then undo the transformations.

Back to Code Center.