movementInSquares.ts (2544B)
1 import {initBackground, setBkgFunc} from './backs.js'; 2 3 // Init and globals. 4 initBackground(); 5 // Util functions. 6 7 // A drawable rectangle. 8 class DrawCell { 9 // X-location. 10 x: number; 11 // Y-location. 12 y: number; 13 // Width of the cell. 14 width: number; 15 // Height of the cell. 16 height: number; 17 // Color of the cell. 18 color: string; 19 20 // Construct a draw cell. 21 constructor(x: number, y: number, width: number, height: number, 22 color: string = '#FFFFFF') { 23 this.x = x; 24 this.y = y; 25 this.width = width; 26 this.height = height; 27 this.color = color; 28 } 29 30 // Draw to the canvas. 31 draw = (context: CanvasRenderingContext2D) => { 32 context.fillStyle = this.color; 33 context.rect(this.x, this.y, this.width, this.height); 34 } 35 } 36 37 // Movement in Squares by Bridget Riley 38 setBkgFunc((canvas: HTMLCanvasElement, 39 context: CanvasRenderingContext2D) => { 40 let wWidth = window.innerWidth; 41 let wHeight = window.innerHeight; 42 let drawCell = new DrawCell(0, 0, 32, 32, '#2eb583'); 43 // Number of squares based off of width in pixels. 44 let numSquares = Math.ceil(wWidth / drawCell.width); 45 let horizon = wWidth * 0.65; 46 47 let drawSq = true; 48 for(let i = 0; i < wWidth; i += drawCell.width) { 49 // Needed to fix the problem of squares being drawn offscreen 50 // mess with the pattern. 51 let drewFirstSquare: boolean = drawSq; 52 // Calculate the width of the square, gets smaller the closer 53 // it is to 65% of the way through the screen. 54 drawCell.x = i; 55 drawCell.width = Math.max(2, drawCell.height * 56 Math.sqrt((drawCell.x < horizon) ? 57 ((horizon - drawCell.x) / horizon) : 58 ((drawCell.x - horizon) / horizon))); 59 for(let j = 0; j < wHeight; j += drawCell.height) { 60 if(drawSq) { 61 drawCell.y = j; 62 drawCell.draw(context); 63 } 64 drawSq = !drawSq; 65 } 66 // Make sure squares drawn offscreen do not mess up the pattern. 67 drawSq = (drawSq == drewFirstSquare) ? !drewFirstSquare : drawSq; 68 } 69 }); 70