2a:null 2b:["$","title",null,{"children":"Bresenham's Line Algorithm | VIDI Intro Graphics | Observable"}] 30:T4e7,viewof coords = { const input_field = html`

x0: x1:

y0: y1:

`; const inputs = input_field.querySelectorAll("input"); const displays = input_field.querySelectorAll("span"); function update() { inputs.forEach((input, i) => { displays[i].textContent = input.value; }); input_field.value = { x0: +inputs[0].value, y0: +inputs[2].value, x1: +inputs[1].value, y1: +inputs[3].value, }; input_field.dispatchEvent(new CustomEvent("input")); }; update(); inputs.forEach(input => input.addEventListener("input", update)); return input_field; } 31:[] 2e:{"id":"ac73443c58d6e2c3","slug":"bresenhams-line-algorithm","title":"Bresenham's Line Algorithm","thumbnail":"14c83eab01859818f78f7386cbfc0c5f13aee46324fe2877b7ecd4cebe1d0020","access_level":"public","create_time":"$D2025-06-17T08:00:38.299Z","update_time":"$D2026-01-07T21:01:25.417Z","view_time":null,"first_public_time":"$D2025-07-09T01:29:40.847Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024"},"version":461,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null}],"members":[{"type":"individual","id":"c3cd8e5f7dd364e3","login":"eroisk","name":"Set Paing","avatar_url":"https://avatars-next.observableusercontent.com/24cc62fc242e5de882ce3ce002c7a093b22513123bd01ac4ec35a17f48595a12","tier":null,"role":"editor"},{"type":"team","id":"6a2979fe0c58caa8","login":"vidi-intro-graphics","name":"VIDI Intro Graphics","avatar_url":"https://avatars-next.observableusercontent.com/45b660a2d93636af360abe7822040f466ffa17dd2a472fd91fa891a7b544a83c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Bresenham's Line Algorithm","cells":[{"id":12,"value":"# Bresenham's Line Algorithm\n\nBresenham's line algorithm draws a straight line between two points by figuring out which pixels to fill on a grid to closely follow the ideal path. Instead of using **slow floating-point** calculations, it utilizes **only integers**, which makes it significantly faster and more efficient, especially on older hardware or in real-time graphics applications. By stepping through the grid and adjusting the direction based on an error term, it creates a smooth-looking line with minimal computation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":259,"value":"___\n## Canvas Settings and Global Parameters\n*Please modify the values as necessary.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":30,"value":"canvas_width = 80;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"canvas_height = 45;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"// width is a built-in Observable variable that gives the current width of the notebook cell.\nmagnify_scale = width / canvas_width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"___\n## Points `(x0, y0)` and `(x1, y1)`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":206,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":305,"value":"

Drawing line from (${coords.x0}, ${coords.y0}) to (${coords.x1}, ${coords.y1})

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":112,"value":"___\n## Canvas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":47,"value":"magnifiedCanvas = html`