havtone/dist/index.umd.js

A zero-dependency library for creating halftone effect

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).havtone=e()}(this,(function(){"use strict";return function(t){const{canvasId:e,size:i=10,minSize:s=5,spacing:h=15,image:o,rotation:n=0,maxFPS:a=60,shape:r="square",hoverEffect:d=!1,hoverSize:l=200,animate:c=!0,randomizedSize:g=!1,sensitivity:f=5,hoverSizeMultiplier:z=2,animationStepMultiplier:u=.5}=t,m=document.getElementById(e),v=m.getContext("2d"),w=[];let p,y=-1,M=-1;const x=1e3/a;let S=0;class b{constructor(t,e,i,h){var o,n;this.x=t,this.y=e,this.size=c?(o=s,n=i,Math.floor(Math.random()*(n-o+1)+o)):i,this.defaultSize=this.size,this.color=h,this.growing=Math.random()<.5,this.isHovered=!1}draw(){v.save(),"circle"!==r&&(v.translate(this.x,this.y),v.rotate(n*Math.PI/180)),v.beginPath(),"square"===r?v.rect(-this.size/2,-this.size/2,this.size,this.size):"triangle"===r?(v.moveTo(0,-this.size/2),v.lineTo(-this.size/2,this.size/2),v.lineTo(this.size/2,this.size/2),v.closePath()):"circle"===r&&v.arc(this.x,this.y,this.size/2,0,2*Math.PI),v.fillStyle=`rgb(${this.color.r}, ${this.color.g}, ${this.color.b})`,v.fill(),v.restore()}update(){c&&!this.isHovered&&(this.growing?(this.size=Math.min(this.size+u,i),this.size>=i&&(this.growing=!1)):(this.size=Math.max(this.size-u,s),this.size<=s&&(this.growing=!0)))}}function I(t){t-S<x||(S=t,v.clearRect(0,0,m.width,m.height),w.forEach((t=>{if(d&&y>=0&&M>=0){const o=(e=y-t.x,h=M-t.y,Math.sqrt(e*e+h*h));o<l?(t.isHovered=!0,t.size=Math.max(s,i*(z-o/l))):t.isHovered&&(t.isHovered=!1,t.size=t.defaultSize)}var e,h;t.update(),t.draw()}))),requestAnimationFrame(I)}m.addEventListener("mousemove",(t=>{const e=m.getBoundingClientRect(),i=m.width/e.width,s=m.height/e.height;y=(t.clientX-e.left)*i,M=(t.clientY-e.top)*s}));const q=new Image;q.src=o,q.onload=()=>{m.width=q.width,m.height=q.height,v.drawImage(q,0,0,m.width,m.height),function(){p=v.getImageData(0,0,m.width,m.height);const{width:t,height:e}=m,s=p.data;for(let o=0;o<e;o+=h)for(let e=0;e<t;e+=h){const h=4*(o*t+e),n=s[h],a=s[h+1],r=s[h+2],d=new b(e,o,g?i:i*(1-(n+a+r)/f/255),{r:n,g:a,b:r});w.push(d)}}(),requestAnimationFrame(I)}}}));