icon.html (4939B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 </head> 6 <body> 7 <canvas id="org" width="1024" height="1024"></canvas> 8 <script> 9 (async () => { 10 let ctx = org.getContext('2d'); 11 let idata = ctx.getImageData(0, 0, org.width, org.height); 12 let center = []; 13 let radius = 128; 14 15 const col_fg = [255,255,255]; 16 const col_bg = [ 0, 0, 0]; 17 18 for(let y=0; y<org.height; y++) { 19 for(let x=0; x<org.width; x++) { 20 const idx = ((y*org.width)+x)*4; 21 idata.data[idx+0] = col_bg[0]; 22 idata.data[idx+1] = col_bg[1]; 23 idata.data[idx+2] = col_bg[2]; 24 idata.data[idx+3] = 255; 25 } 26 } 27 ctx.putImageData(idata, 0, 0); 28 await new Promise(r => requestAnimationFrame(r)); 29 30 // octagon outer 31 center = [512,512]; 32 radius = 360; 33 for(let x=0; x<org.width; x++) { 34 for(let y=0; y<org.height; y++) { 35 const idx = ((y*org.width)+x)*4; 36 let xoff = x-center[0]; 37 let yoff = y-center[1]; 38 if (Math.abs(xoff) > radius) continue; 39 if (Math.abs(yoff) > radius) continue; 40 if (Math.abs(xoff)+Math.abs(yoff) > (radius*1.45)) continue; 41 idata.data[idx+0] = col_fg[0]; 42 idata.data[idx+1] = col_fg[1]; 43 idata.data[idx+2] = col_fg[2]; 44 } 45 } 46 ctx.putImageData(idata, 0, 0); 47 await new Promise(r => requestAnimationFrame(r)); 48 49 // octagon inner 50 center = [512,512]; 51 radius = 264; 52 for(let x=0; x<org.width; x++) { 53 for(let y=0; y<org.height; y++) { 54 const idx = ((y*org.width)+x)*4; 55 let xoff = x-center[0]; 56 let yoff = y-center[1]; 57 if (Math.abs(xoff) > radius) continue; 58 if (Math.abs(yoff) > radius) continue; 59 if (Math.abs(xoff)+Math.abs(yoff) > (radius*1.45)) continue; 60 idata.data[idx+0] = col_bg[0]; 61 idata.data[idx+1] = col_bg[1]; 62 idata.data[idx+2] = col_bg[2]; 63 } 64 } 65 ctx.putImageData(idata, 0, 0); 66 await new Promise(r => requestAnimationFrame(r)); 67 68 // Remove bottom right 69 for(let x=600; x<org.width; x++) { 70 for(let y=600; y<org.height; y++) { 71 const idx = ((y*org.width)+x)*4; 72 idata.data[idx+0] = col_bg[0]; 73 idata.data[idx+1] = col_bg[1]; 74 idata.data[idx+2] = col_bg[2]; 75 } 76 } 77 ctx.putImageData(idata, 0, 0); 78 await new Promise(r => requestAnimationFrame(r)); 79 80 // // Extend top bar 81 // for(let x=512; x<(512+312); x++) { 82 // for(let y=(512-360); y<(512-264); y++) { 83 // const idx = ((y*org.width)+x)*4; 84 // idata.data[idx+0] = 255; 85 // idata.data[idx+1] = 255; 86 // idata.data[idx+2] = 255; 87 // } 88 // } 89 // ctx.putImageData(idata, 0, 0); 90 // await new Promise(r => requestAnimationFrame(r)); 91 // for(let x=512; x<(512+324); x++) { 92 // for(let y=(512+264+1); y<(512+360+1); y++) { 93 // const idx = ((y*org.width)+x)*4; 94 // idata.data[idx+0] = 255; 95 // idata.data[idx+1] = 255; 96 // idata.data[idx+2] = 255; 97 // } 98 // } 99 // ctx.putImageData(idata, 0, 0); 100 // await new Promise(r => requestAnimationFrame(r)); 101 102 // Diagonal, mixes Q into C 103 for(let x=512; x<(512+360+1); x++) { 104 for(let y=512; y<(512+360+1); y++) { 105 if (Math.abs(x-y) > (360-264)/1.41) continue; 106 const idx = ((y*org.width)+x)*4; 107 idata.data[idx+0] = col_fg[0]; 108 idata.data[idx+1] = col_fg[1]; 109 idata.data[idx+2] = col_fg[2]; 110 } 111 } 112 ctx.putImageData(idata, 0, 0); 113 await new Promise(r => requestAnimationFrame(r)); 114 115 // Stretch lower side 116 for(let y=1024; y>488; y--) { 117 for(let x=0; x<1024; x++) { 118 const idx = ((y*org.width)+x)*4; 119 idata.data[idx+0] = idata.data[idx-(org.width*128)+0]; 120 idata.data[idx+1] = idata.data[idx-(org.width*128)+1]; 121 idata.data[idx+2] = idata.data[idx-(org.width*128)+2]; 122 } 123 } 124 ctx.putImageData(idata, 0, 0); 125 await new Promise(r => requestAnimationFrame(r)); 126 127 // Stretch upper side 128 for(let y=0; y<488; y++) { 129 for(let x=0; x<1024; x++) { 130 const idx = ((y*org.width)+x)*4; 131 idata.data[idx+0] = idata.data[idx+(org.width*128)+0]; 132 idata.data[idx+1] = idata.data[idx+(org.width*128)+1]; 133 idata.data[idx+2] = idata.data[idx+(org.width*128)+2]; 134 } 135 } 136 ctx.putImageData(idata, 0, 0); 137 await new Promise(r => requestAnimationFrame(r)); 138 })(); 139 </script> 140 </body> 141 </html>