--- title: Low-Level Graphics in C – Pixel Manipulation and Frame... description: A hands-on C programming tutorial focused on low-level pixel manipulation using SDL3. Covers the concept of a frame buffer as a linear array of 32-bit color... canonical: https://daily.dev/posts/low-level-graphics-in-c-pixel-manipulation-and-frame-buffers-dccwl7nbt twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Low-Level Graphics in C – Pixel Manipulation and Frame Buffers | daily.dev og:description: A hands-on C programming tutorial focused on low-level pixel manipulation using SDL3. Covers the concept of a frame buffer as a linear array of 32-bit color... og:url: https://daily.dev/posts/low-level-graphics-in-c-pixel-manipulation-and-frame-buffers-dccwl7nbt og:image: https://api.daily.dev/og/posts/DcCwL7nBt.png og:image:alt: Low-Level Graphics in C – Pixel Manipulation and Frame Buffers og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Low-Level Graphics in C – Pixel Manipulation and Frame Buffers **[freeCodeCamp](https://daily.dev/sources/freecodecamp)** · 93 min read · 1 upvotes · 0 comments ## Summary A hands-on C programming tutorial focused on low-level pixel manipulation using SDL3. Covers the concept of a frame buffer as a linear array of 32-bit color values mapped to a 2D screen grid, explains why direct memory-mapped display access (as in MS-DOS) is blocked by modern OSes, and shows how SDL3 bridges that gap cross-platform. Walks through installing SDL3 on macOS/Linux/Windows, setting up a Makefile, creating an SDL window, renderer, and texture, binding a frame buffer array to the texture, and implementing a put_pixel function that converts 2D (x,y) coordinates to a 1D array index using the formula index = y * width + x. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I convert 2D x,y coordinates into a 1D frame buffer array index in C? The array index equals width times y plus x, where width is the frame buffer's pixel width. For example, with a 320-pixel-wide buffer, pixel (60, 30) maps to index 320*30+60. This formula works because the buffer is stored as a single contiguous array in memory, with each row of pixels laid out sequentially after the previous one. _daily.dev surfaces practical breakdowns like this for developers building their own graphics code from scratch._ ### What is the pitch parameter in SDL_UpdateTexture and how do I calculate it? Pitch is the width of a texture's row measured in bytes, not pixels. It is calculated as the texture width multiplied by the size of each pixel's data type, for example width times sizeof(uint32_t) for a 32-bit-per-pixel buffer, so a 320-pixel-wide texture with 4-byte pixels has a pitch of 1280 bytes. _developers wiring up SDL rendering pipelines can find worked examples like this through daily.dev._ ### Why can't I write directly to video memory to draw pixels on modern operating systems like I could in old MS-DOS programs? Modern operating systems such as Windows, macOS, Linux, FreeBSD, and OpenBSD block direct memory-mapped access to display hardware as a protection layer, unlike MS-DOS where writing to a mapped memory address like 0xA0000 let the VGA driver paint pixels directly. Instead, developers must go through OS-specific graphics APIs or a cross-platform abstraction library such as SDL3 to create windows, renderers, and textures. _daily.dev helps developers track why direct hardware access works differently across today's operating systems._ ## Similar posts on daily.dev - [Master Low-Level Graphics in C: Build a Software Renderer from Scratch](https://daily.dev/posts/master-low-level-graphics-in-c-build-a-software-renderer-from-scratch-ssvj3mayp) · freeCodeCamp · 0 upvotes · 0 comments - [Implementing a tiny CPU rasterizer \| Part 1: Clearing the screen](https://daily.dev/posts/implementing-a-tiny-cpu-rasterizer-part-1-clearing-the-screen-w60egnddp) · Hacker News · 1 upvotes · 0 comments - [Two Six Technologies](https://daily.dev/posts/two-six-technologies-unazz2n8w) · Two Six Technologies · 1 upvotes · 0 comments --- Tags: [#c](https://daily.dev/tags/c), [#graphics-programming](https://daily.dev/tags/graphics-programming) [View this post on daily.dev](https://daily.dev/posts/low-level-graphics-in-c-pixel-manipulation-and-frame-buffers-dccwl7nbt) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Low-Level Graphics in C – Pixel Manipulation and Frame Buffers","url":"https://daily.dev/posts/low-level-graphics-in-c-pixel-manipulation-and-frame-buffers-dccwl7nbt","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/low-level-graphics-in-c-pixel-manipulation-and-frame-buffers-dccwl7nbt"},"datePublished":"2026-08-03T11:43:21.338Z","dateModified":"2026-09-14T09:11:40.501Z","description":"A hands-on C programming tutorial focused on low-level pixel manipulation using SDL3. Covers the concept of a frame buffer as a linear array of 32-bit color...","image":"https://i.ytimg.com/vi/wDWKUvTKCaw/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/wDWKUvTKCaw/sddefault.jpg","isAccessibleForFree":true,"articleSection":"freeCodeCamp","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"freeCodeCamp","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1628412854/logos/freecodecamp","url":"https://daily.dev/sources/freecodecamp"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/low-level-graphics-in-c-pixel-manipulation-and-frame-buffers-dccwl7nbt","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"c,graphics-programming","timeRequired":"PT93M","video":{"@type":"VideoObject","name":"Low-Level Graphics in C – Pixel Manipulation and Frame Buffers","description":"A hands-on C programming tutorial focused on low-level pixel manipulation using SDL3. Covers the concept of a frame buffer as a linear array of 32-bit color...","thumbnailUrl":"https://i.ytimg.com/vi/wDWKUvTKCaw/sddefault.jpg","uploadDate":"2026-08-03T11:43:21.338Z","duration":"PT93M","url":"https://api.daily.dev/r/DcCwL7nBt","embedUrl":"https://www.youtube.com/embed/wDWKUvTKCaw"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"freeCodeCamp","item":"https://daily.dev/sources/freecodecamp"},{"@type":"ListItem","position":3,"name":"Low-Level Graphics in C – Pixel Manipulation and Frame Buffers"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/low-level-graphics-in-c-pixel-manipulation-and-frame-buffers-dccwl7nbt#faq","mainEntity":[{"@type":"Question","name":"How do I convert 2D x,y coordinates into a 1D frame buffer array index in C?","acceptedAnswer":{"@type":"Answer","text":"The array index equals width times y plus x, where width is the frame buffer's pixel width. For example, with a 320-pixel-wide buffer, pixel (60, 30) maps to index 320*30+60. This formula works because the buffer is stored as a single contiguous array in memory, with each row of pixels laid out sequentially after the previous one. daily.dev surfaces practical breakdowns like this for developers building their own graphics code from scratch."}},{"@type":"Question","name":"What is the pitch parameter in SDL_UpdateTexture and how do I calculate it?","acceptedAnswer":{"@type":"Answer","text":"Pitch is the width of a texture's row measured in bytes, not pixels. It is calculated as the texture width multiplied by the size of each pixel's data type, for example width times sizeof(uint32_t) for a 32-bit-per-pixel buffer, so a 320-pixel-wide texture with 4-byte pixels has a pitch of 1280 bytes. developers wiring up SDL rendering pipelines can find worked examples like this through daily.dev."}},{"@type":"Question","name":"Why can't I write directly to video memory to draw pixels on modern operating systems like I could in old MS-DOS programs?","acceptedAnswer":{"@type":"Answer","text":"Modern operating systems such as Windows, macOS, Linux, FreeBSD, and OpenBSD block direct memory-mapped access to display hardware as a protection layer, unlike MS-DOS where writing to a mapped memory address like 0xA0000 let the VGA driver paint pixels directly. Instead, developers must go through OS-specific graphics APIs or a cross-platform abstraction library such as SDL3 to create windows, renderers, and textures. daily.dev helps developers track why direct hardware access works differently across today's operating systems."}}]} ```