From a5eb746cf592d9785eff789022e0cb2a09059a50 Mon Sep 17 00:00:00 2001 From: Matthew Winter <33818+wintermi@users.noreply.github.com> Date: Sun, 29 Oct 2023 02:49:31 +1100 Subject: [PATCH 1/4] feat: update undercurl with antialiasing --- build.zig | 1 + src/font/sprite/canvas.zig | 20 ++++++++++++++++++++ src/font/sprite/underline.zig | 35 ++++++++++++++++++----------------- 3 files changed, 39 insertions(+), 17 deletions(-) diff --git a/build.zig b/build.zig index cc914dca2..4b2c52712 100644 --- a/build.zig +++ b/build.zig @@ -714,6 +714,7 @@ fn addDeps( step.addModule("freetype", freetype_dep.module("freetype")); step.addModule("harfbuzz", harfbuzz_dep.module("harfbuzz")); step.addModule("xev", libxev_dep.module("xev")); + step.addModule("zig-js", js_dep.module("zig-js")); step.addModule("pixman", pixman_dep.module("pixman")); step.addModule("utf8proc", utf8proc_dep.module("utf8proc")); diff --git a/src/font/sprite/canvas.zig b/src/font/sprite/canvas.zig index 08e80210b..93551335e 100644 --- a/src/font/sprite/canvas.zig +++ b/src/font/sprite/canvas.zig @@ -140,6 +140,12 @@ const WebCanvasImpl = struct { self.* = undefined; } + pub fn pixel(self: *WebCanvasImpl, x: u32, y: u32, color: Color) void { + const ctx = self.context(color) catch return; + defer ctx.deinit(); + ctx.call(void, "fillRect", .{ x, y, 1, 1 }) catch return; + } + pub fn rect(self: *WebCanvasImpl, v: Rect, color: Color) void { const ctx = self.context(color) catch return; defer ctx.deinit(); @@ -401,6 +407,20 @@ const PixmanImpl = struct { return region; } + /// Draw and fill a single pixel + pub fn pixel(self: *Canvas, x: u32, y: u32, color: Color) void { + const boxes = &[_]pixman.Box32{ + .{ + .x1 = @intCast(x), + .y1 = @intCast(y), + .x2 = @intCast(x + 1), + .y2 = @intCast(y + 1), + }, + }; + + self.image.fillBoxes(.src, color.pixmanColor(), boxes) catch {}; + } + /// Draw and fill a rectangle. This is the main primitive for drawing /// lines as well (which are just generally skinny rectangles...) pub fn rect(self: *Canvas, v: Rect, color: Color) void { diff --git a/src/font/sprite/underline.zig b/src/font/sprite/underline.zig index 5317667e8..0a0d127d9 100644 --- a/src/font/sprite/underline.zig +++ b/src/font/sprite/underline.zig @@ -165,12 +165,13 @@ const Draw = struct { fn drawCurly(self: Draw, canvas: *font.sprite.Canvas) void { // This is the lowest that the curl can go. const y_max = self.height - 1; + const x_factor = 2 * std.math.pi / @as(f64, @floatFromInt(self.width - 1)); // Some fonts put the underline too close to the bottom of the // cell height and this doesn't allow us to make a high enough // wave. This constant is arbitrary, change it for aesthetics. const pos = pos: { - const MIN_HEIGHT = 7; + const MIN_HEIGHT = 5; const clamped_pos = @min(y_max, self.pos); const height = y_max - clamped_pos; break :pos if (height < MIN_HEIGHT) clamped_pos -| MIN_HEIGHT else clamped_pos; @@ -180,26 +181,26 @@ const Draw = struct { // underline position. We also calculate our starting y which is // slightly below our descender since our wave will move about that. const wave_height = @as(f64, @floatFromInt(y_max - pos)); - const half_height = wave_height / 4; - const y = pos + @as(u32, @intFromFloat(half_height)); + //const wave_height = @as(f64, @floatFromInt(y_max - (pos - self.thickness / 2))); + const half_height = @max(1, wave_height / 4); + const y_pos = @as(i32, @intCast(pos)) + @as(i32, @intFromFloat(2 * half_height)); - const x_factor = (2 * std.math.pi) / @as(f64, @floatFromInt(self.width)); + // follow Xiaolin Wu's antialias algorithm to draw the curve var x: u32 = 0; while (x < self.width) : (x += 1) { - const vertical = @as( - u32, - @intFromFloat((-1 * half_height) * @sin(@as(f64, @floatFromInt(x)) * x_factor) + half_height), - ); + const y0 = half_height * @cos(@as(f64, @floatFromInt(x)) * x_factor); + const y1 = y_pos + @as(i32, @intFromFloat(@floor(y0))); + const y3 = y1 - 1 + @as(i32, @intCast(self.thickness)); + const alpha = @as(u8, @intFromFloat(255 * @abs(y0 - @floor(y0)))); - var row: u32 = 0; - while (row < self.thickness) : (row += 1) { - const y1 = @min(row + y + vertical, y_max); - canvas.rect(.{ - .x = @intCast(x), - .y = @intCast(y1), - .width = 1, - .height = 1, - }, .on); + // upper and lower bounds + canvas.pixel(x, @min(@as(u32, @intCast(y1)), y_max), @enumFromInt(255 - alpha)); + canvas.pixel(x, @min(@as(u32, @intCast(y3)), y_max), @enumFromInt(alpha)); + + // fill between upper and lower bound + var y2: u32 = @as(u32, @intCast(y1)) + 1; + while (y2 < y3) : (y2 += 1) { + canvas.pixel(x, @min(y2, y_max), .on); } } } From 6d971de87afe144a3e91fcfbcef7c8d1d377a7d4 Mon Sep 17 00:00:00 2001 From: Matthew Winter <33818+wintermi@users.noreply.github.com> Date: Sun, 29 Oct 2023 03:13:17 +1100 Subject: [PATCH 2/4] feat: add x_facter comment and remove old code --- src/font/sprite/underline.zig | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/font/sprite/underline.zig b/src/font/sprite/underline.zig index 0a0d127d9..0bb91a262 100644 --- a/src/font/sprite/underline.zig +++ b/src/font/sprite/underline.zig @@ -165,6 +165,10 @@ const Draw = struct { fn drawCurly(self: Draw, canvas: *font.sprite.Canvas) void { // This is the lowest that the curl can go. const y_max = self.height - 1; + + // Determines the density of the waves. + // `2 * pi...` = 1 peak per character + // `4 * pi...` = 2 peaks per character const x_factor = 2 * std.math.pi / @as(f64, @floatFromInt(self.width - 1)); // Some fonts put the underline too close to the bottom of the @@ -181,7 +185,6 @@ const Draw = struct { // underline position. We also calculate our starting y which is // slightly below our descender since our wave will move about that. const wave_height = @as(f64, @floatFromInt(y_max - pos)); - //const wave_height = @as(f64, @floatFromInt(y_max - (pos - self.thickness / 2))); const half_height = @max(1, wave_height / 4); const y_pos = @as(i32, @intCast(pos)) + @as(i32, @intFromFloat(2 * half_height)); From a249e5973d367f48168078b5cb8c945fd6055555 Mon Sep 17 00:00:00 2001 From: Mitchell Hashimoto Date: Sat, 28 Oct 2023 10:40:51 -0700 Subject: [PATCH 3/4] font/underline: some additional type annotations --- build.zig | 1 - src/font/sprite/underline.zig | 10 +++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/build.zig b/build.zig index 4b2c52712..cc914dca2 100644 --- a/build.zig +++ b/build.zig @@ -714,7 +714,6 @@ fn addDeps( step.addModule("freetype", freetype_dep.module("freetype")); step.addModule("harfbuzz", harfbuzz_dep.module("harfbuzz")); step.addModule("xev", libxev_dep.module("xev")); - step.addModule("zig-js", js_dep.module("zig-js")); step.addModule("pixman", pixman_dep.module("pixman")); step.addModule("utf8proc", utf8proc_dep.module("utf8proc")); diff --git a/src/font/sprite/underline.zig b/src/font/sprite/underline.zig index 0bb91a262..cadd8ce29 100644 --- a/src/font/sprite/underline.zig +++ b/src/font/sprite/underline.zig @@ -174,18 +174,18 @@ const Draw = struct { // Some fonts put the underline too close to the bottom of the // cell height and this doesn't allow us to make a high enough // wave. This constant is arbitrary, change it for aesthetics. - const pos = pos: { + const pos: u32 = pos: { const MIN_HEIGHT = 5; const clamped_pos = @min(y_max, self.pos); const height = y_max - clamped_pos; break :pos if (height < MIN_HEIGHT) clamped_pos -| MIN_HEIGHT else clamped_pos; }; - // The full heightof the wave can be from the bottom to the + // The full height of the wave can be from the bottom to the // underline position. We also calculate our starting y which is // slightly below our descender since our wave will move about that. - const wave_height = @as(f64, @floatFromInt(y_max - pos)); - const half_height = @max(1, wave_height / 4); + const wave_height: f64 = @floatFromInt(y_max - pos); + const half_height: f64 = @max(1, wave_height / 4); const y_pos = @as(i32, @intCast(pos)) + @as(i32, @intFromFloat(2 * half_height)); // follow Xiaolin Wu's antialias algorithm to draw the curve @@ -194,7 +194,7 @@ const Draw = struct { const y0 = half_height * @cos(@as(f64, @floatFromInt(x)) * x_factor); const y1 = y_pos + @as(i32, @intFromFloat(@floor(y0))); const y3 = y1 - 1 + @as(i32, @intCast(self.thickness)); - const alpha = @as(u8, @intFromFloat(255 * @abs(y0 - @floor(y0)))); + const alpha: u8 = @intFromFloat(255 * @abs(y0 - @floor(y0))); // upper and lower bounds canvas.pixel(x, @min(@as(u32, @intCast(y1)), y_max), @enumFromInt(255 - alpha)); From 58f1653a1603609ac0bec03c00e78ba018668266 Mon Sep 17 00:00:00 2001 From: Matthew Winter <33818+wintermi@users.noreply.github.com> Date: Sun, 29 Oct 2023 14:17:46 +1100 Subject: [PATCH 4/4] feat: cleanup types and reduce casting --- src/font/sprite/underline.zig | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/font/sprite/underline.zig b/src/font/sprite/underline.zig index cadd8ce29..d28b9d677 100644 --- a/src/font/sprite/underline.zig +++ b/src/font/sprite/underline.zig @@ -182,28 +182,27 @@ const Draw = struct { }; // The full height of the wave can be from the bottom to the - // underline position. We also calculate our starting y which is - // slightly below our descender since our wave will move about that. + // underline position. We also calculate our mid y point of the wave const wave_height: f64 = @floatFromInt(y_max - pos); const half_height: f64 = @max(1, wave_height / 4); - const y_pos = @as(i32, @intCast(pos)) + @as(i32, @intFromFloat(2 * half_height)); + const y_mid: u32 = pos + @as(u32, @intFromFloat(2 * half_height)); // follow Xiaolin Wu's antialias algorithm to draw the curve var x: u32 = 0; while (x < self.width) : (x += 1) { - const y0 = half_height * @cos(@as(f64, @floatFromInt(x)) * x_factor); - const y1 = y_pos + @as(i32, @intFromFloat(@floor(y0))); - const y3 = y1 - 1 + @as(i32, @intCast(self.thickness)); - const alpha: u8 = @intFromFloat(255 * @abs(y0 - @floor(y0))); + const y: f64 = @as(f64, @floatFromInt(y_mid)) + (half_height * @cos(@as(f64, @floatFromInt(x)) * x_factor)); + const y_upper: u32 = @intFromFloat(@floor(y)); + const y_lower: u32 = y_upper - 1 + self.thickness; + const alpha: u8 = @intFromFloat(255 * @abs(y - @floor(y))); // upper and lower bounds - canvas.pixel(x, @min(@as(u32, @intCast(y1)), y_max), @enumFromInt(255 - alpha)); - canvas.pixel(x, @min(@as(u32, @intCast(y3)), y_max), @enumFromInt(alpha)); + canvas.pixel(x, @min(y_upper, y_max), @enumFromInt(255 - alpha)); + canvas.pixel(x, @min(y_lower, y_max), @enumFromInt(alpha)); // fill between upper and lower bound - var y2: u32 = @as(u32, @intCast(y1)) + 1; - while (y2 < y3) : (y2 += 1) { - canvas.pixel(x, @min(y2, y_max), .on); + var y_fill: u32 = y_upper + 1; + while (y_fill < y_lower) : (y_fill += 1) { + canvas.pixel(x, @min(y_fill, y_max), .on); } } }