aemkei alien art

by mdshaub

HTML

<!-- set the size of the canvas, width & height, 
give it the name "c," and start drawing -->
<canvas id="c" width="1024" height="1024">
<script> <!-- start the script -->
  /*a variable to state we're only drawing flat pictures, 
  no 3D/depth*/
  const context = c.getContext('2d'); 
  /*a variable to see the bitmap at a larger scale
  particularly for high-res displays*/
  const scale = 16; 
 		/*loop through all x values on the canvas, 
    from left until reaching the right side*/
    for (let x = 0; x < c.width/scale; x++) { 
    /*loop through all y values on the canvas, 
    from the top until reaching the bottom edge*/
    for (let y = 0; y < c.height/scale; y++) { 
      //here's the fun stuff
      /*take the bitwise XOR of this x, y pair,
      divide the result by an integer, 
      then evaluate if there is a remainder*/
      if ((x ^ y) % 5) { 
      	/*if there is a remainder, 
        then draw a rectangle at the x,y position and
        scale the position and rectangle accordinly*/
        context.fillRect(x*scale, y*scale, scale, scale);
      }
    }
  }
</script>  <!-- end the script -->
</canvas> <!-- stop drawing the canvas -->