const {abs,sqrt,random,sin,floor,cos,atan2,hypot,PI}=Math; let W=180; let H=180; let canvas,ctx; let imageData,data; //let texture=[]; let divisions=17; let angle=2*PI/divisions; let speed=1; let r=[]; let g=[]; let b=[]; function init(){ canvas=document.getElementById("canvas"); canvas.width=W; canvas.height=H; ctx=canvas.getContext("2d"); ctx.fillRect(0,0,W,H); let img=document.getElementById("picture"); ctx.drawImage(img,0,0); imageData = ctx.getImageData(0, 0, W, H); data = imageData.data; //for(let y=0;yH/2&&divisions%2==0) x=W-x; let angleXY=a+abs(atan2(y-H/2,x-W/2)%angle); let radius=hypot(x-W/2,y-H/2); let shiftY=radius>(sin(d/500)*0.3+0.9)*(H/2)?0:sin(angleXY)*radius; let shiftX=radius>(sin(d/500)*0.3+0.9)*W/2?0:cos(angleXY)*radius; /* if((floor(-a+abs(atan2(y-H/2,x-W/2))/angle))%2==0){ shiftX*=-1; shiftY =-1; }*/ data[i]=r[floor(shiftY+(H<<1))%H][floor(shiftX+(W<<1))%W]; data[i+1]=g[floor(shiftY+(H<<1))%H][floor(shiftX+(W<<1))%W]; data[i+2]=b[floor(shiftY+(H<<1))%H][floor(shiftX+(W<<1))%W]; } ctx.putImageData(imageData,0,0); if(counter%200==0) { divisions = floor(random()*3+1)*4; angle=2*PI/divisions } requestAnimationFrame(loop); } alert("now with a picture texture just to conclude the kaleidoscope serie.");

kaleidoscope 4