havtone/dist/index.iife.js

A zero-dependency library for creating halftone effect

var havtone=function(){"use strict";return function(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:c=!1,hoverSize:l=200,animate:d=!0,randomizedSize:g=!1,sensitivity:z=5,hoverSizeMultiplier:m=2,animationStepMultiplier:u=.5}=t,v=document.getElementById(i),w=v.getContext("2d"),f=[];let M,p=-1,S=-1;const x=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(){w.save(),"circle"!==n&&(w.translate(this.x,this.y),w.rotate(o*Math.PI/180)),w.beginPath(),"square"===n?w.rect(-this.size/2,-this.size/2,this.size,this.size):"triangle"===n?(w.moveTo(0,-this.size/2),w.lineTo(-this.size/2,this.size/2),w.lineTo(this.size/2,this.size/2),w.closePath()):"circle"===n&&w.arc(this.x,this.y,this.size/2,0,2*Math.PI),w.fillStyle=`rgb(${this.color.r}, ${this.color.g}, ${this.color.b})`,w.fill(),w.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<x||(y=t,w.clearRect(0,0,v.width,v.height),f.forEach((t=>{if(c&&p>=0&&S>=0){const a=(i=p-t.x,h=S-t.y,Math.sqrt(i*i+h*h));a<l?(t.isHovered=!0,t.size=Math.max(s,e*(m-a/l))):t.isHovered&&(t.isHovered=!1,t.size=t.defaultSize)}var i,h;t.update(),t.draw()}))),requestAnimationFrame(q)}v.addEventListener("mousemove",(t=>{const i=v.getBoundingClientRect(),e=v.width/i.width,s=v.height/i.height;p=(t.clientX-i.left)*e,S=(t.clientY-i.top)*s}));const H=new Image;H.src=a,H.onload=()=>{v.width=H.width,v.height=H.height,w.drawImage(H,0,0,v.width,v.height),function(){M=w.getImageData(0,0,v.width,v.height);const{width:t,height:i}=v,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],c=new I(i,a,g?e:e*(1-(o+r+n)/z/255),{r:o,g:r,b:n});f.push(c)}}(),requestAnimationFrame(q)}}}();