From c7a575d3fef907103a94ff444bb86c280e47148b Mon Sep 17 00:00:00 2001 From: Akshay Date: Fri, 2 Apr 2021 11:11:44 +0530 Subject: add day 17 of devlog --- docs/index.html | 4 +-- docs/index.xml | 61 ++++++++++++++++++++++++------------ docs/posts/SDL2_devlog/index.html | 65 ++++++++++++++++++++++++++------------- docs/posts/index.html | 4 +-- posts/SDL2_devlog.md | 31 +++++++++++++++++++ 5 files changed, 119 insertions(+), 46 deletions(-) diff --git a/docs/index.html b/docs/index.html index e151847..ef45474 100644 --- a/docs/index.html +++ b/docs/index.html @@ -42,7 +42,7 @@
- 01/04 — 2021 + 02/04 — 2021
SDL2 Devlog @@ -50,7 +50,7 @@ - 7.5 + 8.1 min diff --git a/docs/index.xml b/docs/index.xml index e13ccbb..8d876b6 100644 --- a/docs/index.xml +++ b/docs/index.xml @@ -14,29 +14,50 @@ SDL2 Devlog <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> +<h3 id="day-17">Day 17</h3> +<p>I decided to give the text-only statusline a touch up, by adding a active color and dither level preview. Aligning the “widget” to the right of statusline involved a lot more than I thought, so I created a ghetto CSS-like rectangle placement system to position containers inside containers:</p> +<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="co">// roughly something like this</span></span> +<span id="cb1-2"><a href="#cb1-2" aria-hidden="true"></a><span class="kw">let</span> statusline <span class="op">=</span> </span> +<span id="cb1-3"><a href="#cb1-3" aria-hidden="true"></a> <span class="pp">Container::</span>new(<span class="pp">Offset::</span>Left(<span class="dv">0</span>)<span class="op">,</span> <span class="pp">Offset::</span>Bottom(<span class="dv">40</span>))</span> +<span id="cb1-4"><a href="#cb1-4" aria-hidden="true"></a> <span class="op">.</span>width(<span class="pp">Size::</span>Max)</span> +<span id="cb1-5"><a href="#cb1-5" aria-hidden="true"></a> <span class="op">.</span>height(<span class="pp">Size::</span>Absolute(<span class="dv">20</span>))<span class="op">;</span></span> +<span id="cb1-6"><a href="#cb1-6" aria-hidden="true"></a> </span> +<span id="cb1-7"><a href="#cb1-7" aria-hidden="true"></a><span class="kw">let</span> <span class="kw">mut</span> primary <span class="op">=</span> <span class="pp">Container::</span>uninit()</span> +<span id="cb1-8"><a href="#cb1-8" aria-hidden="true"></a> <span class="op">.</span>width(<span class="pp">Size::</span>Absolute(<span class="dv">16</span>))</span> +<span id="cb1-9"><a href="#cb1-9" aria-hidden="true"></a> <span class="op">.</span>height(<span class="pp">Size::</span>Absolute(<span class="dv">16</span>))<span class="op">;</span></span> +<span id="cb1-10"><a href="#cb1-10" aria-hidden="true"></a></span> +<span id="cb1-11"><a href="#cb1-11" aria-hidden="true"></a>container<span class="op">.</span>place(</span> +<span id="cb1-12"><a href="#cb1-12" aria-hidden="true"></a> <span class="op">&amp;</span><span class="kw">mut</span> padding_box<span class="op">,</span></span> +<span id="cb1-13"><a href="#cb1-13" aria-hidden="true"></a> <span class="pp">HorAlign::</span>Right<span class="op">,</span></span> +<span id="cb1-14"><a href="#cb1-14" aria-hidden="true"></a> <span class="pp">VertAlign::</span>Center</span> +<span id="cb1-15"><a href="#cb1-15" aria-hidden="true"></a>)<span class="op">;</span></span></code></pre></div> +<p>The result (brush preview on the bottom right):</p> +<figure> +<video src="https://u.peppe.rs/OtU.mp4" controls=""><a href="https://u.peppe.rs/OtU.mp4">Day 17</a></video><figcaption aria-hidden="true">Day 17</figcaption> +</figure> <h3 id="day-16">Day 16</h3> <p>The embedded lisp is coming along nicely, users can load a custom <code>rc.lisp</code>, which is evaluated on startup. To disable to grid on start, for example:</p> -<div class="sourceCode" id="cb1"><pre class="sourceCode scheme"><code class="sourceCode scheme"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true"></a><span class="co">;;; rc.lisp</span></span> -<span id="cb1-2"><a href="#cb1-2" aria-hidden="true"></a>(toggle-grid)</span></code></pre></div> -<p>Some aliases to switch between brushes:</p> <div class="sourceCode" id="cb2"><pre class="sourceCode scheme"><code class="sourceCode scheme"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true"></a><span class="co">;;; rc.lisp</span></span> -<span id="cb2-2"><a href="#cb2-2" aria-hidden="true"></a>(<span class="ex">define</span><span class="fu"> </span>(brush kind)</span> -<span id="cb2-3"><a href="#cb2-3" aria-hidden="true"></a> (<span class="kw">cond</span></span> -<span id="cb2-4"><a href="#cb2-4" aria-hidden="true"></a> ((<span class="kw">eq?</span> kind &#39;f) (brush-fill))</span> -<span id="cb2-5"><a href="#cb2-5" aria-hidden="true"></a> ((<span class="kw">eq?</span> kind &#39;c) (brush-circle))</span> -<span id="cb2-6"><a href="#cb2-6" aria-hidden="true"></a> ((<span class="kw">eq?</span> kind &#39;l) (brush-line))</span> -<span id="cb2-7"><a href="#cb2-7" aria-hidden="true"></a> ((<span class="kw">eq?</span> kind &#39;l+) (brush-line-extend))</span> -<span id="cb2-8"><a href="#cb2-8" aria-hidden="true"></a> (<span class="kw">else</span> (brush-circle))))</span></code></pre></div> +<span id="cb2-2"><a href="#cb2-2" aria-hidden="true"></a>(toggle-grid)</span></code></pre></div> +<p>Some aliases to switch between brushes:</p> +<div class="sourceCode" id="cb3"><pre class="sourceCode scheme"><code class="sourceCode scheme"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true"></a><span class="co">;;; rc.lisp</span></span> +<span id="cb3-2"><a href="#cb3-2" aria-hidden="true"></a>(<span class="ex">define</span><span class="fu"> </span>(brush kind)</span> +<span id="cb3-3"><a href="#cb3-3" aria-hidden="true"></a> (<span class="kw">cond</span></span> +<span id="cb3-4"><a href="#cb3-4" aria-hidden="true"></a> ((<span class="kw">eq?</span> kind &#39;f) (brush-fill))</span> +<span id="cb3-5"><a href="#cb3-5" aria-hidden="true"></a> ((<span class="kw">eq?</span> kind &#39;c) (brush-circle))</span> +<span id="cb3-6"><a href="#cb3-6" aria-hidden="true"></a> ((<span class="kw">eq?</span> kind &#39;l) (brush-line))</span> +<span id="cb3-7"><a href="#cb3-7" aria-hidden="true"></a> ((<span class="kw">eq?</span> kind &#39;l+) (brush-line-extend))</span> +<span id="cb3-8"><a href="#cb3-8" aria-hidden="true"></a> (<span class="kw">else</span> (brush-circle))))</span></code></pre></div> <p>The following script draws a straight line along a given axis, at a given distance from the canvas boundary:</p> <figure> <video src="https://u.peppe.rs/b3i.mp4" controls=""><a href="https://u.peppe.rs/b3i.mp4">Day 16</a></video><figcaption aria-hidden="true">Day 16</figcaption> </figure> <h3 id="day-15">Day 15</h3> <p>I began writing a standard library for the lisp, in lisp. It includes basic list operations: <code>car</code>, <code>cdr</code>, <code>null?</code>, <code>list</code>, higher order functions: <code>map</code>, <code>filter</code>, <code>fold</code>:</p> -<div class="sourceCode" id="cb3"><pre class="sourceCode lisp"><code class="sourceCode commonlisp"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true"></a>(define (member? item ls)</span> -<span id="cb3-2"><a href="#cb3-2" aria-hidden="true"></a> (fold <span class="dv">#f</span></span> -<span id="cb3-3"><a href="#cb3-3" aria-hidden="true"></a> (<span class="kw">lambda</span> (acc x) (<span class="kw">or</span> acc (eq? item x)))</span> -<span id="cb3-4"><a href="#cb3-4" aria-hidden="true"></a> ls))</span></code></pre></div> +<div class="sourceCode" id="cb4"><pre class="sourceCode lisp"><code class="sourceCode commonlisp"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true"></a>(define (member? item ls)</span> +<span id="cb4-2"><a href="#cb4-2" aria-hidden="true"></a> (fold <span class="dv">#f</span></span> +<span id="cb4-3"><a href="#cb4-3" aria-hidden="true"></a> (<span class="kw">lambda</span> (acc x) (<span class="kw">or</span> acc (eq? item x)))</span> +<span id="cb4-4"><a href="#cb4-4" aria-hidden="true"></a> ls))</span></code></pre></div> <h3 id="day-14">Day 14</h3> <p>I attempted a <a href="https://peppe.rs/art/ramen_noodles.png">small art piece</a> using the editor, while it was largely usable, I felt a certain lack of feedback. The brushes just didn’t relay as much info as I’d have liked, for example, the approximate points of the line or the angle made by the line against the x-axis. Unfortunately, the existing infrastructure around brushes and line drawing didn’t easily allow for this either. I went ahead and reimplemented brushes, and added a new flood fill brush too:</p> <figure> @@ -69,11 +90,11 @@ </figure> <h3 id="day-8">Day 8</h3> <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> -<div class="sourceCode" id="cb4"><pre class="sourceCode rust"><code class="sourceCode rust"><span id="cb4-1"><a href="#cb4-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> -<span id="cb4-2"><a href="#cb4-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> -<span id="cb4-3"><a href="#cb4-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> -<span id="cb4-4"><a href="#cb4-4" aria-hidden="true"></a> <span class="co">// draw to window</span></span> -<span id="cb4-5"><a href="#cb4-5" aria-hidden="true"></a><span class="op">}</span></span></code></pre></div> +<div class="sourceCode" id="cb5"><pre class="sourceCode rust"><code class="sourceCode rust"><span id="cb5-1"><a href="#cb5-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> +<span id="cb5-2"><a href="#cb5-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> +<span id="cb5-3"><a href="#cb5-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> +<span id="cb5-4"><a href="#cb5-4" aria-hidden="true"></a> <span class="co">// draw to window</span></span> +<span id="cb5-5"><a href="#cb5-5" aria-hidden="true"></a><span class="op">}</span></span></code></pre></div> <figure> <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> </figure> @@ -113,7 +134,7 @@ <img src="https://u.peppe.rs/Ma.png" alt="Day 1" /><figcaption aria-hidden="true">Day 1</figcaption> </figure> https://peppe.rs/posts/SDL2_devlog/ -Thu, 01 Apr 2021 04:11:00 +0000 +Fri, 02 Apr 2021 05:01:00 +0000 https://peppe.rs/posts/SDL2_devlog/ diff --git a/docs/posts/SDL2_devlog/index.html b/docs/posts/SDL2_devlog/index.html index 80cb297..6b5fd96 100644 --- a/docs/posts/SDL2_devlog/index.html +++ b/docs/posts/SDL2_devlog/index.html @@ -25,15 +25,15 @@ ">View Raw
- 01/04 — 2021 + 02/04 — 2021
- 93.51 + 105.89 cm   - 7.5 + 8.1 min
@@ -43,29 +43,50 @@

I have been working on an editor for the One Bit Image 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.

+

Day 17

+

I decided to give the text-only statusline a touch up, by adding a active color and dither level preview. Aligning the “widget” to the right of statusline involved a lot more than I thought, so I created a ghetto CSS-like rectangle placement system to position containers inside containers:

+
// roughly something like this
+let statusline = 
+    Container::new(Offset::Left(0), Offset::Bottom(40))
+    .width(Size::Max)
+    .height(Size::Absolute(20));
+    
+let mut primary = Container::uninit()
+    .width(Size::Absolute(16))
+    .height(Size::Absolute(16));
+
+container.place(
+    &mut padding_box,
+    HorAlign::Right,
+    VertAlign::Center
+);
+

The result (brush preview on the bottom right):

+
+ +

Day 16

The embedded lisp is coming along nicely, users can load a custom rc.lisp, which is evaluated on startup. To disable to grid on start, for example:

-
;;; rc.lisp
-(toggle-grid)
-

Some aliases to switch between brushes:

;;; rc.lisp
-(define (brush kind)
-  (cond
-    ((eq? kind 'f) (brush-fill))
-    ((eq? kind 'c) (brush-circle))
-    ((eq? kind 'l) (brush-line))
-    ((eq? kind 'l+) (brush-line-extend))
-    (else (brush-circle))))
+(toggle-grid)
+

Some aliases to switch between brushes:

+
;;; rc.lisp
+(define (brush kind)
+  (cond
+    ((eq? kind 'f) (brush-fill))
+    ((eq? kind 'c) (brush-circle))
+    ((eq? kind 'l) (brush-line))
+    ((eq? kind 'l+) (brush-line-extend))
+    (else (brush-circle))))

The following script draws a straight line along a given axis, at a given distance from the canvas boundary:

Day 15

I began writing a standard library for the lisp, in lisp. It includes basic list operations: car, cdr, null?, list, higher order functions: map, filter, fold:

-
(define (member? item ls)
-  (fold #f
-        (lambda (acc x) (or acc (eq? item x)))
-        ls))
+
(define (member? item ls)
+  (fold #f
+        (lambda (acc x) (or acc (eq? item x)))
+        ls))

Day 14

I attempted a small art piece using the editor, while it was largely usable, I felt a certain lack of feedback. The brushes just didn’t relay as much info as I’d have liked, for example, the approximate points of the line or the angle made by the line against the x-axis. Unfortunately, the existing infrastructure around brushes and line drawing didn’t easily allow for this either. I went ahead and reimplemented brushes, and added a new flood fill brush too:

@@ -98,11 +119,11 @@

Day 8

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):

-
let line = self.pixmap.get_line(start, end);
-let sym_line = self.symmetry.apply(&line);
-for point on line.extend(sym_line) {
-    // draw to window
-}
+
let line = self.pixmap.get_line(start, end);
+let sym_line = self.symmetry.apply(&line);
+for point on line.extend(sym_line) {
+    // draw to window
+}
diff --git a/docs/posts/index.html b/docs/posts/index.html index 697b522..8dcf25c 100644 --- a/docs/posts/index.html +++ b/docs/posts/index.html @@ -27,7 +27,7 @@
- 01/04 — 2021 + 02/04 — 2021
SDL2 Devlog @@ -35,7 +35,7 @@ - 7.5 + 8.1 min diff --git a/posts/SDL2_devlog.md b/posts/SDL2_devlog.md index 991a246..eb11de8 100644 --- a/posts/SDL2_devlog.md +++ b/posts/SDL2_devlog.md @@ -5,6 +5,37 @@ on the editor. The days are listed in reverse chronological order, begin from the bottom, if this is your first time on this page. +### Day 17 + +I decided to give the text-only statusline a touch up, by +adding a active color and dither level preview. Aligning the +"widget" to the right of statusline involved a lot more than +I thought, so I created a ghetto CSS-like rectangle +placement system to position containers inside containers: + +```rust +// roughly something like this +let statusline = + Container::new(Offset::Left(0), Offset::Bottom(40)) + .width(Size::Max) + .height(Size::Absolute(20)); + +let mut primary = Container::uninit() + .width(Size::Absolute(16)) + .height(Size::Absolute(16)); + +container.place( + &mut padding_box, + HorAlign::Right, + VertAlign::Center +); +``` + +The result (brush preview on the bottom right): + +![Day 17](https://u.peppe.rs/OtU.mp4) + + ### Day 16 The embedded lisp is coming along nicely, users can load -- cgit v1.2.3