let c, ctx, w, h; let drk = "#111"; let lght = "#EEE"; let C = Boolean(1) let blocks = 15 let dr = [[-1,-1], [1,-1], [-1, 1], [1,1]] let board = [] const {random, sin, cos, PI, hypot, asin, sign, atan2} = Math toggle = (val) => { return !Boolean(val) } makeBoard = (b,bs) => { for (let i=0; i0 && this.ym<=0) || (this.xm<=0 && this.ym>0) let rt = (this.xm>=0 && this.ym>0) || (this.xm<0 && this.ym<=0) let lb = (this.xm>0 && this.ym>=0) || (this.xm<=0 && this.ym<0) let rb = (this.xm>=0 && this.ym<0) || (this.xm<0 && this.ym>=0) this.ovl = [lt, rt, lb, rb] this.d = this.R < parseInt(blocks/2) && this.R > 0 } draw() { ctx.fillStyle = this.clr; ctx.fillRect(this.x, this.y, this.l, this.l); } overlay() { if(this.d){ let r = (this.l-2)/6 let cx = this.x + (this.l/2) let cy = this.y + (this.l/2) ctx.fillStyle = this.clr==lght ? drk : lght; for(let i=0; i<4; i++ ){ if(this.ovl[i]){ let xx = cx + (this.l/3)*dr[i][0] let yy = cy + (this.l/3)*dr[i][1] ctx.beginPath() ctx.arc(xx, yy, r , 0, 2 * PI); ctx.fill(); } } } } } window.onload = function() { requestAnimationFrame(init) } function init() { c = document.getElementById("c") ctx = c.getContext("2d") w = c.width = window.innerWidth h = c.height = window.innerHeight ctx.canvas.width = w; ctx.canvas.height = h; blockSize = w/blocks makeBoard(blocks, blockSize ) board.map(blk => blk.draw()) board.map(blk => blk.overlay()) }

omasOptical