aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAkshay <[email protected]>2021-03-18 14:05:04 +0000
committerAkshay <[email protected]>2021-03-18 14:05:04 +0000
commit439091635880851ad57188fb369e7915a401f6fc (patch)
tree6c45df5f6a43d0f83c626c4291e54a49905e191c
parent04fb237e01d7872487ff347190b05f4321099704 (diff)
add entry for day 11
-rw-r--r--docs/index.html4
-rw-r--r--docs/index.xml11
-rw-r--r--docs/posts/SDL2_devlog/index.html13
-rw-r--r--docs/posts/index.html4
-rw-r--r--posts/SDL2_devlog.md12
5 files changed, 32 insertions, 12 deletions
diff --git a/docs/index.html b/docs/index.html
index f592a26..1460d92 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -42,7 +42,7 @@
42 <tr> 42 <tr>
43 <td class=table-post> 43 <td class=table-post>
44 <div class="date"> 44 <div class="date">
45 17/03 — 2021 45 18/03 — 2021
46 </div> 46 </div>
47 <a href="/posts/SDL2_devlog" class="post-link"> 47 <a href="/posts/SDL2_devlog" class="post-link">
48 <span class="post-link">SDL2 Devlog</span> 48 <span class="post-link">SDL2 Devlog</span>
@@ -50,7 +50,7 @@
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.0 53 5.2
54 </span> 54 </span>
55 <span class=stats-unit>min</span> 55 <span class=stats-unit>min</span>
56 </td> 56 </td>
diff --git a/docs/index.xml b/docs/index.xml
index a39131a..25d248e 100644
--- a/docs/index.xml
+++ b/docs/index.xml
@@ -13,7 +13,12 @@
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> 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; 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, if this is your first time on this page.&lt;/p&gt;
17&lt;h3 id="day-11"&gt;Day 11&lt;/h3&gt;
18&lt;p&gt;I intend to supplement the editor with scripting language and an inbuilt REPL for the same. I began by implementing a text box widget from scratch, with history and readline like editing:&lt;/p&gt;
19&lt;figure&gt;
20&lt;video src="https://u.peppe.rs/Mh.mp4" controls=""&gt;&lt;a href="https://u.peppe.rs/Mh.mp4"&gt;Day 11&lt;/a&gt;&lt;/video&gt;&lt;figcaption aria-hidden="true"&gt;Day 11&lt;/figcaption&gt;
21&lt;/figure&gt;
17&lt;h3 id="day-10"&gt;Day 10&lt;/h3&gt; 22&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; 23&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; 24&lt;figure&gt;
@@ -55,7 +60,7 @@
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; 60&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; 61&lt;/figure&gt;
57&lt;h3 id="day-3"&gt;Day 3&lt;/h3&gt; 62&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; 63&lt;p&gt;I implemented the bare minimum required to call the program an “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; 64&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; 65&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; 66&lt;/figure&gt;
@@ -70,7 +75,7 @@
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; 75&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> 76&lt;/figure&gt;</description>
72<link>https://peppe.rs/posts/SDL2_devlog/</link> 77<link>https://peppe.rs/posts/SDL2_devlog/</link>
73<pubDate>Wed, 17 Mar 2021 05:02:00 +0000</pubDate> 78<pubDate>Thu, 18 Mar 2021 14:04:00 +0000</pubDate>
74<guid>https://peppe.rs/posts/SDL2_devlog/</guid> 79<guid>https://peppe.rs/posts/SDL2_devlog/</guid>
75</item> 80</item>
76<item> 81<item>
diff --git a/docs/posts/SDL2_devlog/index.html b/docs/posts/SDL2_devlog/index.html
index e69adec..4b07892 100644
--- a/docs/posts/SDL2_devlog/index.html
+++ b/docs/posts/SDL2_devlog/index.html
@@ -25,15 +25,15 @@
25">View Raw</a> 25">View Raw</a>
26 <div class="separator"></div> 26 <div class="separator"></div>
27 <div class="date"> 27 <div class="date">
28 17/03 — 2021 28 18/03 — 2021
29 <div class="stats"> 29 <div class="stats">
30 <span class="stats-number"> 30 <span class="stats-number">
31 55.53 31 59.53
32 </span> 32 </span>
33 <span class="stats-unit">cm</span> 33 <span class="stats-unit">cm</span>
34 &nbsp 34 &nbsp
35 <span class="stats-number"> 35 <span class="stats-number">
36 5.0 36 5.2
37 </span> 37 </span>
38 <span class="stats-unit">min</span> 38 <span class="stats-unit">min</span>
39 </div> 39 </div>
@@ -43,6 +43,11 @@
43 </h1> 43 </h1>
44 <div class="post-text"> 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, if this is your first time on this page.</p> 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, if this is your first time on this page.</p>
46<h3 id="day-11">Day 11</h3>
47<p>I intend to supplement the editor with scripting language and an inbuilt REPL for the same. I began by implementing a text box widget from scratch, with history and readline like editing:</p>
48<figure>
49<video src="https://u.peppe.rs/Mh.mp4" controls=""><a href="https://u.peppe.rs/Mh.mp4">Day 11</a></video><figcaption aria-hidden="true">Day 11</figcaption>
50</figure>
46<h3 id="day-10">Day 10</h3> 51<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> 52<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> 53<figure>
@@ -84,7 +89,7 @@
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> 89<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> 90</figure>
86<h3 id="day-3">Day 3</h3> 91<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> 92<p>I implemented the bare minimum required to call the program an “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> 93<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> 94<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> 95</figure>
diff --git a/docs/posts/index.html b/docs/posts/index.html
index bd8c4ad..39fbda9 100644
--- a/docs/posts/index.html
+++ b/docs/posts/index.html
@@ -27,7 +27,7 @@
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 30 18/03 — 2021
31 </div> 31 </div>
32 <a href="/posts/SDL2_devlog" class="post-link"> 32 <a href="/posts/SDL2_devlog" class="post-link">
33 <span class="post-link">SDL2 Devlog</span> 33 <span class="post-link">SDL2 Devlog</span>
@@ -35,7 +35,7 @@
35 </td> 35 </td>
36 <td class=table-stats> 36 <td class=table-stats>
37 <span class="stats-number"> 37 <span class="stats-number">
38 5.0 38 5.2
39 </span> 39 </span>
40 <span class=stats-unit>min</span> 40 <span class=stats-unit>min</span>
41 </td> 41 </td>
diff --git a/posts/SDL2_devlog.md b/posts/SDL2_devlog.md
index 08e0084..d62e376 100644
--- a/posts/SDL2_devlog.md
+++ b/posts/SDL2_devlog.md
@@ -5,6 +5,16 @@ on the editor. The days are listed in reverse chronological
5order, begin from the bottom, if this is your first time on 5order, begin from the bottom, if this is your first time on
6this page. 6this page.
7 7
8### Day 11
9
10I intend to supplement the editor with scripting language
11and an inbuilt REPL for the same. I began by implementing a
12text box widget from scratch, with history and readline like
13editing:
14
15![Day 11](https://u.peppe.rs/Mh.mp4)
16
17
8### Day 10 18### Day 10
9 19
10I started reading up on dithering methods and half-toning, I 20I started reading up on dithering methods and half-toning, I
@@ -111,7 +121,7 @@ come in handy down the line.
111### Day 3 121### Day 3
112 122
113I implemented the bare minimum required to call the program 123I implemented the bare minimum required to call the program
114and "editor". The application displays a grid, tracks mouse 124an "editor". The application displays a grid, tracks mouse
115events, paints white to the canvas on left click, and black 125events, paints white to the canvas on left click, and black
116to the canvas on right click. I created a make-shift MVC 126to the canvas on right click. I created a make-shift MVC
117architecture à la Elm in Rust. 127architecture à la Elm in Rust.