havtone/dist/index.esm.js

A zero-dependency library for creating halftone effect

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