Mouse Paint Effect | JavaScript WIth Free Source Code

Mouse Pointer Paint Effect is a JavaScript-based interactive feature that allows users to create art on a web page using their mouse pointer. This effect tracks the movement of the mouse and dynamically generates colorful paint strokes as the user drags the mouse across the screen. It provides a fun and engaging way to draw and doodle on a webpage.

To implement this effect, you can visit the website codeatnow.com or join the Telegram group named "Mouse Pointer Paint Effect" for the full source code and detailed instructions. The website and Telegram group offer a comprehensive guide on how to set up and integrate this effect into your own web project. The provided source code will allow you to understand and customize the paint effect to suit your specific needs.

Download Code

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow | Paint splotch mouse trail</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->

<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

body {
  background: #f2f0e9;
  margin: 0;
}

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

let width, height;
let app, container;
let mouse = { x: 0, y: 0 },
  lastMouse = { x: 0, y: 0 },
  mouseV = { x: 0, y: 0 };
let spritesheet,
  particles = [];
const colors = [
  0xe31104,
  0xef5f1f,
  0xc80e84,
  0x48a71e,
  0x1b81b4,
  0x5741ac,
  0x393f85
];
let spinning = true;

function resize() {
  width = window.innerWidth;
  height = window.innerHeight;
  if (app) app.renderer.resize(width, height);
}

async function setup() {
  resize();

  // set up Pixi stage and container
  app = new PIXI.Application({
    width,
    height,
    backgroundColor: 0xf2f0e9
  });

  container = new PIXI.ParticleContainer(3000, {
    tint: true
  });

  app.stage.addChild(container);
  document.body.appendChild(app.view);

  const spriteData = {
    meta: {
      image: &quot;https://assets.codepen.io/53148/paint.png&quot;,
      size: { w: 480, h: 480 },
      scale: 1
    },
    frames: []
  };
  for (let x = 0; x &lt; 480; x += 80) {
    for (let y = 0; y &lt; 480; y += 80) {
      spriteData.frames.push({
        frame: { x, y, w: 80, h: 80 },
        sourceSize: { w: 80, h: 80 },
        spriteSourceSize: { x: 0, y: 0, w: 80, h: 80 }
      });
    }
  }

  spritesheet = new PIXI.Spritesheet(
    PIXI.BaseTexture.from(spriteData.meta.image),
    spriteData
  );

  await spritesheet.parse();
  console.log(spritesheet);

  for (let i = 0; i &lt; 3000; i++) {
    particles.push(new Particle(i));
  }
}

setup();

class Particle {
  constructor(i) {
    this.sprite = new PIXI.Sprite(spritesheet.textures[i % 36]);
    this.sprite.alpha = 0;
    this.sprite.tint = new PIXI.Color(
      colors[Math.floor(Math.random() * colors.length)]
    );
    this.sprite.width = 30;
    this.sprite.height = 30;
    this.sprite.anchor.set(0.5);
    container.addChild(this.sprite);
  }

  launch({ x, y }, { x: vx, y: vy }) {
    this.sprite.alpha = 0.6 + Math.round(Math.random() * 40) * 0.01;
    this.vx = vx * randomNormal() * 2;
    this.vy = vy * randomNormal() * 2;
    if (this.vx &gt; 6) this.vx = 6;
    if (this.vy &gt; 6) this.vy = 6;
    if (this.vx &lt; -6) this.vx = -6;
    if (this.vy &lt; -6) this.vy = -6;
    this.sprite.x = x;
    this.sprite.y = y;
  }

  update() {
    if (this.sprite.alpha &gt; 0) {
      this.sprite.alpha -= 0.01;
      this.sprite.x += this.vx;
      this.sprite.y += this.vy;
      this.vx *= 0.9;
      this.vy *= 0.9;
    }
  }
}

window.addEventListener(&quot;resize&quot;, resize);
window.addEventListener(&quot;mousemove&quot;, (e) =&gt; {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
  spinning = false;
});
window.addEventListener(&quot;touchmove&quot;, (e) =&gt; {
  mouse.x = e.touches[0].clientX;
  mouse.y = e.touches[0].clientY;
  spinning = false;
});

function animate(t) {
  mouseV.x = lastMouse.x - mouse.x;
  mouseV.y = lastMouse.y - mouse.y;
  lastMouse.x = mouse.x;
  lastMouse.y = mouse.y;

  if (Math.abs(mouseV.x) + Math.abs(mouseV.y) &gt; 1) {
    let launched = 0;
    for (let i = 0; i &lt; particles.length; i++) {
      const particle = particles[i];
      if (particle.sprite.alpha &lt;= 0) {
        particle.launch(mouse, mouseV);
        launched++;
        if (launched === 4) break;
      }
    }
  }

  for (let i = 0; i &lt; particles.length; i++) {
    particles[i].update();
  }

  if (spinning) {
    mouse.x = width / 2 + (Math.cos(t / 1000) * width) / 4;
    mouse.y = height / 2 + (Math.sin(t / 1000) * height) / 4;
  }

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

function randomNormal() {
  let u = 0,
    v = 0;
  while (u === 0) u = Math.random(); //Converting [0,1) to (0,1)
  while (v === 0) v = Math.random();
  let num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
  num = num / 10.0 + 0.5; // Translate to 0 -&gt; 1
  if (num &gt; 1 || num &lt; 0) return randomNormal(); // resample between 0 and 1
  return num;
}