@fabwaseem/easy-led-matrix/easy-led-matrix.min.js

A simple library to create beautiful led matrix easily with full customizations.

export class LedMatrix{constructor(t,i={}){this.shape=i.shape||"square",this.size=i.size||12,this.color=i.color||"#161819",this.amount=i.amount||1e3,this.gap=i.gap||3,this.litColor=i.litColor||"#0080FF",this.fps=i.fps||24,this.noise=i.noise||.01,this.background=i.background||"#000000",this.container=t,this.initialized=!1,this.canvas=null,this.context=null,this.gridContext=null,this.litColors=null,this.gridCanvas=null,this.hOffset=null,this.vOffset=null,this.columns=null,this.rows=null,this.interval=null}updateCells(){this.litColors=this.litColors.map(([t,i])=>[Math.random()>1-this.noise?Math.floor(Math.random()*this.columns):t,Math.random()>1-this.noise?Math.floor(Math.random()*this.rows):i])}draw(){this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.context.drawImage(this.gridCanvas,0,0,this.gridCanvas.width,this.gridCanvas.height),this.updateCells();for(let t=0;t<this.litColors.length;t++){const[i,s]=this.litColors[t];switch(this.context.fillStyle=this.litColor,this.shape){case"square":this.context.fillRect(i*this.size+this.hOffset,s*this.size+this.vOffset,this.size-this.gap,this.size-this.gap);break;case"circle":this.context.beginPath(),this.context.arc(i*this.size+this.hOffset,s*this.size+this.vOffset,.5*this.size-this.gap,0,2*Math.PI),this.context.fill()}}}setGrid(){switch(this.gridContext.clearRect(0,0,this.gridCanvas.width,this.gridCanvas.height),this.gridContext.fillStyle=this.color,this.columns=Math.ceil(this.gridCanvas.width/this.size),this.hOffset=this.gridCanvas.width%this.size*.5,this.rows=Math.ceil(this.gridCanvas.height/this.size),this.vOffset=this.gridCanvas.height%this.size*.5,this.shape){case"square":for(let t=0;t<this.columns;t++)for(let i=0;i<this.rows;i++)this.gridContext.fillRect(t*this.size+this.hOffset,i*this.size+this.vOffset,this.size-this.gap,this.size-this.gap);break;case"circle":for(let t=0;t<this.columns;t++)for(let i=0;i<this.rows;i++)this.gridContext.beginPath(),this.gridContext.arc(t*this.size+this.hOffset,i*this.size+this.vOffset,.5*this.size-this.gap,0,2*Math.PI),this.gridContext.fill()}this.litColors=new Array(this.amount).fill(0).map(()=>[Math.floor(Math.random()*this.columns),Math.floor(Math.random()*this.rows)])}refresh(){this.container.style.setProperty("background-color",this.background),this.canvas.width=this.gridCanvas.width=this.container.clientWidth,this.canvas.height=this.gridCanvas.height=this.container.clientHeight,this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.setGrid(),requestAnimationFrame(()=>this.draw()),clearInterval(this.interval),this.interval=setInterval(()=>this.draw(),1e3/this.fps)}init(){if(this.initialized)return;let t=document.createElement("canvas");this.canvas=t,this.context=t.getContext("2d"),this.gridCanvas=document.createElement("canvas"),this.gridContext=this.gridCanvas.getContext("2d"),this.container.appendChild(t),window.addEventListener("resize",()=>this.refresh()),this.refresh(),this.initialized=!0}updateConfig(t){this.shape=t.shape,this.size=t.size,this.color=t.color,this.amount=t.amount,this.gap=t.gap,this.litColor=t.litColor,this.fps=t.fps,this.noise=t.noise,this.background=t.background,this.refresh()}}