• Public

  • Public
  • Network
  • Groups
  • Featured
  • Popular
  • People

Screenshot of web page (detail, start of Source Code section) at URL https://ar.al/2024/03/26/draw-together/: Source code The code sets up a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel. Here’s a breakdown of the entire source code, detailing what each section does: Create 20×20 pixel grid const rows = new Array(20).fill().map(row => new Array(20).fill(0)) const colours = ['white', 'black'] Creates a 20x20 grid initialized with zeros. Each cell will store an index corresponding to the colours array. Validation function const isValid = data => typeof data === 'object' && typeof data.rowIndex === 'number' && typeof data.columnIndex === 'number' && data.rowIndex >= 0 && data.rowIndex <= rows.length-1 && data.columnIndex >= 0 && data.columnIndex <= rows[0].length-1 Checks if the data object has valid rowIndex and columnIndex within grid bounds. Handle connections and pixel updates export function onConnect ({ page }) { page.on('pixel', data => { if (!isValid(data)) return