aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/index.html16
-rw-r--r--docs/index.xml62
-rw-r--r--docs/posts/SDL2_devlog/index.html131
-rw-r--r--docs/posts/index.html17
-rw-r--r--docs/style.css7
-rw-r--r--posts/SDL2_devlog.md139
6 files changed, 364 insertions, 8 deletions
diff --git a/docs/index.html b/docs/index.html
index 3d05a65..f592a26 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -42,15 +42,15 @@
42 <tr> 42 <tr>
43 <td class=table-post> 43 <td class=table-post>
44 <div class="date"> 44 <div class="date">
45 17/10 — 2020 45 17/03 — 2021
46 </div> 46 </div>
47 <a href="/posts/self-hosting_git" class="post-link"> 47 <a href="/posts/SDL2_devlog" class="post-link">
48 <span class="post-link">Self-hosting Git</span> 48 <span class="post-link">SDL2 Devlog</span>
49 </a> 49 </a>
50 </td> 50 </td>
51 <td class=table-stats> 51 <td class=table-stats>
52 <span class="stats-number"> 52 <span class="stats-number">
53 5.4 53 5.0
54 </span> 54 </span>
55 <span class=stats-unit>min</span> 55 <span class=stats-unit>min</span>
56 </td> 56 </td>
@@ -59,15 +59,15 @@
59 <tr> 59 <tr>
60 <td class=table-post> 60 <td class=table-post>
61 <div class="date"> 61 <div class="date">
62 01/09 — 2020 62 17/10 — 2020
63 </div> 63 </div>
64 <a href="/posts/nixOS" class="post-link"> 64 <a href="/posts/self-hosting_git" class="post-link">
65 <span class="post-link">NixOS</span> 65 <span class="post-link">Self-hosting Git</span>
66 </a> 66 </a>
67 </td> 67 </td>
68 <td class=table-stats> 68 <td class=table-stats>
69 <span class="stats-number"> 69 <span class="stats-number">
70 3.3 70 5.4
71 </span> 71 </span>
72 <span class=stats-unit>min</span> 72 <span class=stats-unit>min</span>
73 </td> 73 </td>
diff --git a/docs/index.xml b/docs/index.xml
index a647bdf..a39131a 100644
--- a/docs/index.xml
+++ b/docs/index.xml
@@ -12,6 +12,68 @@
12 <language>en-us</language> 12 <language>en-us</language>
13 <copyright>Creative Commons BY-NC-SA 4.0</copyright> 13 <copyright>Creative Commons BY-NC-SA 4.0</copyright>
14 <item> 14 <item>
15<title>SDL2 Devlog</title>
16<description>&lt;p&gt;I have been working on an editor for the &lt;a href="https://git.peppe.rs/graphics/obi/about"&gt;One Bit Image&lt;/a&gt; file format in Rust and SDL2. This entry in my blog follows my progress on the editor. The days are listed in reverse chronological order, begin from the bottom this is your first time on this page.&lt;/p&gt;
17&lt;h3 id="day-10"&gt;Day 10&lt;/h3&gt;
18&lt;p&gt;I started reading up on dithering methods and half-toning, I wanted to create a dithering brush that would automatically produce popular dithering patterns. The method that caught my eye (and also the one used most often in pixel art), was Bayer’s ordered dithering. When applied to a black and white image, each pixel, based on its intensity, is mapped to a 4x4 grid of pixels. A completely empty (completely black) 4x4 grid represents zero intensity, and a filled 4x4 grid represents full intensity. Bayer’s ordered dithering can produce 15 steps of intensity between zero and full (by switching on exactly 1 pixel more at each level), thus, being able to draw 17 “shades” from white to black. Creating a dithering brush from here was fairly trivial. Our pixmap is supposed to represent the final dithered image, it must be divided into 4x4 grids. Each grid is colored based on the intensity of the brush passing over it:&lt;/p&gt;
19&lt;figure&gt;
20&lt;img src="https://u.peppe.rs/Mn.png" alt="Day 10" /&gt;&lt;figcaption aria-hidden="true"&gt;Day 10&lt;/figcaption&gt;
21&lt;/figure&gt;
22&lt;h3 id="day-9"&gt;Day 9&lt;/h3&gt;
23&lt;p&gt;I started working towards an interface. I like the idea of a largely read-only HUD, i. e., an interface that simply describes the state of the application. Changes to this state are initiated via keybinds or text commands. I am proud of the symmetry indicator; &lt;code&gt;-&lt;/code&gt; for horizontal symmetry, &lt;code&gt;|&lt;/code&gt; for vertical symmetry, &lt;code&gt;+&lt;/code&gt; for radial symmetry.&lt;/p&gt;
24&lt;figure&gt;
25&lt;img src="https://u.peppe.rs/hx.png" alt="Day 9" /&gt;&lt;figcaption aria-hidden="true"&gt;Day 9&lt;/figcaption&gt;
26&lt;/figure&gt;
27&lt;h3 id="day-8"&gt;Day 8&lt;/h3&gt;
28&lt;p&gt;One of my favourite features of GIMP was symmetric editing. I added some coordinate geometry primitives to my pixmap abstraction, allowing for mirroring and reflecting figures about lines or points. The result was an ergonomic function that applies symmetry to any painting operation, (undo/redo works as expected):&lt;/p&gt;
29&lt;div class="sourceCode" id="cb1"&gt;&lt;pre class="sourceCode rust"&gt;&lt;code class="sourceCode rust"&gt;&lt;span id="cb1-1"&gt;&lt;a href="#cb1-1" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="kw"&gt;let&lt;/span&gt; line &lt;span class="op"&gt;=&lt;/span&gt; &lt;span class="kw"&gt;self&lt;/span&gt;&lt;span class="op"&gt;.&lt;/span&gt;pixmap&lt;span class="op"&gt;.&lt;/span&gt;get_line(start&lt;span class="op"&gt;,&lt;/span&gt; end)&lt;span class="op"&gt;;&lt;/span&gt;&lt;/span&gt;
30&lt;span id="cb1-2"&gt;&lt;a href="#cb1-2" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="kw"&gt;let&lt;/span&gt; sym_line &lt;span class="op"&gt;=&lt;/span&gt; &lt;span class="kw"&gt;self&lt;/span&gt;&lt;span class="op"&gt;.&lt;/span&gt;symmetry&lt;span class="op"&gt;.&lt;/span&gt;apply(&lt;span class="op"&gt;&amp;amp;&lt;/span&gt;line)&lt;span class="op"&gt;;&lt;/span&gt;&lt;/span&gt;
31&lt;span id="cb1-3"&gt;&lt;a href="#cb1-3" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="kw"&gt;for&lt;/span&gt; point on line&lt;span class="op"&gt;.&lt;/span&gt;extend(sym_line) &lt;span class="op"&gt;{&lt;/span&gt;&lt;/span&gt;
32&lt;span id="cb1-4"&gt;&lt;a href="#cb1-4" aria-hidden="true"&gt;&lt;/a&gt; &lt;span class="co"&gt;// draw to window&lt;/span&gt;&lt;/span&gt;
33&lt;span id="cb1-5"&gt;&lt;a href="#cb1-5" aria-hidden="true"&gt;&lt;/a&gt;&lt;span class="op"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
34&lt;figure&gt;
35&lt;video src="https://u.peppe.rs/B1.mp4" controls=""&gt;&lt;a href="https://u.peppe.rs/B1.mp4"&gt;Day 8&lt;/a&gt;&lt;/video&gt;&lt;figcaption aria-hidden="true"&gt;Day 8&lt;/figcaption&gt;
36&lt;/figure&gt;
37&lt;h3 id="day-7"&gt;Day 7&lt;/h3&gt;
38&lt;p&gt;Bresenham saves the day again! This time, I implemented his line drawing algorithm, to, well, draw lines. Each point on the line is then “buffed” based on the active brush size. Today’s changes fit in very well with the undo system and the brush size feature. Creating the right abstractions, one at a time :)&lt;/p&gt;
39&lt;figure&gt;
40&lt;video src="https://u.peppe.rs/xt.mp4" controls=""&gt;&lt;a href="https://u.peppe.rs/xt.mp4"&gt;Day 7&lt;/a&gt;&lt;/video&gt;&lt;figcaption aria-hidden="true"&gt;Day 7&lt;/figcaption&gt;
41&lt;/figure&gt;
42&lt;h3 id="day-6"&gt;Day 6&lt;/h3&gt;
43&lt;p&gt;I extended Bresenham’s algorithm to draw not just circle outlines, but also generate their fills. Unlike Bresenham’s algorithm, this variant generates points for two quadrants at once, these points are mirrored over the dividing axis to generate the other two quadrants.&lt;/p&gt;
44&lt;figure&gt;
45&lt;img src="https://u.peppe.rs/f3.png" alt="Day 6" /&gt;&lt;figcaption aria-hidden="true"&gt;Day 6&lt;/figcaption&gt;
46&lt;/figure&gt;
47&lt;h3 id="day-5"&gt;Day 5&lt;/h3&gt;
48&lt;p&gt;I discovered and implemented Bresenham’s algorithm for efficient circle drawing. The algorithm allowed for sized circular brushes, something I really liked from GIMP. Very convenient that the Wikipedia page for Bresenham’s algorithm also includes a section about optimizing for integer based arithmetic. I managed to abstract out another giant component of the application, the pixmap. Any image is just a grid of pixels (a pixmap), where the pixel’s value is decided by the application (1-bit in my case). I could potentially extend the application to a 24-bit image editor!&lt;/p&gt;
49&lt;figure&gt;
50&lt;video src="https://u.peppe.rs/Kh.mp4" controls=""&gt;&lt;a href="https://u.peppe.rs/Kh.mp4"&gt;Day 5&lt;/a&gt;&lt;/video&gt;&lt;figcaption aria-hidden="true"&gt;Day 5&lt;/figcaption&gt;
51&lt;/figure&gt;
52&lt;h3 id="day-4"&gt;Day 4&lt;/h3&gt;
53&lt;p&gt;I created a generic “undo stack” data structure that allows for infinite “undos” and “redos”. Every modification operation to the grid is persisted to the application state. A couple of keybinds allow the user to revert and re-apply these operations! I expect abstracting this component will come in handy down the line.&lt;/p&gt;
54&lt;figure&gt;
55&lt;video src="https://u.peppe.rs/w5.mp4" controls=""&gt;&lt;a href="https://u.peppe.rs/w5.mp4"&gt;Day 4&lt;/a&gt;&lt;/video&gt;&lt;figcaption aria-hidden="true"&gt;Day 4&lt;/figcaption&gt;
56&lt;/figure&gt;
57&lt;h3 id="day-3"&gt;Day 3&lt;/h3&gt;
58&lt;p&gt;I implemented the bare minimum required to call the program and “editor”. The application displays a grid, tracks mouse events, paints white to the canvas on left click, and black to the canvas on right click. I created a make-shift MVC architecture à la Elm in Rust.&lt;/p&gt;
59&lt;figure&gt;
60&lt;video src="https://u.peppe.rs/GF.mp4" controls=""&gt;&lt;a href="https://u.peppe.rs/GF.mp4"&gt;Day 3&lt;/a&gt;&lt;/video&gt;&lt;figcaption aria-hidden="true"&gt;Day 3&lt;/figcaption&gt;
61&lt;/figure&gt;
62&lt;h3 id="day-2"&gt;Day 2&lt;/h3&gt;
63&lt;p&gt;I started figuring out event handling today. Implemented a couple of keybinds to zoom in/out of the drawing area. Conversions of SDL2 coordinates (measured in signed 32 bit integers) to my internal “drawing area” coordinates (measured in unsigned 32 bit integers) is very annoying. Hopefully the unchecked conversions won’t haunt me later.&lt;/p&gt;
64&lt;figure&gt;
65&lt;video src="https://u.peppe.rs/L4.mp4" controls=""&gt;&lt;a href="https://u.peppe.rs/L4.mp4"&gt;Day 2&lt;/a&gt;&lt;/video&gt;&lt;figcaption aria-hidden="true"&gt;Day 2&lt;/figcaption&gt;
66&lt;/figure&gt;
67&lt;h3 id="day-1"&gt;Day 1&lt;/h3&gt;
68&lt;p&gt;Getting started with Rust and SDL2 is very straightforward. The &lt;code&gt;rust-sdl2&lt;/code&gt; library contains some detailed examples that allowed me to get all the way to drawing a grid from a &lt;code&gt;Vec&amp;lt;bool&amp;gt;&lt;/code&gt;:&lt;/p&gt;
69&lt;figure&gt;
70&lt;img src="https://u.peppe.rs/Ma.png" alt="Day 1" /&gt;&lt;figcaption aria-hidden="true"&gt;Day 1&lt;/figcaption&gt;
71&lt;/figure&gt;</description>
72<link>https://peppe.rs/posts/SDL2_devlog/</link>
73<pubDate>Wed, 17 Mar 2021 05:02:00 +0000</pubDate>
74<guid>https://peppe.rs/posts/SDL2_devlog/</guid>
75</item>
76<item>
15<title>Self-hosting Git</title> 77<title>Self-hosting Git</title>
16<description>&lt;p&gt;Earlier this week, I began migrating my repositories from Github to &lt;a href="https://git.zx2c4.com/cgit/about/"&gt;cgit&lt;/a&gt;. If you care at all about big corporates turning open-source into a T-shirt farming service, this is the way to go.&lt;/p&gt; 78<description>&lt;p&gt;Earlier this week, I began migrating my repositories from Github to &lt;a href="https://git.zx2c4.com/cgit/about/"&gt;cgit&lt;/a&gt;. If you care at all about big corporates turning open-source into a T-shirt farming service, this is the way to go.&lt;/p&gt;
17&lt;h3 id="offerings"&gt;Offerings&lt;/h3&gt; 79&lt;h3 id="offerings"&gt;Offerings&lt;/h3&gt;
diff --git a/docs/posts/SDL2_devlog/index.html b/docs/posts/SDL2_devlog/index.html
new file mode 100644
index 0000000..278deef
--- /dev/null
+++ b/docs/posts/SDL2_devlog/index.html
@@ -0,0 +1,131 @@
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <link rel="stylesheet" href="/style.css">
5 <link rel="stylesheet" href="/syntax.css">
6 <meta charset="UTF-8">
7 <meta name="viewport" content="initial-scale=1">
8 <meta content="#ffffff" name="theme-color">
9 <meta name="HandheldFriendly" content="true">
10 <meta property="og:title" content="SDL2 Devlog">
11 <meta property="og:type" content="website">
12 <meta property="og:description" content="a static site {for, by, about} me ">
13 <meta property="og:url" content="https://peppe.rs">
14 <link rel="icon" type="image/x-icon" href="/favicon.png">
15 <title>SDL2 Devlog · peppe.rs</title>
16 <body>
17 <div class="posts">
18 <div class="post">
19 <a href="/" class="post-end-link">Home</a>
20 <span>/</span>
21 <a href="/posts" class="post-end-link">Posts</a>
22 <span>/</span>
23 <a class="post-end-link">SDL2 Devlog</a>
24 <a class="stats post-end-link" href="https://git.peppe.rs/web/site/plain/posts/SDL2_devlog.md
25">View Raw</a>
26 <div class="separator"></div>
27 <div class="date">
28 17/03 — 2021
29 <div class="stats">
30 <span class="stats-number">
31 55.53
32 </span>
33 <span class="stats-unit">cm</span>
34 &nbsp
35 <span class="stats-number">
36 5.0
37 </span>
38 <span class="stats-unit">min</span>
39 </div>
40 </div>
41 <h1>
42 SDL2 Devlog
43 </h1>
44 <div class="post-text">
45 <p>I have been working on an editor for the <a href="https://git.peppe.rs/graphics/obi/about">One Bit Image</a> file format in Rust and SDL2. This entry in my blog follows my progress on the editor. The days are listed in reverse chronological order, begin from the bottom this is your first time on this page.</p>
46<h3 id="day-10">Day 10</h3>
47<p>I started reading up on dithering methods and half-toning, I wanted to create a dithering brush that would automatically produce popular dithering patterns. The method that caught my eye (and also the one used most often in pixel art), was Bayer’s ordered dithering. When applied to a black and white image, each pixel, based on its intensity, is mapped to a 4x4 grid of pixels. A completely empty (completely black) 4x4 grid represents zero intensity, and a filled 4x4 grid represents full intensity. Bayer’s ordered dithering can produce 15 steps of intensity between zero and full (by switching on exactly 1 pixel more at each level), thus, being able to draw 17 “shades” from white to black. Creating a dithering brush from here was fairly trivial. Our pixmap is supposed to represent the final dithered image, it must be divided into 4x4 grids. Each grid is colored based on the intensity of the brush passing over it:</p>
48<figure>
49<img src="https://u.peppe.rs/Mn.png" alt="Day 10" /><figcaption aria-hidden="true">Day 10</figcaption>
50</figure>
51<h3 id="day-9">Day 9</h3>
52<p>I started working towards an interface. I like the idea of a largely read-only HUD, i. e., an interface that simply describes the state of the application. Changes to this state are initiated via keybinds or text commands. I am proud of the symmetry indicator; <code>-</code> for horizontal symmetry, <code>|</code> for vertical symmetry, <code>+</code> for radial symmetry.</p>
53<figure>
54<img src="https://u.peppe.rs/hx.png" alt="Day 9" /><figcaption aria-hidden="true">Day 9</figcaption>
55</figure>
56<h3 id="day-8">Day 8</h3>
57<p>One of my favourite features of GIMP was symmetric editing. I added some coordinate geometry primitives to my pixmap abstraction, allowing for mirroring and reflecting figures about lines or points. The result was an ergonomic function that applies symmetry to any painting operation, (undo/redo works as expected):</p>
58<div class="sourceCode" id="cb1"><pre class="sourceCode rust"><code class="sourceCode rust"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true"></a><span class="kw">let</span> line <span class="op">=</span> <span class="kw">self</span><span class="op">.</span>pixmap<span class="op">.</span>get_line(start<span class="op">,</span> end)<span class="op">;</span></span>
59<span id="cb1-2"><a href="#cb1-2" aria-hidden="true"></a><span class="kw">let</span> sym_line <span class="op">=</span> <span class="kw">self</span><span class="op">.</span>symmetry<span class="op">.</span>apply(<span class="op">&amp;</span>line)<span class="op">;</span></span>
60<span id="cb1-3"><a href="#cb1-3" aria-hidden="true"></a><span class="kw">for</span> point on line<span class="op">.</span>extend(sym_line) <span class="op">{</span></span>
61<span id="cb1-4"><a href="#cb1-4" aria-hidden="true"></a> <span class="co">// draw to window</span></span>
62<span id="cb1-5"><a href="#cb1-5" aria-hidden="true"></a><span class="op">}</span></span></code></pre></div>
63<figure>
64<video src="https://u.peppe.rs/B1.mp4" controls=""><a href="https://u.peppe.rs/B1.mp4">Day 8</a></video><figcaption aria-hidden="true">Day 8</figcaption>
65</figure>
66<h3 id="day-7">Day 7</h3>
67<p>Bresenham saves the day again! This time, I implemented his line drawing algorithm, to, well, draw lines. Each point on the line is then “buffed” based on the active brush size. Today’s changes fit in very well with the undo system and the brush size feature. Creating the right abstractions, one at a time :)</p>
68<figure>
69<video src="https://u.peppe.rs/xt.mp4" controls=""><a href="https://u.peppe.rs/xt.mp4">Day 7</a></video><figcaption aria-hidden="true">Day 7</figcaption>
70</figure>
71<h3 id="day-6">Day 6</h3>
72<p>I extended Bresenham’s algorithm to draw not just circle outlines, but also generate their fills. Unlike Bresenham’s algorithm, this variant generates points for two quadrants at once, these points are mirrored over the dividing axis to generate the other two quadrants.</p>
73<figure>
74<img src="https://u.peppe.rs/f3.png" alt="Day 6" /><figcaption aria-hidden="true">Day 6</figcaption>
75</figure>
76<h3 id="day-5">Day 5</h3>
77<p>I discovered and implemented Bresenham’s algorithm for efficient circle drawing. The algorithm allowed for sized circular brushes, something I really liked from GIMP. Very convenient that the Wikipedia page for Bresenham’s algorithm also includes a section about optimizing for integer based arithmetic. I managed to abstract out another giant component of the application, the pixmap. Any image is just a grid of pixels (a pixmap), where the pixel’s value is decided by the application (1-bit in my case). I could potentially extend the application to a 24-bit image editor!</p>
78<figure>
79<video src="https://u.peppe.rs/Kh.mp4" controls=""><a href="https://u.peppe.rs/Kh.mp4">Day 5</a></video><figcaption aria-hidden="true">Day 5</figcaption>
80</figure>
81<h3 id="day-4">Day 4</h3>
82<p>I created a generic “undo stack” data structure that allows for infinite “undos” and “redos”. Every modification operation to the grid is persisted to the application state. A couple of keybinds allow the user to revert and re-apply these operations! I expect abstracting this component will come in handy down the line.</p>
83<figure>
84<video src="https://u.peppe.rs/w5.mp4" controls=""><a href="https://u.peppe.rs/w5.mp4">Day 4</a></video><figcaption aria-hidden="true">Day 4</figcaption>
85</figure>
86<h3 id="day-3">Day 3</h3>
87<p>I implemented the bare minimum required to call the program and “editor”. The application displays a grid, tracks mouse events, paints white to the canvas on left click, and black to the canvas on right click. I created a make-shift MVC architecture à la Elm in Rust.</p>
88<figure>
89<video src="https://u.peppe.rs/GF.mp4" controls=""><a href="https://u.peppe.rs/GF.mp4">Day 3</a></video><figcaption aria-hidden="true">Day 3</figcaption>
90</figure>
91<h3 id="day-2">Day 2</h3>
92<p>I started figuring out event handling today. Implemented a couple of keybinds to zoom in/out of the drawing area. Conversions of SDL2 coordinates (measured in signed 32 bit integers) to my internal “drawing area” coordinates (measured in unsigned 32 bit integers) is very annoying. Hopefully the unchecked conversions won’t haunt me later.</p>
93<figure>
94<video src="https://u.peppe.rs/L4.mp4" controls=""><a href="https://u.peppe.rs/L4.mp4">Day 2</a></video><figcaption aria-hidden="true">Day 2</figcaption>
95</figure>
96<h3 id="day-1">Day 1</h3>
97<p>Getting started with Rust and SDL2 is very straightforward. The <code>rust-sdl2</code> library contains some detailed examples that allowed me to get all the way to drawing a grid from a <code>Vec&lt;bool&gt;</code>:</p>
98<figure>
99<img src="https://u.peppe.rs/Ma.png" alt="Day 1" /><figcaption aria-hidden="true">Day 1</figcaption>
100</figure>
101
102 </div>
103
104 <div class="intro">
105 Hi.
106 <div class="hot-links">
107 <a href="https://peppe.rs/index.xml" class="feed-button">Subscribe</a>
108 <a href="https://liberapay.com/nerdypepper/donate" class="donate-button">Donate</a>
109 </div>
110 <p>I'm Akshay, I go by nerd or nerdypepper on the internet.</p>
111 <p>
112 I am a compsci undergrad, Rust programmer and an enthusiastic Vimmer.
113 I write <a href="https://git.peppe.rs">open-source stuff</a> to pass time.
114 I also design fonts:
115 <a href="https://git.peppe.rs/fonts/scientifica">scientifica</a>,
116 <a href="https://git.peppe.rs/fonts/curie">curie</a>.
117 </p>
118 <p>Send me a mail at [email protected] or a message at [email protected].</p>
119 </div>
120
121 <a href="/" class="post-end-link">Home</a>
122 <span>/</span>
123 <a href="/posts" class="post-end-link">Posts</a>
124 <span>/</span>
125 <a class="post-end-link">SDL2 Devlog</a>
126 <a class="stats post-end-link" href="https://raw.githubusercontent.com/nerdypepper/site/master/posts/SDL2_devlog.md
127">View Raw</a>
128 </div>
129 </div>
130 </body>
131</html>
diff --git a/docs/posts/index.html b/docs/posts/index.html
index 61f1d2e..bd8c4ad 100644
--- a/docs/posts/index.html
+++ b/docs/posts/index.html
@@ -27,6 +27,23 @@
27 <tr> 27 <tr>
28 <td class=table-post> 28 <td class=table-post>
29 <div class="date"> 29 <div class="date">
30 17/03 — 2021
31 </div>
32 <a href="/posts/SDL2_devlog" class="post-link">
33 <span class="post-link">SDL2 Devlog</span>
34 </a>
35 </td>
36 <td class=table-stats>
37 <span class="stats-number">
38 5.0
39 </span>
40 <span class=stats-unit>min</span>
41 </td>
42 </tr>
43
44 <tr>
45 <td class=table-post>
46 <div class="date">
30 17/10 — 2020 47 17/10 — 2020
31 </div> 48 </div>
32 <a href="/posts/self-hosting_git" class="post-link"> 49 <a href="/posts/self-hosting_git" class="post-link">
diff --git a/docs/style.css b/docs/style.css
index db4a163..b760db0 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -197,6 +197,13 @@ img {
197 box-shadow: 0 0 1.5rem 0.5rem rgba(0, 0, 0, 0.10); 197 box-shadow: 0 0 1.5rem 0.5rem rgba(0, 0, 0, 0.10);
198} 198}
199 199
200video {
201 max-width: 100%;
202 border: 2px solid var(--dark-white);
203 border-radius: 0.4rem;
204 box-shadow: 0 0 1.5rem 0.5rem rgba(0, 0, 0, 0.10);
205}
206
200hr { 207hr {
201 height: 2px; 208 height: 2px;
202 background-color: var(--dark-white); 209 background-color: var(--dark-white);
diff --git a/posts/SDL2_devlog.md b/posts/SDL2_devlog.md
new file mode 100644
index 0000000..0b05c90
--- /dev/null
+++ b/posts/SDL2_devlog.md
@@ -0,0 +1,139 @@
1I have been working on an editor for the [One Bit
2Image](https://git.peppe.rs/graphics/obi/about) file format in
3Rust and SDL2. This entry in my blog follows my progress on
4the editor. The days are listed in reverse chronological
5order, begin from the bottom this is your first time on this
6page.
7
8### Day 10
9
10I started reading up on dithering methods and half-toning, I
11wanted to create a dithering brush that would automatically
12produce popular dithering patterns. The method that caught
13my eye (and also the one used most often in pixel art), was
14Bayer's ordered dithering. When applied to a black and white
15image, each pixel, based on its intensity, is mapped to a
164x4 grid of pixels. A completely empty (completely black)
174x4 grid represents zero intensity, and a filled 4x4 grid
18represents full intensity. Bayer's ordered dithering can
19produce 15 steps of intensity between zero and full (by
20switching on exactly 1 pixel more at each level), thus,
21being able to draw 17 "shades" from white to black. Creating
22a dithering brush from here was fairly trivial. Our pixmap
23is supposed to represent the final dithered image, it must
24be divided into 4x4 grids. Each grid is colored based on the
25intensity of the brush passing over it:
26
27![Day 10](https://u.peppe.rs/Mn.png)
28
29
30### Day 9
31
32I started working towards an interface. I like the idea of a
33largely read-only HUD, i. e., an interface that simply
34describes the state of the application. Changes to this
35state are initiated via keybinds or text commands. I am
36proud of the symmetry indicator; `-` for horizontal
37symmetry, `|` for vertical symmetry, `+` for radial
38symmetry.
39
40![Day 9](https://u.peppe.rs/hx.png)
41
42### Day 8
43
44One of my favourite features of GIMP was symmetric editing.
45I added some coordinate geometry primitives to my pixmap
46abstraction, allowing for mirroring and reflecting figures
47about lines or points. The result was an ergonomic function
48that applies symmetry to any painting operation, (undo/redo
49works as expected):
50
51```rust
52let line = self.pixmap.get_line(start, end);
53let sym_line = self.symmetry.apply(&line);
54for point on line.extend(sym_line) {
55 // draw to window
56}
57```
58
59![Day 8](https://u.peppe.rs/B1.mp4)
60
61### Day 7
62
63Bresenham saves the day again! This time, I implemented his
64line drawing algorithm, to, well, draw lines. Each point on
65the line is then "buffed" based on the active brush size.
66Today's changes fit in very well with the undo system and
67the brush size feature. Creating the right abstractions, one
68at a time :)
69
70![Day 7](https://u.peppe.rs/xt.mp4)
71
72
73### Day 6
74
75I extended Bresenham's algorithm to draw not just circle
76outlines, but also generate their fills. Unlike Bresenham's
77algorithm, this variant generates points for two quadrants
78at once, these points are mirrored over the dividing axis to
79generate the other two quadrants.
80
81![Day 6](https://u.peppe.rs/f3.png)
82
83### Day 5
84
85I discovered and implemented Bresenham's algorithm for
86efficient circle drawing. The algorithm allowed for sized
87circular brushes, something I really liked from GIMP. Very
88convenient that the Wikipedia page for Bresenham's algorithm
89also includes a section about optimizing for integer based
90arithmetic. I managed to abstract out another giant
91component of the application, the pixmap. Any image is just
92a grid of pixels (a pixmap), where the pixel's value is
93decided by the application (1-bit in my case). I could
94potentially extend the application to a 24-bit image editor!
95
96![Day 5](https://u.peppe.rs/Kh.mp4)
97
98
99### Day 4
100
101I created a generic "undo stack" data structure that allows
102for infinite "undos" and "redos". Every modification
103operation to the grid is persisted to the application state.
104A couple of keybinds allow the user to revert and re-apply
105these operations! I expect abstracting this component will
106come in handy down the line.
107
108![Day 4](https://u.peppe.rs/w5.mp4)
109
110
111### Day 3
112
113I implemented the bare minimum required to call the program
114and "editor". The application displays a grid, tracks mouse
115events, paints white to the canvas on left click, and black
116to the canvas on right click. I created a make-shift MVC
117architecture à la Elm in Rust.
118
119![Day 3](https://u.peppe.rs/GF.mp4)
120
121### Day 2
122
123I started figuring out event handling today. Implemented a
124couple of keybinds to zoom in/out of the drawing area.
125Conversions of SDL2 coordinates (measured in signed 32 bit
126integers) to my internal "drawing area" coordinates
127(measured in unsigned 32 bit integers) is very annoying.
128Hopefully the unchecked conversions won't haunt me later.
129
130![Day 2](https://u.peppe.rs/L4.mp4)
131
132### Day 1
133
134Getting started with Rust and SDL2 is very straightforward.
135The `rust-sdl2` library contains some detailed examples that
136allowed me to get all the way to drawing a grid from a
137`Vec<bool>`:
138
139![Day 1](https://u.peppe.rs/Ma.png)
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-25 16:53:34 +0000